From e71b6d91bd30de918783c092cb7afe3708d3489c Mon Sep 17 00:00:00 2001
From: GouadriaHanen <49310007+GouadriaHanen@users.noreply.github.com>
Date: Fri, 1 Dec 2023 09:46:08 +0100
Subject: [PATCH] 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.
---
 .../mfa-access/components/OtpAccess.vue       | 38 ++++---------------
 .../MultifactorAuthenticationComponent.vue    | 26 ++-----------
 .../components/ProtectedGroupsUsersDrawer.vue |  7 ----
 3 files changed, 11 insertions(+), 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
index 034c22e9..4a8ac8bd 100644
--- 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/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue b/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue
index 007463f9..7d220393 100644
--- a/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue
+++ b/webapps/src/main/webapp/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/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue b/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue
index 2e5e74bb..87e401fe 100644
--- a/webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue
+++ b/webapps/src/main/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(','));