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

before this change, the toast notifications defined didn't rely on the centralized reusable component to display alerts. This PR removes the specific alerts added in order to reuse the centralized component.
exoplatform · Dec 8, 2023 · e71b6d9 · e71b6d9
1 parent b619966
commit e71b6d9
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(','));