Update User management page for MFA

- Add pop-up menu to Enable MFA - Removed secret key clear option current logged in user - Updated warning messages Signed-off-by: Nikhil Ashoka <[email protected]>
ibm-openbmc · Dec 18, 2024 · 45809f0 · 45809f0
1 parent b903c86
commit 45809f0
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "lodash": "4.17.21",
     "n64": "0.2.10",
     "qrcode.vue": "1.7.0",
+    "totp-generator": "1.0.0",
     "vue": "2.6.12",
     "vue-i18n": "8.24.2",
     "vue-router": "3.5.1",

diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <b-button
-    v-b-tooltip
+    v-b-tooltip.hover.html
     variant="link"
     class="btn-tooltip btn-icon-only"
     :title="title"

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -404,7 +404,8 @@
       "message": "To change how date and time are displayed (either UTC or browser offset) throughout the application, visit ",
       "messageText": "To change how date and time are displayed (either UTC or browser offset) throughout the application, visit Profile Settings",
       "messageNtp": "If NTP is selected but an NTP server is not given or the given NTP server is not reachable, then time.google.com will be used.",
-      "messagePowerOff": "The server must be powered off to change date and time to manual or NTP."
+      "messagePowerOff": "The server must be powered off to change date and time to manual or NTP.",
+      "mfaMessage": "Changing date and time will affect MFA users."
     },
     "configureSettings": "Configure settings",
     "form": {
@@ -1116,6 +1117,7 @@
     "model": "Model",
     "password": "Password",
     "serialNumber": "Serial number",
+    "totpTooltip": "Enter the TOTP when the user is enrolled in MFA and MFA has not been bypassed.",
     "uploadServiceLoginCertificate": "Upload service login certificate",
     "username": "Username",
     "alert": {
@@ -1871,10 +1873,12 @@
   "pageUserManagement": {
     "accountPolicySettings": "Account policy settings",
     "addUser": "Add user",
-    "clearSecretKeyMessage": "You will be logged out if you clear your own Secret key.",
     "deleteUser": "Delete user | Delete users",
+    "disableMfaBypassWarning": "You will be logged out if your MFA bypass value is disabled.",
     "editUser": "Edit user",
-    "mfaTimeMatch": "Before enabling MFA TOTP authentication, please make sure that BMC date and time matches UTC time.",
+    "enableMfaInfo": "You will be logged out after successfully enabling MFA TOTP Authentication.",
+    "enableMfaWarning": "You need to MFA bypass yourself to enable MFA TOTP Authentication",
+    "mfaTimeMatch": "To update, visit ",
     "mfaTotpAuthentication": "MFA TOTP authentication",
     "viewPrivilegeRoleDescriptions": "View privilege role descriptions",
     "modal": {
@@ -1887,12 +1891,16 @@
       "confirmUserPassword": "Confirm user password",
       "deleteConfirmMessage": "Are you sure you want to delete user '%{user}'? This action cannot be undone.",
       "enableMfa": "Enable MFA",
-      "hmcWarning": "Please use bypassed MFA user as HMC admin.",
+      "helptext": "Steps",
+      "helptextStep1": "1. Scan the QR code or enter the secret key into the authenticator app.",
+      "helptextStep2": "2. Enter the TOTP generated by the app into the TOTP field and Login.",
+      "helptextStep2EnableMfa": "2. Enter the TOTP generated by the app into the TOTP field and Validate.",
+      "hmcWarning": "MFA bypassed user must be used for HMC connection.",
       "manual": "Manual",
       "maxFailedLoginAttempts": "Max failed login attempts",
       "mfaInfoAlert": "Enable/Disable MFA at system level will affect all local users of the system.",
       "noSpecialCharactersExceptUnderscore": "No special characters except underscore",
-      "otp": "OTP",
+      "otp": "TOTP",
       "passwordMustBeBetween": "Password must be between %{min} – %{max} characters",
       "passwordsDoNotMatch": "Passwords do not match",
       "privilege": "Privilege",
@@ -1913,6 +1921,7 @@
       "readOnly": "Read only",
       "serviceAgent": "Service agent",
       "secretKey": "Secret key",
+      "secretKeyTooltip": "If the secret key is cleared, that user will be prompted to re-register the secret key during the login process.",
       "status": "Status",
       "username": "Username"
     },
@@ -1938,10 +1947,11 @@
       "errorDisableMfa": "Error disabling Multi factor authentication.",
       "errorDisableMfaBypass": "Error disabling MFA bypass.",
       "errorEnableMfa": "Error enabling Multi factor authentication.",
+      "errorEnableMfaAuto": "Error enabling MFA TOTP Authentication. Please verify BMC time and the browser's time to successfully verify TOTP.",
       "errorEnableMfaBypass": "Error enabling MFA bypass.",
       "errorLoadAccountSettings": "Error loading account settings",
       "errorLoadUsers": "Error loading users.",
-      "errorOtp": "Invalid OTP",
+      "errorOtp": "Invalid TOTP",
       "errorSaveSettings": "Error saving account settings.",
       "errorUpdateUser": "Error updating user '%{username}'.",
       "errorUpdateUserPasswordNotAccepted": "Error updating user '%{username}' because the password was not accepted.",

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
@@ -39,7 +39,7 @@
           </template>
         </b-form-invalid-feedback>
       </b-form-group>
-      <div class="login-form__section mb-3">
+      <div class="login-form__section passwordStyle">
         <label for="password">{{ $t('pageLogin.password') }}</label>
         <input-password-toggle>
           <b-form-input
@@ -62,7 +62,9 @@
         </b-form-invalid-feedback>
       </div>
       <div v-if="isGlobalMfaEnabled" class="login-form__section mb-3">
-        <label>OTP</label>
+        <label>TOTP</label>
+        <info-tooltip class="ml-1" :title="$t('pageLogin.totpTooltip')">
+        </info-tooltip>
         <b-form-group>
           <b-form-input v-model="otpValue"> </b-form-input>
         </b-form-group>
@@ -125,6 +127,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import IconUpload from '@carbon/icons-vue/es/upload/20';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import InfoTooltip from '@/components/Global/InfoTooltip';
 export default {
   name: 'Login',
   components: {
@@ -133,6 +136,7 @@ export default {
     ModalUploadCertificate,
     ModalOtpGenerate,
     IconUpload,
+    InfoTooltip,
   },
   mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin, DataFormatterMixin],
   data() {
@@ -270,4 +274,7 @@ export default {
     transform: rotate(180deg);
   }
 }
+.passwordStyle {
+  margin-bottom: 2rem;
+}
 </style>
diff --git a/src/views/Login/ModalOtpGenerate.vue b/src/views/Login/ModalOtpGenerate.vue
@@ -50,6 +50,17 @@
           @submit.prevent
         >
           <b-container fluid="xl">
+            <div class="login-form__section mb-3">
+              <alert variant="info" class="mb-4">
+                <dt>{{ $t('pageUserManagement.modal.helptext') }}:</dt>
+                <dd>
+                  {{ $t('pageUserManagement.modal.helptextStep1') }}
+                </dd>
+                <dd>
+                  {{ $t('pageUserManagement.modal.helptextStep2') }}
+                </dd>
+              </alert>
+            </div>
             <div class="login-form__section mb-3">
               <label>{{ $t('pageUserManagement.modal.otp') }}</label>
               <b-form-group>
@@ -87,14 +98,15 @@
 </template>
 <script>
 import { required } from 'vuelidate/lib/validators';
+import Alert from '@/components/Global/Alert';
 import IconCopy from '@carbon/icons-vue/es/copy/16';
 import IconCheckmark from '@carbon/icons-vue/es/checkmark/16';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import QrcodeVue from 'qrcode.vue';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 export default {
-  components: { IconCopy, IconCheckmark, QrcodeVue },
+  components: { Alert, IconCopy, IconCheckmark, QrcodeVue },
   mixins: [DataFormatterMixin, BVToastMixin, VuelidateMixin],
   data() {
     return {

diff --git a/src/views/SecurityAndAccess/UserManagement/RegisterOtpModal.vue b/src/views/SecurityAndAccess/UserManagement/RegisterOtpModal.vue
@@ -52,8 +52,16 @@
           <b-container fluid="xl">
             <div class="login-form__section mb-3">
               <alert variant="warning" class="mb-4">
+                <dt>
+                  {{ $t('pageOverview.bmcTime') }}:
+                  {{ bmcTime | formatDate }}
+                  {{ bmcTime | formatTime }}
+                </dt>
                 <span>
-                  {{ $t('pageUserManagement.modal.hmcWarning') }}
+                  {{ $t('pageUserManagement.mfaTimeMatch') }}
+                  <b-link to="/settings/date-time">
+                    {{ $t('appPageTitle.dateTime') }}</b-link
+                  >
                 </span>
               </alert>
             </div>
@@ -66,6 +74,8 @@
             </div>
             <div class="login-form__section mb-3">
               <label>{{ $t('pageUserManagement.modal.otp') }}</label>
+              <info-tooltip class="ml-1" :title="formattedTooltip">
+              </info-tooltip>
               <b-form-group>
                 <b-form-input
                   v-model="otpValue"
@@ -108,8 +118,9 @@ import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import QrcodeVue from 'qrcode.vue';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import InfoTooltip from '@/components/Global/InfoTooltip';
 export default {
-  components: { IconCopy, Alert, IconCheckmark, QrcodeVue },
+  components: { IconCopy, Alert, IconCheckmark, QrcodeVue, InfoTooltip },
   mixins: [DataFormatterMixin, BVToastMixin, VuelidateMixin],
   data() {
     return {
@@ -122,12 +133,31 @@ export default {
     };
   },
   computed: {
+    formattedTooltip() {
+      return (
+        this.$t('pageUserManagement.modal.helptext') +
+        '</br>' +
+        this.$t('pageUserManagement.modal.helptextStep1') +
+        '</br>' +
+        this.$t('pageUserManagement.modal.helptextStep2EnableMfa')
+      );
+    },
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+    currentMfaBypassed() {
+      return this.$store.getters['userManagement/isCurrentUserMfaBypassed'];
+    },
+    isServiceUser() {
+      return this.$store.getters['global/isServiceUser'];
+    },
     secretKey() {
       return this.$store.getters['userManagement/secretKeyInfo'];
     },
   },
   watch: {
     secretKey(value) {
+      this.$store.dispatch('global/getBmcTime');
       if (value === null) {
         this.qrValue = null;
       } else {
@@ -156,9 +186,7 @@ export default {
       this.handleSubmit();
     },
     resetMfa() {
-      this.$store.dispatch('userManagement/updateGlobalMfa', {
-        globalMfa: false,
-      });
+      this.$emit('disable-mfa');
       this.otpValue = null;
       this.$v.$reset();
     },
@@ -173,10 +201,20 @@ export default {
         .dispatch('userManagement/verifyRegisterTotp', {
           otpValue: this.otpValue,
         })
-        .then((message) => {
-          this.successToast(message);
-          this.closeModal();
-          this.resetForm();
+        .then(() => {
+          this.$store
+            .dispatch('userManagement/updateGlobalMfa', {
+              globalMfa: true,
+            })
+            .then((message) => {
+              this.successToast(message);
+              this.closeModal();
+              this.resetForm();
+              if (!this.isServiceUser && !this.currentMfaBypassed) {
+                this.$store.dispatch('authentication/logout');
+              }
+            })
+            .catch(({ message }) => this.errorToast(message));
         })
         .catch(({ message }) => this.errorToast(message));
     },