From 45809f0711044f4c48e2b3c7de3d9411c66453ba Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Tue, 10 Dec 2024 19:41:25 +0530
Subject: [PATCH] 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 <a.nikhil@ibm.com>
---
 package-lock.json                             |  13 ++
 package.json                                  |   1 +
 src/components/Global/InfoTooltip.vue         |   2 +-
 src/locales/en-US.json                        |  22 ++-
 src/views/Login/Login.vue                     |  11 +-
 src/views/Login/ModalOtpGenerate.vue          |  14 +-
 .../UserManagement/RegisterOtpModal.vue       |  56 ++++++-
 .../UserManagement/UserManagement.vue         | 157 +++++++++++++-----
 src/views/Settings/DateTime/DateTime.vue      |  14 ++
 9 files changed, 231 insertions(+), 59 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c62a66ebf3..81242f85af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13386,6 +13386,11 @@
         "verror": "1.10.0"
       }
     },
+    "jssha": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz",
+      "integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ=="
+    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -18763,6 +18768,14 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
+    "totp-generator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/totp-generator/-/totp-generator-1.0.0.tgz",
+      "integrity": "sha512-Iu/1Lk60/MH8FE+5cDWPiGbwKK1hxzSq+KT9oSqhZ1BEczGIKGcN50bP0WMLiIZKRg7t29iWLxw6f81TICQdoA==",
+      "requires": {
+        "jssha": "^3.3.1"
+      }
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
diff --git a/package.json b/package.json
index 99edd5e503..efba2be754 100644
--- 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
index 0e52ee2cd6..d6b550a6e9 100644
--- 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
index 1654cad6a8..e198efb297 100644
--- 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
index ba14d62328..742fbb0d7a 100644
--- 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
index e8897731d0..8e78a7b525 100644
--- 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,6 +98,7 @@
 </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';
@@ -94,7 +106,7 @@ 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
index b75c034c4b..4d868c7c84 100644
--- 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));
     },
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index 83c5d43e12..d5d8c80a50 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -4,8 +4,15 @@
     <b-row v-if="isAdminUser || isServiceUser">
       <b-col>
         <span>{{ $t('pageUserManagement.mfaTotpAuthentication') }}</span>
+        <info-tooltip
+          v-if="!globalMfaValue && !currentMfaBypassed"
+          class="ml-1"
+          :title="$t('pageUserManagement.enableMfaInfo')"
+        >
+        </info-tooltip>
         <b-form-checkbox
           id="switch"
+          ref="globalMfaRef"
           v-model="globalMfaValue"
           :disabled="isBusy"
           switch
@@ -19,23 +26,23 @@
         </b-form-checkbox>
       </b-col>
     </b-row>
-    <b-row
-      v-if="(isAdminUser || isServiceUser) && !globalMfaValue"
-      class="mt-2"
-    >
+    <b-row v-if="isAdminUser || isServiceUser" class="mt-2">
       <b-col xl="9">
-        <alert variant="warning" class="mb-2">
+        <alert variant="info" class="mb-2">
           <div>
-            {{ $t('pageUserManagement.mfaTimeMatch') }}
+            {{ $t('pageUserManagement.modal.hmcWarning') }}
           </div>
         </alert>
       </b-col>
     </b-row>
-    <b-row v-if="isAdminUser" class="mt-2">
+    <b-row
+      v-if="isAdminUser && globalMfaValue && currentMfaBypassed"
+      class="mt-2"
+    >
       <b-col xl="9">
         <alert variant="warning" class="mb-4">
           <div>
-            {{ $t('pageUserManagement.clearSecretKeyMessage') }}
+            {{ $t('pageUserManagement.disableMfaBypassWarning') }}
           </div>
         </alert>
       </b-col>
@@ -105,14 +112,25 @@
               v-model="row.item.mfa"
               b-form-checkbox
               switch
-              :disabled="!globalMfaValue"
               @change="updateMfaBypassVal(row.item)"
             >
             </b-form-checkbox>
           </template>
+          <template #head(secretKey)="row">
+            {{ row.label }}
+            <info-tooltip
+              v-if="isAdminUser || isServiceUser"
+              class="ml-1"
+              :title="$t('pageUserManagement.table.secretKeyTooltip')"
+            >
+            </info-tooltip>
+          </template>
           <template v-if="isAdminUser || isServiceUser" #cell(secretKey)="row">
             <b-button
-              v-if="row.item.privilege !== 'Service agent'"
+              v-if="
+                row.item.privilege !== 'Service agent' &&
+                currentUser.UserName !== row.item.username
+              "
               variant="primary"
               :disabled="!row.item.secretKey"
               @click="clearSecretKey(row.item)"
@@ -170,7 +188,7 @@
       @ok="saveUser"
       @hidden="activeUser = null"
     />
-    <register-otp-modal />
+    <register-otp-modal @disable-mfa="disableMFA()" />
   </b-container>
 </template>
 
@@ -187,6 +205,7 @@ import PageTitle from '@/components/Global/PageTitle';
 import TableRoles from './TableRoles';
 import TableToolbar from '@/components/Global/TableToolbar';
 import TableRowAction from '@/components/Global/TableRowAction';
+import { TOTP } from 'totp-generator';
 
 import BVTableSelectableMixin, {
   selectedRows,
@@ -197,6 +216,7 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import RegisterOtpModal from './RegisterOtpModal';
 import Alert from '../../../components/Global/Alert.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip';
 
 export default {
   name: 'UserManagement',
@@ -206,6 +226,7 @@ export default {
     IconEdit,
     IconSettings,
     IconTrashcan,
+    InfoTooltip,
     ModalSettings,
     ModalUser,
     PageTitle,
@@ -222,6 +243,7 @@ export default {
   },
   data() {
     return {
+      beforeMfa: false,
       isBusy: true,
       activeUser: null,
       fields: [
@@ -266,6 +288,9 @@ export default {
     };
   },
   computed: {
+    secretKey() {
+      return this.$store.getters['userManagement/secretKeyInfo'];
+    },
     currentMfaBypassed() {
       return this.$store.getters['userManagement/isCurrentUserMfaBypassed'];
     },
@@ -355,6 +380,39 @@ export default {
       }
     },
   },
+  watch: {
+    secretKey(value) {
+      if (value !== null && this.beforeMfa) {
+        const { otp } = TOTP.generate(value, { digits: 6 });
+        this.$store
+          .dispatch('userManagement/verifyRegisterTotp', {
+            otpValue: otp.toString(),
+          })
+          .then(() => {
+            this.$store
+              .dispatch('userManagement/updateGlobalMfa', {
+                globalMfa: true,
+              })
+              .then((message) => {
+                this.successToast(message);
+                if (!this.currentMfaBypassed) {
+                  this.$store.dispatch('authentication/logout');
+                }
+              })
+              .catch(({ message }) => this.errorToast(message));
+          })
+          .catch(() => {
+            this.errorToast(
+              this.$t('pageUserManagement.toast.errorEnableMfaAuto')
+            );
+            this.$bvModal.show('register-otp-modal');
+          })
+          .finally(() => {
+            this.beforeMfa = false;
+          });
+      }
+    },
+  },
   created() {
     this.startLoader();
     Promise.all([
@@ -372,6 +430,10 @@ export default {
     this.addMfaBypass();
   },
   methods: {
+    disableMFA() {
+      // reset MFA value
+      this.$refs.globalMfaRef.$refs.input.checked = false;
+    },
     addMfaBypass() {
       if (this.isAdminUser || this.isServiceUser) {
         this.fields.splice(4, 0, {
@@ -391,13 +453,11 @@ export default {
         .dispatch('userManagement/clearSetSecretKey', value)
         .then((message) => {
           this.successToast(message);
-          setTimeout(() => {
-            if (this.currentUser?.UserName === value.username) {
-              this.$store.dispatch('authentication/logout');
-            } else {
-              this.$store.dispatch('userManagement/getUsers');
-            }
-          }, 2000);
+          if (this.currentUser?.UserName === value.username) {
+            this.$store.dispatch('authentication/logout');
+          } else {
+            this.$store.dispatch('userManagement/getUsers');
+          }
         })
         .catch(({ message }) => this.errorToast(message));
     },
@@ -409,6 +469,14 @@ export default {
           this.$store.dispatch('userManagement/checkCurrentUserMfaBypassed', {
             uri: this.currentUser['@odata.id'],
           });
+          this.$store.dispatch('userManagement/getUsers');
+          if (
+            this.currentUser?.UserName === value.username &&
+            this.globalMfaValue === true &&
+            value.mfa === false
+          ) {
+            this.$store.dispatch('authentication/logout');
+          }
         })
         .catch(({ message }) => this.errorToast(message));
     },
@@ -565,33 +633,42 @@ export default {
           this.isBusy = false;
         });
     },
-    updateGlobalMfa(state) {
-      this.$store
-        .dispatch('userManagement/updateGlobalMfa', {
-          globalMfa: state,
-        })
-        .then(async (message) => {
-          await this.$store.dispatch(
-            'userManagement/checkCurrentUserMfaBypassed',
-            {
-              uri: this.currentUser['@odata.id'],
-            }
-          );
-          if (
-            !this.isServiceUser &&
-            this.globalMfaValue &&
-            !this.currentMfaBypassed
-          ) {
+    async updateGlobalMfa(state) {
+      await this.$store.dispatch('userManagement/checkCurrentUserMfaBypassed', {
+        uri: this.currentUser['@odata.id'],
+      });
+      if (!this.globalMfaValue) {
+        this.beforeMfa = true;
+        this.$store
+          .dispatch('userManagement/clearSecretKey')
+          .then(() => {
             this.$store
               .dispatch('userManagement/generateSecretKey')
-              .then(() => {
+              .catch(() => {
+                this.beforeMfa = false;
+                this.errorToast(
+                  this.$t('pageUserManagement.toast.errorEnableMfaAuto')
+                );
                 this.$bvModal.show('register-otp-modal');
               });
-          } else {
+          })
+          .catch(() => {
+            this.beforeMfa = false;
+            this.errorToast(
+              this.$t('pageUserManagement.toast.errorEnableMfaAuto')
+            );
+            this.$bvModal.show('register-otp-modal');
+          });
+      } else {
+        this.$store
+          .dispatch('userManagement/updateGlobalMfa', {
+            globalMfa: state,
+          })
+          .then((message) => {
             this.successToast(message);
-          }
-        })
-        .catch(({ message }) => this.errorToast(message));
+          })
+          .catch(({ message }) => this.errorToast(message));
+      }
     },
   },
 };
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index c9ea8dccd9..5698e51977 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -39,6 +39,11 @@
               {{ $t('pageDateTime.alert.messagePowerOff') }}
             </span>
           </alert>
+          <alert v-if="globalMfaValue" variant="info" class="mb-2">
+            <span>
+              {{ $t('pageDateTime.alert.mfaMessage') }}
+            </span>
+          </alert>
           <alert variant="info" class="mb-4">
             <span>
               {{ $t('pageDateTime.alert.messageNtp') }}
@@ -312,6 +317,14 @@ export default {
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
     },
+    globalMfaValue: {
+      get() {
+        return this.$store.getters['userManagement/isGlobalMfaEnabled'];
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
     ntpOptionSelected() {
       return this.form.configurationSelected === 'ntp';
     },
@@ -352,6 +365,7 @@ export default {
     Promise.all([
       this.$store.dispatch('global/getBmcTime'),
       this.$store.dispatch('dateTime/getNtpData'),
+      this.$store.dispatch('userManagement/getAccountSettings'),
     ]).finally(() => {
       this.setInitialNtpValues();
       this.endLoader();