@burdenoff/microfe-auth 2026.527.1 → 2026.527.3

package/dist/auth/pages/MagicLinkPage.js

@@ -3,18 +3,18 @@ import { useAuthStore as t } from "../store/authStore.js";
 import { AuthenticateMagicLinkDocument as n, SendMagicLinkDocument as r } from "../../generated/global-operations.js";
 import { AuthLayout as i } from "../components/AuthLayout.js";
 import { AlertIcon as a, CheckIcon as o, EmailIcon as s } from "../components/AuthIcons.js";
-import { useCallback as c, useEffect as l, useState as u } from "react";
-import { useNavigate as d, useSearchParams as f } from "react-router-dom";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { loginProfile as g } from "@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager";
-import { useMutation as _ } from "@apollo/client/react";
-import { useEventBus as v } from "@burdenoff/fe-libs/shared/events";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { useNavigate as f, useSearchParams as p } from "react-router-dom";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { loginProfile as _ } from "@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager";
+import { useMutation as v } from "@apollo/client/react";
+import { useEventBus as y } from "@burdenoff/fe-libs/shared/events";
 //#region src/auth/pages/MagicLinkPage.tsx
-function y(e) {
+function b(e) {
 	return { ...e };
 }
-function b(e) {
+function x(e) {
 	try {
 		let t = window.location.hostname.endsWith(".local.burdenoff.com") ? ".local.burdenoff.com" : void 0, n = t ? `; domain=${t}` : "", r = window.location.protocol === "https:" ? "; secure" : "", i = JSON.stringify({
 			id: e,
@@ -23,190 +23,189 @@ function b(e) {
 		document.cookie = `bf-sso=${encodeURIComponent(i)}${n}; path=/; samesite=lax${r}; max-age=86400`, document.cookie = `bf-sso-profile=${encodeURIComponent(i)}${n}; path=/; samesite=lax${r}; max-age=86400`;
 	} catch {}
 }
-function x() {
-	let { t: x } = p(), S = (e, t) => {
-		let n = x(e);
+function S() {
+	let { t: S } = m(), C = (e, t) => {
+		let n = S(e);
 		return n === e ? t : n;
-	}, C = d(), [w] = f(), T = w.get("token"), E = e(), D = v(), [O, k] = u(""), [A, j] = u(T ? "verifying" : "form"), [M, N] = u(""), [P, F] = u(!1), [I, { loading: L }] = _(r), [R] = _(n), z = c(async (e) => {
+	}, w = f(), [T] = p(), E = T.get("token"), D = e(), O = y(), [k, A] = d(""), [j, M] = d(E ? "verifying" : "form"), [N, P] = d(""), F = u(!1), [I, { loading: L }] = v(r), [R] = v(n), z = c(async (e) => {
 		let n = t.getState();
 		try {
-			j("verifying"), n.setLoading(!0);
+			M("verifying"), n.setLoading(!0);
 			let { data: t } = await R({ variables: { token: e } }), r = t.authenticateMagicLink;
 			if (!r.success || !r.user) throw Error(r.error || "Authentication failed");
 			n.setUser(r.user), n.setAuthTokens(r.token ?? "", r.refreshToken ?? ""), n.setAuthenticated(!0), n.setMfaRequired(!1);
 			let i = r.expiresIn ? Date.now() + r.expiresIn * 1e3 : void 0;
-			g(y(r.user), {
+			_(b(r.user), {
 				accessToken: r.token ?? "",
 				refreshToken: r.refreshToken ?? "",
 				expiresAt: i
-			}), b(r.user.id), D.emit("auth.signed_in", {
+			}), x(r.user.id), O.emit("auth.signed_in", {
 				userId: r.user.id,
 				tenantId: r.user.tenantId,
 				workspaceId: r.user.defaultWorkspaceId,
 				mfaEnabled: r.user.mfaEnabled,
 				emailVerified: r.user.emailVerified
-			}, { component: "MagicLinkPage" }), E.onAuthSuccess?.(r.user, r.token, r.refreshToken), j("success"), N("You have been signed in successfully!"), setTimeout(() => {
-				C("/", { replace: !0 });
+			}, { component: "MagicLinkPage" }), D.onAuthSuccess?.(r.user, r.token, r.refreshToken), M("success"), P("You have been signed in successfully!"), setTimeout(() => {
+				w("/", { replace: !0 });
 			}, 1500);
 		} catch (e) {
 			if (n.isAuthenticated && n.user) {
-				console.info("[MagicLink] Token already used but user is authenticated, redirecting..."), C("/", { replace: !0 });
+				console.info("[MagicLink] Token already used but user is authenticated, redirecting..."), w("/", { replace: !0 });
 				return;
 			}
-			j("error"), N(e instanceof Error ? e.message : "Invalid or expired magic link");
+			M("error"), P(e instanceof Error ? e.message : "Invalid or expired magic link");
 		} finally {
 			n.setLoading(!1);
 		}
 	}, [
 		R,
-		E,
 		D,
-		C
+		O,
+		w
 	]);
 	return l(() => {
-		T && !P && (F(!0), z(T));
-	}, [
-		T,
-		P,
-		z
-	]), A === "verifying" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.signingIn", "Signing you in..."),
-		subtitle: S("auth.magicLink.verifyingSubtitle", "Please wait while we verify your magic link"),
-		children: /* @__PURE__ */ h("div", {
+		E && !F.current && (F.current = !0, z(E));
+	}, [E, z]), j === "verifying" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.signingIn", "Signing you in..."),
+		subtitle: C("auth.magicLink.verifyingSubtitle", "Please wait while we verify your magic link"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
-			children: [/* @__PURE__ */ m("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-accent-primary)]" }), /* @__PURE__ */ m("p", {
+			children: [/* @__PURE__ */ h("div", { className: "animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]" }), /* @__PURE__ */ h("p", {
 				className: "mt-4 text-[var(--color-text-secondary)]",
-				children: S("auth.magicLink.verifying", "Verifying magic link...")
+				children: C("auth.magicLink.verifying", "Verifying magic link...")
 			})]
 		})
-	}) : A === "success" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.welcomeBack", "Welcome back!"),
-		subtitle: S("auth.magicLink.signedInSuccess", "You have been signed in successfully"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "success" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.welcomeBack", "Welcome back!"),
+		subtitle: C("auth.magicLink.signedInSuccess", "You have been signed in successfully"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
-					className: "w-16 h-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(o, { className: "w-8 h-8 text-[var(--color-status-success)]" })
+				/* @__PURE__ */ h("div", {
+					className: "size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
+					children: /* @__PURE__ */ h(o, { className: "size-8 text-[var(--color-status-success)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-text-primary)] text-center mb-4",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-text-secondary)]",
-					children: S("auth.magicLink.redirecting", "Redirecting to application...")
+					children: C("auth.magicLink.redirecting", "Redirecting to application...")
 				})
 			]
 		})
-	}) : A === "error" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.oops", "Oops!"),
-		subtitle: S("auth.magicLink.somethingWrong", "Something went wrong"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "error" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.oops", "Oops!"),
+		subtitle: C("auth.magicLink.somethingWrong", "Something went wrong"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
-					className: "w-16 h-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(a, { className: "w-8 h-8 text-[var(--color-status-error)]" })
+				/* @__PURE__ */ h("div", {
+					className: "size-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4",
+					children: /* @__PURE__ */ h(a, { className: "size-8 text-[var(--color-status-error)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-status-error)] text-center mb-4",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
+					type: "button",
 					onClick: () => {
-						j("form"), N("");
+						M("form"), P("");
 					},
 					className: "px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]",
-					children: S("auth.magicLink.tryAgain", "Try again")
+					children: C("auth.magicLink.tryAgain", "Try again")
 				})
 			]
 		})
-	}) : A === "sent" ? /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.checkEmail", "Check your email"),
-		subtitle: S("auth.magicLink.sentMagicLink", "We've sent you a magic link"),
-		children: /* @__PURE__ */ h("div", {
+	}) : j === "sent" ? /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.checkEmail", "Check your email"),
+		subtitle: C("auth.magicLink.sentMagicLink", "We've sent you a magic link"),
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-col items-center py-8",
 			children: [
-				/* @__PURE__ */ m("div", {
-					className: "w-16 h-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ m(s, { className: "w-8 h-8 text-[var(--color-status-success)]" })
+				/* @__PURE__ */ h("div", {
+					className: "size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4",
+					children: /* @__PURE__ */ h(s, { className: "size-8 text-[var(--color-status-success)]" })
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-text-primary)] text-center mb-2",
-					children: S("auth.magicLink.sentTo", "We've sent a magic link to:")
+					children: C("auth.magicLink.sentTo", "We've sent a magic link to:")
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-[var(--color-accent-primary)] font-medium mb-4",
-					children: O
+					children: k
 				}),
-				/* @__PURE__ */ m("p", {
+				/* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-text-secondary)] text-center mb-6",
-					children: S("auth.magicLink.linkExpires", "Click the link in the email to sign in. The link expires in 24 hours.")
+					children: C("auth.magicLink.linkExpires", "Click the link in the email to sign in. The link expires in 24 hours.")
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
+					type: "button",
 					onClick: () => {
-						j("form"), N("");
+						M("form"), P("");
 					},
 					className: "text-[var(--color-accent-primary)] hover:underline",
-					children: S("auth.magicLink.differentEmail", "Use a different email")
+					children: C("auth.magicLink.differentEmail", "Use a different email")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ m(i, {
-		title: S("auth.magicLink.title", "Sign in with Magic Link"),
-		subtitle: S("auth.magicLink.subtitle", "No password needed - we'll email you a link"),
-		children: /* @__PURE__ */ h("form", {
+	}) : /* @__PURE__ */ h(i, {
+		title: C("auth.magicLink.title", "Sign in with Magic Link"),
+		subtitle: C("auth.magicLink.subtitle", "No password needed - we'll email you a link"),
+		children: /* @__PURE__ */ g("form", {
 			onSubmit: async (e) => {
-				if (e.preventDefault(), !O) {
-					N(S("auth.magicLink.enterEmail", "Please enter your email address"));
+				if (e.preventDefault(), !k) {
+					P(C("auth.magicLink.enterEmail", "Please enter your email address"));
 					return;
 				}
 				try {
-					let { data: e } = await I({ variables: { email: O } });
-					e.sendMagicLink.success ? (j("sent"), N(e.sendMagicLink.message || "Magic link sent! Check your email.")) : N(e.sendMagicLink.message || "Failed to send magic link");
+					let { data: e } = await I({ variables: { email: k } });
+					e.sendMagicLink.success ? (M("sent"), P(e.sendMagicLink.message || "Magic link sent! Check your email.")) : P(e.sendMagicLink.message || "Failed to send magic link");
 				} catch (e) {
-					N(e instanceof Error ? e.message : "Failed to send magic link");
+					P(e instanceof Error ? e.message : "Failed to send magic link");
 				}
 			},
 			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+				/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
 					htmlFor: "email",
 					className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-					children: S("auth.magicLink.emailLabel", "Email address")
-				}), /* @__PURE__ */ h("div", {
+					children: C("auth.magicLink.emailLabel", "Email address")
+				}), /* @__PURE__ */ g("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",
-						children: /* @__PURE__ */ m(s, { className: "h-5 w-5 text-[var(--color-text-secondary)]" })
-					}), /* @__PURE__ */ m("input", {
+						children: /* @__PURE__ */ h(s, { className: "size-5 text-[var(--color-text-secondary)]" })
+					}), /* @__PURE__ */ h("input", {
 						id: "email",
 						type: "email",
-						value: O,
-						onChange: (e) => k(e.target.value),
+						value: k,
+						onChange: (e) => A(e.target.value),
 						placeholder: "you@example.com",
+						"aria-label": C("auth.magicLink.emailLabel", "Email address"),
 						className: "block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent",
 						required: !0
 					})]
 				})] }),
-				M && /* @__PURE__ */ m("p", {
+				N && /* @__PURE__ */ h("p", {
 					className: "text-sm text-[var(--color-status-error)]",
-					children: M
+					children: N
 				}),
-				/* @__PURE__ */ m("button", {
+				/* @__PURE__ */ h("button", {
 					type: "submit",
 					disabled: L,
 					className: "w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-					children: L ? S("auth.magicLink.sending", "Sending...") : S("auth.magicLink.sendButton", "Send Magic Link")
+					children: L ? C("auth.magicLink.sending", "Sending...") : C("auth.magicLink.sendButton", "Send Magic Link")
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "text-center",
-					children: /* @__PURE__ */ m("button", {
+					children: /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: () => C("/auth/login"),
+						onClick: () => w("/auth/login"),
 						className: "text-sm text-[var(--color-accent-primary)] hover:underline",
-						children: S("auth.magicLink.passwordInstead", "Sign in with password instead")
+						children: C("auth.magicLink.passwordInstead", "Sign in with password instead")
 					})
 				})
 			]
@@ -214,6 +213,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as MagicLinkPage };
+export { S as MagicLinkPage };
 
 //# sourceMappingURL=MagicLinkPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MagicLinkPage.js","names":[],"sources":["../../../src/auth/pages/MagicLinkPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { useMutation } from \"@apollo/client/react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport {\n  loginProfile,\n  type ProfileUser,\n} from \"@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { EmailIcon, CheckIcon, AlertIcon } from \"../components/AuthIcons\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { useAuth } from \"../providers/AuthProvider\";\nimport type { MagicLinkSendResult, AuthResult, User } from \"../types\";\n\nfunction toProfileUser(user: User): ProfileUser {\n  return { ...user };\n}\n\nfunction setShellSsoCookie(userId: string): void {\n  try {\n    const hostname = window.location.hostname;\n    const domain = hostname.endsWith(\".local.burdenoff.com\")\n      ? \".local.burdenoff.com\"\n      : undefined;\n    const domainPart = domain ? `; domain=${domain}` : \"\";\n    const securePart = window.location.protocol === \"https:\" ? \"; secure\" : \"\";\n    const ssoValue = JSON.stringify({\n      id: userId,\n      origin: window.location.origin,\n    });\n    document.cookie = `bf-sso=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n    document.cookie = `bf-sso-profile=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n  } catch {\n    // Best effort only.\n  }\n}\n\nimport {\n  SendMagicLinkDocument,\n  AuthenticateMagicLinkDocument,\n} from \"../../generated/global-operations\";\n// Response types for GraphQL mutations\ninterface SendMagicLinkResponse {\n  sendMagicLink: MagicLinkSendResult;\n}\n\ninterface AuthenticateMagicLinkResponse {\n  authenticateMagicLink: AuthResult;\n}\n\n// GraphQL Operations\n\ntype PageStatus = \"form\" | \"sent\" | \"verifying\" | \"success\" | \"error\";\n\n/**\n * Magic Link authentication page\n * Supports both sending magic links and verifying them via token\n */\nexport function MagicLinkPage() {\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 [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const context = useAuth();\n  const eventBus = useEventBus();\n\n  const [email, setEmail] = useState(\"\");\n  const [status, setStatus] = useState<PageStatus>(\n    token ? \"verifying\" : \"form\",\n  );\n  const [message, setMessage] = useState(\"\");\n  const [hasVerified, setHasVerified] = useState(false);\n\n  const [sendMagicLink, { loading: sendLoading }] =\n    useMutation<SendMagicLinkResponse>(SendMagicLinkDocument);\n  const [authenticateMagicLink] = useMutation<AuthenticateMagicLinkResponse>(\n    AuthenticateMagicLinkDocument,\n  );\n\n  const handleVerifyToken = useCallback(\n    async (tokenValue: string) => {\n      const store = useAuthStore.getState();\n\n      try {\n        setStatus(\"verifying\");\n        store.setLoading(true);\n\n        const { data } = await authenticateMagicLink({\n          variables: { token: tokenValue },\n        });\n        const result = data!.authenticateMagicLink;\n\n        if (!result.success || !result.user) {\n          throw new Error(result.error || \"Authentication failed\");\n        }\n\n        store.setUser(result.user);\n        store.setAuthTokens(result.token ?? \"\", result.refreshToken ?? \"\");\n        store.setAuthenticated(true);\n        store.setMfaRequired(false);\n\n        const expiresAt = result.expiresIn\n          ? Date.now() + result.expiresIn * 1000\n          : undefined;\n        loginProfile(toProfileUser(result.user), {\n          accessToken: result.token ?? \"\",\n          refreshToken: result.refreshToken ?? \"\",\n          expiresAt,\n        });\n        setShellSsoCookie(result.user.id);\n\n        eventBus.emit(\n          \"auth.signed_in\",\n          {\n            userId: result.user.id,\n            tenantId: result.user.tenantId,\n            workspaceId: result.user.defaultWorkspaceId,\n            mfaEnabled: result.user.mfaEnabled,\n            emailVerified: result.user.emailVerified,\n          },\n          { component: \"MagicLinkPage\" },\n        );\n\n        context.onAuthSuccess?.(result.user, result.token, result.refreshToken);\n\n        setStatus(\"success\");\n        setMessage(\"You have been signed in successfully!\");\n\n        // Redirect to dashboard after successful authentication\n        setTimeout(() => {\n          navigate(\"/\", { replace: true });\n        }, 1500);\n      } catch (err) {\n        // If user is already authenticated (token was already used), redirect to dashboard\n        if (store.isAuthenticated && store.user) {\n          console.info(\n            \"[MagicLink] Token already used but user is authenticated, redirecting...\",\n          );\n          navigate(\"/\", { replace: true });\n          return;\n        }\n\n        setStatus(\"error\");\n        const errorMessage =\n          err instanceof Error ? err.message : \"Invalid or expired magic link\";\n        setMessage(errorMessage);\n      } finally {\n        store.setLoading(false);\n      }\n    },\n    [authenticateMagicLink, context, eventBus, navigate],\n  );\n\n  // Handle token verification on page load (only once)\n  useEffect(() => {\n    if (token && !hasVerified) {\n      setHasVerified(true);\n      handleVerifyToken(token);\n    }\n  }, [token, hasVerified, handleVerifyToken]);\n\n  const handleSendMagicLink = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!email) {\n      setMessage(\n        tr(\"auth.magicLink.enterEmail\", \"Please enter your email address\"),\n      );\n      return;\n    }\n\n    try {\n      const { data } = await sendMagicLink({ variables: { email } });\n\n      if (data!.sendMagicLink.success) {\n        setStatus(\"sent\");\n        setMessage(\n          data!.sendMagicLink.message || \"Magic link sent! Check your email.\",\n        );\n      } else {\n        setMessage(data!.sendMagicLink.message || \"Failed to send magic link\");\n      }\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to send magic link\";\n      setMessage(errorMessage);\n    }\n  };\n\n  // Verifying state\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.signingIn\", \"Signing you in...\")}\n        subtitle={tr(\n          \"auth.magicLink.verifyingSubtitle\",\n          \"Please wait while we verify your magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-accent-primary)]\" />\n          <p className=\"mt-4 text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.verifying\", \"Verifying magic link...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Success state\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.welcomeBack\", \"Welcome back!\")}\n        subtitle={tr(\n          \"auth.magicLink.signedInSuccess\",\n          \"You have been signed in successfully\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <CheckIcon className=\"w-8 h-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-4\">\n            {message}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.redirecting\", \"Redirecting to application...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  if (status === \"error\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.oops\", \"Oops!\")}\n        subtitle={tr(\"auth.magicLink.somethingWrong\", \"Something went wrong\")}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4\">\n            <AlertIcon className=\"w-8 h-8 text-[var(--color-status-error)]\" />\n          </div>\n          <p className=\"text-[var(--color-status-error)] text-center mb-4\">\n            {message}\n          </p>\n          <button\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]\"\n          >\n            {tr(\"auth.magicLink.tryAgain\", \"Try again\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Sent state\n  if (status === \"sent\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.checkEmail\", \"Check your email\")}\n        subtitle={tr(\n          \"auth.magicLink.sentMagicLink\",\n          \"We've sent you a magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <EmailIcon className=\"w-8 h-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-2\">\n            {tr(\"auth.magicLink.sentTo\", \"We've sent a magic link to:\")}\n          </p>\n          <p className=\"text-[var(--color-accent-primary)] font-medium mb-4\">\n            {email}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)] text-center mb-6\">\n            {tr(\n              \"auth.magicLink.linkExpires\",\n              \"Click the link in the email to sign in. The link expires in 24 hours.\",\n            )}\n          </p>\n          <button\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\"auth.magicLink.differentEmail\", \"Use a different email\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Form state\n  return (\n    <AuthLayout\n      title={tr(\"auth.magicLink.title\", \"Sign in with Magic Link\")}\n      subtitle={tr(\n        \"auth.magicLink.subtitle\",\n        \"No password needed - we'll email you a link\",\n      )}\n    >\n      <form onSubmit={handleSendMagicLink} className=\"space-y-6\">\n        <div>\n          <label\n            htmlFor=\"email\"\n            className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n          >\n            {tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n          </label>\n          <div className=\"relative\">\n            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n              <EmailIcon className=\"h-5 w-5 text-[var(--color-text-secondary)]\" />\n            </div>\n            <input\n              id=\"email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              placeholder=\"you@example.com\"\n              className=\"block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent\"\n              required\n            />\n          </div>\n        </div>\n\n        {message && (\n          <p className=\"text-sm text-[var(--color-status-error)]\">{message}</p>\n        )}\n\n        <button\n          type=\"submit\"\n          disabled={sendLoading}\n          className=\"w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n        >\n          {sendLoading\n            ? tr(\"auth.magicLink.sending\", \"Sending...\")\n            : tr(\"auth.magicLink.sendButton\", \"Send Magic Link\")}\n        </button>\n\n        <div className=\"text-center\">\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"text-sm text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\n              \"auth.magicLink.passwordInstead\",\n              \"Sign in with password instead\",\n            )}\n          </button>\n        </div>\n      </form>\n    </AuthLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAS,EAAc,GAAyB;AAC9C,QAAO,EAAE,GAAG,GAAM;;AAGpB,SAAS,EAAkB,GAAsB;AAC/C,KAAI;EAEF,IAAM,IADW,OAAO,SAAS,SACT,SAAS,uBAAuB,GACpD,yBACA,KAAA,GACE,IAAa,IAAS,YAAY,MAAW,IAC7C,IAAa,OAAO,SAAS,aAAa,WAAW,aAAa,IAClE,IAAW,KAAK,UAAU;GAC9B,IAAI;GACJ,QAAQ,OAAO,SAAS;GACzB,CAAC;AAEF,EADA,SAAS,SAAS,UAAU,mBAAmB,EAAS,GAAG,EAAW,wBAAwB,EAAW,kBACzG,SAAS,SAAS,kBAAkB,mBAAmB,EAAS,GAAG,EAAW,wBAAwB,EAAW;SAC3G;;AA0BV,SAAgB,IAAgB;CAC9B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAW,GAAa,EACxB,CAAC,KAAgB,GAAiB,EAClC,IAAQ,EAAa,IAAI,QAAQ,EACjC,IAAU,GAAS,EACnB,IAAW,GAAa,EAExB,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,CAAC,GAAQ,KAAa,EAC1B,IAAQ,cAAc,OACvB,EACK,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,CAAC,GAAa,KAAkB,EAAS,GAAM,EAE/C,CAAC,GAAe,EAAE,SAAS,OAC/B,EAAmC,EAAsB,EACrD,CAAC,KAAyB,EAC9B,EACD,EAEK,IAAoB,EACxB,OAAO,MAAuB;EAC5B,IAAM,IAAQ,EAAa,UAAU;AAErC,MAAI;AAEF,GADA,EAAU,YAAY,EACtB,EAAM,WAAW,GAAK;GAEtB,IAAM,EAAE,YAAS,MAAM,EAAsB,EAC3C,WAAW,EAAE,OAAO,GAAY,EACjC,CAAC,EACI,IAAS,EAAM;AAErB,OAAI,CAAC,EAAO,WAAW,CAAC,EAAO,KAC7B,OAAU,MAAM,EAAO,SAAS,wBAAwB;AAM1D,GAHA,EAAM,QAAQ,EAAO,KAAK,EAC1B,EAAM,cAAc,EAAO,SAAS,IAAI,EAAO,gBAAgB,GAAG,EAClE,EAAM,iBAAiB,GAAK,EAC5B,EAAM,eAAe,GAAM;GAE3B,IAAM,IAAY,EAAO,YACrB,KAAK,KAAK,GAAG,EAAO,YAAY,MAChC,KAAA;AA0BJ,GAzBA,EAAa,EAAc,EAAO,KAAK,EAAE;IACvC,aAAa,EAAO,SAAS;IAC7B,cAAc,EAAO,gBAAgB;IACrC;IACD,CAAC,EACF,EAAkB,EAAO,KAAK,GAAG,EAEjC,EAAS,KACP,kBACA;IACE,QAAQ,EAAO,KAAK;IACpB,UAAU,EAAO,KAAK;IACtB,aAAa,EAAO,KAAK;IACzB,YAAY,EAAO,KAAK;IACxB,eAAe,EAAO,KAAK;IAC5B,EACD,EAAE,WAAW,iBAAiB,CAC/B,EAED,EAAQ,gBAAgB,EAAO,MAAM,EAAO,OAAO,EAAO,aAAa,EAEvE,EAAU,UAAU,EACpB,EAAW,wCAAwC,EAGnD,iBAAiB;AACf,MAAS,KAAK,EAAE,SAAS,IAAM,CAAC;MAC/B,KAAK;WACD,GAAK;AAEZ,OAAI,EAAM,mBAAmB,EAAM,MAAM;AAIvC,IAHA,QAAQ,KACN,2EACD,EACD,EAAS,KAAK,EAAE,SAAS,IAAM,CAAC;AAChC;;AAMF,GAHA,EAAU,QAAQ,EAGlB,EADE,aAAe,QAAQ,EAAI,UAAU,gCACf;YAChB;AACR,KAAM,WAAW,GAAM;;IAG3B;EAAC;EAAuB;EAAS;EAAU;EAAS,CACrD;AAwJD,QArJA,QAAgB;AACd,EAAI,KAAS,CAAC,MACZ,EAAe,GAAK,EACpB,EAAkB,EAAM;IAEzB;EAAC;EAAO;EAAa;EAAkB,CAAC,EA+BvC,MAAW,cAEX,kBAAC,GAAD;EACE,OAAO,EAAG,4BAA4B,oBAAoB;EAC1D,UAAU,EACR,oCACA,8CACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,uFAAwF,CAAA,EACvG,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,4BAA4B,0BAA0B;IACxD,CAAA,CACA;;EACK,CAAA,GAKb,MAAW,YAEX,kBAAC,GAAD;EACE,OAAO,EAAG,8BAA8B,gBAAgB;EACxD,UAAU,EACR,kCACA,uCACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,8CAA+C,CAAA;KAChE,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,8BAA8B,gCAAgC;KAChE,CAAA;IACA;;EACK,CAAA,GAKb,MAAW,UAEX,kBAAC,GAAD;EACE,OAAO,EAAG,uBAAuB,QAAQ;EACzC,UAAU,EAAG,iCAAiC,uBAAuB;YAErE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,4CAA6C,CAAA;KAC9D,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,UAAD;KACE,eAAe;AAEb,MADA,EAAU,OAAO,EACjB,EAAW,GAAG;;KAEhB,WAAU;eAET,EAAG,2BAA2B,YAAY;KACpC,CAAA;IACL;;EACK,CAAA,GAKb,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,mBAAmB;EAC1D,UAAU,EACR,gCACA,8BACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,8CAA+C,CAAA;KAChE,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,yBAAyB,8BAA8B;KACzD,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,8BACA,wEACD;KACC,CAAA;IACJ,kBAAC,UAAD;KACE,eAAe;AAEb,MADA,EAAU,OAAO,EACjB,EAAW,GAAG;;KAEhB,WAAU;eAET,EAAG,iCAAiC,wBAAwB;KACtD,CAAA;IACL;;EACK,CAAA,GAMf,kBAAC,GAAD;EACE,OAAO,EAAG,wBAAwB,0BAA0B;EAC5D,UAAU,EACR,2BACA,8CACD;YAED,kBAAC,QAAD;GAAM,UAtJkB,OAAO,MAAuB;AAGxD,QAFA,EAAE,gBAAgB,EAEd,CAAC,GAAO;AACV,OACE,EAAG,6BAA6B,kCAAkC,CACnE;AACD;;AAGF,QAAI;KACF,IAAM,EAAE,YAAS,MAAM,EAAc,EAAE,WAAW,EAAE,UAAO,EAAE,CAAC;AAE9D,KAAI,EAAM,cAAc,WACtB,EAAU,OAAO,EACjB,EACE,EAAM,cAAc,WAAW,qCAChC,IAED,EAAW,EAAM,cAAc,WAAW,4BAA4B;aAEjE,GAAK;AAGZ,OADE,aAAe,QAAQ,EAAI,UAAU,4BACf;;;GA8Ha,WAAU;aAA/C;IACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KACE,SAAQ;KACR,WAAU;eAET,EAAG,6BAA6B,gBAAgB;KAC3C,CAAA,EACR,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAW,WAAU,8CAA+C,CAAA;MAChE,CAAA,EACN,kBAAC,SAAD;MACE,IAAG;MACH,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;MACzC,aAAY;MACZ,WAAU;MACV,UAAA;MACA,CAAA,CACE;OACF,EAAA,CAAA;IAEL,KACC,kBAAC,KAAD;KAAG,WAAU;eAA4C;KAAY,CAAA;IAGvE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,WAAU;eAET,IACG,EAAG,0BAA0B,aAAa,GAC1C,EAAG,6BAA6B,kBAAkB;KAC/C,CAAA;IAET,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,cAAc;MACtC,WAAU;gBAET,EACC,kCACA,gCACD;MACM,CAAA;KACL,CAAA;IACD;;EACI,CAAA"}
+{"version":3,"file":"MagicLinkPage.js","names":[],"sources":["../../../src/auth/pages/MagicLinkPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { useMutation } from \"@apollo/client/react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport {\n  loginProfile,\n  type ProfileUser,\n} from \"@burdenoff/fe-libs/shared/providers/shell/ProfileStorageManager\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { EmailIcon, CheckIcon, AlertIcon } from \"../components/AuthIcons\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { useAuth } from \"../providers/AuthProvider\";\nimport type { MagicLinkSendResult, AuthResult, User } from \"../types\";\n\nfunction toProfileUser(user: User): ProfileUser {\n  return { ...user };\n}\n\nfunction setShellSsoCookie(userId: string): void {\n  try {\n    const hostname = window.location.hostname;\n    const domain = hostname.endsWith(\".local.burdenoff.com\")\n      ? \".local.burdenoff.com\"\n      : undefined;\n    const domainPart = domain ? `; domain=${domain}` : \"\";\n    const securePart = window.location.protocol === \"https:\" ? \"; secure\" : \"\";\n    const ssoValue = JSON.stringify({\n      id: userId,\n      origin: window.location.origin,\n    });\n    document.cookie = `bf-sso=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n    document.cookie = `bf-sso-profile=${encodeURIComponent(ssoValue)}${domainPart}; path=/; samesite=lax${securePart}; max-age=86400`;\n  } catch {\n    // Best effort only.\n  }\n}\n\nimport {\n  SendMagicLinkDocument,\n  AuthenticateMagicLinkDocument,\n} from \"../../generated/global-operations\";\n// Response types for GraphQL mutations\ninterface SendMagicLinkResponse {\n  sendMagicLink: MagicLinkSendResult;\n}\n\ninterface AuthenticateMagicLinkResponse {\n  authenticateMagicLink: AuthResult;\n}\n\n// GraphQL Operations\n\ntype PageStatus = \"form\" | \"sent\" | \"verifying\" | \"success\" | \"error\";\n\n/**\n * Magic Link authentication page\n * Supports both sending magic links and verifying them via token\n */\nexport function MagicLinkPage() {\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 [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const context = useAuth();\n  const eventBus = useEventBus();\n\n  const [email, setEmail] = useState(\"\");\n  const [status, setStatus] = useState<PageStatus>(\n    token ? \"verifying\" : \"form\",\n  );\n  const [message, setMessage] = useState(\"\");\n  const hasVerifiedRef = useRef(false);\n\n  const [sendMagicLink, { loading: sendLoading }] =\n    useMutation<SendMagicLinkResponse>(SendMagicLinkDocument);\n  const [authenticateMagicLink] = useMutation<AuthenticateMagicLinkResponse>(\n    AuthenticateMagicLinkDocument,\n  );\n\n  const handleVerifyToken = useCallback(\n    async (tokenValue: string) => {\n      const store = useAuthStore.getState();\n\n      try {\n        setStatus(\"verifying\");\n        store.setLoading(true);\n\n        const { data } = await authenticateMagicLink({\n          variables: { token: tokenValue },\n        });\n        const result = data!.authenticateMagicLink;\n\n        if (!result.success || !result.user) {\n          throw new Error(result.error || \"Authentication failed\");\n        }\n\n        store.setUser(result.user);\n        store.setAuthTokens(result.token ?? \"\", result.refreshToken ?? \"\");\n        store.setAuthenticated(true);\n        store.setMfaRequired(false);\n\n        const expiresAt = result.expiresIn\n          ? Date.now() + result.expiresIn * 1000\n          : undefined;\n        loginProfile(toProfileUser(result.user), {\n          accessToken: result.token ?? \"\",\n          refreshToken: result.refreshToken ?? \"\",\n          expiresAt,\n        });\n        setShellSsoCookie(result.user.id);\n\n        eventBus.emit(\n          \"auth.signed_in\",\n          {\n            userId: result.user.id,\n            tenantId: result.user.tenantId,\n            workspaceId: result.user.defaultWorkspaceId,\n            mfaEnabled: result.user.mfaEnabled,\n            emailVerified: result.user.emailVerified,\n          },\n          { component: \"MagicLinkPage\" },\n        );\n\n        context.onAuthSuccess?.(result.user, result.token, result.refreshToken);\n\n        setStatus(\"success\");\n        setMessage(\"You have been signed in successfully!\");\n\n        // Redirect to dashboard after successful authentication\n        setTimeout(() => {\n          navigate(\"/\", { replace: true });\n        }, 1500);\n      } catch (err) {\n        // If user is already authenticated (token was already used), redirect to dashboard\n        if (store.isAuthenticated && store.user) {\n          console.info(\n            \"[MagicLink] Token already used but user is authenticated, redirecting...\",\n          );\n          navigate(\"/\", { replace: true });\n          return;\n        }\n\n        setStatus(\"error\");\n        const errorMessage =\n          err instanceof Error ? err.message : \"Invalid or expired magic link\";\n        setMessage(errorMessage);\n      } finally {\n        store.setLoading(false);\n      }\n    },\n    [authenticateMagicLink, context, eventBus, navigate],\n  );\n\n  // Handle token verification on page load (only once)\n  useEffect(() => {\n    if (token && !hasVerifiedRef.current) {\n      hasVerifiedRef.current = true;\n      handleVerifyToken(token);\n    }\n  }, [token, handleVerifyToken]);\n\n  const handleSendMagicLink = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!email) {\n      setMessage(\n        tr(\"auth.magicLink.enterEmail\", \"Please enter your email address\"),\n      );\n      return;\n    }\n\n    try {\n      const { data } = await sendMagicLink({ variables: { email } });\n\n      if (data!.sendMagicLink.success) {\n        setStatus(\"sent\");\n        setMessage(\n          data!.sendMagicLink.message || \"Magic link sent! Check your email.\",\n        );\n      } else {\n        setMessage(data!.sendMagicLink.message || \"Failed to send magic link\");\n      }\n    } catch (err) {\n      const errorMessage =\n        err instanceof Error ? err.message : \"Failed to send magic link\";\n      setMessage(errorMessage);\n    }\n  };\n\n  // Verifying state\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.signingIn\", \"Signing you in...\")}\n        subtitle={tr(\n          \"auth.magicLink.verifyingSubtitle\",\n          \"Please wait while we verify your magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"animate-spin rounded-full size-12 border-b-2 border-[var(--color-accent-primary)]\" />\n          <p className=\"mt-4 text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.verifying\", \"Verifying magic link...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Success state\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.welcomeBack\", \"Welcome back!\")}\n        subtitle={tr(\n          \"auth.magicLink.signedInSuccess\",\n          \"You have been signed in successfully\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <CheckIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-4\">\n            {message}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)]\">\n            {tr(\"auth.magicLink.redirecting\", \"Redirecting to application...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  if (status === \"error\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.oops\", \"Oops!\")}\n        subtitle={tr(\"auth.magicLink.somethingWrong\", \"Something went wrong\")}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-error-subtle)] flex items-center justify-center mb-4\">\n            <AlertIcon className=\"size-8 text-[var(--color-status-error)]\" />\n          </div>\n          <p className=\"text-[var(--color-status-error)] text-center mb-4\">\n            {message}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"px-4 py-2 rounded-lg bg-[var(--color-accent-primary)] text-white hover:bg-[var(--color-accent-primary-hover)]\"\n          >\n            {tr(\"auth.magicLink.tryAgain\", \"Try again\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Sent state\n  if (status === \"sent\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.magicLink.checkEmail\", \"Check your email\")}\n        subtitle={tr(\n          \"auth.magicLink.sentMagicLink\",\n          \"We've sent you a magic link\",\n        )}\n      >\n        <div className=\"flex flex-col items-center py-8\">\n          <div className=\"size-16 rounded-full bg-[var(--color-status-success-subtle)] flex items-center justify-center mb-4\">\n            <EmailIcon className=\"size-8 text-[var(--color-status-success)]\" />\n          </div>\n          <p className=\"text-[var(--color-text-primary)] text-center mb-2\">\n            {tr(\"auth.magicLink.sentTo\", \"We've sent a magic link to:\")}\n          </p>\n          <p className=\"text-[var(--color-accent-primary)] font-medium mb-4\">\n            {email}\n          </p>\n          <p className=\"text-sm text-[var(--color-text-secondary)] text-center mb-6\">\n            {tr(\n              \"auth.magicLink.linkExpires\",\n              \"Click the link in the email to sign in. The link expires in 24 hours.\",\n            )}\n          </p>\n          <button type=\"button\"\n            onClick={() => {\n              setStatus(\"form\");\n              setMessage(\"\");\n            }}\n            className=\"text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\"auth.magicLink.differentEmail\", \"Use a different email\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Form state\n  return (\n    <AuthLayout\n      title={tr(\"auth.magicLink.title\", \"Sign in with Magic Link\")}\n      subtitle={tr(\n        \"auth.magicLink.subtitle\",\n        \"No password needed - we'll email you a link\",\n      )}\n    >\n      <form onSubmit={handleSendMagicLink} className=\"space-y-6\">\n        <div>\n          <label\n            htmlFor=\"email\"\n            className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n          >\n            {tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n          </label>\n          <div className=\"relative\">\n            <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n              <EmailIcon className=\"size-5 text-[var(--color-text-secondary)]\" />\n            </div>\n            <input\n              id=\"email\"\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              placeholder=\"you@example.com\"\n              aria-label={tr(\"auth.magicLink.emailLabel\", \"Email address\")}\n              className=\"block w-full pl-[3.25rem] pr-4 py-3 border border-[var(--color-border-primary)] rounded-lg bg-[var(--color-background-base)] text-[var(--color-text-primary)] placeholder-[var(--color-text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:border-transparent\"\n              required\n            />\n          </div>\n        </div>\n\n        {message && (\n          <p className=\"text-sm text-[var(--color-status-error)]\">{message}</p>\n        )}\n\n        <button\n          type=\"submit\"\n          disabled={sendLoading}\n          className=\"w-full py-3 px-4 rounded-lg bg-[var(--color-accent-primary)] text-white font-medium hover:bg-[var(--color-accent-primary-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n        >\n          {sendLoading\n            ? tr(\"auth.magicLink.sending\", \"Sending...\")\n            : tr(\"auth.magicLink.sendButton\", \"Send Magic Link\")}\n        </button>\n\n        <div className=\"text-center\">\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"text-sm text-[var(--color-accent-primary)] hover:underline\"\n          >\n            {tr(\n              \"auth.magicLink.passwordInstead\",\n              \"Sign in with password instead\",\n            )}\n          </button>\n        </div>\n      </form>\n    </AuthLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAS,EAAc,GAAyB;AAC9C,QAAO,EAAE,GAAG,GAAM;;AAGpB,SAAS,EAAkB,GAAsB;AAC/C,KAAI;EAEF,IAAM,IADW,OAAO,SAAS,SACT,SAAS,uBAAuB,GACpD,yBACA,KAAA,GACE,IAAa,IAAS,YAAY,MAAW,IAC7C,IAAa,OAAO,SAAS,aAAa,WAAW,aAAa,IAClE,IAAW,KAAK,UAAU;GAC9B,IAAI;GACJ,QAAQ,OAAO,SAAS;GACzB,CAAC;AAEF,EADA,SAAS,SAAS,UAAU,mBAAmB,EAAS,GAAG,EAAW,wBAAwB,EAAW,kBACzG,SAAS,SAAS,kBAAkB,mBAAmB,EAAS,GAAG,EAAW,wBAAwB,EAAW;SAC3G;;AA0BV,SAAgB,IAAgB;CAC9B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAW,GAAa,EACxB,CAAC,KAAgB,GAAiB,EAClC,IAAQ,EAAa,IAAI,QAAQ,EACjC,IAAU,GAAS,EACnB,IAAW,GAAa,EAExB,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,CAAC,GAAQ,KAAa,EAC1B,IAAQ,cAAc,OACvB,EACK,CAAC,GAAS,KAAc,EAAS,GAAG,EACpC,IAAiB,EAAO,GAAM,EAE9B,CAAC,GAAe,EAAE,SAAS,OAC/B,EAAmC,EAAsB,EACrD,CAAC,KAAyB,EAC9B,EACD,EAEK,IAAoB,EACxB,OAAO,MAAuB;EAC5B,IAAM,IAAQ,EAAa,UAAU;AAErC,MAAI;AAEF,GADA,EAAU,YAAY,EACtB,EAAM,WAAW,GAAK;GAEtB,IAAM,EAAE,YAAS,MAAM,EAAsB,EAC3C,WAAW,EAAE,OAAO,GAAY,EACjC,CAAC,EACI,IAAS,EAAM;AAErB,OAAI,CAAC,EAAO,WAAW,CAAC,EAAO,KAC7B,OAAU,MAAM,EAAO,SAAS,wBAAwB;AAM1D,GAHA,EAAM,QAAQ,EAAO,KAAK,EAC1B,EAAM,cAAc,EAAO,SAAS,IAAI,EAAO,gBAAgB,GAAG,EAClE,EAAM,iBAAiB,GAAK,EAC5B,EAAM,eAAe,GAAM;GAE3B,IAAM,IAAY,EAAO,YACrB,KAAK,KAAK,GAAG,EAAO,YAAY,MAChC,KAAA;AA0BJ,GAzBA,EAAa,EAAc,EAAO,KAAK,EAAE;IACvC,aAAa,EAAO,SAAS;IAC7B,cAAc,EAAO,gBAAgB;IACrC;IACD,CAAC,EACF,EAAkB,EAAO,KAAK,GAAG,EAEjC,EAAS,KACP,kBACA;IACE,QAAQ,EAAO,KAAK;IACpB,UAAU,EAAO,KAAK;IACtB,aAAa,EAAO,KAAK;IACzB,YAAY,EAAO,KAAK;IACxB,eAAe,EAAO,KAAK;IAC5B,EACD,EAAE,WAAW,iBAAiB,CAC/B,EAED,EAAQ,gBAAgB,EAAO,MAAM,EAAO,OAAO,EAAO,aAAa,EAEvE,EAAU,UAAU,EACpB,EAAW,wCAAwC,EAGnD,iBAAiB;AACf,MAAS,KAAK,EAAE,SAAS,IAAM,CAAC;MAC/B,KAAK;WACD,GAAK;AAEZ,OAAI,EAAM,mBAAmB,EAAM,MAAM;AAIvC,IAHA,QAAQ,KACN,2EACD,EACD,EAAS,KAAK,EAAE,SAAS,IAAM,CAAC;AAChC;;AAMF,GAHA,EAAU,QAAQ,EAGlB,EADE,aAAe,QAAQ,EAAI,UAAU,gCACf;YAChB;AACR,KAAM,WAAW,GAAM;;IAG3B;EAAC;EAAuB;EAAS;EAAU;EAAS,CACrD;AAwJD,QArJA,QAAgB;AACd,EAAI,KAAS,CAAC,EAAe,YAC3B,EAAe,UAAU,IACzB,EAAkB,EAAM;IAEzB,CAAC,GAAO,EAAkB,CAAC,EA+B1B,MAAW,cAEX,kBAAC,GAAD;EACE,OAAO,EAAG,4BAA4B,oBAAoB;EAC1D,UAAU,EACR,oCACA,8CACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAK,WAAU,qFAAsF,CAAA,EACrG,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,4BAA4B,0BAA0B;IACxD,CAAA,CACA;;EACK,CAAA,GAKb,MAAW,YAEX,kBAAC,GAAD;EACE,OAAO,EAAG,8BAA8B,gBAAgB;EACxD,UAAU,EACR,kCACA,uCACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,6CAA8C,CAAA;KAC/D,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,8BAA8B,gCAAgC;KAChE,CAAA;IACA;;EACK,CAAA,GAKb,MAAW,UAEX,kBAAC,GAAD;EACE,OAAO,EAAG,uBAAuB,QAAQ;EACzC,UAAU,EAAG,iCAAiC,uBAAuB;YAErE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,2CAA4C,CAAA;KAC7D,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,UAAD;KAAQ,MAAK;KACX,eAAe;AAEb,MADA,EAAU,OAAO,EACjB,EAAW,GAAG;;KAEhB,WAAU;eAET,EAAG,2BAA2B,YAAY;KACpC,CAAA;IACL;;EACK,CAAA,GAKb,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,mBAAmB;EAC1D,UAAU,EACR,gCACA,8BACD;YAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAW,WAAU,6CAA8C,CAAA;KAC/D,CAAA;IACN,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,yBAAyB,8BAA8B;KACzD,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA;IACJ,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,8BACA,wEACD;KACC,CAAA;IACJ,kBAAC,UAAD;KAAQ,MAAK;KACX,eAAe;AAEb,MADA,EAAU,OAAO,EACjB,EAAW,GAAG;;KAEhB,WAAU;eAET,EAAG,iCAAiC,wBAAwB;KACtD,CAAA;IACL;;EACK,CAAA,GAMf,kBAAC,GAAD;EACE,OAAO,EAAG,wBAAwB,0BAA0B;EAC5D,UAAU,EACR,2BACA,8CACD;YAED,kBAAC,QAAD;GAAM,UAtJkB,OAAO,MAAuB;AAGxD,QAFA,EAAE,gBAAgB,EAEd,CAAC,GAAO;AACV,OACE,EAAG,6BAA6B,kCAAkC,CACnE;AACD;;AAGF,QAAI;KACF,IAAM,EAAE,YAAS,MAAM,EAAc,EAAE,WAAW,EAAE,UAAO,EAAE,CAAC;AAE9D,KAAI,EAAM,cAAc,WACtB,EAAU,OAAO,EACjB,EACE,EAAM,cAAc,WAAW,qCAChC,IAED,EAAW,EAAM,cAAc,WAAW,4BAA4B;aAEjE,GAAK;AAGZ,OADE,aAAe,QAAQ,EAAI,UAAU,4BACf;;;GA8Ha,WAAU;aAA/C;IACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KACE,SAAQ;KACR,WAAU;eAET,EAAG,6BAA6B,gBAAgB;KAC3C,CAAA,EACR,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAW,WAAU,6CAA8C,CAAA;MAC/D,CAAA,EACN,kBAAC,SAAD;MACE,IAAG;MACH,MAAK;MACL,OAAO;MACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;MACzC,aAAY;MACZ,cAAY,EAAG,6BAA6B,gBAAgB;MAC5D,WAAU;MACV,UAAA;MACA,CAAA,CACE;OACF,EAAA,CAAA;IAEL,KACC,kBAAC,KAAD;KAAG,WAAU;eAA4C;KAAY,CAAA;IAGvE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,WAAU;eAET,IACG,EAAG,0BAA0B,aAAa,GAC1C,EAAG,6BAA6B,kBAAkB;KAC/C,CAAA;IAET,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,cAAc;MACtC,WAAU;gBAET,EACC,kCACA,gCACD;MACM,CAAA;KACL,CAAA;IACD;;EACI,CAAA"}

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",