From 2d9c87eff412e730c439ac6ac19b7fab6fc6b325 Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Mon, 13 Jan 2025 15:53:58 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=C2=B7=20Implemented=20LDAP-Page=20=C2=B7Ji?=
 =?UTF-8?q?ra=20Story:=20https://jsw.ibm.com/browse/PFEBMC-2393?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Global/InputPasswordToggle.vue |  45 +-
 src/router/routes.js                          |   9 +
 src/store/index.js                            |   2 +
 .../modules/SecurityAndAccess/LdapStore.js    | 138 +++--
 .../SecurityAndAccess/UserManagementStore.js  |  59 +--
 src/views/SecurityAndAccess/Ldap/Ldap.vue     | 498 ++++++++++--------
 .../Ldap/ModalAddRoleGroup.vue                | 197 +++----
 .../Ldap/TableRoleGroups.vue                  | 408 ++++++++------
 8 files changed, 733 insertions(+), 623 deletions(-)

diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a695..4a2c96a180 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -10,41 +10,28 @@
     >
       <icon-view-off v-if="isVisible" />
       <icon-view v-else />
-      <span class="sr-only">{{ togglePasswordLabel }}</span>
     </b-button>
   </div>
 </template>
 
-<script>
+
+<script setup>
 import IconView from '@carbon/icons-vue/es/view/20';
 import IconViewOff from '@carbon/icons-vue/es/view--off/20';
-
-export default {
-  name: 'InputPasswordToggle',
-  components: { IconView, IconViewOff },
-  data() {
-    return {
-      isVisible: false,
-      togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
-    };
-  },
-  methods: {
-    toggleVisibility() {
-      const firstChild = this.$children[0];
-      const inputEl = firstChild ? firstChild.$el : null;
-
-      this.isVisible = !this.isVisible;
-
-      if (inputEl && inputEl.nodeName === 'INPUT') {
-        inputEl.type = this.isVisible ? 'text' : 'password';
-      }
-
-      this.isVisible
-        ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword'))
-        : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword'));
-    },
-  },
-};
+import i18n from '@/i18n';
+import { ref } from 'vue';
+const isVisible = ref(false);
+const togglePasswordLabel = ref(i18n.global.t('global.ariaLabel.showPassword'));
+const emit = defineEmits(['updatePassView']);
+const toggleVisibility = () => {
+  isVisible.value = !isVisible.value;
+  emit('updatePassView',
+    isVisible.value ? 'text' : 'password'
+  )
+  togglePasswordLabel.value = isVisible.value
+    ? i18n.global.t('global.ariaLabel.hidePassword')
+    : i18n.global.t('global.ariaLabel.showPassword')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/router/routes.js b/src/router/routes.js
index 5da6310093..7f33a3ede7 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -32,6 +32,7 @@ import HostConsoleConsole from '@/views/Operations/HostConsole/HostConsoleConsol
 import CapacityOnDemand from '../views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue';
 import DeconfigurationRecords from '../views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue';
 import ServerPowerOperations from '@/views/Operations/ServerPowerOperations';
+import Ldap from '../views/SecurityAndAccess/Ldap/Ldap.vue';
 
 const roles = {
   administrator: 'Administrator',
@@ -278,6 +279,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.pageNotFound'),
         },
       },
+        {
+          path: '/security-and-access/ldap',
+          name: 'ldap',
+          component: Ldap,
+          meta: {
+            title: i18n.global.t('appPageTitle.ldap'),
+          },
+        },
       {
         path: '/notices',
         name: 'notices',
diff --git a/src/store/index.js b/src/store/index.js
index 6b4b196205..95b591c62c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -32,6 +32,7 @@ import PcieTopologyStore from './modules/HardwareStatus/PcieTopologyStore.js';
 import HardwareDeconfigurationStore from './modules/Settings/HardwareDeconfigurationStore';
 import DeconfigurationRecordsStore from './modules/Logs/DeconfigurationRecordsStore.js';
 import NetworkSettingsStore from './modules/Operations/NetworkSettingsStore.js';
+import LdapStore from './modules/SecurityAndAccess/LdapStore.js';
 // ... (export use other stores)
 export {
   EventLogStore,
@@ -67,4 +68,5 @@ export {
   HardwareDeconfigurationStore,
   DeconfigurationRecordsStore,
   NetworkSettingsStore,
+  LdapStore
 };
diff --git a/src/store/modules/SecurityAndAccess/LdapStore.js b/src/store/modules/SecurityAndAccess/LdapStore.js
index a43bf25866..6586175037 100644
--- a/src/store/modules/SecurityAndAccess/LdapStore.js
+++ b/src/store/modules/SecurityAndAccess/LdapStore.js
@@ -1,10 +1,11 @@
 import api from '@/store/api';
 import i18n from '@/i18n';
 import { find } from 'lodash';
+import { defineStore } from 'pinia';
 
-const LdapStore = {
+export const LdapStore = defineStore('ldapStore', {
   namespaced: true,
-  state: {
+  state:()=>( {
     isServiceEnabled: null,
     ldap: {
       serviceEnabled: null,
@@ -24,26 +25,27 @@ const LdapStore = {
       groupsAttribute: null,
       roleGroups: [],
     },
-  },
+  }),
   getters: {
-    isServiceEnabled: (state) => state.isServiceEnabled,
-    ldap: (state) => state.ldap,
-    activeDirectory: (state) => state.activeDirectory,
-    isActiveDirectoryEnabled: (state) => {
+    isServiceEnabledGetter: (state) => state.isServiceEnabled,
+    ldapGetter: (state) => state.ldap,
+    activeDirectoryGetter: (state) => state.activeDirectory,
+    isActiveDirectoryEnabledGetter: (state) => {
       return state.activeDirectory.serviceEnabled;
     },
-    enabledRoleGroups: (state, getters) => {
-      const serviceType = getters.isActiveDirectoryEnabled
+    enabledRoleGroups: (state) => {
+      const serviceType = state.isActiveDirectoryEnabledGetter
         ? 'activeDirectory'
         : 'ldap';
       return state[serviceType].roleGroups;
     },
   },
-  mutations: {
-    setServiceEnabled: (state, serviceEnabled) =>
-      (state.isServiceEnabled = serviceEnabled),
-    setLdapProperties: (
-      state,
+
+  actions: {
+    setServiceEnabled(serviceEnabled){
+      (this.isServiceEnabled = serviceEnabled)
+    },
+    setLdapProperties(
       {
         ServiceEnabled,
         ServiceAddresses = [],
@@ -56,18 +58,18 @@ const LdapStore = {
           } = {},
         } = {},
         RemoteRoleMapping = [],
+
       },
-    ) => {
-      state.ldap.serviceAddress = ServiceAddresses[0];
-      state.ldap.serviceEnabled = ServiceEnabled;
-      state.ldap.baseDn = BaseDistinguishedNames[0];
-      state.ldap.bindDn = Authentication.Username;
-      state.ldap.userAttribute = UsernameAttribute;
-      state.ldap.groupsAttribute = GroupsAttribute;
-      state.ldap.roleGroups = RemoteRoleMapping;
+    ) {
+      this.ldap.serviceAddress = ServiceAddresses[0];
+      this.ldap.serviceEnabled = ServiceEnabled;
+      this.ldap.baseDn = BaseDistinguishedNames[0];
+      this.ldap.bindDn = Authentication.Username;
+      this.ldap.userAttribute = UsernameAttribute;
+      this.ldap.groupsAttribute = GroupsAttribute;
+      this.ldap.roleGroups = RemoteRoleMapping;
     },
-    setActiveDirectoryProperties: (
-      state,
+      setActiveDirectoryProperties( 
       {
         ServiceEnabled,
         ServiceAddresses = [],
@@ -81,33 +83,31 @@ const LdapStore = {
         } = {},
         RemoteRoleMapping = [],
       },
-    ) => {
-      state.activeDirectory.serviceEnabled = ServiceEnabled;
-      state.activeDirectory.serviceAddress = ServiceAddresses[0];
-      state.activeDirectory.bindDn = Authentication.Username;
-      state.activeDirectory.baseDn = BaseDistinguishedNames[0];
-      state.activeDirectory.userAttribute = UsernameAttribute;
-      state.activeDirectory.groupsAttribute = GroupsAttribute;
-      state.activeDirectory.roleGroups = RemoteRoleMapping;
+    ) {
+      this.activeDirectory.serviceEnabled = ServiceEnabled;
+      this.activeDirectory.serviceAddress = ServiceAddresses[0];
+      this.activeDirectory.bindDn = Authentication.Username;
+      this.activeDirectory.baseDn = BaseDistinguishedNames[0];
+      this.activeDirectory.userAttribute = UsernameAttribute;
+      this.activeDirectory.groupsAttribute = GroupsAttribute;
+      this.activeDirectory.roleGroups = RemoteRoleMapping;
     },
-  },
-  actions: {
-    async getAccountSettings({ commit }) {
+    async getAccountSettings() {
       return await api
         .get('/redfish/v1/AccountService')
         .then(({ data: { LDAP = {}, ActiveDirectory = {} } }) => {
           const ldapEnabled = LDAP.ServiceEnabled;
           const activeDirectoryEnabled = ActiveDirectory.ServiceEnabled;
 
-          commit('setServiceEnabled', ldapEnabled || activeDirectoryEnabled);
-          commit('setLdapProperties', LDAP);
-          commit('setActiveDirectoryProperties', ActiveDirectory);
+          this.setServiceEnabled(ldapEnabled || activeDirectoryEnabled);
+          this.setLdapProperties(LDAP)
+          this.setActiveDirectoryProperties(ActiveDirectory)
         })
         .catch((error) => console.log(error));
     },
-    async saveLdapSettings({ state, dispatch }, properties) {
+    async saveLdapSettings(properties) {
       const data = { LDAP: properties };
-      if (state.activeDirectory.serviceEnabled) {
+      if (this.activeDirectory.serviceEnabled) {
         // Disable Active Directory service if enabled
         await api.patch('/redfish/v1/AccountService', {
           ActiveDirectory: { ServiceEnabled: false },
@@ -115,16 +115,17 @@ const LdapStore = {
       }
       return await api
         .patch('/redfish/v1/AccountService', data)
-        .then(() => dispatch('getAccountSettings'))
-        .then(() => i18n.t('pageLdap.toast.successSaveLdapSettings'))
+        .then(() => this.getAccountSettings())
+        .then(() => i18n.global.t('pageLdap.toast.successSaveLdapSettings'))
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageLdap.toast.errorSaveLdapSettings'));
+          throw new Error(i18n.global.t('pageLdap.toast.errorSaveLdapSettings'));
         });
     },
-    async saveActiveDirectorySettings({ state, dispatch }, properties) {
+    async saveActiveDirectorySettings(properties) {
       const data = { ActiveDirectory: properties };
-      if (state.ldap.serviceEnabled) {
+
+      if (this.ldap.serviceEnabled) {
         // Disable LDAP service if enabled
         await api.patch('/redfish/v1/AccountService', {
           LDAP: { ServiceEnabled: false },
@@ -132,17 +133,16 @@ const LdapStore = {
       }
       return await api
         .patch('/redfish/v1/AccountService', data)
-        .then(() => dispatch('getAccountSettings'))
-        .then(() => i18n.t('pageLdap.toast.successSaveActiveDirectorySettings'))
+        .then(() => this.getAccountSettings())
+        .then(() => i18n.global.t('pageLdap.toast.successSaveActiveDirectorySettings'))
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.t('pageLdap.toast.errorSaveActiveDirectorySettings'),
+            i18n.global.t('pageLdap.toast.errorSaveActiveDirectorySettings'),
           );
         });
     },
     async saveAccountSettings(
-      { dispatch },
       {
         serviceEnabled,
         serviceAddress,
@@ -173,18 +173,17 @@ const LdapStore = {
         data.LDAPService.SearchSettings.UsernameAttribute = userIdAttribute;
 
       if (activeDirectoryEnabled) {
-        return await dispatch('saveActiveDirectorySettings', data);
+        return await this.saveActiveDirectorySettings(data);
       } else {
-        return await dispatch('saveLdapSettings', data);
+        return await this.saveLdapSettings(data);
       }
     },
     async addNewRoleGroup(
-      { dispatch, getters },
       { groupName, groupPrivilege },
     ) {
       const data = {};
-      const enabledRoleGroups = getters['enabledRoleGroups'];
-      const isActiveDirectoryEnabled = getters['isActiveDirectoryEnabled'];
+      const enabledRoleGroups = this.enabledRoleGroups
+      const isActiveDirectoryEnabled = this.isActiveDirectoryEnabledGetter;
       const RemoteRoleMapping = [
         ...enabledRoleGroups,
         {
@@ -199,24 +198,23 @@ const LdapStore = {
       }
       return await api
         .patch('/redfish/v1/AccountService', data)
-        .then(() => dispatch('getAccountSettings'))
+        .then(() => this.getAccountSettings())
         .then(() =>
-          i18n.t('pageLdap.toast.successAddRoleGroup', {
+          i18n.global.t('pageLdap.toast.successAddRoleGroup', {
             groupName,
           }),
         )
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageLdap.toast.errorAddRoleGroup'));
+          throw new Error(i18n.global.t('pageLdap.toast.errorAddRoleGroup'));
         });
     },
     async saveRoleGroup(
-      { dispatch, getters },
       { groupNamePreviously, groupName, groupPrivilege },
     ) {
       const data = {};
-      const enabledRoleGroups = getters['enabledRoleGroups'];
-      const isActiveDirectoryEnabled = getters['isActiveDirectoryEnabled'];
+      const enabledRoleGroups = this.enabledRoleGroups
+      const isActiveDirectoryEnabled = this.isActiveDirectoryEnabledGetter
       const RemoteRoleMapping = enabledRoleGroups.map((group) => {
         if (group.RemoteGroup === groupNamePreviously) {
           return {
@@ -234,19 +232,19 @@ const LdapStore = {
       }
       return await api
         .patch('/redfish/v1/AccountService', data)
-        .then(() => dispatch('getAccountSettings'))
+        .then(() => this.getAccountSettings())
         .then(() =>
-          i18n.t('pageLdap.toast.successSaveRoleGroup', { groupName }),
+          i18n.global.t('pageLdap.toast.successSaveRoleGroup', { groupName }),
         )
         .catch((error) => {
           console.log(error);
-          throw new Error(i18n.t('pageLdap.toast.errorSaveRoleGroup'));
+          throw new Error(i18n.global.t('pageLdap.toast.errorSaveRoleGroup'));
         });
     },
-    async deleteRoleGroup({ dispatch, getters }, { roleGroups = [] }) {
+    async deleteRoleGroup({ roleGroups = [] }) {
       const data = {};
-      const enabledRoleGroups = getters['enabledRoleGroups'];
-      const isActiveDirectoryEnabled = getters['isActiveDirectoryEnabled'];
+      const enabledRoleGroups = this.enabledRoleGroups
+      const isActiveDirectoryEnabled = this.isActiveDirectoryEnabledGetter
       const RemoteRoleMapping = enabledRoleGroups.map((group) => {
         if (find(roleGroups, { groupName: group.RemoteGroup })) {
           return null;
@@ -261,18 +259,18 @@ const LdapStore = {
       }
       return await api
         .patch('/redfish/v1/AccountService', data)
-        .then(() => dispatch('getAccountSettings'))
+        .then(() => this.getAccountSettings())
         .then(() =>
-          i18n.tc('pageLdap.toast.successDeleteRoleGroup', roleGroups.length),
+          i18n.global.t('pageLdap.toast.successDeleteRoleGroup', roleGroups.length),
         )
         .catch((error) => {
           console.log(error);
           throw new Error(
-            i18n.tc('pageLdap.toast.errorDeleteRoleGroup', roleGroups.length),
+            i18n.global.t('pageLdap.toast.errorDeleteRoleGroup', roleGroups.length),
           );
         });
     },
   },
-};
+});
 
 export default LdapStore;
diff --git a/src/store/modules/SecurityAndAccess/UserManagementStore.js b/src/store/modules/SecurityAndAccess/UserManagementStore.js
index 544d7aa68a..495c4cdd05 100644
--- a/src/store/modules/SecurityAndAccess/UserManagementStore.js
+++ b/src/store/modules/SecurityAndAccess/UserManagementStore.js
@@ -5,26 +5,25 @@ import { defineStore } from 'pinia';
 
 export const UserManagementStore = defineStore('userManagment', {
   namespaced: true,
-  state: () => {
-    return {
+  state: () => ({
       allUsers: [],
-      // accountRoles: [],
+      accountRoles: [],
       // accountLockoutDuration: null,
       // accountLockoutThreshold: null,
       // accountMinPasswordLength: null,
       // accountMaxPasswordLength: null,
-    };
-  },
+    
+  }),
   getters: {
     allUsersGetter(state) {
       return state.allUsers;
     },
-    // accountRoles(state) {
-    //   return state.accountRoles;
-    // },
-    // filteredAccountRoles(state) {
-    //   return state.accountRoles.filter((role) => role !== 'OemIBMServiceAgent');
-    // },
+    accountRolesGetter(state) {
+      return state.accountRoles;
+    },
+    filteredAccountRoles(state) {
+      return state.accountRoles.filter((role) => role !== 'OemIBMServiceAgent');
+    },
     // accountSettings(state) {
     //   return {
     //     lockoutDuration: state.accountLockoutDuration,
@@ -85,25 +84,25 @@ export const UserManagementStore = defineStore('userManagment', {
     //       throw new Error(message);
     //     });
     // },
-    // getAccountRoles() {
-    //   api
-    //     .get('/redfish/v1/AccountService/Roles')
-    //     .then(async ({ data: { Members = [] } = {} }) => {
-    //       return await api.all(
-    //         Members.map(async (member) => {
-    //           return await api
-    //             .get(member['@odata.id'])
-    //             .then(async ({ data }) => {
-    //               return await data.Description;
-    //             });
-    //         }),
-    //       );
-    //     })
-    //     .then((res) => {
-    //       this.accountRoles = res;
-    //     })
-    //     .catch((error) => console.log(error));
-    // },
+    getAccountRoles() {
+      return api
+        .get('/redfish/v1/AccountService/Roles')
+        .then(async ({ data: { Members = [] } = {} }) => {
+          return await api.all(
+            Members.map(async (member) => {
+              return await api
+                .get(member['@odata.id'])
+                .then(async ({ data }) => {
+                  return await data.Description;
+                });
+            }),
+          );
+        })
+        .then((res) => {
+          this.accountRoles = res;
+        })
+        .catch((error) => console.log(error));
+    },
     // async createUser({ dispatch }, { username, password, privilege, status }) {
     //   const data = {
     //     UserName: username,
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index c092b76dfa..fa47788928 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -14,7 +14,7 @@
               :disabled="loading"
             >
               <b-form-checkbox
-                v-model="form.ldapAuthenticationEnabled"
+                v-model="formLdap.ldapAuthenticationEnabled"
                 data-test-id="ldap-checkbox-ldapAuthenticationEnabled"
                 @change="onChangeldapAuthenticationEnabled"
               >
@@ -28,7 +28,7 @@
             class="m-0"
             :label="$t('pageLdap.ariaLabel.ldapSettings')"
             label-class="sr-only"
-            :disabled="!form.ldapAuthenticationEnabled || loading"
+            :disabled="!formLdap.ldapAuthenticationEnabled || loading"
           >
             <b-row>
               <b-col md="3" lg="4" xl="3">
@@ -41,13 +41,13 @@
                   </b-form-text>
                   <b-form-checkbox
                     id="enable-secure-ldap"
-                    v-model="form.secureLdapEnabled"
+                    v-model="formLdap.secureLdapEnabled"
                     aria-describedby="enable-secure-help-block"
                     data-test-id="ldap-checkbox-secureLdapEnabled"
                     :disabled="
                       !caCertificateExpiration || !ldapCertificateExpiration
                     "
-                    @change="$v.form.secureLdapEnabled.$touch()"
+                    @change="v$.formLdap.secureLdapEnabled.$touch()"
                   >
                     {{ $t('global.action.enable') }}
                   </b-form-checkbox>
@@ -76,7 +76,7 @@
                   <b-col>
                     <b-form-group :label="$t('pageLdap.form.serviceType')">
                       <b-form-radio
-                        v-model="form.activeDirectoryEnabled"
+                        v-model="formLdap.activeDirectoryEnabled"
                         data-test-id="ldap-radio-activeDirectoryEnabled"
                         :value="false"
                         @change="onChangeServiceType"
@@ -84,7 +84,7 @@
                         {{ $t('pageLdap.form.openLDAP') }}
                       </b-form-radio>
                       <b-form-radio
-                        v-model="form.activeDirectoryEnabled"
+                        v-model="formLdap.activeDirectoryEnabled"
                         data-test-id="ldap-radio-activeDirectoryEnabled"
                         :value="true"
                         @change="onChangeServiceType"
@@ -106,10 +106,10 @@
                       <b-input-group :prepend="ldapProtocol">
                         <b-form-input
                           id="server-uri"
-                          v-model="form.serverUri"
+                          v-model="formLdap.serverUri"
                           data-test-id="ldap-input-serverUri"
-                          :state="getValidationState($v.form.serverUri)"
-                          @change="$v.form.serverUri.$touch()"
+                          :state="getValidationState(v$.formLdap.serverUri)"
+                          @change="v$.formLdap.serverUri.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
                           {{ $t('global.form.fieldRequired') }}
@@ -124,10 +124,10 @@
                     >
                       <b-form-input
                         id="bind-dn"
-                        v-model="form.bindDn"
+                        v-model="formLdap.bindDn"
                         data-test-id="ldap-input-bindDn"
-                        :state="getValidationState($v.form.bindDn)"
-                        @change="$v.form.bindDn.$touch()"
+                        :state="getValidationState(v$.formLdap.bindDn)"
+                        @change="v$.formLdap.bindDn.$touch()"
                       />
                       <b-form-invalid-feedback role="alert">
                         {{ $t('global.form.fieldRequired') }}
@@ -139,17 +139,17 @@
                       :label="$t('pageLdap.form.bindPassword')"
                       label-for="bind-password"
                     >
-                      <input-password-toggle
+                      <input-password-toggle @updatePassView="updateInputType"
                         data-test-id="ldap-input-togglePassword"
                       >
                         <b-form-input
                           id="bind-password"
-                          v-model="form.bindPassword"
+                          v-model="formLdap.bindPassword"
                           autocomplete="off"
-                          type="password"
-                          :state="getValidationState($v.form.bindPassword)"
+                          :type="inputType"
+                          :state="getValidationState(v$.formLdap.bindPassword)"
                           class="form-control-with-button"
-                          @change="$v.form.bindPassword.$touch()"
+                          @change="v$.formLdap.bindPassword.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
                           {{ $t('global.form.fieldRequired') }}
@@ -164,10 +164,10 @@
                     >
                       <b-form-input
                         id="base-dn"
-                        v-model="form.baseDn"
+                        v-model="formLdap.baseDn"
                         data-test-id="ldap-input-baseDn"
-                        :state="getValidationState($v.form.baseDn)"
-                        @change="$v.form.baseDn.$touch()"
+                        :state="getValidationState(v$.formLdap.baseDn)"
+                        @change="v$.formLdap.baseDn.$touch()"
                       />
                       <b-form-invalid-feedback role="alert">
                         {{ $t('global.form.fieldRequired') }}
@@ -184,9 +184,9 @@
                       </template>
                       <b-form-input
                         id="user-id-attribute"
-                        v-model="form.userIdAttribute"
+                        v-model="formLdap.userIdAttribute"
                         data-test-id="ldap-input-userIdAttribute"
-                        @change="$v.form.userIdAttribute.$touch()"
+                        @change="v$.formLdap.userIdAttribute.$touch()"
                       />
                     </b-form-group>
                   </b-col>
@@ -200,9 +200,9 @@
                       </template>
                       <b-form-input
                         id="group-id-attribute"
-                        v-model="form.groupIdAttribute"
+                        v-model="formLdap.groupIdAttribute"
                         data-test-id="ldap-input-groupIdAttribute"
-                        @change="$v.form.groupIdAttribute.$touch()"
+                        @change="v$.formLdap.groupIdAttribute.$touch()"
                       />
                     </b-form-group>
                   </b-col>
@@ -213,14 +213,14 @@
         </div>
         <b-row class="mt-4 mb-5">
           <b-col>
-            <b-btn
+            <b-button
               variant="primary"
               type="submit"
               data-test-id="ldap-button-saveSettings"
               :disabled="loading"
             >
               {{ $t('global.action.save') }}
-            </b-btn>
+            </b-button>
           </b-col>
         </b-row>
       </b-form>
@@ -233,216 +233,256 @@
   </b-container>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { find } from 'lodash';
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
+import IconView from '@carbon/icons-vue/es/view/20';
+import IconViewOff from '@carbon/icons-vue/es/view--off/20';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import TableRoleGroups from './TableRoleGroups.vue';
+import { LdapStore } from '../../../store';
+import { CertificatesStore } from '../../../store';
+import { onBeforeMount, reactive } from 'vue';
+import useLoadingBar from '../../../components/Composables/useLoadingBarComposable';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { computed, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import useToast from '@/components/Composables/useToastComposable';
 
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import TableRoleGroups from './TableRoleGroups';
+const { t } = useI18n();
+const isPasswordVisible = ref(false);
+const inputType=ref('password')
+const ldapStore = LdapStore();
+const certificatesStore = CertificatesStore();
+const { getValidationState } = useVuelidateComposable();
+const { hideLoader, startLoader, endLoader, loading } = useLoadingBar();
+const { successToast, errorToast } = useToast();
+function beforeRouteLeave(to, from, next) {
+  hideLoader();
+  next();
+}
 
-export default {
-  name: 'Ldap',
-  components: {
-    InfoTooltip,
-    InputPasswordToggle,
-    PageTitle,
-    PageSection,
-    TableRoleGroups,
-  },
-  mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      form: {
-        ldapAuthenticationEnabled: this.$store.getters['ldap/isServiceEnabled'],
-        secureLdapEnabled: false,
-        activeDirectoryEnabled:
-          this.$store.getters['ldap/isActiveDirectoryEnabled'],
-        serverUri: '',
-        bindDn: '',
-        bindPassword: '',
-        baseDn: '',
-        userIdAttribute: '',
-        groupIdAttribute: '',
-        loading,
-      },
-    };
-  },
-  computed: {
-    ...mapGetters('ldap', [
-      'isServiceEnabled',
-      'isActiveDirectoryEnabled',
-      'ldap',
-      'activeDirectory',
-    ]),
-    sslCertificates() {
-      return this.$store.getters['certificates/allCertificates'];
-    },
-    caCertificateExpiration() {
-      const caCertificate = find(this.sslCertificates, {
-        type: 'TrustStore Certificate',
-      });
-      if (caCertificate === undefined) return null;
-      return caCertificate.validUntil;
-    },
-    ldapCertificateExpiration() {
-      const ldapCertificate = find(this.sslCertificates, {
-        type: 'LDAP Certificate',
-      });
-      if (ldapCertificate === undefined) return null;
-      return ldapCertificate.validUntil;
-    },
-    ldapProtocol() {
-      return this.form.secureLdapEnabled ? 'ldaps://' : 'ldap://';
-    },
-  },
-  watch: {
-    isServiceEnabled: function (value) {
-      this.form.ldapAuthenticationEnabled = value;
-    },
-    isActiveDirectoryEnabled: function (value) {
-      this.form.activeDirectoryEnabled = value;
-      this.setFormValues();
-    },
-    caCertificateExpiration: function () {
-      this.setFormValues();
-    },
-    ldapCertificateExpiration: function () {
-      this.setFormValues();
-    },
-  },
-  validations: {
-    form: {
-      ldapAuthenticationEnabled: {},
-      secureLdapEnabled: {},
-      activeDirectoryEnabled: {
-        required: requiredIf(function () {
-          return this.form.ldapAuthenticationEnabled;
-        }),
-      },
-      serverUri: {
-        required: requiredIf(function () {
-          return this.form.ldapAuthenticationEnabled;
-        }),
-      },
-      bindDn: {
-        required: requiredIf(function () {
-          return this.form.ldapAuthenticationEnabled;
-        }),
-      },
-      bindPassword: {
-        required: requiredIf(function () {
-          return this.form.ldapAuthenticationEnabled;
-        }),
-      },
-      baseDn: {
-        required: requiredIf(function () {
-          return this.form.ldapAuthenticationEnabled;
-        }),
-      },
-      userIdAttribute: {},
-      groupIdAttribute: {},
+const initialFormState = {
+  ldapAuthenticationEnabled: ldapStore.isServiceEnabledGetter,
+  secureLdapEnabled: false,
+  activeDirectoryEnabled: ldapStore.isActiveDirectoryEnabledGetter,
+  serverUri: '',
+  bindDn: '',
+  bindPassword: '',
+  baseDn: '',
+  userIdAttribute: '',
+  groupIdAttribute: '',
+};
+const formLdap = reactive({ ...initialFormState });
+const rules = computed(() => ({
+  formLdap: {
+    ldapAuthenticationEnabled: {},
+    secureLdapEnabled: {},
+    activeDirectoryEnabled: {
+      requiredIf: requiredIf(function () {
+        return formLdap.ldapAuthenticationEnabled;
+      }),
     },
-  },
-  created() {
-    this.startLoader();
-    this.$store
-      .dispatch('ldap/getAccountSettings')
-      .finally(() => this.endLoader());
-    this.$store
-      .dispatch('certificates/getCertificates')
-      .finally(() => this.endLoader());
-    this.setFormValues();
-  },
-  methods: {
-    setFormValues(serviceType) {
-      if (!serviceType) {
-        serviceType = this.isActiveDirectoryEnabled
-          ? this.activeDirectory
-          : this.ldap;
-      }
-      const {
-        serviceAddress = '',
-        bindDn = '',
-        baseDn = '',
-        userAttribute = '',
-        groupsAttribute = '',
-      } = serviceType;
-      const secureLdap =
-        serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
-      const serverUri = serviceAddress
-        ? serviceAddress.replace(/ldaps?:\/\//, '')
-        : '';
-      this.form.secureLdapEnabled = !this.form.ldapAuthenticationEnabled
-        ? false
-        : !this.caCertificateExpiration || !this.ldapCertificateExpiration
-          ? false
-          : secureLdap;
-      this.form.serverUri = serverUri;
-      this.form.bindDn = bindDn;
-      this.form.bindPassword = '';
-      this.form.baseDn = baseDn;
-      this.form.userIdAttribute = userAttribute;
-      this.form.groupIdAttribute = groupsAttribute;
+    serverUri: {
+      requiredIf: requiredIf(function () {
+        return formLdap.ldapAuthenticationEnabled;
+      }),
     },
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      const data = {
-        serviceEnabled: this.form.ldapAuthenticationEnabled,
-        activeDirectoryEnabled: this.form.activeDirectoryEnabled,
-        serviceAddress: `${this.ldapProtocol}${this.form.serverUri}`,
-        bindDn: this.form.bindDn,
-        bindPassword: this.form.bindPassword,
-        baseDn: this.form.baseDn,
-        userIdAttribute: this.form.userIdAttribute,
-        groupIdAttribute: this.form.groupIdAttribute,
-      };
-      this.startLoader();
-      this.$store
-        .dispatch('ldap/saveAccountSettings', data)
-        .then((success) => {
-          this.successToast(success);
-        })
-        .catch(({ message }) => {
-          this.errorToast(message);
-        })
-        .finally(() => {
-          this.form.bindPassword = '';
-          this.$v.form.$reset();
-          this.endLoader();
-        });
+    bindDn: {
+      requiredIf: requiredIf(function () {
+        return formLdap.ldapAuthenticationEnabled;
+      }),
     },
-    onChangeServiceType(isActiveDirectoryEnabled) {
-      this.$v.form.activeDirectoryEnabled.$touch();
-      const serviceType = isActiveDirectoryEnabled
-        ? this.activeDirectory
-        : this.ldap;
-      // Set form values according to user selected
-      // service type
-      this.setFormValues(serviceType);
+    bindPassword: {
+      requiredIf: requiredIf(function () {
+        return formLdap.ldapAuthenticationEnabled;
+      }),
     },
-    onChangeldapAuthenticationEnabled(isServiceEnabled) {
-      this.$v.form.ldapAuthenticationEnabled.$touch();
-      if (!isServiceEnabled) {
-        // Request will fail if sent with empty values.
-        // The frontend only checks for required fields
-        // when the service is enabled. This is to prevent
-        // an error if a user clears any properties then
-        // disables the service.
-        this.setFormValues();
-      }
+    baseDn: {
+      requiredIf: requiredIf(function () {
+        return formLdap.ldapAuthenticationEnabled;
+      }),
     },
+    userIdAttribute: {},
+    groupIdAttribute: {},
   },
-};
+}));
+const v$ = useVuelidate(rules, { formLdap });
+
+const isServiceEnabled = computed(() => {
+  return ldapStore.isServiceEnabledGetter;
+});
+const isActiveDirectoryEnabled = computed(() => {
+  return ldapStore.isActiveDirectoryEnabledGetter;
+});
+const ldap = computed(() => {
+  return ldapStore.ldapGetter;
+});
+const activeDirectory = computed(() => {
+  return ldapStore.activeDirectoryGetter;
+});
+
+const sslCertificates = computed(() => {
+  return certificatesStore.allCertificatesGetter;
+});
+
+
+const caCertificateExpiration = computed(() => {
+  const caCertificate = find(sslCertificates.value, {
+    type: 'TrustStore Certificate',
+  });
+  if (caCertificate === undefined) return null;
+  return caCertificate.validUntil;
+});
+const ldapCertificateExpiration = computed(() => {
+  const ldapCertificate = find(sslCertificates.value, {
+    type: 'LDAP Certificate',
+  });
+  if (ldapCertificate === undefined) return null;
+  return ldapCertificate.validUntil;
+});
+
+const ldapProtocol = computed(() => {
+  return formLdap.secureLdapEnabled ? 'ldaps://' : 'ldap://';
+});
+
+watch(
+  () => isServiceEnabled.value,
+  (value) => {
+    formLdap.ldapAuthenticationEnabled = value;
+  }
+);
+
+watch(
+  () => isActiveDirectoryEnabled.value,
+  (val) => {
+    formLdap.activeDirectoryEnabled = val;
+    setFormValues();
+  }
+);
+
+watch(
+  () => caCertificateExpiration.value,
+  () => {
+    setFormValues();
+  }
+);
+
+watch(
+  () => ldapCertificateExpiration.value,
+  () => {
+    setFormValues();
+  }
+);
+
+
+onBeforeMount(() => {
+  startLoader();
+  ldapStore.getAccountSettings().finally(() => endLoader());
+  certificatesStore.getCertificates().finally(() => endLoader());
+  setFormValues();
+});
+
+function setFormValues(serviceType) {
+  if (!serviceType) {
+    serviceType = isActiveDirectoryEnabled.value
+      ? activeDirectory.value
+      : ldap.value;
+  }
+  const {
+    serviceAddress = '',
+    bindDn = '',
+    baseDn = '',
+    userAttribute = '',
+    groupsAttribute = '',
+  } = serviceType;
+  const secureLdap =
+    serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
+  const serverUri = serviceAddress
+    ? serviceAddress.replace(/ldaps?:\/\//, '')
+    : '';
+  formLdap.secureLdapEnabled = !formLdap.ldapAuthenticationEnabled
+    ? false
+    : !caCertificateExpiration.value || !ldapCertificateExpiration.value
+      ? false
+      : secureLdap;
+  formLdap.serverUri = serverUri;
+  formLdap.bindDn = bindDn;
+  formLdap.bindPassword = '';
+  formLdap.baseDn = baseDn;
+  formLdap.userIdAttribute = userAttribute;
+  formLdap.groupIdAttribute = groupsAttribute;
+}
+
+function handleSubmit() {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  const data = {
+    serviceEnabled: formLdap.ldapAuthenticationEnabled,
+    activeDirectoryEnabled: formLdap.activeDirectoryEnabled,
+    serviceAddress: `${ldapProtocol.value}${formLdap.serverUri}`,
+    bindDn: formLdap.bindDn,
+    bindPassword: formLdap.bindPassword,
+    baseDn: formLdap.baseDn,
+    userIdAttribute: formLdap.userIdAttribute,
+    groupIdAttribute: formLdap.groupIdAttribute,
+  };
+  startLoader();
+  ldapStore
+    .saveAccountSettings(data)
+    .then((success) => {
+      successToast(success);
+    })
+    .catch(({ message }) => {
+      errorToast(message);
+    })
+    .finally(() => {
+      formLdap.bindPassword = '';
+      v$.value.formLdap.$reset();
+      Object.assign(formLdap, initialFormState);
+      endLoader();
+    });
+}
+function onChangeServiceType(event) {
+  v$.value.formLdap.activeDirectoryEnabled.$touch();
+  const isActiveDirectoryEnabled = event.target.value;
+  const serviceType = isActiveDirectoryEnabled
+    ? activeDirectory.value
+    : ldap.value;
+  // Set form values according to user selected
+  // service type
+  setFormValues(serviceType);
+}
+function onChangeldapAuthenticationEnabled(event) {
+  const isServiceEnabled = event.target.value;
+  v$.value.formLdap.ldapAuthenticationEnabled.$touch();
+  if (!isServiceEnabled.value) {
+    // Request will fail if sent with empty values.
+    // The frontend only checks for required fields
+    // when the service is enabled. This is to prevent
+    // an error if a user clears any properties then
+    // disables the service.
+    setFormValues();
+  }
+}
+function updateInputType(passwordType){
+  inputType.value=passwordType
+}
+
+// Toggle label based on visibility state
+const togglePasswordLabel = computed(() =>
+  isPasswordVisible.value
+    ? t('global.ariaLabel.showPassword')
+    : t('global.ariaLabel.showPassword')
+);
+
+// Toggle visibility of the password
+function toggleVisibility() {
+  isPasswordVisible.value = !isPasswordVisible.value;
+}
 </script>
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index 92029da648..fc691aa3f8 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -1,13 +1,15 @@
 <template>
-  <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
-    <template #modal-title>
-      <template v-if="roleGroup">
-        {{ $t('pageLdap.modal.editRoleGroup') }}
-      </template>
-      <template v-else>
-        {{ $t('pageLdap.modal.addNewRoleGroup') }}
-      </template>
-    </template>
+  <b-modal
+    id="modal-role-group"
+    v-model="modal"
+    @ok="onOk"
+    @hidden="resetForm"
+    :title="
+      roleGroup
+        ? $t('pageLdap.modal.editRoleGroup')
+        : $t('pageLdap.modal.addNewRoleGroup')
+    "
+  >
     <b-container>
       <b-row>
         <b-col sm="8">
@@ -19,8 +21,8 @@
               <b-form-input
                 id="role-group-name"
                 v-model="form.groupName"
-                :state="getValidationState($v.form.groupName)"
-                @input="$v.form.groupName.$touch()"
+                :state="getValidationState(vv$.form.groupName)"
+                @input="vv$.form.groupName.$touch()"
               />
               <b-form-invalid-feedback role="alert">
                 {{ $t('global.form.fieldRequired') }}
@@ -35,8 +37,8 @@
                 id="privilege"
                 v-model="form.groupPrivilege"
                 :options="accountRoles"
-                :state="getValidationState($v.form.groupPrivilege)"
-                @input="$v.form.groupPrivilege.$touch()"
+                :state="getValidationState(vv$.form.groupPrivilege)"
+                @input="vv$.form.groupPrivilege.$touch()"
               >
                 <template v-if="!roleGroup" #first>
                   <b-form-select-option :value="null" disabled>
@@ -68,91 +70,96 @@
   </b-modal>
 </template>
 
-<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import { computed, ref, reactive, watch,nextTick } from 'vue';
+import { required, requiredIf } from '@vuelidate/validators';
+import { UserManagementStore } from '../../../store';
+import useVuelidate from '@vuelidate/core';
+import eventBus from '@/eventBus';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import useLoadingBar from '../../../components/Composables/useLoadingBarComposable';
+// import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 
-export default {
-  mixins: [VuelidateMixin],
-  props: {
-    roleGroup: {
-      type: Object,
-      default: null,
-      validator: (prop) => {
-        if (prop === null) return true;
-        return (
-          Object.prototype.hasOwnProperty.call(prop, 'groupName') &&
-          Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege')
-        );
-      },
-    },
-  },
-  data() {
-    return {
-      form: {
-        groupName: null,
-        groupPrivilege: null,
-      },
-    };
-  },
-  computed: {
-    accountRoles() {
-      return this.$store?.getters['userManagement/filteredAccountRoles'].filter(
-        (role) => role !== 'ServiceAgent' && role !== 'Operator',
+const userManagementStore = UserManagementStore();
+const { getValidationState } = useVuelidateComposable();
+const { hideLoader, startLoader, endLoader, loading } = useLoadingBar();
+const modal = ref(false);
+eventBus.on('modal-role-group', () => {
+  modal.value = true;
+});
+const props = defineProps({
+  roleGroup: {
+    type: Object,
+    default: null,
+    validator: (prop) => {
+      if (prop === null) return true;
+      return (
+        Object.prototype.hasOwnProperty.call(prop, 'groupName') &&
+        Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege')
       );
     },
   },
-  watch: {
-    roleGroup: function (value) {
-      if (value === null) return;
-      this.form.groupName = value.groupName;
-      this.form.groupPrivilege = value.groupPrivilege;
-    },
-  },
-  validations() {
-    return {
-      form: {
-        groupName: {
-          required: requiredIf(function () {
-            return !this.roleGroup;
-          }),
-        },
-        groupPrivilege: {
-          required,
-        },
-      },
-    };
-  },
-  methods: {
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok', {
-        addNew: !this.roleGroup,
-        groupNamePreviously: this.roleGroup?.groupName
-          ? this.roleGroup?.groupName
-          : null,
-        groupName: this.form.groupName,
-        groupPrivilege: this.form.groupPrivilege,
-      });
-      this.closeModal();
-    },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.groupName = null;
-      this.form.groupPrivilege = null;
-      this.$v.$reset();
-      this.$emit('hidden');
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
-    },
+});
+
+const form = reactive({
+  groupName: null,
+  groupPrivilege: null,
+});
+const accountRoles = computed(() => {
+  return userManagementStore.filteredAccountRoles.filter(
+    (role) => role !== 'ServiceAgent' && role !== 'Operator'
+  );
+});
+watch(
+  () => props.roleGroup,
+  (value) => {
+    if (value === null) return;
+    form.groupName = value.groupName;
+    form.groupPrivilege = value.groupPrivilege;
+  }
+);
+
+
+
+const ruless = computed(() => ({
+  form: {
+    groupName: modal.value
+      ? { required: requiredIf(() => !props.roleGroup) }
+      : {},
+    groupPrivilege: modal.value ? { required } : {},
   },
-};
+}));
+const vv$ = useVuelidate(ruless, {form});
+const emit = defineEmits(['ok']);
+function handleSubmit() {
+  vv$.value.$touch();
+  if (vv$.value.$invalid) return;
+  emit('ok', {
+    addNew: !props.roleGroup,
+    groupNamePreviously: props.roleGroup?.groupName
+      ? props.roleGroup?.groupName
+      : null,
+    groupName: form.groupName,
+    groupPrivilege: form.groupPrivilege,
+  });
+  closeModal();
+}
+
+function closeModal() {
+  nextTick(() => {
+    modal.value=false
+  });
+}
+
+function resetForm() {
+  form.groupName = null;
+  form.groupPrivilege = null;
+  vv$.value.$reset();
+  eventBus.emit('hidden');
+}
+function onOk(bvModalEvt) {
+  // prevent modal close
+  bvModalEvt.preventDefault();
+  handleSubmit();
+}
 </script>
diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
index 27b29a1b1a..b93f0c20f2 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -9,30 +9,31 @@
     </b-row>
     <b-row>
       <b-col class="text-right" md="9">
-        <b-btn
+        <b-button
           variant="primary"
           :disabled="!isServiceEnabled"
           @click="initRoleGroupModal(null)"
         >
           <icon-add />
           {{ $t('pageLdap.addRoleGroup') }}
-        </b-btn>
+        </b-button>
       </b-col>
     </b-row>
     <b-row>
       <b-col md="9">
         <table-toolbar
           ref="toolbar"
-          :selected-items-count="selectedRows.length"
+          :selected-items-count="selectedRowsList.length"
           :actions="batchActions"
-          @clear-selected="clearSelectedRows($refs.table)"
+          @clear-selected="clearSelectedRows(tableRef)"
           @batch-action="onBatchAction"
         />
         <b-table
-          ref="table"
+          ref="tableRef"
           responsive
           selectable
           show-empty
+          sticky-header="75vh"
           no-select-on-click
           hover
           no-sort-reset
@@ -49,18 +50,19 @@
               v-model="tableHeaderCheckboxModel"
               :indeterminate="tableHeaderCheckboxIndeterminate"
               :disabled="!isServiceEnabled"
-              @change="onChangeHeaderCheckbox($refs.table)"
+              @change="
+                onChangeHeaderCheckbox(tableRef, tableHeaderCheckboxModel)
+              "
+              @update:modelValue="toggleAll"
             >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
             </b-form-checkbox>
           </template>
           <template #cell(checkbox)="row">
             <b-form-checkbox
-              v-model="row.rowSelected"
+              v-model="ldapStore.enabledRoleGroups[row.index].isSelected"
               :disabled="!isServiceEnabled"
-              @change="toggleSelectRow($refs.table, row.index)"
+              @change="toggleSelectRow(tableRef, row.index,ldapStore.enabledRoleGroups[row.index].isSelected,row.item)"
             >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
             </b-form-checkbox>
           </template>
 
@@ -75,8 +77,14 @@
               @click-table-action="onTableRowAction($event, item)"
             >
               <template #icon>
-                <icon-edit v-if="action.value === 'edit'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
+                <icon-edit
+                  v-if="action.value === 'edit'"
+                  :title="$t('pageLdap.modal.editRoleGroup')"
+                />
+                <icon-trashcan
+                  v-if="action.value === 'delete'"
+                  :title="$t('pageLdap.modal.deleteRoleGroup')"
+                />
               </template>
             </table-row-action>
           </template>
@@ -89,182 +97,242 @@
       @hidden="activeRoleGroup = null"
     />
   </div>
+  <BModal
+    ref="myModalRef"
+    v-model="deleteModal"
+    :title="$t('pageLdap.modal.deleteRoleGroup')"
+    :cancel-title="$t('global.action.cancel')"
+    :ok-title="$t('global.action.delete')"
+    @cancel="onModalCancel"
+    @ok="onModalDelete"
+    @hide="onModalHide"
+  >
+    {{
+      $t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
+        groupName: deleteModalContent,
+      })
+    }}
+  </BModal>
+  <BModal
+    v-model="batchModal"
+    :title="$t('pageLdap.modal.deleteRoleGroup', { count: count }, count)"
+    :ok-title="$t('global.action.delete')"
+    :cancel-title="$t('global.action.cancel')"
+    @ok="onModalDeleteBatch"
+  >
+    <p>
+      {{
+        $t(
+          'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
+          { count: count },
+          count
+        )
+      }}
+    </p>
+  </BModal>
 </template>
 
-<script>
+<script setup>
 import IconEdit from '@carbon/icons-vue/es/edit/20';
 import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
 import IconAdd from '@carbon/icons-vue/es/add--alt/20';
-import { mapGetters } from 'vuex';
 
-import Alert from '@/components/Global/Alert';
-import TableToolbar from '@/components/Global/TableToolbar';
-import TableRowAction from '@/components/Global/TableRowAction';
-import BVTableSelectableMixin, {
-  selectedRows,
+import Alert from '@/components/Global/Alert.vue';
+import TableToolbar from '@/components/Global/TableToolbar.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+import ModalAddRoleGroup from './ModalAddRoleGroup.vue';
+import { onBeforeMount, onMounted, reactive } from 'vue';
+import useTableSelectableComposable from '../../../components/Composables/useTableSelectableComposable';
+import { LdapStore } from '../../../store';
+import { computed, ref } from 'vue';
+import i18n from '@/i18n';
+import { UserManagementStore } from '../../../store';
+import eventBus from '@/eventBus';
+import useLoadingBar from '../../../components/Composables/useLoadingBarComposable';
+import useToast from '@/components/Composables/useToastComposable';
+
+const { startLoader, endLoader } = useLoadingBar();
+const { successToast, errorToast } = useToast();
+const modal = ref(false);
+const deleteModal = ref(false);
+const deleteModalContent = ref('');
+const batchModal = ref(false);
+const ldapStore = LdapStore();
+const tableRef = ref(null);
+const isAllSelected = ref(false);
+const userManagementStore = UserManagementStore();
+const selectedRowsNo = ref(0);
+const count = ref(0);
+const {
+  clearSelectedRows,
+  selectedRowsList,
   tableHeaderCheckboxModel,
   tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import ModalAddRoleGroup from './ModalAddRoleGroup';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+  onChangeHeaderCheckbox,
+  toggleSelectRow,
+  onRowSelected,
+} = useTableSelectableComposable();
+const isBusy = ref(true);
+const activeRoleGroup = ref(null);
 
-export default {
-  components: {
-    Alert,
-    IconAdd,
-    IconEdit,
-    IconTrashcan,
-    ModalAddRoleGroup,
-    TableRowAction,
-    TableToolbar,
+const fields = reactive([
+  {
+    key: 'checkbox',
+    sortable: false,
+  },
+  {
+    key: 'groupName',
+    sortable: true,
+    label: i18n.global.t('pageLdap.tableRoleGroups.groupName'),
+  },
+  {
+    key: 'groupPrivilege',
+    sortable: true,
+    label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'),
   },
-  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
-  data() {
+  {
+    key: 'actions',
+    sortable: false,
+    label: '',
+    tdClass: 'text-right',
+  },
+]);
+const batchActions = reactive([
+  {
+    value: 'delete',
+    label: i18n.global.t('global.action.delete'),
+  },
+]);
+
+const isServiceEnabled = computed(() => {
+  return ldapStore.isServiceEnabledGetter;
+});
+const enabledRoleGroups = computed(() => {
+  return ldapStore.enabledRoleGroups;
+});
+
+const tableItems = computed(() => {
+  return enabledRoleGroups.value.map(({ LocalRole, RemoteGroup }) => {
     return {
-      isBusy: true,
-      activeRoleGroup: null,
-      fields: [
-        {
-          key: 'checkbox',
-          sortable: false,
-        },
+      groupName: RemoteGroup,
+      groupPrivilege: LocalRole,
+      actions: [
         {
-          key: 'groupName',
-          sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupName'),
+          value: 'edit',
+          enabled: isServiceEnabled.value,
         },
-        {
-          key: 'groupPrivilege',
-          sortable: true,
-          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          label: '',
-          tdClass: 'text-right',
-        },
-      ],
-      batchActions: [
         {
           value: 'delete',
-          label: this.$t('global.action.delete'),
+          enabled: isServiceEnabled.value,
         },
       ],
-      selectedRows: selectedRows,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
     };
-  },
-  computed: {
-    ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']),
-    tableItems() {
-      return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => {
-        return {
-          groupName: RemoteGroup,
-          groupPrivilege: LocalRole,
-          actions: [
-            {
-              value: 'edit',
-              title: this.$t('global.action.edit'),
-              enabled: this.isServiceEnabled,
-            },
-            {
-              value: 'delete',
-              title: this.$t('global.action.delete'),
-              enabled: this.isServiceEnabled,
-            },
-          ],
-        };
-      });
-    },
-  },
-  created() {
-    this.$store.dispatch('userManagement/getAccountRoles').finally(() => {
-      this.isBusy = false;
+  });
+});
+const deleteRoleGroupBatchConfirmMessage = computed(() =>
+  i18n.global.t(
+    'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
+    selectedRowsList.value.length
+  )
+);
+
+onBeforeMount(() => {
+  eventBus.on('clear-selected', () => {
+    ldapStore?.enabledRoleGroups?.map((enabledRoleGroup) => {
+      enabledRoleGroup.isSelected = false;
     });
-  },
-  methods: {
-    onBatchAction() {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$tc(
-            'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
-            this.selectedRows.length,
-          ),
-          {
-            title: this.$t('pageLdap.modal.deleteRoleGroup'),
-            okTitle: this.$t('global.action.delete'),
-            cancelTitle: this.$t('global.action.cancel'),
-          },
-        )
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.startLoader();
-            this.$store
-              .dispatch('ldap/deleteRoleGroup', {
-                roleGroups: this.selectedRows,
-              })
-              .then((success) => this.successToast(success))
-              .catch(({ message }) => this.errorToast(message))
-              .finally(() => this.endLoader());
-          }
-        });
-    },
-    onTableRowAction(action, row) {
-      switch (action) {
-        case 'edit':
-          this.initRoleGroupModal(row);
-          break;
-        case 'delete':
-          this.$bvModal
-            .msgBoxConfirm(
-              this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
-                groupName: row.groupName,
-              }),
-              {
-                title: this.$t('pageLdap.modal.deleteRoleGroup'),
-                okTitle: this.$t('global.action.delete'),
-                cancelTitle: this.$t('global.action.cancel'),
-              },
-            )
-            .then((deleteConfirmed) => {
-              if (deleteConfirmed) {
-                this.startLoader();
-                this.$store
-                  .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
-                  .then((success) => this.successToast(success))
-                  .catch(({ message }) => this.errorToast(message))
-                  .finally(() => this.endLoader());
-              }
-            });
-          break;
-      }
-    },
-    initRoleGroupModal(roleGroup) {
-      this.activeRoleGroup = roleGroup;
-      this.$bvModal.show('modal-role-group');
-    },
-    saveRoleGroup({ addNew, groupNamePreviously, groupName, groupPrivilege }) {
-      this.activeRoleGroup = null;
-      const data = { groupName, groupPrivilege };
-      const saveData = { groupNamePreviously, groupName, groupPrivilege };
-      this.startLoader();
-      if (addNew) {
-        this.$store
-          .dispatch('ldap/addNewRoleGroup', data)
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
-      } else {
-        this.$store
-          .dispatch('ldap/saveRoleGroup', saveData)
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
-      }
-    },
-  },
+    clearSelectedRows(tableRef);
+  });
+});
+
+onMounted(() => {
+  userManagementStore.getAccountRoles().finally(() => {
+    isBusy.value = false;
+  });
+});
+
+function onBatchAction() {
+  selectedRowsNo.value = selectedRowsList.value.map((row) => row.uri).length;
+  count.value = selectedRowsNo.value;
+  batchModal.value = true;
+}
+function toggleAll(checked) {
+  ldapStore?.enabledRoleGroups?.map((enabledRoleGroup) => {
+    enabledRoleGroup.isSelected = checked;
+  });
+  isAllSelected.value = checked;
+}
+function onModalDeleteBatch(deleteConfirmed) {
+  if (deleteConfirmed) {
+    startLoader();
+
+    ldapStore
+      .deleteRoleGroup({
+        roleGroups: selectedRowsList.value,
+      })
+      .then((success) => successToast(success))
+      .catch(({ message }) => errorToast(message))
+      .finally(() => endLoader());
+  }
+}
+function onTableRowAction(action, row) {
+  switch (action) {
+    case 'edit':
+      initRoleGroupModal(row);
+      break;
+    case 'delete':
+      initModalDeleteRole(row);
+      break;
+  }
+}
+function initModalDeleteRole(roleGroup) {
+  deleteModal.value = true;
+  activeRoleGroup.value = roleGroup;
+  deleteModalContent.value = roleGroup.groupName;
+}
+const onModalDelete = (deleteConfirmed) => {
+  if (deleteConfirmed) {
+    startLoader();
+    ldapStore
+      .deleteRoleGroup({ roleGroups: [activeRoleGroup.value] })
+      .then((success) => successToast(success))
+      .catch(({ message }) => errorToast(message))
+      .finally(() => endLoader());
+  }
 };
+function initRoleGroupModal(roleGroup) {
+  activeRoleGroup.value = roleGroup;
+  modal.value = true;
+  eventBus.emit('modal-role-group');
+}
+function saveRoleGroup({
+  addNew,
+  groupNamePreviously,
+  groupName,
+  groupPrivilege,
+}) {
+  activeRoleGroup.value = null;
+  const data = { groupName, groupPrivilege };
+  const saveData = { groupNamePreviously, groupName, groupPrivilege };
+  startLoader();
+  if (addNew) {
+    ldapStore
+      .addNewRoleGroup(data)
+      .then((success) => successToast(success))
+      .catch(({ message }) => errorToast(message))
+      .finally(() => endLoader());
+  } else {
+    ldapStore
+      .saveRoleGroup(saveData)
+      .then((success) => successToast(success))
+      .catch(({ message }) => errorToast(message))
+      .finally(() => endLoader());
+  }
+}
+
 </script>
+<style scoped>
+.text-right {
+  text-align: right !important;
+}
+</style>

From 72a282c057cb5ba9959ca5c377e7667a7a1839e9 Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Thu, 6 Feb 2025 08:50:54 +0530
Subject: [PATCH 2/2] Implemented LDAP Page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

·Implemented LDAP Page
·Jira Story: https://jsw.ibm.com/browse/PFEBMC-2393
---
 .../useTableSelectableComposable.js           | 21 +++++++++++++++++++
 src/views/SecurityAndAccess/Ldap/Ldap.vue     | 17 ++-------------
 .../Ldap/ModalAddRoleGroup.vue                |  2 +-
 .../Ldap/TableRoleGroups.vue                  |  4 ++--
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/Composables/useTableSelectableComposable.js b/src/components/Composables/useTableSelectableComposable.js
index 287707b355..ee81b31ef7 100644
--- a/src/components/Composables/useTableSelectableComposable.js
+++ b/src/components/Composables/useTableSelectableComposable.js
@@ -54,6 +54,26 @@ const useTableSelectableComposable = () => {
     }
   };
 
+  const toggleSelectRowByGroupName = (tableRef, rowIndex, rowSelected, row) => {
+    if (tableRef && rowIndex !== undefined) {
+      if (!rowSelected) {
+        // Find the index of the object to remove
+        const indexToRemove = selectedRowsList.value.findIndex(
+          (item) => item.groupName === row.groupName,
+        );
+
+        // Check if the object exists in the array
+        if (indexToRemove !== -1) {
+          tableRef.unselectRow(rowIndex);
+          // Remove the object from the array
+          selectedRowsList.value.splice(indexToRemove, 1);
+        }
+      } else {
+        tableRef.selectRow(rowIndex);
+      }
+    }
+  };
+
   const onRowSelected = (selectedRows, totalRowsCount) => {
     if (selectedRows && totalRowsCount !== undefined) {
       if (selectedRowsList.value.indexOf(selectedRows) === -1) {
@@ -86,6 +106,7 @@ const useTableSelectableComposable = () => {
     clearSelectedRows,
     toggleSelectRow,
     toggleSelectRowById,
+    toggleSelectRowByGroupName,
     onRowSelected,
     onChangeHeaderCheckbox,
     selectedRowsList,
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index fa47788928..04625a1c26 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -55,12 +55,12 @@
                 <dl>
                   <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
                   <dd v-if="caCertificateExpiration">
-                    {{ caCertificateExpiration | formatDate }}
+                    {{ $filters.formatDate(caCertificateExpiration) }}
                   </dd>
                   <dd v-else>--</dd>
                   <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
                   <dd v-if="ldapCertificateExpiration">
-                    {{ ldapCertificateExpiration | formatDate }}
+                    {{ $filters.formatDate(ldapCertificateExpiration) }}
                   </dd>
                   <dd v-else>--</dd>
                 </dl>
@@ -444,7 +444,6 @@ function handleSubmit() {
     .finally(() => {
       formLdap.bindPassword = '';
       v$.value.formLdap.$reset();
-      Object.assign(formLdap, initialFormState);
       endLoader();
     });
 }
@@ -473,16 +472,4 @@ function onChangeldapAuthenticationEnabled(event) {
 function updateInputType(passwordType){
   inputType.value=passwordType
 }
-
-// Toggle label based on visibility state
-const togglePasswordLabel = computed(() =>
-  isPasswordVisible.value
-    ? t('global.ariaLabel.showPassword')
-    : t('global.ariaLabel.showPassword')
-);
-
-// Toggle visibility of the password
-function toggleVisibility() {
-  isPasswordVisible.value = !isPasswordVisible.value;
-}
 </script>
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index fc691aa3f8..91c1b2dea3 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -54,7 +54,7 @@
         </b-col>
       </b-row>
     </b-container>
-    <template #modal-footer="{ cancel }">
+    <template #footer="{ cancel }">
       <b-button variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
       </b-button>
diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
index b93f0c20f2..b4cc0763c7 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -61,7 +61,7 @@
             <b-form-checkbox
               v-model="ldapStore.enabledRoleGroups[row.index].isSelected"
               :disabled="!isServiceEnabled"
-              @change="toggleSelectRow(tableRef, row.index,ldapStore.enabledRoleGroups[row.index].isSelected,row.item)"
+              @change="toggleSelectRowByGroupName(tableRef, row.index,ldapStore.enabledRoleGroups[row.index].isSelected,row.item)"
             >
             </b-form-checkbox>
           </template>
@@ -169,7 +169,7 @@ const {
   tableHeaderCheckboxModel,
   tableHeaderCheckboxIndeterminate,
   onChangeHeaderCheckbox,
-  toggleSelectRow,
+  toggleSelectRowByGroupName,
   onRowSelected,
 } = useTableSelectableComposable();
 const isBusy = ref(true);