fix: Update v-alert components - EXO-67598 (#53)

exoplatform · Dec 11, 2023 · 10edcfa · 10edcfa
1 parent 54a3125
commit 10edcfa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 60 deletions.
diff --git a/webapps/src/main/webapp/vue-apps/mfa-access/components/OtpAccess.vue b/webapps/src/main/webapp/vue-apps/mfa-access/components/OtpAccess.vue
@@ -1,11 +1,5 @@
 <template>
   <v-app>
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
     <v-container class="pa-0">
       <div
         align="center"
@@ -77,18 +71,12 @@ export default {
       screen: '',
       secret: '',
       secretSrc: '',
-      alert: false,
-      type: '',
-      message: ''
     };
   },
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
   },
   created() {
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
     window.setTimeout(() => {
       this.checkRegistration();
     }, 1000);
@@ -153,26 +141,14 @@ export default {
         body: 'OTP'
       }).then(resp => resp && resp.ok && resp.json())
         .then(data => {
-          if (data.result && data.result === 'true') {
-            this.$root.$emit('show-alert', {
-              type: 'success',
-              message: this.$t('mfa.otp.access.revocation.success')
-            });
-          } else {
-            this.$root.$emit('show-alert', {
-              type: 'warning',
-              message: this.$t('mfa.otp.access.revocation.warning')
-            });
-          }
-
-        });
+          const message = data?.result  === 'true' && this.$t('mfa.otp.access.revocation.success') || this.$t('mfa.otp.access.revocation.warning');
+          const type = data?.result  === 'true' && 'success' || 'warning';
+          document.dispatchEvent(new CustomEvent('alert-message', {detail: {
+              alertType: type,
+              alertMessage: message,
+            }}));
+        })
     },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
-    }
   },
 };
 </script>
diff --git a/...pp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue b/...pp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue
@@ -1,11 +1,5 @@
 <template>
   <v-app id="multifactorAuthentication">
-    <v-alert
-      v-model="alert"
-      :type="type"
-      dismissible>
-      {{ message }}
-    </v-alert>
     <div v-if="!isManage2faPage" class="d-flex">
       <v-card class="my-8 mr-4 ml-4 border-radius firstBlock" flat>
         <v-list>
@@ -241,17 +235,11 @@ export default {
     currentMfaSystemHelpContent: null,
     panel: [0, 1],
     panel1: [0, 1],
-    alert: false,
-    type: '',
-    message: ''
   }),
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
   },
   created() {
-    this.$root.$on('show-alert', message => {
-      this.displayMessage(message);
-    });
     this.$root.$on('protectedGroupsList', this.protectedGroupsList);
     this.getRevocationRequest();
     this.getMfaFeatureStatus();
@@ -335,19 +323,13 @@ export default {
             message = this.$t('mfa.otp.access.revocation.cancel.error');
           }
         }
-        this.$root.$emit('show-alert', {
-          type: type,
-          message: message
-        });
+        document.dispatchEvent(new CustomEvent('alert-message', {detail: {
+            alertType: type,
+            alertMessage: message,
+          }}));
         this.getRevocationRequest();
       });
     },
-    displayMessage(message) {
-      this.message=message.message;
-      this.type=message.type;
-      this.alert = true;
-      window.setTimeout(() => this.alert = false, 5000);
-    }
   }
 };
 </script>
diff --git a/...ain/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue b/...ain/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue
@@ -16,11 +16,6 @@
           :source-providers="[findGroups]"
           :placeholder="$t('authentication.multifactor.protected.groups.users.placeholder')" />
       </v-flex>
-      <v-card-text v-if="error">
-        <v-alert type="error">
-          {{ error }}
-        </v-alert>
-      </v-card-text>
     </template>
     <template slot="footer">
       <div class="d-flex ">
@@ -50,7 +45,6 @@ export default {
       groups: [],
       selectedGroups: [],
       searchLoading: false,
-      error: null,
       suggesterOptions: {
         type: 'tag',
         plugins: ['remove_button', 'restore_on_backspace'],
@@ -91,7 +85,6 @@ export default {
     },
     cancel() {
       this.drawer = false;
-      this.error = null;
     },
     save() {
       saveProtectedGroups(this.groups.join(','));