@burdenoff/microfe-auth 2026.624.2 → 2026.625.1

package/dist/auth/pages/MfaSetupPage.js

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