css and change password fixes

tiwari-nishant · tiwari-nishant · commit 4bf90ce33a25 · 2025-11-04T14:18:29.000+05:30
diff --git a/src/store/modules/SecurityAndAccess/UserManagementStore.js b/src/store/modules/SecurityAndAccess/UserManagementStore.js
@@ -58,7 +58,6 @@ export const UserManagementStore = defineStore('userManagment', {
           return await api
             .all(userIds.map((user) => api.get(user)))
             .then((users) => {
-              console.log('then called', users);
               const userData = users.map((user) => user.data);
               this.allUsers = userData;
               this.allUsers.map((user) => {
@@ -75,9 +74,17 @@ export const UserManagementStore = defineStore('userManagment', {
         })
         .catch((error) => {
           console.log(error);
-          const message = i18n.global.t(
-            'pageUserManagement.toast.errorLoadUsers',
-          );
+          let message = '';
+          if (
+            error.response.data['@Message.ExtendedInfo'] &&
+            error.response.data['@Message.ExtendedInfo'][0].MessageId.endsWith(
+              'GenerateSecretKeyRequired',
+            )
+          ) {
+            message = 'otpRequired';
+          } else {
+            message = i18n.global.t('pageUserManagement.toast.errorLoadUsers');
+          }
           throw new Error(message);
         });
     },
@@ -233,7 +240,6 @@ export const UserManagementStore = defineStore('userManagment', {
       if (locked !== undefined) data.Locked = locked;
       return await api
         .patch(`/redfish/v1/AccountService/Accounts/${originalUsername}`, data)
-        .then(() => this.getUsers())
         .then(() =>
           i18n.global.t('pageUserManagement.toast.successUpdateUser', {
             username: originalUsername,
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
@@ -78,6 +78,7 @@
           </b-button>
         </div>
       </b-form>
+      <modal-otp-generate />
     </div>
   </div>
 </template>
@@ -92,6 +93,8 @@ import Alert from '@/components/Global/Alert.vue';
 import InfoTooltipPassword from '@/components/Global/InfoTooltipPassword.vue';
 import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
 import { useRouter } from 'vue-router';
+import ModalOtpGenerate from '../Login/ModalOtpGenerate.vue';
+import eventBus from '@/eventBus';
 
 const global = stores.GlobalStore();
 const userManagementStore = stores.UserManagementStore();
@@ -141,10 +144,19 @@ const changePassword = () => {
         userManagementStore.getUsers(),
         global.getCurrentUser(username.value),
         global.getSystemInfo(),
-      ]);
+      ])
+        .then(() => router.push('/'))
+        .catch((error) => {
+          if (error?.message?.endsWith('otpRequired')) {
+            userManagementStore.clearSecretKey().finally(() => {
+              userManagementStore.generateSecretKey().then(() => {
+                eventBus.emit('otp-generate-modal');
+              });
+            });
+          }
+        });
       v$.value.$reset();
     })
-    .then(() => router.push('/'))
     .catch(() => (changePasswordError.value = true));
 };
 const updatePasswordType = (passwordType) => {
diff --git a/src/views/Login/ModalOtpGenerate.vue b/src/views/Login/ModalOtpGenerate.vue
@@ -16,7 +16,7 @@
   >
     <b-row>
       <b-col>
-        <b-row>
+        <div class="qr-wrapper">
           <qrcode-vue
             v-if="qrValue"
             class="qrcode-styling"
@@ -26,9 +26,9 @@
             render-as="canvas"
           />
           <div v-else class="emptyQrStyle"></div>
-        </b-row>
-        <b-row>
-          <b-col>
+        </div>
+        <div class="secret-key-buttons-container">
+          <div>
             <b-button
               v-b-toggle.collapse-2
               class="m-1 buttonStyle"
@@ -40,18 +40,16 @@
             <b-collapse id="collapse-2" data-test-id="modal-secret-key-value">
               {{ dataFormatter(secretKey) }}
             </b-collapse>
-          </b-col>
-          <b-col class="m-1">
-            <b-button @click="copySecretKey">
-              <template v-if="secretKeyCopied">
-                <icon-checkmark title="Copied" />
-              </template>
-              <template v-else>
-                <icon-copy title="Copy Secret key" />
-              </template>
-            </b-button>
-          </b-col>
-        </b-row>
+          </div>
+          <b-button class="m-1" @click="copySecretKey">
+            <template v-if="secretKeyCopied">
+              <icon-checkmark title="Copied" />
+            </template>
+            <template v-else>
+              <icon-copy title="Copy Secret key" />
+            </template>
+          </b-button>
+        </div>
       </b-col>
       <b-col>
         <b-form
@@ -134,7 +132,7 @@ const accountName = ref(localStorage.getItem('storedUsername'));
 const otpValue = ref(null);
 const secretKeyCopied = ref(false);
 const qrValue = ref(null);
-const size = ref(350);
+const size = ref(355);
 const { errorToast } = useToast();
 
 const globalStore = GlobalStore();
@@ -215,14 +213,18 @@ function handleSubmit() {
 }
 function closeModal() {
   nextTick(() => {
+    v$.value.$reset();
     modal.value = false;
   });
 }
 </script>
 <style lang="scss" scoped>
 .qrcode-styling {
   margin-left: 15px;
-  max-width: 350px;
+}
+
+.qr-wrapper {
+  max-width: none !important;
 }
 .row {
   margin-left: 0px;
@@ -246,4 +248,8 @@ function closeModal() {
     transform: rotate(180deg);
   }
 }
+.secret-key-buttons-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/src/views/SecurityAndAccess/UserManagement/RegisterOtpModal.vue b/src/views/SecurityAndAccess/UserManagement/RegisterOtpModal.vue
@@ -16,7 +16,7 @@
   >
     <b-row>
       <b-col>
-        <b-row>
+        <div class="qr-wrapper">
           <qrcode-vue
             v-if="qrValue"
             class="qrcode-styling"
@@ -26,9 +26,9 @@
             render-as="canvas"
           />
           <div v-else class="emptyQrStyle"></div>
-        </b-row>
-        <b-row>
-          <b-col>
+        </div>
+        <div class="secret-key-buttons-container">
+          <div>
             <b-button
               v-b-toggle.collapse-2
               class="m-1 buttonStyle"
@@ -40,18 +40,16 @@
             <b-collapse id="collapse-2" data-test-id="secret-key-value">
               {{ dataFormatter(secretKey) }}
             </b-collapse>
-          </b-col>
-          <b-col class="m-1">
-          <b-button @click="copySecretKey">
+          </div>
+          <b-button class="m-1" @click="copySecretKey">
             <template v-if="secretKeyCopied">
               <icon-checkmark title="Copied" />
             </template>
             <template v-else>
               <icon-copy title="Copy Secret key" />
             </template>
           </b-button>
-          </b-col>
-        </b-row>
+        </div>
       </b-col>
       <b-col>
         <b-form
@@ -151,7 +149,7 @@ const accountName = ref(localStorage.getItem('storedUsername'));
 const otpValue = ref(null);
 const secretKeyCopied = ref(false);
 const qrValue = ref(null);
-const size = ref(350);
+const size = ref(355);
 
 const { errorToast, successToast } = useToast();
 
@@ -187,16 +185,14 @@ const secretKey = computed(() => {
   return userManagementStore.secretKeyInfoGetter;
 });
 
-watch(secretKey,(newValue) => {
-    globalStore.getBmcTime();
-    if (newValue === null) {
-      qrValue.value = null;
-    } else {
-      qrValue.value = `otpauth://totp/${issuer.value}:${accountName.value}?secret=${newValue}&issuer=${issuer.value}`;
-    }
-  },
-);
-
+watch(secretKey, (newValue) => {
+  globalStore.getBmcTime();
+  if (newValue === null) {
+    qrValue.value = null;
+  } else {
+    qrValue.value = `otpauth://totp/${issuer.value}:${accountName.value}?secret=${newValue}&issuer=${issuer.value}`;
+  }
+});
 
 const rules = computed(() => ({
   otpValue: modal.value
@@ -208,7 +204,6 @@ const rules = computed(() => ({
 
 const v$ = useVuelidate(rules, { otpValue });
 
-
 function copySecretKey() {
   navigator.clipboard.writeText(secretKey.value).then(() => {
     // Show copied text for 5 seconds
@@ -268,7 +263,9 @@ function closeModal() {
 <style lang="scss" scoped>
 .qrcode-styling {
   margin-left: 15px;
-  max-width: 350px;
+}
+.qr-wrapper {
+  max-width: none !important;
 }
 .row {
   margin-left: 0px;
@@ -291,4 +288,9 @@ function closeModal() {
     transform: rotate(180deg);
   }
 }
+
+.secret-key-buttons-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -20,7 +20,7 @@
           switch
           data-test-id="global-mfa"
           class="mt-1"
-          @change="updateGlobalMfa"
+          @update:model-value="updateGlobalMfa"
         >
           <span v-if="globalMfaValue">
             {{ $t('global.status.enabled') }}
@@ -374,10 +374,10 @@ const isServiceUser = computed(() => {
 
 const globalMfaValue = computed({
   get() {
-    return userManagement.isGlobalMfaEnabled;
+    return userManagement.isGlobalMfaEnabledGetter;
   },
   set(newValue) {
-    return userManagement.isGlobalMfaEnabled=newValue;
+    return (userManagement.isGlobalMfaEnabled = newValue);
   },
 });
 
@@ -433,7 +433,6 @@ watch(allUsers, (users) => {
   }));
 });
 
-
 const settings = computed(() => {
   return userManagement.accountSettingsGetter;
 });
@@ -512,14 +511,14 @@ function clearSecretKey(value) {
 }
 
 function disableMFA() {
-  globalMfaRef.value.checked = false;
+  globalMfaValue.value = false;
 }
 
 async function updateGlobalMfa(state) {
   await userManagement.checkCurrentUserMfaBypassed({
     uri: currentUser.value['@odata.id'],
   });
-  if (!globalMfaValue.value) {
+  if (globalMfaValue.value) {
     beforeMfa.value = true;
     userManagement
       .clearSecretKey()
