fix(ui): update recovery email input on enabling the mfa

This commit adds a new function that will update the recovery email on the SettingsProfile when it's added by the enabling the mfa process.
shellhub-io · Jun 4, 2024 · 468c433 · 468c433
1 parent 58f2d24
commit 468c433
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/ui/src/components/AuthMFA/MfaSettings.vue b/ui/src/components/AuthMFA/MfaSettings.vue
@@ -231,7 +231,7 @@ import { INotificationsCopy, INotificationsSuccess } from "@/interfaces/INotific
 
 const store = useStore();
 const el = ref<number>(1);
-const emit = defineEmits(["enabled"]);
+const emit = defineEmits(["enabled", "resetForm"]);
 const dialog = ref(false);
 const value = computed(() => store.getters["auth/link_mfa"]);
 const secret = computed(() => store.getters["auth/secret"]);
@@ -272,11 +272,12 @@ const updateUserData = async () => {
 
   try {
     await store.dispatch("users/patchData", data);
-    store.dispatch("auth/changeUserData", data);
+    store.dispatch("auth/changeRecoveryEmail", data.recovery_email);
     store.dispatch(
       "snackbar/showSnackbarSuccessAction",
       INotificationsSuccess.profileData,
     );
+    emit("resetForm");
     await store.dispatch("auth/generateMfa").then(() => {
       el.value = 2;
       dialog.value = true;

diff --git a/ui/src/components/Setting/SettingProfile.vue b/ui/src/components/Setting/SettingProfile.vue
@@ -168,7 +168,7 @@
               <mfa-disable @success="() => mfaEnabled = 'false'" />
             </div>
             <div v-else>
-              <mfa-settings @enabled="showCongratulationsModal" />
+              <mfa-settings @enabled="showCongratulationsModal" @reset-form="setRecoveryEmail()" />
             </div>
           </div>
           <v-row justify="center">
@@ -364,6 +364,10 @@ const setUserData = () => {
   recoveryEmail.value = store.getters["auth/recoveryEmail"];
 };
 
+const setRecoveryEmail = async () => {
+  recoveryEmail.value = store.getters["auth/recoveryEmail"];
+};
+
 onMounted(async () => {
   await store.dispatch("auth/getUserInfo");
   setUserData();

diff --git a/ui/src/store/modules/auth.ts b/ui/src/store/modules/auth.ts
@@ -13,9 +13,9 @@ export interface AuthState {
   email: string;
   id: string;
   role: string;
-  recovery_email: string,
+  recoveryEmail: string,
   secret: string;
-  link_mfa: string;
+  linkMfa: string;
   mfa: boolean;
   recoveryCode: string,
   recoveryCodes: Array<number>;
@@ -42,9 +42,9 @@ export const auth: Module<AuthState, State> = {
     email: localStorage.getItem("email") || "",
     id: localStorage.getItem("id") || "",
     role: localStorage.getItem("role") || "",
-    recovery_email: "",
+    recoveryEmail: "",
     secret: "",
-    link_mfa: "",
+    linkMfa: "",
     mfa: false,
     recoveryCode: "",
     recoveryCodes: [],
@@ -72,8 +72,8 @@ export const auth: Module<AuthState, State> = {
     id: (state) => state.id,
     role: (state) => state.role,
     secret: (state) => state.secret,
-    recoveryEmail: (state) => state.recovery_email,
-    link_mfa: (state) => state.link_mfa,
+    recoveryEmail: (state) => state.recoveryEmail,
+    link_mfa: (state) => state.linkMfa,
     isMfa: (state) => state.mfa,
     mfaToken: (state) => state.mfaToken,
     stateRecoveryCode: (state) => state.recoveryCode,
@@ -86,7 +86,7 @@ export const auth: Module<AuthState, State> = {
     getNumberApiKeys: (state) => state.numberApiKeys,
     getLoginTimeout: (state) => state.loginTimeout,
     getDisableTokenTimeout: (state) => state.disableTimeout,
-    showForceRecoveryMail: (state) => !state.recovery_email && state.mfa,
+    showForceRecoveryMail: (state) => !state.recoveryEmail && state.mfa,
   },
 
   mutations: {
@@ -119,7 +119,7 @@ export const auth: Module<AuthState, State> = {
       state.id = data.id;
       state.role = data.role;
       state.mfa = data.mfa;
-      state.recovery_email = data.recovery_email;
+      state.recoveryEmail = data.recovery_email;
       localStorage.setItem("recovery_email", data.recovery_email);
     },
 
@@ -142,17 +142,21 @@ export const auth: Module<AuthState, State> = {
       state.name = data.name;
       state.user = data.username;
       state.email = data.email;
-      state.recovery_email = data.recovery_email;
+      state.recoveryEmail = data.recovery_email;
+    },
+
+    changeRecoveryEmail(state, data) {
+      state.recoveryEmail = data;
     },
 
     mfaGenerateInfo(state, data) {
-      state.link_mfa = data.link;
+      state.linkMfa = data.link;
       state.secret = data.secret;
       state.recoveryCodes = data.recovery_codes;
     },
 
     userInfo(state, data) {
-      state.link_mfa = data.link;
+      state.linkMfa = data.link;
       state.secret = data.secret;
       state.recoveryCodes = data.codes;
       state.mfa = data.mfa;
@@ -164,7 +168,7 @@ export const auth: Module<AuthState, State> = {
       state.id = data.id;
       state.role = data.role;
       state.mfa = data.mfa;
-      state.recovery_email = data.recovery_email;
+      state.recoveryEmail = data.recovery_email;
       localStorage.setItem("recovery_email", data.recovery_email);
     },
 
@@ -423,6 +427,11 @@ export const auth: Module<AuthState, State> = {
       context.commit("changeData", data);
     },
 
+    changeRecoveryEmail(context, data) {
+      localStorage.setItem("recovery_email", data);
+      context.commit("changeRecoveryEmail", data);
+    },
+
     setShowWelcomeScreen(context, tenantID: string) {
       localStorage.setItem("namespacesWelcome", JSON.stringify(
         Object.assign(