feat: add user's MFA items (#3921)

web/src/Setting.js

@@ -696,18 +696,27 @@ export const MfaRulePrompted = "Prompted";
 export const MfaRuleOptional = "Optional";
 
 export function isRequiredEnableMfa(user, organization) {
-  if (!user || !organization || !organization.mfaItems) {
+  if (!user || !organization || (!organization.mfaItems && !user.mfaItems)) {
     return false;
   }
   return getMfaItemsByRules(user, organization, [MfaRuleRequired]).length > 0;
 }
 
 export function getMfaItemsByRules(user, organization, mfaRules = []) {
-  if (!user || !organization || !organization.mfaItems) {
+  if (!user || !organization || (!organization.mfaItems && !user.mfaItems)) {
     return [];
   }
 
-  return organization.mfaItems.filter((mfaItem) => mfaRules.includes(mfaItem.rule))
+  let mfaItems = organization.mfaItems;
+  if (user.mfaItems && user.mfaItems.length !== 0) {
+    mfaItems = user.mfaItems;
+  }
+
+  if (mfaItems === null) {
+    return [];
+  }
+
+  return mfaItems.filter((mfaItem) => mfaRules.includes(mfaItem.rule))
     .filter((mfaItem) => user.multiFactorAuths.some((mfa) => mfa.mfaType === mfaItem.name && !mfa.enabled));
 }
 

web/src/UserEditPage.js

@@ -42,6 +42,7 @@ import * as MfaBackend from "./backend/MfaBackend";
 import AccountAvatar from "./account/AccountAvatar";
 import FaceIdTable from "./table/FaceIdTable";
 import MfaAccountTable from "./table/MfaAccountTable";
+import MfaTable from "./table/MfaTable";
 
 const {Option} = Select;
 
@@ -926,6 +927,19 @@ class UserEditPage extends React.Component {
           </Col>
         </Row>
       );
+    } else if (accountItem.name === "MFA items") {
+      return (<Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("general:MFA items"), i18next.t("general:MFA items - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <MfaTable
+            title={i18next.t("general:MFA items")}
+            table={this.state.user.mfaItems ?? []}
+            onUpdateTable={(value) => {this.updateUserField("mfaItems", value);}}
+          />
+        </Col>
+      </Row>);
     } else if (accountItem.name === "Multi-factor authentication") {
       return (
         !this.isSelfOrAdmin() ? null : (

web/src/table/AccountTable.js

@@ -110,6 +110,7 @@ class AccountTable extends React.Component {
       {name: "Managed accounts", label: i18next.t("user:Managed accounts")},
       {name: "Face ID", label: i18next.t("user:Face ID")},
       {name: "MFA accounts", label: i18next.t("user:MFA accounts")},
+      {name: "MFA items", label: i18next.t("general:MFA items")},
     ];
   };