Enable MFA for local users toggle

src/interfaces/Account.ts

@@ -28,6 +28,7 @@ export interface Account {
     auto_update_version: string;
     auto_update_always: boolean;
     local_auth_disabled?: boolean;
+    local_mfa_enabled?: boolean;
   };
   onboarding?: AccountOnboarding;
 }

src/modules/settings/AuthenticationTab.tsx

@@ -7,6 +7,7 @@ import { Input } from "@components/Input";
 import { Label } from "@components/Label";
 import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
+import { SmallBadge } from "@components/ui/SmallBadge";
 import {
   Select,
   SelectContent,
@@ -22,6 +23,7 @@ import { cn } from "@utils/helpers";
 import {
   CalendarClock,
   ExternalLinkIcon,
+  KeyRound,
   ShieldIcon,
   ShieldUserIcon,
   TimerResetIcon,
@@ -66,6 +68,15 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
     },
   );
 
+  // Local MFA (UI only, not wired to the backend yet)
+  const [isLocalMFAEnabled, setIsLocalMFAEnabled] = useState<boolean>(() => {
+    try {
+      return account?.settings?.local_mfa_enabled || false;
+    } catch (error) {
+      return false;
+    }
+  });
+
   // Peer Expiration
   const [
     loginExpiration,
@@ -105,6 +116,7 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
     peerInactivityExpirationEnabled,
     peerInactivityExpiresIn,
     peerInactivityExpireInterval,
+    isLocalMFAEnabled,
   ]);
 
   const saveChanges = async () => {
@@ -129,6 +141,7 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
               peer_approval_enabled: peerApproval,
               user_approval_required: userApprovalRequired,
             },
+            local_mfa_enabled: isLocalMFAEnabled
           },
         } as Account)
         .then(() => {
@@ -213,6 +226,39 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
             />
           </div>
 
+          {!account.settings.local_auth_disabled && account.settings.embedded_idp_enabled ?
+            (
+              <div className={"flex flex-col"}>
+                <FancyToggleSwitch
+                  value={isLocalMFAEnabled}
+                  onChange={setIsLocalMFAEnabled}
+                  dataCy={"local-mfa-enabled"}
+                  label={
+                    <>
+                      <KeyRound size={15} />
+                      Enable Local MFA
+                      <SmallBadge
+                        text={"Beta"}
+                        variant={"sky"}
+                        className={"text-[9px] leading-none py-[3px] px-[5px]"}
+                        textClassName={"top-0"}
+                      />
+                    </>
+                  }
+                  helpText={
+                    <>
+                      Require multi-factor authentication for users
+                      <br />
+                      authenticating with local credentials.
+                    </>
+                  }
+                  disabled={!permission.settings.update}
+                />
+              </div>
+            ) : null
+          }
+
+
           <div className={"flex flex-col"}>
             <FancyToggleSwitch
               value={loginExpiration}