@burdenoff/microfe-auth 2026.510.127

package/dist/auth/pages/MfaSetupPage.js

@@ -0,0 +1,341 @@
+import { useAuthStore as e } from "../store/authStore.js";
+import { useMfaOperations as t } from "../hooks/useMfaOperations.js";
+import "../hooks/index.js";
+import { AlertIcon as n, SpinnerIcon as r } from "../components/AuthIcons.js";
+import { QRCodeSVG as i } from "../../node_modules/qrcode.react/lib/esm/index.js";
+import { ConfirmActionDialog as a } from "../components/ConfirmActionDialog.js";
+import { nativeCopyText as o, nativeImpact as s, nativeNotify as c } from "../../utils/nativeBridge.js";
+import { useState as l } from "react";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/auth/pages/MfaSetupPage.tsx
+function m() {
+	let { t: m } = u(), h = (e, t) => {
+		let n = m(e);
+		return n === e ? t : n;
+	}, { setupMFA: g, enableMFA: _, disableMFA: v, isLoading: y } = t(), b = e((e) => e.user), x = e((e) => e.isAuthenticated), [S, C] = l(null), [w, T] = l(""), [E, D] = l(null), [O, k] = l(null), [A, j] = l(!1), [M, N] = l(!1), P = async (e) => {
+		try {
+			D(null), k(null), C(await g(e));
+		} catch (e) {
+			console.error("Failed to setup MFA:", e), D(e instanceof Error ? e.message : "Failed to setup MFA. Please try again.");
+		}
+	};
+	return x ? /* @__PURE__ */ p("div", {
+		className: "max-w-2xl mx-auto p-6",
+		children: [
+			/* @__PURE__ */ f(a, {
+				open: M,
+				onOpenChange: N,
+				title: "Disable two-factor authentication?",
+				description: "Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.",
+				confirmText: "Disable MFA",
+				variant: "warning",
+				isPending: y,
+				onConfirm: async () => {
+					try {
+						D(null), k(null), await v(), k("Two-factor authentication has been disabled."), N(!1);
+					} catch (e) {
+						console.error("Failed to disable MFA:", e), D(e instanceof Error ? e.message : "Failed to disable MFA. Please try again.");
+					}
+				}
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "mb-8",
+				children: [/* @__PURE__ */ f("h1", {
+					className: "text-3xl font-semibold text-[var(--color-text-primary)]",
+					children: h("auth.mfaSetup.title", "Two-Factor Authentication")
+				}), /* @__PURE__ */ f("p", {
+					className: "text-[var(--color-text-secondary)] mt-2",
+					children: h("auth.mfaSetup.subtitle", "Add an extra layer of security to your account")
+				})]
+			}),
+			O && /* @__PURE__ */ f("div", {
+				className: "mb-6 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]",
+				children: /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ f("svg", {
+						className: "w-5 h-5 text-[var(--color-status-success-text)]",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ f("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+						})
+					}), /* @__PURE__ */ f("p", {
+						className: "text-[var(--color-status-success-text)]",
+						children: O
+					})]
+				})
+			}),
+			E && /* @__PURE__ */ p("div", {
+				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
+				children: [/* @__PURE__ */ f(n, { className: "w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }), /* @__PURE__ */ p("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ f("p", {
+						className: "text-sm text-[var(--color-status-error-text)]",
+						children: E
+					}), /* @__PURE__ */ f("button", {
+						onClick: () => D(null),
+						className: "mt-2 text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200",
+						children: h("auth.mfaSetup.dismiss", "Dismiss")
+					})]
+				})]
+			}),
+			S ? /* @__PURE__ */ p("div", {
+				className: "p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex items-center gap-3 mb-6",
+					children: [/* @__PURE__ */ f("div", {
+						className: "w-10 h-10 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center",
+						children: /* @__PURE__ */ f("svg", {
+							className: "w-5 h-5 text-[var(--color-text-link)]",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+							})
+						})
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h2", {
+						className: "text-xl font-semibold text-[var(--color-text-primary)]",
+						children: h("auth.mfaSetup.setupAuthApp", "Setup Authenticator App")
+					}), /* @__PURE__ */ f("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: h("auth.mfaSetup.scanQr", "Scan the QR code with your authenticator app")
+					})] })]
+				}), /* @__PURE__ */ p("div", {
+					className: "space-y-6",
+					children: [
+						S.qrCode && /* @__PURE__ */ f("div", {
+							className: "flex justify-center",
+							children: /* @__PURE__ */ f("div", {
+								className: "p-4 bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)]",
+								children: /* @__PURE__ */ f(i, {
+									value: S.qrCode,
+									size: 192,
+									level: "M",
+									includeMargin: !1,
+									className: "w-48 h-48"
+								})
+							})
+						}),
+						S.secret && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+							className: "text-sm text-[var(--color-text-secondary)] mb-2",
+							children: h("auth.mfaSetup.cantScan", "Can't scan the QR code? Enter this key manually:")
+						}), /* @__PURE__ */ f("code", {
+							className: "block p-3 rounded-lg bg-[var(--color-bg-muted)] text-[var(--color-text-primary)] font-mono text-sm break-all select-all",
+							children: S.secret
+						})] }),
+						S.backupCodes && S.backupCodes.length > 0 && /* @__PURE__ */ p("div", {
+							className: "p-4 rounded-xl bg-[var(--color-status-warning-bg-subtle)] border border-[var(--color-status-warning-border)]",
+							children: [
+								/* @__PURE__ */ p("div", {
+									className: "flex items-start gap-3 mb-3",
+									children: [/* @__PURE__ */ f("svg", {
+										className: "w-5 h-5 text-[var(--color-status-warning-text)] flex-shrink-0 mt-0.5",
+										fill: "none",
+										viewBox: "0 0 24 24",
+										stroke: "currentColor",
+										children: /* @__PURE__ */ f("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+										})
+									}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
+										className: "font-medium text-[var(--color-status-warning-text)]",
+										children: h("auth.mfaSetup.saveBackupCodes", "Save your backup codes")
+									}), /* @__PURE__ */ f("p", {
+										className: "text-sm text-[var(--color-status-warning-text)]",
+										children: h("auth.mfaSetup.storeCodesSafely", "Store these codes safely. You can use them to access your account if you lose your authenticator device.")
+									})] })]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "p-3 rounded-lg bg-[var(--color-bg-surface)] grid grid-cols-2 gap-2 mb-3",
+									children: S.backupCodes.map((e, t) => /* @__PURE__ */ p("code", {
+										className: "text-sm text-[var(--color-text-primary)] font-mono",
+										children: [
+											t + 1,
+											". ",
+											e
+										]
+									}, t))
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: async () => {
+										S?.backupCodes && (s("light"), await o(S.backupCodes.join("\n")) ? (j(!0), c("success"), setTimeout(() => j(!1), 2e3)) : c("error"));
+									},
+									className: "text-sm font-medium text-[var(--color-status-warning-text)] hover:underline transition-colors duration-200",
+									children: A ? h("auth.mfaSetup.copied", "Copied!") : h("auth.mfaSetup.copyBackupCodes", "Copy backup codes")
+								})
+							]
+						}),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
+							children: h("auth.mfaSetup.enterCode", "Enter the 6-digit code from your app")
+						}), /* @__PURE__ */ f("input", {
+							type: "text",
+							inputMode: "numeric",
+							maxLength: 6,
+							value: w,
+							onChange: (e) => T(e.target.value.replace(/\D/g, "")),
+							placeholder: "000000",
+							className: "block w-full px-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-center text-2xl tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300"
+						})] }),
+						/* @__PURE__ */ p("div", {
+							className: "flex gap-3",
+							children: [/* @__PURE__ */ f("button", {
+								onClick: () => {
+									C(null), T(""), D(null);
+								},
+								className: "flex-1 py-3 px-4 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200",
+								children: h("auth.mfaSetup.cancel", "Cancel")
+							}), /* @__PURE__ */ f("button", {
+								onClick: async () => {
+									if (w.length !== 6) {
+										D(h("auth.mfaSetup.enter6Digit", "Please enter a 6-digit code"));
+										return;
+									}
+									try {
+										D(null), await _(w) && (C(null), T(""), k("Two-factor authentication has been enabled successfully!"));
+									} catch (e) {
+										console.error("Failed to verify MFA code:", e), D(e instanceof Error ? e.message : "Invalid verification code. Please try again.");
+									}
+								},
+								disabled: y || w.length !== 6,
+								className: "auth-primary-button flex flex-1 items-center justify-center gap-2 px-4 py-3 font-medium",
+								children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Verifying..." })] }) : h("auth.mfaSetup.enable2fa", "Enable 2FA")
+							})]
+						})
+					]
+				})]
+			}) : /* @__PURE__ */ f("div", {
+				className: "p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm",
+				children: b?.mfaEnabled ? /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-4 mb-6",
+						children: [/* @__PURE__ */ f("div", {
+							className: "w-12 h-12 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center",
+							children: /* @__PURE__ */ f("svg", {
+								className: "w-6 h-6 text-[var(--color-status-success-text)]",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ f("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+								})
+							})
+						}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h2", {
+							className: "text-xl font-semibold text-[var(--color-text-primary)]",
+							children: h("auth.mfaSetup.twoFactorOn", "Two-Factor Authentication is On")
+						}), /* @__PURE__ */ f("p", {
+							className: "text-[var(--color-text-secondary)]",
+							children: h("auth.mfaSetup.protected", "Your account is protected with an authenticator app")
+						})] })]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "mb-6 p-4 rounded-lg bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]",
+						children: /* @__PURE__ */ f("p", {
+							className: "text-sm text-[var(--color-status-success-text)]",
+							children: h("auth.mfaSetup.verificationOnSignIn", "You'll be asked for a verification code from your authenticator app when signing in.")
+						})
+					}),
+					/* @__PURE__ */ f("button", {
+						onClick: () => N(!0),
+						disabled: y,
+						className: "w-full py-3 px-4 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2",
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Disabling..." })] }) : h("auth.mfaSetup.disableTwoFactor", "Disable Two-Factor Authentication")
+					})
+				] }) : /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-4 mb-6",
+						children: [/* @__PURE__ */ f("div", {
+							className: "w-12 h-12 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center",
+							children: /* @__PURE__ */ f("svg", {
+								className: "w-6 h-6 text-[var(--color-text-tertiary)]",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ f("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+								})
+							})
+						}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h2", {
+							className: "text-xl font-semibold text-[var(--color-text-primary)]",
+							children: h("auth.mfaSetup.twoFactorOff", "Two-Factor Authentication is Off")
+						}), /* @__PURE__ */ f("p", {
+							className: "text-[var(--color-text-secondary)]",
+							children: h("auth.mfaSetup.notProtected", "Your account is not protected with 2FA")
+						})] })]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "mb-6 p-4 rounded-lg bg-[var(--color-bg-accent)] border border-[var(--color-border-default)]",
+						children: [/* @__PURE__ */ f("h3", {
+							className: "font-medium text-[var(--color-text-link)] mb-2",
+							children: h("auth.mfaSetup.whyEnable", "Why enable 2FA?")
+						}), /* @__PURE__ */ p("ul", {
+							className: "text-sm text-[var(--color-text-link)] space-y-1",
+							children: [
+								/* @__PURE__ */ f("li", { children: "• Protects your account even if your password is compromised" }),
+								/* @__PURE__ */ f("li", { children: "• Adds a second verification step during sign-in" }),
+								/* @__PURE__ */ f("li", { children: "• Works with popular authenticator apps (Google, Authy, etc.)" })
+							]
+						})]
+					}),
+					/* @__PURE__ */ f("button", {
+						onClick: () => P("TOTP"),
+						disabled: y,
+						className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-medium",
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ f("span", { children: "Setting up..." })] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+							className: "w-5 h-5",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+							})
+						}), /* @__PURE__ */ f("span", { children: h("auth.mfaSetup.enableTwoFactor", "Enable Two-Factor Authentication") })] })
+					})
+				] })
+			})
+		]
+	}) : /* @__PURE__ */ f("div", {
+		className: "max-w-2xl mx-auto p-6",
+		children: /* @__PURE__ */ p("div", {
+			className: "text-center py-16 border-2 border-dashed border-border-default rounded-xl",
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ f(n, { className: "w-8 h-8 text-status-warning-text" })
+				}),
+				/* @__PURE__ */ f("h2", {
+					className: "text-xl font-semibold text-text-primary mb-2",
+					children: h("auth.mfaSetup.authRequired", "Authentication Required")
+				}),
+				/* @__PURE__ */ f("p", {
+					className: "text-text-secondary",
+					children: h("auth.mfaSetup.signInToManage", "Please sign in to manage MFA settings")
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as MfaSetupPage };
+
+//# sourceMappingURL=MfaSetupPage.js.map

package/dist/auth/pages/MfaSetupPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MfaSetupPage.js","names":[],"sources":["../../../src/auth/pages/MfaSetupPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { QRCodeSVG } from \"qrcode.react\";\nimport { useMfaOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\nimport type { MFAMethod, MFASetupResult } from \"../types\";\nimport {\n  nativeCopyText,\n  nativeImpact,\n  nativeNotify,\n} from \"../../utils/nativeBridge\";\n\n/**\n * MFA setup and management page with professional UI\n */\nexport function MfaSetupPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const { setupMFA, enableMFA, disableMFA, isLoading } = useMfaOperations();\n  const user = useAuthStore((state) => state.user);\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const [setupData, setSetupData] = useState<MFASetupResult | null>(null);\n  const [verificationCode, setVerificationCode] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [backupCodesCopied, setBackupCodesCopied] = useState(false);\n  const [showDisableDialog, setShowDisableDialog] = useState(false);\n\n  const handleSetupMfa = async (method: MFAMethod) => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      const data = await setupMFA(method);\n      setSetupData(data);\n    } catch (err) {\n      console.error(\"Failed to setup MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to setup MFA. Please try again.\",\n      );\n    }\n  };\n\n  const handleVerifyAndEnable = async () => {\n    if (verificationCode.length !== 6) {\n      setError(tr(\"auth.mfaSetup.enter6Digit\", \"Please enter a 6-digit code\"));\n      return;\n    }\n\n    try {\n      setError(null);\n      const success = await enableMFA(verificationCode);\n      if (success) {\n        setSetupData(null);\n        setVerificationCode(\"\");\n        setSuccessMessage(\n          \"Two-factor authentication has been enabled successfully!\",\n        );\n      }\n    } catch (err) {\n      console.error(\"Failed to verify MFA code:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Invalid verification code. Please try again.\",\n      );\n    }\n  };\n\n  const handleDisableMfa = async () => {\n    try {\n      setError(null);\n      setSuccessMessage(null);\n      await disableMFA();\n      setSuccessMessage(\"Two-factor authentication has been disabled.\");\n      setShowDisableDialog(false);\n    } catch (err) {\n      console.error(\"Failed to disable MFA:\", err);\n      setError(\n        err instanceof Error\n          ? err.message\n          : \"Failed to disable MFA. Please try again.\",\n      );\n    }\n  };\n\n  const copyBackupCodes = async () => {\n    if (setupData?.backupCodes) {\n      void nativeImpact(\"light\");\n      const ok = await nativeCopyText(setupData.backupCodes.join(\"\\n\"));\n      if (ok) {\n        setBackupCodesCopied(true);\n        void nativeNotify(\"success\");\n        setTimeout(() => setBackupCodesCopied(false), 2000);\n      } else {\n        void nativeNotify(\"error\");\n      }\n    }\n  };\n\n  const cancelSetup = () => {\n    setSetupData(null);\n    setVerificationCode(\"\");\n    setError(null);\n  };\n\n  // Authentication check\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-2xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-default rounded-xl\">\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon className=\"w-8 h-8 text-status-warning-text\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.mfaSetup.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.mfaSetup.signInToManage\",\n              \"Please sign in to manage MFA settings\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={showDisableDialog}\n        onOpenChange={setShowDisableDialog}\n        title=\"Disable two-factor authentication?\"\n        description=\"Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.\"\n        confirmText=\"Disable MFA\"\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleDisableMfa}\n      />\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-3xl font-semibold text-[var(--color-text-primary)]\">\n          {tr(\"auth.mfaSetup.title\", \"Two-Factor Authentication\")}\n        </h1>\n        <p className=\"text-[var(--color-text-secondary)] mt-2\">\n          {tr(\n            \"auth.mfaSetup.subtitle\",\n            \"Add an extra layer of security to your account\",\n          )}\n        </p>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div className=\"mb-6 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n          <div className=\"flex items-center gap-3\">\n            <svg\n              className=\"w-5 h-5 text-[var(--color-status-success-text)]\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n            <p className=\"text-[var(--color-status-success-text)]\">\n              {successMessage}\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n          <AlertIcon className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n            <button\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200\"\n            >\n              {tr(\"auth.mfaSetup.dismiss\", \"Dismiss\")}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {setupData ? (\n        /* Setup Flow */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          <div className=\"flex items-center gap-3 mb-6\">\n            <div className=\"w-10 h-10 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n              <svg\n                className=\"w-5 h-5 text-[var(--color-text-link)]\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                />\n              </svg>\n            </div>\n            <div>\n              <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                {tr(\"auth.mfaSetup.setupAuthApp\", \"Setup Authenticator App\")}\n              </h2>\n              <p className=\"text-sm text-[var(--color-text-secondary)]\">\n                {tr(\n                  \"auth.mfaSetup.scanQr\",\n                  \"Scan the QR code with your authenticator app\",\n                )}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"space-y-6\">\n            {/* QR Code */}\n            {setupData.qrCode && (\n              <div className=\"flex justify-center\">\n                <div className=\"p-4 bg-[var(--color-bg-surface)] rounded-xl border border-[var(--color-border-default)]\">\n                  <QRCodeSVG\n                    value={setupData.qrCode}\n                    size={192}\n                    level=\"M\"\n                    includeMargin={false}\n                    className=\"w-48 h-48\"\n                  />\n                </div>\n              </div>\n            )}\n\n            {/* Manual Secret */}\n            {setupData.secret && (\n              <div>\n                <p className=\"text-sm text-[var(--color-text-secondary)] mb-2\">\n                  {tr(\n                    \"auth.mfaSetup.cantScan\",\n                    \"Can't scan the QR code? Enter this key manually:\",\n                  )}\n                </p>\n                <code className=\"block p-3 rounded-lg bg-[var(--color-bg-muted)] text-[var(--color-text-primary)] font-mono text-sm break-all select-all\">\n                  {setupData.secret}\n                </code>\n              </div>\n            )}\n\n            {/* Backup Codes */}\n            {setupData.backupCodes && setupData.backupCodes.length > 0 && (\n              <div className=\"p-4 rounded-xl bg-[var(--color-status-warning-bg-subtle)] border border-[var(--color-status-warning-border)]\">\n                <div className=\"flex items-start gap-3 mb-3\">\n                  <svg\n                    className=\"w-5 h-5 text-[var(--color-status-warning-text)] flex-shrink-0 mt-0.5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                    />\n                  </svg>\n                  <div>\n                    <h3 className=\"font-medium text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.saveBackupCodes\",\n                        \"Save your backup codes\",\n                      )}\n                    </h3>\n                    <p className=\"text-sm text-[var(--color-status-warning-text)]\">\n                      {tr(\n                        \"auth.mfaSetup.storeCodesSafely\",\n                        \"Store these codes safely. You can use them to access your account if you lose your authenticator device.\",\n                      )}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"p-3 rounded-lg bg-[var(--color-bg-surface)] grid grid-cols-2 gap-2 mb-3\">\n                  {setupData.backupCodes.map((code, i) => (\n                    <code\n                      key={i}\n                      className=\"text-sm text-[var(--color-text-primary)] font-mono\"\n                    >\n                      {i + 1}. {code}\n                    </code>\n                  ))}\n                </div>\n                <button\n                  onClick={copyBackupCodes}\n                  className=\"text-sm font-medium text-[var(--color-status-warning-text)] hover:underline transition-colors duration-200\"\n                >\n                  {backupCodesCopied\n                    ? tr(\"auth.mfaSetup.copied\", \"Copied!\")\n                    : tr(\"auth.mfaSetup.copyBackupCodes\", \"Copy backup codes\")}\n                </button>\n              </div>\n            )}\n\n            {/* Verification Code Input */}\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\">\n                {tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n              </label>\n              <input\n                type=\"text\"\n                inputMode=\"numeric\"\n                maxLength={6}\n                value={verificationCode}\n                onChange={(e) =>\n                  setVerificationCode(e.target.value.replace(/\\D/g, \"\"))\n                }\n                placeholder=\"000000\"\n                className=\"block w-full px-4 py-3 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-center text-2xl tracking-widest font-mono focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n              />\n            </div>\n\n            {/* Action Buttons */}\n            <div className=\"flex gap-3\">\n              <button\n                onClick={cancelSetup}\n                className=\"flex-1 py-3 px-4 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n              >\n                {tr(\"auth.mfaSetup.cancel\", \"Cancel\")}\n              </button>\n              <button\n                onClick={handleVerifyAndEnable}\n                disabled={isLoading || verificationCode.length !== 6}\n                className=\"auth-primary-button flex flex-1 items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Verifying...</span>\n                  </>\n                ) : (\n                  tr(\"auth.mfaSetup.enable2fa\", \"Enable 2FA\")\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      ) : (\n        /* Status Display */\n        <div className=\"p-6 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm\">\n          {!user?.mfaEnabled ? (\n            /* MFA Not Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-text-tertiary)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOff\",\n                      \"Two-Factor Authentication is Off\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.notProtected\",\n                      \"Your account is not protected with 2FA\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-bg-accent)] border border-[var(--color-border-default)]\">\n                <h3 className=\"font-medium text-[var(--color-text-link)] mb-2\">\n                  {tr(\"auth.mfaSetup.whyEnable\", \"Why enable 2FA?\")}\n                </h3>\n                <ul className=\"text-sm text-[var(--color-text-link)] space-y-1\">\n                  <li>\n                    • Protects your account even if your password is compromised\n                  </li>\n                  <li>• Adds a second verification step during sign-in</li>\n                  <li>\n                    • Works with popular authenticator apps (Google, Authy,\n                    etc.)\n                  </li>\n                </ul>\n              </div>\n\n              <button\n                onClick={() => handleSetupMfa(\"TOTP\")}\n                disabled={isLoading}\n                className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-medium\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Setting up...</span>\n                  </>\n                ) : (\n                  <>\n                    <svg\n                      className=\"w-5 h-5\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n                      />\n                    </svg>\n                    <span>\n                      {tr(\n                        \"auth.mfaSetup.enableTwoFactor\",\n                        \"Enable Two-Factor Authentication\",\n                      )}\n                    </span>\n                  </>\n                )}\n              </button>\n            </>\n          ) : (\n            /* MFA Enabled */\n            <>\n              <div className=\"flex items-center gap-4 mb-6\">\n                <div className=\"w-12 h-12 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n                  <svg\n                    className=\"w-6 h-6 text-[var(--color-status-success-text)]\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)]\">\n                    {tr(\n                      \"auth.mfaSetup.twoFactorOn\",\n                      \"Two-Factor Authentication is On\",\n                    )}\n                  </h2>\n                  <p className=\"text-[var(--color-text-secondary)]\">\n                    {tr(\n                      \"auth.mfaSetup.protected\",\n                      \"Your account is protected with an authenticator app\",\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"mb-6 p-4 rounded-lg bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n                <p className=\"text-sm text-[var(--color-status-success-text)]\">\n                  {tr(\n                    \"auth.mfaSetup.verificationOnSignIn\",\n                    \"You'll be asked for a verification code from your authenticator app when signing in.\",\n                  )}\n                </p>\n              </div>\n\n              <button\n                onClick={() => setShowDisableDialog(true)}\n                disabled={isLoading}\n                className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] font-medium bg-[var(--color-bg-surface)] hover:bg-[var(--color-status-error-bg-subtle)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2\"\n              >\n                {isLoading ? (\n                  <>\n                    <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n                    <span>Disabling...</span>\n                  </>\n                ) : (\n                  tr(\n                    \"auth.mfaSetup.disableTwoFactor\",\n                    \"Disable Two-Factor Authentication\",\n                  )\n                )}\n              </button>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/MfaVerifyPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * MFA verification page with professional design
+ * Shown when user needs to verify MFA code during login
+ * Handles both regular login MFA and SSO MFA flows
+ */
+export declare function MfaVerifyPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MfaVerifyPage.d.ts.map

package/dist/auth/pages/MfaVerifyPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MfaVerifyPage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/MfaVerifyPage.tsx"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,wBAAgB,aAAa,4CAgT5B"}

package/dist/auth/pages/MfaVerifyPage.js

@@ -0,0 +1,189 @@
+import { useAuthStore as e } from "../store/authStore.js";
+import { useMfaOperations as t } from "../hooks/useMfaOperations.js";
+import { MFA_CHALLENGE_ID as n, MFA_PENDING_REFRESH as r, MFA_PENDING_TOKEN as i, MFA_REDIRECT as a } from "../constants/sessionKeys.js";
+import "../hooks/index.js";
+import { AuthLayout as o } from "../components/AuthLayout.js";
+import { AlertIcon as s, SpinnerIcon as c } from "../components/AuthIcons.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { useNavigate as f } from "react-router-dom";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/auth/pages/MfaVerifyPage.tsx
+function _() {
+	let { t: _ } = p(), v = (e, t) => {
+		let n = _(e);
+		return n === e ? t : n;
+	}, y = f(), { verifyMFA: b, mfaChallengeId: x, isLoading: S } = t(), [C, w] = d([
+		"",
+		"",
+		"",
+		"",
+		"",
+		""
+	]), [T, E] = d(null), D = u([]), O = typeof window < "u" ? sessionStorage.getItem(n) : null, k = x || O;
+	l(() => {
+		D.current[0]?.focus(), sessionStorage.getItem(i), sessionStorage.getItem(a);
+	}, [O]);
+	let A = (e, t) => {
+		let n = t.replace(/\D/g, "").slice(-1), r = [...C];
+		if (r[e] = n, w(r), n && e < 5 && D.current[e + 1]?.focus(), n && e === 5) {
+			let e = r.join("");
+			e.length === 6 && N(e);
+		}
+	}, j = (e, t) => {
+		t.key === "Backspace" && !C[e] && e > 0 && D.current[e - 1]?.focus();
+	}, M = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6), n = [...C];
+		t.split("").forEach((e, t) => {
+			t < 6 && (n[t] = e);
+		}), w(n);
+		let r = Math.min(t.length - 1, 5);
+		D.current[r]?.focus(), t.length === 6 && N(t);
+	}, N = async (t) => {
+		let o = t || C.join("");
+		if (o.length === 6) {
+			if (E(null), !k) {
+				E(v("auth.mfaVerify.sessionExpired", "MFA session expired. Please log in again."));
+				return;
+			}
+			try {
+				let t = await b({
+					challengeId: k,
+					code: o,
+					method: "TOTP"
+				});
+				if (t.success) {
+					let e = sessionStorage.getItem(a);
+					sessionStorage.removeItem(n), sessionStorage.removeItem(i), sessionStorage.removeItem(r), sessionStorage.removeItem(a), y(e || "/", { replace: !0 });
+				} else {
+					if (t.error === "mfa_challenge_expired") {
+						sessionStorage.removeItem(n), sessionStorage.removeItem(i), sessionStorage.removeItem(r), sessionStorage.removeItem(a), e.getState().setMfaRequired(!1), y("/auth/login", {
+							replace: !0,
+							state: { message: "Your verification session expired. Please sign in again." }
+						});
+						return;
+					}
+					E(t.error || v("auth.mfaVerify.invalidCode", "Invalid verification code")), w([
+						"",
+						"",
+						"",
+						"",
+						"",
+						""
+					]), D.current[0]?.focus();
+				}
+			} catch (t) {
+				if (console.error("MFA verification failed:", t), (t instanceof Error ? t.message : String(t)).includes("mfa_challenge_expired")) {
+					sessionStorage.removeItem(n), sessionStorage.removeItem(i), sessionStorage.removeItem(r), sessionStorage.removeItem(a), e.getState().setMfaRequired(!1), y("/auth/login", {
+						replace: !0,
+						state: { message: "Your verification session expired. Please sign in again." }
+					});
+					return;
+				}
+				E(v("auth.mfaVerify.verificationFailed", "Verification failed. Please try again.")), w([
+					"",
+					"",
+					"",
+					"",
+					"",
+					""
+				]), D.current[0]?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ g(o, {
+		title: v("auth.mfaVerify.title", "Two-factor authentication"),
+		subtitle: v("auth.mfaVerify.subtitle", "Enter the 6-digit code from your authenticator app"),
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "flex justify-center mb-6",
+				children: /* @__PURE__ */ h("div", {
+					className: "w-16 h-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center",
+					children: /* @__PURE__ */ h("svg", {
+						className: "w-8 h-8 text-[var(--color-text-link)]",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ h("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ g("form", {
+				onSubmit: (e) => {
+					e.preventDefault(), N();
+				},
+				className: "space-y-6",
+				children: [
+					T && /* @__PURE__ */ g("div", {
+						className: "flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
+						children: [/* @__PURE__ */ h(s, { className: "w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }), /* @__PURE__ */ h("p", {
+							className: "text-sm text-[var(--color-status-error-text)]",
+							children: T
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ h("label", {
+							className: "block text-sm font-medium text-[var(--color-text-primary)] text-center",
+							children: v("auth.mfaVerify.verificationCode", "Verification Code")
+						}), /* @__PURE__ */ h("div", {
+							className: "flex justify-center gap-2 sm:gap-3",
+							children: C.map((e, t) => /* @__PURE__ */ h("input", {
+								ref: (e) => {
+									D.current[t] = e;
+								},
+								type: "text",
+								inputMode: "numeric",
+								autoComplete: "one-time-code",
+								maxLength: 1,
+								value: e,
+								onChange: (e) => A(t, e.target.value),
+								onKeyDown: (e) => j(t, e),
+								onPaste: M,
+								className: "w-10 h-12 sm:w-12 sm:h-14 text-center text-xl sm:text-2xl font-semibold rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+							}, t))
+						})]
+					}),
+					/* @__PURE__ */ h("button", {
+						type: "submit",
+						disabled: S || C.join("").length !== 6,
+						className: "auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold",
+						children: S ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(c, { className: "w-5 h-5 animate-spin" }), /* @__PURE__ */ h("span", { children: "Verifying..." })] }) : v("auth.mfaVerify.verify", "Verify")
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "text-center space-y-3",
+						children: [/* @__PURE__ */ h("p", {
+							className: "text-sm text-[var(--color-text-secondary)]",
+							children: v("auth.mfaVerify.cantAccess", "Can't access your authenticator app?")
+						}), /* @__PURE__ */ h("button", {
+							type: "button",
+							onClick: () => y("/auth/mfa-recovery"),
+							className: "text-sm font-medium text-text-link hover:text-text-linkHover transition-colors",
+							children: v("auth.mfaVerify.useRecoveryCode", "Use a recovery code")
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ h("p", {
+				className: "mt-8 text-center text-sm text-[var(--color-text-secondary)]",
+				children: /* @__PURE__ */ h("button", {
+					onClick: () => {
+						sessionStorage.removeItem(n), sessionStorage.removeItem(i), sessionStorage.removeItem(r), sessionStorage.removeItem(a), e.getState().setMfaRequired(!1), y("/auth/login");
+					},
+					className: "font-semibold text-text-link hover:text-text-linkHover transition-colors",
+					children: v("auth.mfaVerify.backToSignIn", "Back to sign in")
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { _ as MfaVerifyPage };
+
+//# sourceMappingURL=MfaVerifyPage.js.map