fix: Multifactor group suggestor ins't working - EXO-67960

exoplatform · Dec 27, 2023 · 2f9637d · 2f9637d
1 parent a31b248
commit 2f9637d
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 52 deletions.
diff --git a/...pp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue b/...pp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue
@@ -65,7 +65,7 @@
                   icon
                   outlined
                   small
-                  @click="$root.$emit('protectedGroupsUsers', protectedGroupsUsers)">
+                  @click="$root.$emit('protectedGroupsUsers', selectedGroups)">
                   <i class="uiIconEdit uiIconLightBlue pb-2"></i>
                 </v-btn>
               </template>
@@ -81,7 +81,7 @@
                 column>
                 <v-row no-gutters>
                   <v-chip
-                    v-for="group in selectedGroups"
+                    v-for="group in selectedGroupsLabels"
                     :key="group"
                     outlined
                     class="my-1">
@@ -221,7 +221,7 @@
   </v-app>
 </template>
 <script>
-import {changeMfaFeatureActivation, getRevocationRequests, updateRevocationRequest, getCurrentMfaSystem, changeMfaSytem, getProtectedGroups,getAvailableMfaSystem} from '../multiFactorServices';
+import {changeMfaFeatureActivation, getRevocationRequests, updateRevocationRequest, getCurrentMfaSystem, changeMfaSytem, getProtectedGroups,getAvailableMfaSystem, getGroups} from '../multiFactorServices';
 export default {
   data: () => ({
     isMultifacorAuthenticationEnabled: true,
@@ -235,6 +235,7 @@ export default {
     currentMfaSystemHelpContent: null,
     panel: [0, 1],
     panel1: [0, 1],
+    selectedGroupsLabels: [],
   }),
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
@@ -246,8 +247,28 @@ export default {
     this.getCurrentMfaSystem();
     this.getAvailableMfaSystems();
     this.getProtectedGroups();
+    this.getSelectedGroupsLabels();
+  },
+  watch: {
+    selectedGroups() {
+      this.getSelectedGroupsLabels();
+    }
   },
   methods: {
+    getSelectedGroupsLabels() {
+      const labels= [];
+      this.selectedGroups.forEach(label => {
+        if (label) {
+          getGroups(label).then(data => {
+            for (const group of data.entities) {
+              if (label === group.groupName || label === group.remoteId){
+                labels.push(group.label);
+              }
+            }
+          });
+          this.selectedGroupsLabels = labels;
+        }});
+    },
     switchAuthenticationStatus() {
       changeMfaFeatureActivation(!this.isMultifacorAuthenticationEnabled);
       this.isMultifacorAuthenticationEnabled = !this.isMultifacorAuthenticationEnabled;

diff --git a/...ain/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue b/...ain/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue
@@ -9,12 +9,18 @@
     </template>
     <template slot="content">
       <v-flex xs12 class="pa-3">
-        <exo-group-suggester
+        <exo-identity-suggester
           v-model="groups"
-          :options="suggesterOptions"
-          :bound-groups="groups"
-          :source-providers="[findGroups]"
-          :placeholder="$t('authentication.multifactor.protected.groups.users.placeholder')" />
+          :ignore-items="ignoreItems"
+          :labels="labels"
+          :group-type="groupType"
+          all-groups-for-admin
+          multiple
+          include-groups
+          chips
+          danse
+          flat
+          required />
       </v-flex>
     </template>
     <template slot="footer">
@@ -39,30 +45,18 @@
 import {getGroups, getProtectedGroups, saveProtectedGroups} from '../multiFactorServices';
 export default {
   data () {
-    const component = this;
     return {
       drawer: false,
       groups: [],
       selectedGroups: [],
+      ignoreItems: [],
       searchLoading: false,
-      suggesterOptions: {
-        type: 'tag',
-        plugins: ['remove_button', 'restore_on_backspace'],
-        create: false,
-        createOnBlur: false,
-        highlight: false,
-        openOnFocus: false,
-        valueField: 'value',
-        labelField: 'text',
-        searchField: ['text'],
-        closeAfterSelect: false,
-        dropdownParent: 'body',
-        hideSelected: false,
-        fillSelectize: true,
-        renderMenuItem(item, escape) {
-          return component.renderMenuItem(item, escape);
-        },
-        sortField: [{field: 'order'}, {field: '$score'}],
+      groupType: 'GROUP',
+      labels: { 
+        label: '',
+        placeholder: this.$t('authentication.multifactor.protected.groups.users.placeholder'),  
+        searchPlaceholder: '',
+        noDataLabel: this.$t('authentication.multifactor.protected.noData')
       }
     };
   },
@@ -77,18 +71,49 @@ export default {
   },
   created() {
     this.$root.$on('protectedGroupsUsers', this.protectedGroupsUsers);
-    this.getProtectedGroups();
+    this.ignoreItems = this.groups.map(group =>({id: `${group.remoteId}`}));
   },
   methods: {
-    protectedGroupsUsers() {
+    protectedGroupsUsers(selectedGroups) {
+      this.groups = [];
+      this.selectedGroups = selectedGroups;
+      this.selectedGroups.forEach(remoteId => {
+        if (remoteId) {
+          getGroups(remoteId).then(data => {
+            for (const group of data.entities) {
+              if (remoteId === group.groupName || remoteId === group.remoteId){
+                this.groups.push({
+                  displayName: group.label,
+                  id: `group:${group.groupName}`,
+                  profile: {
+                    avatarUrl: null,
+                    fullName: group.label,
+                    id: group.groupName
+                  },
+                  providerId: 'group',
+                  remoteId: group.groupName,
+                  spaceId: null,                  
+                });
+              }
+            }
+          });
+        }});
       this.drawer = true;
     },
     cancel() {
       this.drawer = false;
     },
     save() {
-      saveProtectedGroups(this.groups.join(','));
-      this.$root.$emit('protectedGroupsList', this.groups);
+      const groups=[];
+      this.groups.forEach(group => {
+        if (group.remoteId){
+          groups.push(group.remoteId);
+        } else {
+          groups.push(group.profile.id);
+        }
+      });
+      saveProtectedGroups(groups.join(','));
+      this.$root.$emit('protectedGroupsList', groups);
       this.$refs.protectedGroupsUsersDrawer.close();
     },
     getProtectedGroups() {
@@ -97,29 +122,20 @@ export default {
           this.groups.push(group);
         }
       });
-    },
-    findGroups (query, callback) {
-      if (!query.length) {
-        return callback();
-      }
-      getGroups(query).then(data => {
-        const groups = [];
-        for (const group of data.entities) {
-          groups.push({
-            avatarUrl: null,
-            text: group.label,
-            value: group.id,
-            type: 'group'
-          });
-        }
-        callback(groups);
+      const groups= [];
+      this.selectedGroups.forEach(data => {
+        groups.push(getGroups(data).then(data => {
+          for (const group of data.entities) {
+            groups.push({profile: {
+              avatarUrl: null,
+              fullName: group.label,
+              id: group.id,
+              type: 'group'}
+            });
+          }
+        }));
       });
     },
-    renderMenuItem (item, escape) {
-      return `
-        <div class="item" title="${escape(item.value)}" rel="tooltip" data-placement="bottom">${escape(item.value)}</div>
-      `;
-    },
   },
 };
 </script>