@burdenoff/microfe-auth 2026.830.1 → 2026.830.2

package/dist/auth/pages/EmailVerifyPage.js

@@ -1,10 +1,10 @@
 import { useAuthStore as e } from "../store/authStore.js";
-import { useAuthOperations as t } from "../hooks/useAuthOperations.js";
-import { AuthLayout as n } from "../components/AuthLayout.js";
-import { SpinnerIcon as r } from "../components/AuthIcons.js";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { useSearchParams as c } from "react-router";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { useAuthOperations as n } from "../hooks/useAuthOperations.js";
+import { AuthLayout as r } from "../components/AuthLayout.js";
+import { SpinnerIcon as i } from "../components/AuthIcons.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { useSearchParams as l } from "react-router";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { Button as p } from "@burdenoff/fe-libs/button";
 //#region src/auth/pages/EmailVerifyPage.tsx
@@ -14,64 +14,61 @@ function h(e) {
 	window.location.href = n;
 }
 function g() {
-	let { t: g } = l(), _ = (e, t) => {
-		let n = g(e);
-		return n === e ? t : n;
-	}, [v] = c(), y = v.get("token"), b = v.get("email"), { verifyEmail: x, resendVerification: S } = t(), C = e((e) => e.user), [w, T] = s("verifying"), E = o(b || void 0), [D, O] = s(!1), [k, A] = s(!1), [j, M] = s(m), N = o(!1);
-	a(() => {
-		if (!y || N.current) return;
-		let e = `auth:verifyEmail:inflight:${y}`;
+	let g = t(), [_] = l(), v = _.get("token"), y = _.get("email"), { verifyEmail: b, resendVerification: x } = n(), S = e((e) => e.user), [C, w] = c("verifying"), T = s(y || void 0), [E, D] = c(!1), [O, k] = c(!1), [A, j] = c(m), M = s(!1);
+	o(() => {
+		if (!v || M.current) return;
+		let e = `auth:verifyEmail:inflight:${v}`;
 		if (!(typeof window < "u" && window.sessionStorage.getItem(e))) {
-			N.current = !0;
+			M.current = !0;
 			try {
 				window.sessionStorage.setItem(e, "1");
 			} catch {}
-			x(y).then((e) => {
-				e.success ? (T("success"), e.email && (E.current = e.email)) : T("error");
-			}).catch(() => T("error"));
+			b(v).then((e) => {
+				e.success ? (w("success"), e.email && (T.current = e.email)) : w("error");
+			}).catch(() => w("error"));
 		}
-	}, [y, x]), a(() => {
-		if (w !== "success") return;
+	}, [v, b]), o(() => {
+		if (C !== "success") return;
 		let e = setInterval(() => {
-			M((t) => t <= 1 ? (clearInterval(e), h(E.current), 0) : t - 1);
+			j((t) => t <= 1 ? (clearInterval(e), h(T.current), 0) : t - 1);
 		}, 1e3);
 		return () => clearInterval(e);
-	}, [w]);
-	let P = async () => {
-		let e = b || C?.email;
+	}, [C]);
+	let N = async () => {
+		let e = y || S?.email;
 		if (!e) {
 			console.error("No email available for resend");
 			return;
 		}
-		O(!0);
+		D(!0);
 		try {
-			await S(e), A(!0);
+			await x(e), k(!0);
 		} catch (e) {
 			console.error("Failed to resend verification:", e);
 		} finally {
-			O(!1);
+			D(!1);
 		}
-	}, F = i(() => {
-		h(E.current);
-	}, []), I = i(() => {
+	}, P = a(() => {
+		h(T.current);
+	}, []), F = a(() => {
 		h();
 	}, []);
-	return w === "verifying" ? /* @__PURE__ */ d(n, {
-		title: _("auth.emailVerify.verifyingTitle", "Verifying your email"),
-		subtitle: _("auth.emailVerify.verifyingSubtitle", "Please wait while we confirm your email address"),
+	return C === "verifying" ? /* @__PURE__ */ d(r, {
+		title: g("auth.emailVerify.verifyingTitle", "Verifying your email"),
+		subtitle: g("auth.emailVerify.verifyingSubtitle", "Please wait while we confirm your email address"),
 		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center justify-center py-12",
 			children: [/* @__PURE__ */ d("div", {
 				className: "size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6",
-				children: /* @__PURE__ */ d(r, { className: "size-8 text-[var(--color-text-link)] animate-spin" })
+				children: /* @__PURE__ */ d(i, { className: "size-8 text-[var(--color-text-link)] animate-spin" })
 			}), /* @__PURE__ */ d("p", {
 				className: "text-[var(--color-text-secondary)]",
-				children: _("auth.emailVerify.moment", "This will only take a moment...")
+				children: g("auth.emailVerify.moment", "This will only take a moment...")
 			})]
 		})
-	}) : w === "success" ? /* @__PURE__ */ d(n, {
-		title: _("auth.emailVerify.verifiedTitle", "Email verified!"),
-		subtitle: _("auth.emailVerify.verifiedSubtitle", "Your email address has been confirmed"),
+	}) : C === "success" ? /* @__PURE__ */ d(r, {
+		title: g("auth.emailVerify.verifiedTitle", "Email verified!"),
+		subtitle: g("auth.emailVerify.verifiedSubtitle", "Your email address has been confirmed"),
 		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center justify-center py-6",
 			children: [
@@ -92,34 +89,34 @@ function g() {
 				}),
 				/* @__PURE__ */ d("p", {
 					className: "text-center text-[var(--color-text-secondary)] mb-6",
-					children: _("auth.emailVerify.successMessage", "Your email has been successfully verified. You can now sign in to access all features.")
+					children: g("auth.emailVerify.successMessage", "Your email has been successfully verified. You can now sign in to access all features.")
 				}),
 				/* @__PURE__ */ f("p", {
 					className: "text-center text-sm text-[var(--color-text-tertiary)] mb-6",
 					children: [
-						_("auth.emailVerify.redirecting", "Redirecting to sign in in"),
+						g("auth.emailVerify.redirecting", "Redirecting to sign in in"),
 						" ",
 						/* @__PURE__ */ d("span", {
 							className: "font-semibold text-[var(--color-text-primary)]",
-							children: j
+							children: A
 						}),
 						" ",
-						_("auth.emailVerify.seconds", "seconds...")
+						g("auth.emailVerify.seconds", "seconds...")
 					]
 				}),
 				/* @__PURE__ */ d(p, {
 					type: "button",
-					onClick: F,
+					onClick: P,
 					variant: "default",
 					size: "lg",
 					className: "w-full font-semibold",
-					children: _("auth.emailVerify.continueSignIn", "Continue to sign in now")
+					children: g("auth.emailVerify.continueSignIn", "Continue to sign in now")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ d(n, {
-		title: _("auth.emailVerify.failedTitle", "Verification failed"),
-		subtitle: _("auth.emailVerify.failedSubtitle", "We couldn't verify your email address"),
+	}) : /* @__PURE__ */ d(r, {
+		title: g("auth.emailVerify.failedTitle", "Verification failed"),
+		subtitle: g("auth.emailVerify.failedSubtitle", "We couldn't verify your email address"),
 		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center justify-center py-6",
 			children: [
@@ -140,28 +137,28 @@ function g() {
 				}),
 				/* @__PURE__ */ d("p", {
 					className: "text-center text-[var(--color-text-secondary)] mb-8",
-					children: _("auth.emailVerify.invalidLink", "The verification link is invalid or has expired. Please request a new verification email.")
+					children: g("auth.emailVerify.invalidLink", "The verification link is invalid or has expired. Please request a new verification email.")
 				}),
-				k ? /* @__PURE__ */ d("div", {
+				O ? /* @__PURE__ */ d("div", {
 					className: "w-full p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)] text-center mb-4",
 					children: /* @__PURE__ */ d("p", {
 						className: "text-sm text-[var(--color-status-success-text)]",
-						children: _("auth.emailVerify.emailSent", "Verification email sent! Please check your inbox.")
+						children: g("auth.emailVerify.emailSent", "Verification email sent! Please check your inbox.")
 					})
 				}) : /* @__PURE__ */ d(p, {
 					type: "button",
-					onClick: P,
-					disabled: D,
+					onClick: N,
+					disabled: E,
 					variant: "default",
 					size: "lg",
 					className: "mb-4 w-full font-semibold",
-					children: D ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { className: "size-5 animate-spin" }), /* @__PURE__ */ d("span", { children: "Sending…" })] }) : _("auth.emailVerify.resend", "Resend verification email")
+					children: E ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, { className: "size-5 animate-spin" }), /* @__PURE__ */ d("span", { children: g("auth.emailVerify.sending", "Sending…") })] }) : g("auth.emailVerify.resend", "Resend verification email")
 				}),
 				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: I,
+					onClick: F,
 					className: "w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all",
-					children: _("auth.emailVerify.backToSignIn", "Back to sign in")
+					children: g("auth.emailVerify.backToSignIn", "Back to sign in")
 				})
 			]
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"EmailVerifyPage.js","names":[],"sources":["../../../src/auth/pages/EmailVerifyPage.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSearchParams } from \"react-router\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { Button } from \"@burdenoff/fe-libs/button\";\nimport { SpinnerIcon } from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Navigate to login page with optional email pre-fill\n * Uses window.location.href for reliable navigation (works in new tabs)\n */\nfunction navigateToLogin(email?: string) {\n  const baseUrl = \"/auth/login\";\n  const url = email ? `${baseUrl}?email=${encodeURIComponent(email)}` : baseUrl;\n  window.location.href = url;\n}\n\n/**\n * Email verification page with professional design\n */\nexport function EmailVerifyPage() {\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 [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const urlEmail = searchParams.get(\"email\");\n  const { verifyEmail, resendVerification } = useAuthOperations();\n  const user = useAuthStore((state) => state.user);\n  const [status, setStatus] = useState<\"verifying\" | \"success\" | \"error\">(\n    \"verifying\",\n  );\n  const verifiedEmailRef = useRef<string | undefined>(urlEmail || undefined);\n  const [isResending, setIsResending] = useState(false);\n  const [resendSuccess, setResendSuccess] = useState(false);\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Guard against duplicate calls. useRef alone resets across remounts\n  // (StrictMode, Suspense resolution of the lazy Auth root, HMR), so we\n  // additionally key on the token via sessionStorage — any remount for the\n  // same token short-circuits instead of firing a second mutation.\n  const verificationInitiatedRef = useRef(false);\n\n  useEffect(() => {\n    if (!token || verificationInitiatedRef.current) return;\n\n    const storageKey = `auth:verifyEmail:inflight:${token}`;\n    if (\n      typeof window !== \"undefined\" &&\n      window.sessionStorage.getItem(storageKey)\n    ) {\n      return;\n    }\n    verificationInitiatedRef.current = true;\n    try {\n      window.sessionStorage.setItem(storageKey, \"1\");\n    } catch {\n      // sessionStorage unavailable (private mode, SSR); ref guard still applies.\n    }\n\n    verifyEmail(token)\n      .then((result) => {\n        if (result.success) {\n          setStatus(\"success\");\n          if (result.email) verifiedEmailRef.current = result.email;\n        } else {\n          setStatus(\"error\");\n        }\n      })\n      .catch(() => setStatus(\"error\"));\n  }, [token, verifyEmail]);\n\n  // Auto-redirect countdown after successful verification\n  useEffect(() => {\n    if (status !== \"success\") return;\n\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigateToLogin(verifiedEmailRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [status]);\n\n  const handleResend = async () => {\n    const resendEmail = urlEmail || user?.email;\n    if (!resendEmail) {\n      console.error(\"No email available for resend\");\n      return;\n    }\n    setIsResending(true);\n    try {\n      await resendVerification(resendEmail);\n      setResendSuccess(true);\n    } catch (err) {\n      console.error(\"Failed to resend verification:\", err);\n    } finally {\n      setIsResending(false);\n    }\n  };\n\n  const handleContinueToLogin = useCallback(() => {\n    navigateToLogin(verifiedEmailRef.current);\n  }, []);\n\n  const handleBackToLogin = useCallback(() => {\n    navigateToLogin();\n  }, []);\n\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifyingTitle\", \"Verifying your email\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifyingSubtitle\",\n          \"Please wait while we confirm your email address\",\n        )}\n      >\n        {/* Loading Spinner */}\n        <div className=\"flex flex-col items-center justify-center py-12\">\n          <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6\">\n            <SpinnerIcon className=\"size-8 text-[var(--color-text-link)] animate-spin\" />\n          </div>\n          <p className=\"text-[var(--color-text-secondary)]\">\n            {tr(\"auth.emailVerify.moment\", \"This will only take a moment...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifiedTitle\", \"Email verified!\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifiedSubtitle\",\n          \"Your email address has been confirmed\",\n        )}\n      >\n        {/* Success Icon */}\n        <div className=\"flex flex-col items-center justify-center py-6\">\n          <div className=\"size-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6\">\n            <svg\n              className=\"size-10 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=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n\n          <p className=\"text-center text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.emailVerify.successMessage\",\n              \"Your email has been successfully verified. You can now sign in to access all features.\",\n            )}\n          </p>\n\n          <p className=\"text-center text-sm text-[var(--color-text-tertiary)] mb-6\">\n            {tr(\"auth.emailVerify.redirecting\", \"Redirecting to sign in in\")}{\" \"}\n            <span className=\"font-semibold text-[var(--color-text-primary)]\">\n              {countdown}\n            </span>{\" \"}\n            {tr(\"auth.emailVerify.seconds\", \"seconds...\")}\n          </p>\n\n          <Button\n            type=\"button\"\n            onClick={handleContinueToLogin}\n            variant=\"default\"\n            size=\"lg\"\n            className=\"w-full font-semibold\"\n          >\n            {tr(\"auth.emailVerify.continueSignIn\", \"Continue to sign in now\")}\n          </Button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  return (\n    <AuthLayout\n      title={tr(\"auth.emailVerify.failedTitle\", \"Verification failed\")}\n      subtitle={tr(\n        \"auth.emailVerify.failedSubtitle\",\n        \"We couldn't verify your email address\",\n      )}\n    >\n      <div className=\"flex flex-col items-center justify-center py-6\">\n        {/* Error Icon */}\n        <div className=\"size-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6\">\n          <svg\n            className=\"size-10 text-[var(--color-status-error-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=\"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\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {tr(\n            \"auth.emailVerify.invalidLink\",\n            \"The verification link is invalid or has expired. Please request a new verification email.\",\n          )}\n        </p>\n\n        {resendSuccess ? (\n          <div className=\"w-full p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)] text-center mb-4\">\n            <p className=\"text-sm text-[var(--color-status-success-text)]\">\n              {tr(\n                \"auth.emailVerify.emailSent\",\n                \"Verification email sent! Please check your inbox.\",\n              )}\n            </p>\n          </div>\n        ) : (\n          <Button\n            type=\"button\"\n            onClick={handleResend}\n            disabled={isResending}\n            variant=\"default\"\n            size=\"lg\"\n            className=\"mb-4 w-full font-semibold\"\n          >\n            {isResending ? (\n              <>\n                <SpinnerIcon className=\"size-5 animate-spin\" />\n                <span>Sending…</span>\n              </>\n            ) : (\n              tr(\"auth.emailVerify.resend\", \"Resend verification email\")\n            )}\n          </Button>\n        )}\n\n        <button\n          type=\"button\"\n          onClick={handleBackToLogin}\n          className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n        >\n          {tr(\"auth.emailVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EmailVerifyPage.js","names":[],"sources":["../../../src/auth/pages/EmailVerifyPage.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from \"react\";\nimport { useTr } from \"../../shared/hooks/useTr\";\nimport { useSearchParams } from \"react-router\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport { Button } from \"@burdenoff/fe-libs/button\";\nimport { SpinnerIcon } from \"../components/AuthIcons\";\n\nconst REDIRECT_DELAY = 5; // seconds\n\n/**\n * Navigate to login page with optional email pre-fill\n * Uses window.location.href for reliable navigation (works in new tabs)\n */\nfunction navigateToLogin(email?: string) {\n  const baseUrl = \"/auth/login\";\n  const url = email ? `${baseUrl}?email=${encodeURIComponent(email)}` : baseUrl;\n  window.location.href = url;\n}\n\n/**\n * Email verification page with professional design\n */\nexport function EmailVerifyPage() {\n  const tr = useTr();\n\n  const [searchParams] = useSearchParams();\n  const token = searchParams.get(\"token\");\n  const urlEmail = searchParams.get(\"email\");\n  const { verifyEmail, resendVerification } = useAuthOperations();\n  const user = useAuthStore((state) => state.user);\n  const [status, setStatus] = useState<\"verifying\" | \"success\" | \"error\">(\n    \"verifying\",\n  );\n  const verifiedEmailRef = useRef<string | undefined>(urlEmail || undefined);\n  const [isResending, setIsResending] = useState(false);\n  const [resendSuccess, setResendSuccess] = useState(false);\n  const [countdown, setCountdown] = useState(REDIRECT_DELAY);\n\n  // Guard against duplicate calls. useRef alone resets across remounts\n  // (StrictMode, Suspense resolution of the lazy Auth root, HMR), so we\n  // additionally key on the token via sessionStorage — any remount for the\n  // same token short-circuits instead of firing a second mutation.\n  const verificationInitiatedRef = useRef(false);\n\n  useEffect(() => {\n    if (!token || verificationInitiatedRef.current) return;\n\n    const storageKey = `auth:verifyEmail:inflight:${token}`;\n    if (\n      typeof window !== \"undefined\" &&\n      window.sessionStorage.getItem(storageKey)\n    ) {\n      return;\n    }\n    verificationInitiatedRef.current = true;\n    try {\n      window.sessionStorage.setItem(storageKey, \"1\");\n    } catch {\n      // sessionStorage unavailable (private mode, SSR); ref guard still applies.\n    }\n\n    verifyEmail(token)\n      .then((result) => {\n        if (result.success) {\n          setStatus(\"success\");\n          if (result.email) verifiedEmailRef.current = result.email;\n        } else {\n          setStatus(\"error\");\n        }\n      })\n      .catch(() => setStatus(\"error\"));\n  }, [token, verifyEmail]);\n\n  // Auto-redirect countdown after successful verification\n  useEffect(() => {\n    if (status !== \"success\") return;\n\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          clearInterval(timer);\n          navigateToLogin(verifiedEmailRef.current);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [status]);\n\n  const handleResend = async () => {\n    const resendEmail = urlEmail || user?.email;\n    if (!resendEmail) {\n      console.error(\"No email available for resend\");\n      return;\n    }\n    setIsResending(true);\n    try {\n      await resendVerification(resendEmail);\n      setResendSuccess(true);\n    } catch (err) {\n      console.error(\"Failed to resend verification:\", err);\n    } finally {\n      setIsResending(false);\n    }\n  };\n\n  const handleContinueToLogin = useCallback(() => {\n    navigateToLogin(verifiedEmailRef.current);\n  }, []);\n\n  const handleBackToLogin = useCallback(() => {\n    navigateToLogin();\n  }, []);\n\n  if (status === \"verifying\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifyingTitle\", \"Verifying your email\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifyingSubtitle\",\n          \"Please wait while we confirm your email address\",\n        )}\n      >\n        {/* Loading Spinner */}\n        <div className=\"flex flex-col items-center justify-center py-12\">\n          <div className=\"size-16 rounded-full bg-[var(--color-bg-accent)] flex items-center justify-center mb-6\">\n            <SpinnerIcon className=\"size-8 text-[var(--color-text-link)] animate-spin\" />\n          </div>\n          <p className=\"text-[var(--color-text-secondary)]\">\n            {tr(\"auth.emailVerify.moment\", \"This will only take a moment...\")}\n          </p>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  if (status === \"success\") {\n    return (\n      <AuthLayout\n        title={tr(\"auth.emailVerify.verifiedTitle\", \"Email verified!\")}\n        subtitle={tr(\n          \"auth.emailVerify.verifiedSubtitle\",\n          \"Your email address has been confirmed\",\n        )}\n      >\n        {/* Success Icon */}\n        <div className=\"flex flex-col items-center justify-center py-6\">\n          <div className=\"size-20 rounded-full bg-[var(--color-status-success-bg-subtle)] flex items-center justify-center mb-6\">\n            <svg\n              className=\"size-10 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=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          </div>\n\n          <p className=\"text-center text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.emailVerify.successMessage\",\n              \"Your email has been successfully verified. You can now sign in to access all features.\",\n            )}\n          </p>\n\n          <p className=\"text-center text-sm text-[var(--color-text-tertiary)] mb-6\">\n            {tr(\"auth.emailVerify.redirecting\", \"Redirecting to sign in in\")}{\" \"}\n            <span className=\"font-semibold text-[var(--color-text-primary)]\">\n              {countdown}\n            </span>{\" \"}\n            {tr(\"auth.emailVerify.seconds\", \"seconds...\")}\n          </p>\n\n          <Button\n            type=\"button\"\n            onClick={handleContinueToLogin}\n            variant=\"default\"\n            size=\"lg\"\n            className=\"w-full font-semibold\"\n          >\n            {tr(\"auth.emailVerify.continueSignIn\", \"Continue to sign in now\")}\n          </Button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  // Error state\n  return (\n    <AuthLayout\n      title={tr(\"auth.emailVerify.failedTitle\", \"Verification failed\")}\n      subtitle={tr(\n        \"auth.emailVerify.failedSubtitle\",\n        \"We couldn't verify your email address\",\n      )}\n    >\n      <div className=\"flex flex-col items-center justify-center py-6\">\n        {/* Error Icon */}\n        <div className=\"size-20 rounded-full bg-[var(--color-status-error-bg-subtle)] flex items-center justify-center mb-6\">\n          <svg\n            className=\"size-10 text-[var(--color-status-error-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=\"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\n        <p className=\"text-center text-[var(--color-text-secondary)] mb-8\">\n          {tr(\n            \"auth.emailVerify.invalidLink\",\n            \"The verification link is invalid or has expired. Please request a new verification email.\",\n          )}\n        </p>\n\n        {resendSuccess ? (\n          <div className=\"w-full p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)] text-center mb-4\">\n            <p className=\"text-sm text-[var(--color-status-success-text)]\">\n              {tr(\n                \"auth.emailVerify.emailSent\",\n                \"Verification email sent! Please check your inbox.\",\n              )}\n            </p>\n          </div>\n        ) : (\n          <Button\n            type=\"button\"\n            onClick={handleResend}\n            disabled={isResending}\n            variant=\"default\"\n            size=\"lg\"\n            className=\"mb-4 w-full font-semibold\"\n          >\n            {isResending ? (\n              <>\n                <SpinnerIcon className=\"size-5 animate-spin\" />\n                <span>{tr(\"auth.emailVerify.sending\", \"Sending…\")}</span>\n              </>\n            ) : (\n              tr(\"auth.emailVerify.resend\", \"Resend verification email\")\n            )}\n          </Button>\n        )}\n\n        <button\n          type=\"button\"\n          onClick={handleBackToLogin}\n          className=\"w-full py-3 px-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] font-medium hover:bg-[var(--color-bg-sunken)] transition-all\"\n        >\n          {tr(\"auth.emailVerify.backToSignIn\", \"Back to sign in\")}\n        </button>\n      </div>\n    </AuthLayout>\n  );\n}\n"],"mappings":"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"}