@burdenoff/microfe-auth 2026.527.1 → 2026.527.2

package/dist/auth/pages/MfaSetupPage.js

@@ -1,7 +1,6 @@
 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 { AlertIcon as t, SpinnerIcon as n } from "../components/AuthIcons.js";
+import { useMfaOperations as r } from "../hooks/useMfaOperations.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";
@@ -13,7 +12,7 @@ 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) => {
+	}, { setupMFA: g, enableMFA: _, disableMFA: v, isLoading: y } = r(), 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) {
@@ -54,7 +53,7 @@ function m() {
 				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)]",
+						className: "size-5 text-[var(--color-status-success-text)]",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -72,12 +71,13 @@ function m() {
 			}),
 			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", {
+				children: [/* @__PURE__ */ f(t, { className: "size-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", {
+						type: "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")
@@ -89,9 +89,9 @@ function m() {
 				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",
+						className: "size-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)]",
+							className: "size-5 text-[var(--color-text-link)]",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -121,7 +121,7 @@ function m() {
 									size: 192,
 									level: "M",
 									includeMargin: !1,
-									className: "w-48 h-48"
+									className: "size-48"
 								})
 							})
 						}),
@@ -138,7 +138,7 @@ function m() {
 								/* @__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",
+										className: "size-5 text-[var(--color-status-warning-text)] flex-shrink-0 mt-0.5",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
@@ -165,9 +165,10 @@ function m() {
 											". ",
 											e
 										]
-									}, t))
+									}, e))
 								}),
 								/* @__PURE__ */ f("button", {
+									type: "button",
 									onClick: async () => {
 										S?.backupCodes && (s("light"), await o(S.backupCodes.join("\n")) ? (j(!0), c("success"), setTimeout(() => j(!1), 2e3)) : c("error"));
 									},
@@ -196,12 +197,14 @@ function m() {
 						/* @__PURE__ */ p("div", {
 							className: "flex gap-3",
 							children: [/* @__PURE__ */ f("button", {
+								type: "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", {
+								type: "button",
 								onClick: async () => {
 									if (w.length !== 6) {
 										D(h("auth.mfaSetup.enter6Digit", "Please enter a 6-digit code"));
@@ -215,7 +218,7 @@ function m() {
 								},
 								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: h("auth.mfa.verifying", "Verifying...") })] }) : h("auth.mfaSetup.enable2fa", "Enable 2FA")
+								children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, { className: "size-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.verifying", "Verifying...") })] }) : h("auth.mfaSetup.enable2fa", "Enable 2FA")
 							})]
 						})
 					]
@@ -226,9 +229,9 @@ function m() {
 					/* @__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",
+							className: "size-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)]",
+								className: "size-6 text-[var(--color-status-success-text)]",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
@@ -255,18 +258,19 @@ function m() {
 						})
 					}),
 					/* @__PURE__ */ f("button", {
+						type: "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: h("auth.mfa.disabling", "Disabling...") })] }) : h("auth.mfaSetup.disableTwoFactor", "Disable Two-Factor Authentication")
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, { className: "size-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.disabling", "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",
+							className: "size-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)]",
+								className: "size-6 text-[var(--color-text-tertiary)]",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
@@ -300,11 +304,12 @@ function m() {
 						})]
 					}),
 					/* @__PURE__ */ f("button", {
+						type: "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: h("auth.mfa.settingUp", "Setting up...") })] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
-							className: "w-5 h-5",
+						children: y ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, { className: "size-5 animate-spin" }), /* @__PURE__ */ f("span", { children: h("auth.mfa.settingUp", "Setting up...") })] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+							className: "size-5",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -325,8 +330,8 @@ function m() {
 			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" })
+					className: "size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ f(t, { className: "size-8 text-status-warning-text" })
 				}),
 				/* @__PURE__ */ f("h2", {
 					className: "text-xl font-semibold text-text-primary mb-2",

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

@@ -1 +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          tr(\n            \"auth.mfaSetup.enableSuccess\",\n            \"Two-factor authentication has been enabled successfully!\",\n          ),\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(\n        tr(\n          \"auth.mfaSetup.disableSuccess\",\n          \"Two-factor authentication has been disabled.\",\n        ),\n      );\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={tr(\n          \"auth.mfaSetup.disableTitle\",\n          \"Disable two-factor authentication?\",\n        )}\n        description={tr(\n          \"auth.mfaSetup.disableDesc\",\n          \"Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.\",\n        )}\n        confirmText={tr(\"auth.mfaSetup.disableConfirm\", \"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\n                htmlFor=\"mfa-verification-code\"\n                className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n              >\n                {tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n              </label>\n              <input\n                id=\"mfa-verification-code\"\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={tr(\n                  \"auth.mfa.verificationCodePlaceholder\",\n                  \"000000\",\n                )}\n                aria-label={tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n                aria-required=\"true\"\n                autoComplete=\"one-time-code\"\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>{tr(\"auth.mfa.verifying\", \"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>{tr(\"auth.mfa.settingUp\", \"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>{tr(\"auth.mfa.disabling\", \"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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"}
+{"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/useMfaOperations\";\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          tr(\n            \"auth.mfaSetup.enableSuccess\",\n            \"Two-factor authentication has been enabled successfully!\",\n          ),\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(\n        tr(\n          \"auth.mfaSetup.disableSuccess\",\n          \"Two-factor authentication has been disabled.\",\n        ),\n      );\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=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon className=\"size-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={tr(\n          \"auth.mfaSetup.disableTitle\",\n          \"Disable two-factor authentication?\",\n        )}\n        description={tr(\n          \"auth.mfaSetup.disableDesc\",\n          \"Your account will become less secure and future sign-ins will only require your password until MFA is re-enabled.\",\n        )}\n        confirmText={tr(\"auth.mfaSetup.disableConfirm\", \"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=\"size-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=\"size-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 type=\"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=\"size-10 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n              <svg\n                className=\"size-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=\"size-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=\"size-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={code}\n                      className=\"text-sm text-[var(--color-text-primary)] font-mono\"\n                    >\n                      {i + 1}. {code}\n                    </code>\n                  ))}\n                </div>\n                <button type=\"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\n                htmlFor=\"mfa-verification-code\"\n                className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n              >\n                {tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n              </label>\n              <input\n                id=\"mfa-verification-code\"\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={tr(\n                  \"auth.mfa.verificationCodePlaceholder\",\n                  \"000000\",\n                )}\n                aria-label={tr(\n                  \"auth.mfaSetup.enterCode\",\n                  \"Enter the 6-digit code from your app\",\n                )}\n                aria-required=\"true\"\n                autoComplete=\"one-time-code\"\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 type=\"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 type=\"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=\"size-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.verifying\", \"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=\"size-12 rounded-full bg-[var(--color-bg-muted)] flex items-center justify-center\">\n                  <svg\n                    className=\"size-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 type=\"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=\"size-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.settingUp\", \"Setting up...\")}</span>\n                  </>\n                ) : (\n                  <>\n                    <svg\n                      className=\"size-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=\"size-12 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center\">\n                  <svg\n                    className=\"size-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 type=\"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=\"size-5 animate-spin\" />\n                    <span>{tr(\"auth.mfa.disabling\", \"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":";;;;;;;;;;AAiBA,SAAgB,IAAe;CAC7B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,EAAE,aAAU,cAAW,eAAY,iBAAc,GAAkB,EACnE,IAAO,GAAc,MAAU,EAAM,KAAK,EAC1C,IAAkB,GAAc,MAAU,EAAM,gBAAgB,EAChE,CAAC,GAAW,KAAgB,EAAgC,KAAK,EACjE,CAAC,GAAkB,KAAuB,EAAS,GAAG,EACtD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EACnE,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAE3D,IAAiB,OAAO,MAAsB;AAClD,MAAI;AAIF,GAHA,EAAS,KAAK,EACd,EAAkB,KAAK,EAEvB,EADa,MAAM,EAAS,EAAO,CACjB;WACX,GAAK;AAEZ,GADA,QAAQ,MAAM,wBAAwB,EAAI,EAC1C,EACE,aAAe,QACX,EAAI,UACJ,yCACL;;;AAiGL,QArBK,IAsBH,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAM;IACN,cAAc;IACd,OAAO,EACL,8BACA,qCACD;IACD,aAAa,EACX,6BACA,oHACD;IACD,aAAa,EAAG,gCAAgC,cAAc;IAC9D,SAAQ;IACR,WAAW;IACX,WAhFmB,YAAY;AACnC,SAAI;AAUF,MATA,EAAS,KAAK,EACd,EAAkB,KAAK,EACvB,MAAM,GAAY,EAClB,EACE,EACE,gCACA,+CACD,CACF,EACD,EAAqB,GAAM;cACpB,GAAK;AAEZ,MADA,QAAQ,MAAM,0BAA0B,EAAI,EAC5C,EACE,aAAe,QACX,EAAI,UACJ,2CACL;;;IA+DC,CAAA;GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,uBAAuB,4BAA4B;KACpD,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,0BACA,iDACD;KACC,CAAA,CACA;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;gBAEP,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA,EACN,kBAAC,KAAD;MAAG,WAAU;gBACV;MACC,CAAA,CACA;;IACF,CAAA;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAW,WAAU,qEAAsE,CAAA,EAC3F,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBACV;MACC,CAAA,EACJ,kBAAC,UAAD;MAAQ,MAAK;MACX,eAAe,EAAS,KAAK;MAC7B,WAAU;gBAET,EAAG,yBAAyB,UAAU;MAChC,CAAA,CACL;OACF;;GAGP,IAEC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA;MACF,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8BAA8B,0BAA0B;MACzD,CAAA,EACL,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,wBACA,+CACD;MACC,CAAA,CACA,EAAA,CAAA,CACF;QAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEG,EAAU,UACT,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SACE,OAAO,EAAU;SACjB,MAAM;SACN,OAAM;SACN,eAAe;SACf,WAAU;SACV,CAAA;QACE,CAAA;OACF,CAAA;MAIP,EAAU,UACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,0BACA,mDACD;OACC,CAAA,EACJ,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAU;OACN,CAAA,CACH,EAAA,CAAA;MAIP,EAAU,eAAe,EAAU,YAAY,SAAS,KACvD,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UACE,WAAU;UACV,MAAK;UACL,SAAQ;UACR,QAAO;oBAEP,kBAAC,QAAD;WACE,eAAc;WACd,gBAAe;WACf,aAAa;WACb,GAAE;WACF,CAAA;UACE,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EACC,iCACA,yBACD;UACE,CAAA,EACL,kBAAC,KAAD;UAAG,WAAU;oBACV,EACC,kCACA,2GACD;UACC,CAAA,CACA,EAAA,CAAA,CACF;;QACN,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAU,YAAY,KAAK,GAAM,MAChC,kBAAC,QAAD;UAEE,WAAU;oBAFZ;WAIG,IAAI;WAAE;WAAG;WACL;YAJA,EAIA,CACP;SACE,CAAA;QACN,kBAAC,UAAD;SAAQ,MAAK;SACX,SA7NQ,YAAY;AAClC,UAAI,GAAW,gBACR,EAAa,QAAQ,EACf,MAAM,EAAe,EAAU,YAAY,KAAK,KAAK,CAAC,IAE/D,EAAqB,GAAK,EACrB,EAAa,UAAU,EAC5B,iBAAiB,EAAqB,GAAM,EAAE,IAAK,IAE9C,EAAa,QAAQ;;SAqNhB,WAAU;mBAET,IACG,EAAG,wBAAwB,UAAU,GACrC,EAAG,iCAAiC,oBAAoB;SACrD,CAAA;QACL;;MAIR,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OACE,SAAQ;OACR,WAAU;iBAET,EACC,2BACA,uCACD;OACK,CAAA,EACR,kBAAC,SAAD;OACE,IAAG;OACH,MAAK;OACL,WAAU;OACV,WAAW;OACX,OAAO;OACP,WAAW,MACT,EAAoB,EAAE,OAAO,MAAM,QAAQ,OAAO,GAAG,CAAC;OAExD,aAAa,EACX,wCACA,SACD;OACD,cAAY,EACV,2BACA,uCACD;OACD,iBAAc;OACd,cAAa;OACb,WAAU;OACV,CAAA,CACE,EAAA,CAAA;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QAAQ,MAAK;QACX,eA9PY;AAGxB,SAFA,EAAa,KAAK,EAClB,EAAoB,GAAG,EACvB,EAAS,KAAK;;QA4PF,WAAU;kBAET,EAAG,wBAAwB,SAAS;QAC9B,CAAA,EACT,kBAAC,UAAD;QAAQ,MAAK;QACX,SArUgB,YAAY;AACxC,aAAI,EAAiB,WAAW,GAAG;AACjC,YAAS,EAAG,6BAA6B,8BAA8B,CAAC;AACxE;;AAGF,aAAI;AAGF,UAFA,EAAS,KAAK,EACE,MAAM,EAAU,EAAiB,KAE/C,EAAa,KAAK,EAClB,EAAoB,GAAG,EACvB,EACE,EACE,+BACA,2DACD,CACF;kBAEI,GAAK;AAEZ,UADA,QAAQ,MAAM,8BAA8B,EAAI,EAChD,EACE,aAAe,QACX,EAAI,UACJ,+CACL;;;QA6SS,UAAU,KAAa,EAAiB,WAAW;QACnD,WAAU;kBAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,WAAU,uBAAwB,CAAA,EAC/C,kBAAC,QAAD,EAAA,UAAO,EAAG,sBAAsB,eAAe,EAAQ,CAAA,CACtD,EAAA,CAAA,GAEH,EAAG,2BAA2B,aAAa;QAEtC,CAAA,CACL;;MACF;OACF;QAGN,kBAAC,OAAD;IAAK,WAAU;cACX,GAAM,aAwFN,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QACE,WAAU;QACV,MAAK;QACL,SAAQ;QACR,QAAO;kBAEP,kBAAC,QAAD;SACE,eAAc;SACd,gBAAe;SACf,aAAa;SACb,GAAE;SACF,CAAA;QACE,CAAA;OACF,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EACC,6BACA,kCACD;OACE,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,2BACA,sDACD;OACC,CAAA,CACA,EAAA,CAAA,CACF;;KAEN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,sCACA,uFACD;OACC,CAAA;MACA,CAAA;KAEN,kBAAC,UAAD;MAAQ,MAAK;MACX,eAAe,EAAqB,GAAK;MACzC,UAAU;MACV,WAAU;gBAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,WAAU,uBAAwB,CAAA,EAC/C,kBAAC,QAAD,EAAA,UAAO,EAAG,sBAAsB,eAAe,EAAQ,CAAA,CACtD,EAAA,CAAA,GAEH,EACE,kCACA,oCACD;MAEI,CAAA;KACR,EAAA,CAAA,GAjJH,kBAAA,GAAA,EAAA,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QACE,WAAU;QACV,MAAK;QACL,SAAQ;QACR,QAAO;kBAEP,kBAAC,QAAD;SACE,eAAc;SACd,gBAAe;SACf,aAAa;SACb,GAAE;SACF,CAAA;QACE,CAAA;OACF,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EACC,8BACA,mCACD;OACE,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,8BACA,yCACD;OACC,CAAA,CACA,EAAA,CAAA,CACF;;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,2BAA2B,kBAAkB;OAC9C,CAAA,EACL,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACE,kBAAC,MAAD,EAAA,UAAI,gEAEC,CAAA;QACL,kBAAC,MAAD,EAAA,UAAI,oDAAqD,CAAA;QACzD,kBAAC,MAAD,EAAA,UAAI,iEAGC,CAAA;QACF;SACD;;KAEN,kBAAC,UAAD;MAAQ,MAAK;MACX,eAAe,EAAe,OAAO;MACrC,UAAU;MACV,WAAU;gBAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,WAAU,uBAAwB,CAAA,EAC/C,kBAAC,QAAD,EAAA,UAAO,EAAG,sBAAsB,gBAAgB,EAAQ,CAAA,CACvD,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;iBAEP,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA,EACN,kBAAC,QAAD,EAAA,UACG,EACC,iCACA,mCACD,EACI,CAAA,CACN,EAAA,CAAA;MAEE,CAAA;KACR,EAAA,CAAA;IAgED,CAAA;GAEJ;MAraJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,mCAAoC,CAAA;KACrD,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,0BAA0B;KACzD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,gCACA,wCACD;KACC,CAAA;IACA;;EACF,CAAA"}

package/dist/auth/pages/MfaVerifyPage.js

@@ -1,9 +1,8 @@
 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 { AuthLayout as t } from "../components/AuthLayout.js";
+import { AlertIcon as n, SpinnerIcon as r } from "../components/AuthIcons.js";
+import { useMfaOperations as i } from "../hooks/useMfaOperations.js";
+import { MFA_CHALLENGE_ID as a, MFA_PENDING_REFRESH as o, MFA_PENDING_TOKEN as s, MFA_REDIRECT as c } from "../constants/sessionKeys.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";
@@ -13,16 +12,16 @@ 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([
+	}, y = f(), { verifyMFA: b, mfaChallengeId: x, isLoading: S } = i(), [C, w] = d([
 		"",
 		"",
 		"",
 		"",
 		"",
 		""
-	]), [T, E] = d(null), D = u([]), O = typeof window < "u" ? sessionStorage.getItem(n) : null, k = x || O;
+	]), [T, E] = d(null), D = u([]), O = typeof window < "u" ? sessionStorage.getItem(a) : null, k = x || O;
 	l(() => {
-		D.current[0]?.focus(), sessionStorage.getItem(i), sessionStorage.getItem(a);
+		D.current[0]?.focus(), sessionStorage.getItem(s), sessionStorage.getItem(c);
 	}, [O]);
 	let A = (e, t) => {
 		let n = t.replace(/\D/g, "").slice(-1), r = [...C];
@@ -41,8 +40,8 @@ function _() {
 		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) {
+		let n = t || C.join("");
+		if (n.length === 6) {
 			if (E(null), !k) {
 				E(v("auth.mfaVerify.sessionExpired", "MFA session expired. Please log in again."));
 				return;
@@ -50,15 +49,15 @@ function _() {
 			try {
 				let t = await b({
 					challengeId: k,
-					code: o,
+					code: n,
 					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 });
+					let e = sessionStorage.getItem(c);
+					sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), 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", {
+						sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), e.getState().setMfaRequired(!1), y("/auth/login", {
 							replace: !0,
 							state: { message: "Your verification session expired. Please sign in again." }
 						});
@@ -75,7 +74,7 @@ function _() {
 				}
 			} 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", {
+					sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), e.getState().setMfaRequired(!1), y("/auth/login", {
 						replace: !0,
 						state: { message: "Your verification session expired. Please sign in again." }
 					});
@@ -92,16 +91,16 @@ function _() {
 			}
 		}
 	};
-	return /* @__PURE__ */ g(o, {
+	return /* @__PURE__ */ g(t, {
 		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",
+					className: "size-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)]",
+						className: "size-8 text-[var(--color-text-link)]",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -122,7 +121,7 @@ function _() {
 				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", {
+						children: [/* @__PURE__ */ h(n, { className: "size-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
 						})]
@@ -154,7 +153,7 @@ function _() {
 						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")
+						children: S ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(r, { className: "size-5 animate-spin" }), /* @__PURE__ */ h("span", { children: "Verifying…" })] }) : v("auth.mfaVerify.verify", "Verify")
 					}),
 					/* @__PURE__ */ g("div", {
 						className: "text-center space-y-3",
@@ -173,8 +172,9 @@ function _() {
 			/* @__PURE__ */ h("p", {
 				className: "mt-8 text-center text-sm text-[var(--color-text-secondary)]",
 				children: /* @__PURE__ */ h("button", {
+					type: "button",
 					onClick: () => {
-						sessionStorage.removeItem(n), sessionStorage.removeItem(i), sessionStorage.removeItem(r), sessionStorage.removeItem(a), e.getState().setMfaRequired(!1), y("/auth/login");
+						sessionStorage.removeItem(a), sessionStorage.removeItem(s), sessionStorage.removeItem(o), sessionStorage.removeItem(c), 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")

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

@@ -1 +1 @@
-{"version":3,"file":"MfaVerifyPage.js","names":[],"sources":["../../../src/auth/pages/MfaVerifyPage.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useMfaOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  MFA_CHALLENGE_ID,\n  MFA_PENDING_TOKEN,\n  MFA_PENDING_REFRESH,\n  MFA_REDIRECT,\n} from \"../constants/sessionKeys\";\n\n/**\n * MFA verification page with professional design\n * Shown when user needs to verify MFA code during login\n * Handles both regular login MFA and SSO MFA flows\n */\nexport function MfaVerifyPage() {\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 navigate = useNavigate();\n  const {\n    verifyMFA,\n    mfaChallengeId: storeChallengeId,\n    isLoading,\n  } = useMfaOperations();\n  const [code, setCode] = useState([\"\", \"\", \"\", \"\", \"\", \"\"]);\n  const [error, setError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n  // Get challenge ID from store or sessionStorage (SSO flow)\n  const sessionChallengeId =\n    typeof window !== \"undefined\"\n      ? sessionStorage.getItem(MFA_CHALLENGE_ID)\n      : null;\n  const mfaChallengeId = storeChallengeId || sessionChallengeId;\n\n  // Focus first input on mount and detect SSO flow\n  useEffect(() => {\n    inputRefs.current[0]?.focus();\n\n    // Check if this is an SSO flow (has pending tokens in sessionStorage)\n    const hasPendingToken = sessionStorage.getItem(MFA_PENDING_TOKEN);\n    const hasRedirect = sessionStorage.getItem(MFA_REDIRECT);\n    if (hasPendingToken || hasRedirect || sessionChallengeId) {\n    }\n  }, [sessionChallengeId]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow digits\n    const digit = value.replace(/\\D/g, \"\").slice(-1);\n\n    const newCode = [...code];\n    newCode[index] = digit;\n    setCode(newCode);\n\n    // Auto-focus next input\n    if (digit && index < 5) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    // Auto-submit when all digits are entered\n    if (digit && index === 5) {\n      const fullCode = newCode.join(\"\");\n      if (fullCode.length === 6) {\n        handleSubmit(fullCode);\n      }\n    }\n  };\n\n  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {\n    if (e.key === \"Backspace\" && !code[index] && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent) => {\n    e.preventDefault();\n    const pastedData = e.clipboardData\n      .getData(\"text\")\n      .replace(/\\D/g, \"\")\n      .slice(0, 6);\n    const newCode = [...code];\n    pastedData.split(\"\").forEach((char, i) => {\n      if (i < 6) newCode[i] = char;\n    });\n    setCode(newCode);\n\n    // Focus last filled input or first empty\n    const lastIndex = Math.min(pastedData.length - 1, 5);\n    inputRefs.current[lastIndex]?.focus();\n\n    // Auto-submit if full code pasted\n    if (pastedData.length === 6) {\n      handleSubmit(pastedData);\n    }\n  };\n\n  const handleSubmit = async (fullCode?: string) => {\n    const codeToSubmit = fullCode || code.join(\"\");\n    if (codeToSubmit.length !== 6) return;\n\n    setError(null);\n\n    if (!mfaChallengeId) {\n      setError(\n        tr(\n          \"auth.mfaVerify.sessionExpired\",\n          \"MFA session expired. Please log in again.\",\n        ),\n      );\n      return;\n    }\n\n    try {\n      const result = await verifyMFA({\n        challengeId: mfaChallengeId,\n        code: codeToSubmit,\n        method: \"TOTP\",\n      });\n\n      if (result.success) {\n        // Clean up SSO session data\n        const ssoRedirect = sessionStorage.getItem(MFA_REDIRECT);\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n\n        // Redirect to SSO redirect URL or default to dashboard\n        const redirectUrl = ssoRedirect || \"/\";\n        navigate(redirectUrl, { replace: true });\n      } else {\n        // Handle expired challenge - redirect to login\n        if (result.error === \"mfa_challenge_expired\") {\n          // Clear all MFA state\n          sessionStorage.removeItem(MFA_CHALLENGE_ID);\n          sessionStorage.removeItem(MFA_PENDING_TOKEN);\n          sessionStorage.removeItem(MFA_PENDING_REFRESH);\n          sessionStorage.removeItem(MFA_REDIRECT);\n          useAuthStore.getState().setMfaRequired(false);\n\n          // Redirect to login with message\n          navigate(\"/auth/login\", {\n            replace: true,\n            state: {\n              message:\n                \"Your verification session expired. Please sign in again.\",\n            },\n          });\n          return;\n        }\n\n        setError(\n          result.error ||\n            tr(\"auth.mfaVerify.invalidCode\", \"Invalid verification code\"),\n        );\n        setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n        inputRefs.current[0]?.focus();\n      }\n    } catch (err) {\n      console.error(\"MFA verification failed:\", err);\n\n      // Check if the error is about expired challenge\n      const errorMessage = err instanceof Error ? err.message : String(err);\n      if (errorMessage.includes(\"mfa_challenge_expired\")) {\n        // Clear all MFA state\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n        useAuthStore.getState().setMfaRequired(false);\n\n        // Redirect to login with message\n        navigate(\"/auth/login\", {\n          replace: true,\n          state: {\n            message: \"Your verification session expired. Please sign in again.\",\n          },\n        });\n        return;\n      }\n\n      setError(\n        tr(\n          \"auth.mfaVerify.verificationFailed\",\n          \"Verification failed. Please try again.\",\n        ),\n      );\n      setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n      inputRefs.current[0]?.focus();\n    }\n  };\n\n  return (\n    <AuthLayout\n      title={tr(\"auth.mfaVerify.title\", \"Two-factor authentication\")}\n      subtitle={tr(\n        \"auth.mfaVerify.subtitle\",\n        \"Enter the 6-digit code from your authenticator app\",\n      )}\n    >\n      {/* Shield Icon */}\n      <div className=\"flex justify-center mb-6\">\n        <div className=\"w-16 h-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n          <svg\n            className=\"w-8 h-8 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=\"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\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          handleSubmit();\n        }}\n        className=\"space-y-6\"\n      >\n        {/* Error Alert */}\n        {error && (\n          <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)]\">\n            <AlertIcon className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n        )}\n\n        {/* Code Input */}\n        <div className=\"space-y-2\">\n          <label className=\"block text-sm font-medium text-[var(--color-text-primary)] text-center\">\n            {tr(\"auth.mfaVerify.verificationCode\", \"Verification Code\")}\n          </label>\n          <div className=\"flex justify-center gap-2 sm:gap-3\">\n            {code.map((digit, index) => (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type=\"text\"\n                inputMode=\"numeric\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={digit}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                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\"\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Submit Button */}\n        <button\n          type=\"submit\"\n          disabled={isLoading || code.join(\"\").length !== 6}\n          className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n        >\n          {isLoading ? (\n            <>\n              <SpinnerIcon className=\"w-5 h-5 animate-spin\" />\n              <span>Verifying...</span>\n            </>\n          ) : (\n            tr(\"auth.mfaVerify.verify\", \"Verify\")\n          )}\n        </button>\n\n        {/* Recovery Options */}\n        <div className=\"text-center space-y-3\">\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\n              \"auth.mfaVerify.cantAccess\",\n              \"Can't access your authenticator app?\",\n            )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/mfa-recovery\")}\n            className=\"text-sm font-medium text-text-link hover:text-text-linkHover transition-colors\"\n          >\n            {tr(\"auth.mfaVerify.useRecoveryCode\", \"Use a recovery code\")}\n          </button>\n        </div>\n      </form>\n\n      {/* Back to Login */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        <button\n          onClick={() => {\n            // Clear MFA state so LoginPage doesn't immediately redirect back here\n            sessionStorage.removeItem(MFA_CHALLENGE_ID);\n            sessionStorage.removeItem(MFA_PENDING_TOKEN);\n            sessionStorage.removeItem(MFA_PENDING_REFRESH);\n            sessionStorage.removeItem(MFA_REDIRECT);\n            useAuthStore.getState().setMfaRequired(false);\n            navigate(\"/auth/login\");\n          }}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.mfaVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MfaVerifyPage.js","names":[],"sources":["../../../src/auth/pages/MfaVerifyPage.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useMfaOperations } from \"../hooks/useMfaOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  MFA_CHALLENGE_ID,\n  MFA_PENDING_TOKEN,\n  MFA_PENDING_REFRESH,\n  MFA_REDIRECT,\n} from \"../constants/sessionKeys\";\n\n/**\n * MFA verification page with professional design\n * Shown when user needs to verify MFA code during login\n * Handles both regular login MFA and SSO MFA flows\n */\nexport function MfaVerifyPage() {\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 navigate = useNavigate();\n  const {\n    verifyMFA,\n    mfaChallengeId: storeChallengeId,\n    isLoading,\n  } = useMfaOperations();\n  const [code, setCode] = useState([\"\", \"\", \"\", \"\", \"\", \"\"]);\n  const [error, setError] = useState<string | null>(null);\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n  // Get challenge ID from store or sessionStorage (SSO flow)\n  const sessionChallengeId =\n    typeof window !== \"undefined\"\n      ? sessionStorage.getItem(MFA_CHALLENGE_ID)\n      : null;\n  const mfaChallengeId = storeChallengeId || sessionChallengeId;\n\n  // Focus first input on mount and detect SSO flow\n  useEffect(() => {\n    inputRefs.current[0]?.focus();\n\n    // Check if this is an SSO flow (has pending tokens in sessionStorage)\n    const hasPendingToken = sessionStorage.getItem(MFA_PENDING_TOKEN);\n    const hasRedirect = sessionStorage.getItem(MFA_REDIRECT);\n    if (hasPendingToken || hasRedirect || sessionChallengeId) {\n    }\n  }, [sessionChallengeId]);\n\n  const handleChange = (index: number, value: string) => {\n    // Only allow digits\n    const digit = value.replace(/\\D/g, \"\").slice(-1);\n\n    const newCode = [...code];\n    newCode[index] = digit;\n    setCode(newCode);\n\n    // Auto-focus next input\n    if (digit && index < 5) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    // Auto-submit when all digits are entered\n    if (digit && index === 5) {\n      const fullCode = newCode.join(\"\");\n      if (fullCode.length === 6) {\n        handleSubmit(fullCode);\n      }\n    }\n  };\n\n  const handleKeyDown = (index: number, e: React.KeyboardEvent) => {\n    if (e.key === \"Backspace\" && !code[index] && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: React.ClipboardEvent) => {\n    e.preventDefault();\n    const pastedData = e.clipboardData\n      .getData(\"text\")\n      .replace(/\\D/g, \"\")\n      .slice(0, 6);\n    const newCode = [...code];\n    pastedData.split(\"\").forEach((char, i) => {\n      if (i < 6) newCode[i] = char;\n    });\n    setCode(newCode);\n\n    // Focus last filled input or first empty\n    const lastIndex = Math.min(pastedData.length - 1, 5);\n    inputRefs.current[lastIndex]?.focus();\n\n    // Auto-submit if full code pasted\n    if (pastedData.length === 6) {\n      handleSubmit(pastedData);\n    }\n  };\n\n  const handleSubmit = async (fullCode?: string) => {\n    const codeToSubmit = fullCode || code.join(\"\");\n    if (codeToSubmit.length !== 6) return;\n\n    setError(null);\n\n    if (!mfaChallengeId) {\n      setError(\n        tr(\n          \"auth.mfaVerify.sessionExpired\",\n          \"MFA session expired. Please log in again.\",\n        ),\n      );\n      return;\n    }\n\n    try {\n      const result = await verifyMFA({\n        challengeId: mfaChallengeId,\n        code: codeToSubmit,\n        method: \"TOTP\",\n      });\n\n      if (result.success) {\n        // Clean up SSO session data\n        const ssoRedirect = sessionStorage.getItem(MFA_REDIRECT);\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n\n        // Redirect to SSO redirect URL or default to dashboard\n        const redirectUrl = ssoRedirect || \"/\";\n        navigate(redirectUrl, { replace: true });\n      } else {\n        // Handle expired challenge - redirect to login\n        if (result.error === \"mfa_challenge_expired\") {\n          // Clear all MFA state\n          sessionStorage.removeItem(MFA_CHALLENGE_ID);\n          sessionStorage.removeItem(MFA_PENDING_TOKEN);\n          sessionStorage.removeItem(MFA_PENDING_REFRESH);\n          sessionStorage.removeItem(MFA_REDIRECT);\n          useAuthStore.getState().setMfaRequired(false);\n\n          // Redirect to login with message\n          navigate(\"/auth/login\", {\n            replace: true,\n            state: {\n              message:\n                \"Your verification session expired. Please sign in again.\",\n            },\n          });\n          return;\n        }\n\n        setError(\n          result.error ||\n            tr(\"auth.mfaVerify.invalidCode\", \"Invalid verification code\"),\n        );\n        setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n        inputRefs.current[0]?.focus();\n      }\n    } catch (err) {\n      console.error(\"MFA verification failed:\", err);\n\n      // Check if the error is about expired challenge\n      const errorMessage = err instanceof Error ? err.message : String(err);\n      if (errorMessage.includes(\"mfa_challenge_expired\")) {\n        // Clear all MFA state\n        sessionStorage.removeItem(MFA_CHALLENGE_ID);\n        sessionStorage.removeItem(MFA_PENDING_TOKEN);\n        sessionStorage.removeItem(MFA_PENDING_REFRESH);\n        sessionStorage.removeItem(MFA_REDIRECT);\n        useAuthStore.getState().setMfaRequired(false);\n\n        // Redirect to login with message\n        navigate(\"/auth/login\", {\n          replace: true,\n          state: {\n            message: \"Your verification session expired. Please sign in again.\",\n          },\n        });\n        return;\n      }\n\n      setError(\n        tr(\n          \"auth.mfaVerify.verificationFailed\",\n          \"Verification failed. Please try again.\",\n        ),\n      );\n      setCode([\"\", \"\", \"\", \"\", \"\", \"\"]);\n      inputRefs.current[0]?.focus();\n    }\n  };\n\n  return (\n    <AuthLayout\n      title={tr(\"auth.mfaVerify.title\", \"Two-factor authentication\")}\n      subtitle={tr(\n        \"auth.mfaVerify.subtitle\",\n        \"Enter the 6-digit code from your authenticator app\",\n      )}\n    >\n      {/* Shield Icon */}\n      <div className=\"flex justify-center mb-6\">\n        <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center\">\n          <svg\n            className=\"size-8 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=\"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\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          handleSubmit();\n        }}\n        className=\"space-y-6\"\n      >\n        {/* Error Alert */}\n        {error && (\n          <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)]\">\n            <AlertIcon className=\"size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n        )}\n\n        {/* Code Input */}\n        <div className=\"space-y-2\">\n          <label className=\"block text-sm font-medium text-[var(--color-text-primary)] text-center\">\n            {tr(\"auth.mfaVerify.verificationCode\", \"Verification Code\")}\n          </label>\n          <div className=\"flex justify-center gap-2 sm:gap-3\">\n            {code.map((digit, index) => (\n              <input\n                key={index}\n                ref={(el) => {\n                  inputRefs.current[index] = el;\n                }}\n                type=\"text\"\n                inputMode=\"numeric\"\n                autoComplete=\"one-time-code\"\n                maxLength={1}\n                value={digit}\n                onChange={(e) => handleChange(index, e.target.value)}\n                onKeyDown={(e) => handleKeyDown(index, e)}\n                onPaste={handlePaste}\n                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\"\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Submit Button */}\n        <button\n          type=\"submit\"\n          disabled={isLoading || code.join(\"\").length !== 6}\n          className=\"auth-primary-button flex w-full items-center justify-center gap-2 px-4 py-3 font-semibold\"\n        >\n          {isLoading ? (\n            <>\n              <SpinnerIcon className=\"size-5 animate-spin\" />\n              <span>Verifying…</span>\n            </>\n          ) : (\n            tr(\"auth.mfaVerify.verify\", \"Verify\")\n          )}\n        </button>\n\n        {/* Recovery Options */}\n        <div className=\"text-center space-y-3\">\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\n              \"auth.mfaVerify.cantAccess\",\n              \"Can't access your authenticator app?\",\n            )}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/mfa-recovery\")}\n            className=\"text-sm font-medium text-text-link hover:text-text-linkHover transition-colors\"\n          >\n            {tr(\"auth.mfaVerify.useRecoveryCode\", \"Use a recovery code\")}\n          </button>\n        </div>\n      </form>\n\n      {/* Back to Login */}\n      <p className=\"mt-8 text-center text-sm text-[var(--color-text-secondary)]\">\n        <button type=\"button\"\n          onClick={() => {\n            // Clear MFA state so LoginPage doesn't immediately redirect back here\n            sessionStorage.removeItem(MFA_CHALLENGE_ID);\n            sessionStorage.removeItem(MFA_PENDING_TOKEN);\n            sessionStorage.removeItem(MFA_PENDING_REFRESH);\n            sessionStorage.removeItem(MFA_REDIRECT);\n            useAuthStore.getState().setMfaRequired(false);\n            navigate(\"/auth/login\");\n          }}\n          className=\"font-semibold text-text-link hover:text-text-linkHover transition-colors\"\n        >\n          {tr(\"auth.mfaVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </p>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/OAuthCallbackPage.js

@@ -49,8 +49,8 @@ function m() {
 				y === "loading" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 					className: "relative",
 					children: /* @__PURE__ */ f("div", {
-						className: "w-16 h-16 rounded-full bg-status-info-bg-subtle flex items-center justify-center",
-						children: /* @__PURE__ */ f(i, { className: "w-8 h-8 text-text-link animate-spin" })
+						className: "size-16 rounded-full bg-status-info-bg-subtle flex items-center justify-center",
+						children: /* @__PURE__ */ f(i, { className: "size-8 text-text-link animate-spin" })
 					})
 				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
@@ -59,8 +59,8 @@ function m() {
 				y === "success" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 					className: "relative",
 					children: /* @__PURE__ */ f("div", {
-						className: "w-16 h-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center",
-						children: /* @__PURE__ */ f(r, { className: "w-8 h-8 text-status-success-text" })
+						className: "size-16 rounded-full bg-status-success-bg-subtle flex items-center justify-center",
+						children: /* @__PURE__ */ f(r, { className: "size-8 text-status-success-text" })
 					})
 				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
@@ -70,8 +70,8 @@ function m() {
 					/* @__PURE__ */ f("div", {
 						className: "relative",
 						children: /* @__PURE__ */ f("div", {
-							className: "w-16 h-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-							children: /* @__PURE__ */ f(n, { className: "w-8 h-8 text-status-error-text" })
+							className: "size-16 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+							children: /* @__PURE__ */ f(n, { className: "size-8 text-status-error-text" })
 						})
 					}),
 					/* @__PURE__ */ p("div", {
@@ -85,6 +85,7 @@ function m() {
 						})]
 					}),
 					/* @__PURE__ */ f("button", {
+						type: "button",
 						onClick: () => g("/auth/login", { replace: !0 }),
 						className: "px-6 py-2.5 rounded-xl bg-[var(--color-action-primary-bg)] text-white font-medium hover:bg-[var(--color-action-primary-bgHover)] transition-colors",
 						children: h("auth.oauthCallback.backToLogin", "Back to Login")