Implemented LDAP Page

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,

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>

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',

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
 };