@burdenoff/microfe-auth 2026.511.1 → 2026.514.1

package/dist/auth/pages/SecurityPage.js

@@ -2,576 +2,644 @@ import { useAuthStore as e } from "../store/authStore.js";
 import { useAuthOperations as t } from "../hooks/useAuthOperations.js";
 import { useAccountOperations as n } from "../hooks/useAccountOperations.js";
 import "../hooks/index.js";
-import { formatDate as r } from "../utils/formatters.js";
-import { ConfirmActionDialog as i } from "../components/ConfirmActionDialog.js";
-import { nativeImpact as a, nativeNotify as o } from "../../utils/nativeBridge.js";
-import { useState as s } from "react";
-import { useNavigate as c } from "react-router-dom";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { formatDate as ee } from "../utils/formatters.js";
+import { ConfirmActionDialog as r } from "../components/ConfirmActionDialog.js";
+import { nativeImpact as i, nativeNotify as a } from "../../utils/nativeBridge.js";
+import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { useNavigate as u } from "react-router-dom";
+import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/auth/pages/SecurityPage.tsx
-var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
+var m = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		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"
 	})
-}), p = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), te = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		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"
 	})
-}), m = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), ne = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
 	})
-}), h = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), re = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
 	})
-}), g = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), ie = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
 	})
-}), ee = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), h = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
 	})
-}), _ = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), g = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
 	stroke: "currentColor",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M9 5l7 7-7 7"
 	})
-}), v = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), _ = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "currentColor",
 	viewBox: "0 0 20 20",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		fillRule: "evenodd",
 		d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
 		clipRule: "evenodd"
 	})
-}), y = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), ae = ({ className: e }) => /* @__PURE__ */ f("svg", {
 	className: e,
 	fill: "currentColor",
 	viewBox: "0 0 20 20",
-	children: /* @__PURE__ */ u("path", {
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ f("path", {
 		fillRule: "evenodd",
 		d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
 		clipRule: "evenodd"
 	})
-}), b = ({ className: e }) => /* @__PURE__ */ d("svg", {
+}), v = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	viewBox: "0 0 24 24",
-	children: [/* @__PURE__ */ u("circle", {
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ f("circle", {
 		className: "opacity-25",
 		cx: "12",
 		cy: "12",
 		r: "10",
 		stroke: "currentColor",
 		strokeWidth: "4"
-	}), /* @__PURE__ */ u("path", {
+	}), /* @__PURE__ */ f("path", {
 		className: "opacity-75",
 		fill: "currentColor",
 		d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 	})]
-}), x = "DELETE MY ACCOUNT";
-function S() {
-	let { t: S } = l(), C = (e, t) => {
-		let n = S(e);
+}), y = "DELETE MY ACCOUNT";
+function b() {
+	let { t: b } = d(), x = (e, t) => {
+		let n = b(e);
 		return n === e ? t : n;
-	}, w = c(), T = e((e) => e.user), { signOut: E } = t({ disableCurrentUserQuery: !0 }), { deactivateAccount: D, deleteAccount: O, isDeactivating: k, isDeleting: A } = n(), [j, M] = s(!1), [N, P] = s(!1), F = [
+	}, S = u(), C = e((e) => e.user), { signOut: oe } = t({ disableCurrentUserQuery: !0 }), { deactivateAccount: se, deleteAccount: ce, isDeactivating: w, isDeleting: T } = n(), [E, D] = l(!1), [le, O] = l(!1), ue = [
 		{
-			name: C("auth.security.navProfile", "User Profile"),
-			description: C("auth.security.navProfileDesc", "View and edit your profile information"),
+			name: x("auth.security.navProfile", "User Profile"),
+			description: x("auth.security.navProfileDesc", "View and edit your profile information"),
 			path: "/auth/profile",
-			icon: h,
+			icon: re,
 			color: "text-accent-teal",
 			bgColor: "bg-accent-teal-subtle"
 		},
 		{
-			name: C("auth.security.navMfa", "Two-Factor Authentication"),
-			description: C("auth.security.navMfaDesc", "Secure your account with TOTP"),
+			name: x("auth.security.navMfa", "Two-Factor Authentication"),
+			description: x("auth.security.navMfaDesc", "Secure your account with TOTP"),
 			path: "/auth/mfa",
-			icon: p,
+			icon: te,
 			color: "text-accent-purple",
 			bgColor: "bg-accent-purple-subtle"
 		},
 		{
-			name: C("auth.security.navUsers", "Users"),
-			description: C("auth.security.navUsersDesc", "Manage system users"),
+			name: x("auth.security.navUsers", "Users"),
+			description: x("auth.security.navUsersDesc", "Manage system users"),
 			path: "/auth/users",
-			icon: m,
+			icon: ne,
 			color: "text-accent-indigo",
 			bgColor: "bg-accent-indigo-subtle",
 			adminOnly: !0
 		}
-	], I = [{
-		name: C("auth.security.navMagicLink", "Magic Link Login"),
-		description: C("auth.security.navMagicLinkDesc", "Passwordless authentication"),
+	], de = [{
+		name: x("auth.security.navMagicLink", "Magic Link Login"),
+		description: x("auth.security.navMagicLinkDesc", "Passwordless authentication"),
 		path: "/auth/magic-link",
-		icon: ee,
+		icon: h,
 		color: "text-accent-pink",
 		bgColor: "bg-accent-pink-subtle"
 	}, {
-		name: C("auth.security.navSso", "SSO Configuration"),
-		description: C("auth.security.navSsoDesc", "Enterprise single sign-on"),
+		name: x("auth.security.navSso", "SSO Configuration"),
+		description: x("auth.security.navSsoDesc", "Enterprise single sign-on"),
 		path: "/auth/sso",
-		icon: g,
+		icon: ie,
 		color: "text-accent-cyan",
 		bgColor: "bg-accent-cyan-subtle",
 		adminOnly: !0
-	}], [L, R] = s(!1), [z, B] = s(!1), [V, H] = s(""), [U, W] = s(""), [G, K] = s(null), [q, J] = s(null), Y = async () => {
-		M(!0);
+	}], [k, A] = l(!1), [j, M] = l(!1), [N, P] = l(""), [F, I] = l(""), [L, R] = l(null), [z, B] = l(null), V = s(), H = s(), U = s(), W = s(), G = s(), K = s(), q = s(), J = c(null), Y = c(null), X = c(null), Z = c(null);
+	o(() => {
+		k ? X.current?.focus() : J.current?.focus();
+	}, [k]), o(() => {
+		j ? Z.current?.focus() : Y.current?.focus();
+	}, [j]);
+	let fe = async () => {
+		D(!0);
 		try {
-			await E(), w("/auth/login"), P(!1);
+			await oe(), S("/auth/login"), O(!1);
 		} catch (e) {
-			console.error("Logout failed:", e), M(!1);
+			console.error("Logout failed:", e), D(!1);
 		}
-	}, X = async () => {
-		K(null);
+	}, pe = async () => {
+		R(null);
 		try {
-			let e = await D(V);
-			e.success ? w("/auth/login", { replace: !0 }) : K(e.message || C("auth.security.deactivateFailed", "Failed to deactivate account"));
+			let e = await se(N);
+			e.success ? S("/auth/login", { replace: !0 }) : R(e.message || x("auth.security.deactivateFailed", "Failed to deactivate account"));
 		} catch (e) {
-			K(e instanceof Error ? e.message : C("auth.security.deactivateFailed", "Failed to deactivate account"));
+			R(e instanceof Error ? e.message : x("auth.security.deactivateFailed", "Failed to deactivate account"));
 		}
-	}, Z = async () => {
-		if (K(null), U !== x) {
-			K(C("auth.security.deleteConfirmMismatch", "Please type \"DELETE MY ACCOUNT\" to confirm"));
+	}, me = async () => {
+		if (R(null), F !== y) {
+			R(x("auth.security.deleteConfirmMismatch", "Please type \"DELETE MY ACCOUNT\" to confirm"));
 			return;
 		}
-		a("medium");
+		i("medium");
 		try {
-			let e = await O(V, U);
-			e.success ? (o("success"), w("/auth/login", { replace: !0 })) : (o("error"), K(e.message || C("auth.security.deleteFailed", "Failed to delete account")));
+			let e = await ce(N, F);
+			e.success ? (a("success"), S("/auth/login", { replace: !0 })) : (a("error"), R(e.message || x("auth.security.deleteFailed", "Failed to delete account")));
 		} catch (e) {
-			o("error"), K(e instanceof Error ? e.message : C("auth.security.deleteFailed", "Failed to delete account"));
+			a("error"), R(e instanceof Error ? e.message : x("auth.security.deleteFailed", "Failed to delete account"));
 		}
 	}, Q = () => {
-		R(!1), B(!1), H(""), W(""), K(null), J(null);
-	}, $ = T?.role === "SUPER_ADMIN" || T?.role === "TENANT_ADMIN" || T?.role === "ORG_ADMIN", te = F.filter((e) => !e.adminOnly || $), ne = I.filter((e) => !e.adminOnly || $);
-	return /* @__PURE__ */ d("div", {
-		className: "bg-[var(--color-bg-canvas)] p-6",
-		children: [/* @__PURE__ */ u(i, {
-			open: N,
-			onOpenChange: P,
-			title: C("auth.security.signOutDialogTitle", "Sign out now?"),
-			description: C("auth.security.signOutDialogDescription", "You will be signed out of this device and returned to the login screen."),
-			confirmText: C("auth.security.signOutDialogConfirm", "Sign out"),
+		A(!1), M(!1), P(""), I(""), R(null), B(null);
+	}, $ = C?.role === "SUPER_ADMIN" || C?.role === "TENANT_ADMIN" || C?.role === "ORG_ADMIN", he = ue.filter((e) => !e.adminOnly || $), ge = de.filter((e) => !e.adminOnly || $);
+	return /* @__PURE__ */ p("div", {
+		className: "bg-bg-canvas p-6",
+		children: [/* @__PURE__ */ f(r, {
+			open: le,
+			onOpenChange: O,
+			title: x("auth.security.signOutDialogTitle", "Sign out now?"),
+			description: x("auth.security.signOutDialogDescription", "You will be signed out of this device and returned to the login screen."),
+			confirmText: x("auth.security.signOutDialogConfirm", "Sign out"),
 			variant: "warning",
-			isPending: j,
-			onConfirm: Y
-		}), /* @__PURE__ */ d("main", {
+			isPending: E,
+			onConfirm: fe
+		}), /* @__PURE__ */ p("main", {
 			className: "max-w-7xl mx-auto space-y-8",
 			children: [
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ p("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ u("div", {
+					children: [/* @__PURE__ */ f("div", {
 						className: "auth-brand-badge flex h-10 w-10 items-center justify-center rounded-xl",
-						children: /* @__PURE__ */ u(f, { className: "w-6 h-6 text-white" })
-					}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
+						children: /* @__PURE__ */ f(m, { className: "w-6 h-6 text-white" })
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
 						className: "text-lg font-bold text-text-primary",
-						children: C("auth.security.title", "Security Center")
-					}), /* @__PURE__ */ u("p", {
+						children: x("auth.security.title", "Security Center")
+					}), /* @__PURE__ */ f("p", {
 						className: "text-xs text-text-secondary ",
-						children: C("auth.security.subtitle", "Account & Authentication")
+						children: x("auth.security.subtitle", "Account & Authentication")
 					})] })]
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ f("div", {
 					className: "auth-hero-card rounded-2xl p-6",
-					children: /* @__PURE__ */ d("div", {
+					children: /* @__PURE__ */ p("div", {
 						className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4",
-						children: [/* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex items-center gap-4",
-							children: [/* @__PURE__ */ u("div", {
+							children: [/* @__PURE__ */ f("div", {
 								className: "w-14 h-14 rounded-2xl bg-bg-surface/20 backdrop-blur flex items-center justify-center",
-								children: /* @__PURE__ */ u(f, { className: "w-8 h-8 text-white" })
-							}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h2", {
+								children: /* @__PURE__ */ f(m, { className: "w-8 h-8 text-white" })
+							}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h2", {
 								className: "text-xl font-bold",
-								children: C("auth.security.securityStatus", "Security Status")
-							}), /* @__PURE__ */ u("p", {
+								children: x("auth.security.securityStatus", "Security Status")
+							}), /* @__PURE__ */ f("p", {
 								className: "opacity-80",
-								children: T?.mfaEnabled ? C("auth.security.wellProtected", "Your account is well protected") : C("auth.security.enableMfaSuggestion", "Enable MFA for better security")
+								children: C?.mfaEnabled ? x("auth.security.wellProtected", "Your account is well protected") : x("auth.security.enableMfaSuggestion", "Enable MFA for better security")
 							})] })]
-						}), /* @__PURE__ */ u("div", {
+						}), /* @__PURE__ */ f("div", {
 							className: "flex items-center gap-3",
-							children: T?.mfaEnabled ? /* @__PURE__ */ d("span", {
+							children: C?.mfaEnabled ? /* @__PURE__ */ p("span", {
 								className: "inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface/20 backdrop-blur text-white font-medium",
-								children: [/* @__PURE__ */ u(v, { className: "w-5 h-5 text-status-success-text" }), C("auth.security.mfaEnabled", "MFA Enabled")]
-							}) : /* @__PURE__ */ d("button", {
-								onClick: () => w("/auth/mfa"),
+								children: [/* @__PURE__ */ f(_, { className: "w-5 h-5 text-status-success-text" }), x("auth.security.mfaEnabled", "MFA Enabled")]
+							}) : /* @__PURE__ */ p("button", {
+								type: "button",
+								onClick: () => S("/auth/mfa"),
 								className: "inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface text-text-link font-semibold hover:bg-status-info-bg-subtle transition-colors shadow-lg",
-								children: [/* @__PURE__ */ u(y, { className: "w-5 h-5 text-status-warning-text" }), C("auth.security.enableMfaNow", "Enable MFA Now")]
+								children: [/* @__PURE__ */ f(ae, { className: "w-5 h-5 text-status-warning-text" }), x("auth.security.enableMfaNow", "Enable MFA Now")]
 							})
 						})]
 					})
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ p("div", {
 					className: "mb-8 p-6 rounded-2xl bg-bg-surface  border border-border-subtle  shadow-sm",
-					children: [/* @__PURE__ */ u("h3", {
+					children: [/* @__PURE__ */ f("h3", {
 						className: "text-lg font-semibold text-text-primary mb-4",
-						children: C("auth.security.accountInfo", "Account Information")
-					}), /* @__PURE__ */ d("div", {
+						children: x("auth.security.accountInfo", "Account Information")
+					}), /* @__PURE__ */ p("dl", {
 						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
 						children: [
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "sm:col-span-2 lg:col-span-1",
-								children: [/* @__PURE__ */ u("dt", {
+								children: [/* @__PURE__ */ f("dt", {
 									className: "text-sm font-medium text-text-secondary",
-									children: C("auth.security.email", "Email")
-								}), /* @__PURE__ */ d("dd", {
+									children: x("auth.security.email", "Email")
+								}), /* @__PURE__ */ p("dd", {
 									className: "mt-1 text-text-primary",
-									children: [/* @__PURE__ */ u("span", {
+									children: [/* @__PURE__ */ f("span", {
 										className: "block truncate",
-										title: T?.email,
-										children: T?.email
-									}), T?.emailVerified && /* @__PURE__ */ d("span", {
+										title: C?.email,
+										children: C?.email
+									}), C?.emailVerified && /* @__PURE__ */ p("span", {
 										className: "mt-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium",
-										children: [/* @__PURE__ */ u(v, { className: "w-3 h-3" }), C("auth.security.verified", "Verified")]
+										children: [/* @__PURE__ */ f(_, { className: "w-3 h-3" }), x("auth.security.verified", "Verified")]
 									})]
 								})]
 							}),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", {
 								className: "text-sm font-medium text-text-secondary",
-								children: C("auth.security.username", "Username")
-							}), /* @__PURE__ */ u("dd", {
+								children: x("auth.security.username", "Username")
+							}), /* @__PURE__ */ f("dd", {
 								className: "mt-1 text-text-primary truncate",
-								title: T?.username ?? void 0,
-								children: T?.username || "-"
+								title: C?.username ?? void 0,
+								children: C?.username || "-"
 							})] }),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", {
 								className: "text-sm font-medium text-text-secondary",
-								children: C("auth.security.role", "Role")
-							}), /* @__PURE__ */ u("dd", {
+								children: x("auth.security.role", "Role")
+							}), /* @__PURE__ */ f("dd", {
 								className: "mt-1",
-								children: /* @__PURE__ */ u("span", {
+								children: /* @__PURE__ */ f("span", {
 									className: "inline-flex px-2.5 py-0.5 rounded-full bg-accent-indigo-subtle text-accent-indigo text-xs font-medium",
-									children: T?.role || "USER"
+									children: C?.role || "USER"
 								})
 							})] }),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", {
 								className: "text-sm font-medium text-text-secondary",
-								children: C("auth.security.memberSince", "Member Since")
-							}), /* @__PURE__ */ u("dd", {
+								children: x("auth.security.memberSince", "Member Since")
+							}), /* @__PURE__ */ f("dd", {
 								className: "mt-1 text-text-primary",
-								children: T?.createdAt ? r(T.createdAt) : "-"
+								children: C?.createdAt ? ee(C.createdAt) : "-"
 							})] })
 						]
 					})]
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ p("div", {
 					className: "mb-8",
-					children: [/* @__PURE__ */ u("h3", {
+					children: [/* @__PURE__ */ f("h3", {
 						className: "text-lg font-semibold text-text-primary mb-4",
-						children: C("auth.security.securityAuth", "Security & Authentication")
-					}), /* @__PURE__ */ u("div", {
+						children: x("auth.security.securityAuth", "Security & Authentication")
+					}), /* @__PURE__ */ f("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-						children: te.map((e) => /* @__PURE__ */ u("button", {
-							onClick: () => w(e.path),
+						children: he.map((e) => /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => S(e.path),
+							"aria-label": e.name,
 							className: "group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left",
-							children: /* @__PURE__ */ d("div", {
+							children: /* @__PURE__ */ p("div", {
 								className: "flex items-start gap-4",
 								children: [
-									/* @__PURE__ */ u("div", {
+									/* @__PURE__ */ f("div", {
 										className: `w-12 h-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`,
-										children: /* @__PURE__ */ u(e.icon, { className: `w-6 h-6 ${e.color}` })
+										children: /* @__PURE__ */ f(e.icon, { className: `w-6 h-6 ${e.color}` })
 									}),
-									/* @__PURE__ */ d("div", {
+									/* @__PURE__ */ p("div", {
 										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ u("h4", {
+										children: [/* @__PURE__ */ f("h4", {
 											className: "text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors",
 											children: e.name
-										}), /* @__PURE__ */ u("p", {
+										}), /* @__PURE__ */ f("p", {
 											className: "mt-1 text-sm text-text-secondary ",
 											children: e.description
 										})]
 									}),
-									/* @__PURE__ */ u(_, { className: "w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0" })
+									/* @__PURE__ */ f(g, { className: "w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0" })
 								]
 							})
 						}, e.path))
 					})]
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ p("div", {
 					className: "mb-8",
-					children: [/* @__PURE__ */ u("h3", {
+					children: [/* @__PURE__ */ f("h3", {
 						className: "text-lg font-semibold text-text-primary mb-4",
-						children: C("auth.security.quickActions", "Quick Actions")
-					}), /* @__PURE__ */ u("div", {
+						children: x("auth.security.quickActions", "Quick Actions")
+					}), /* @__PURE__ */ f("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
-						children: ne.map((e) => /* @__PURE__ */ u("button", {
-							onClick: () => w(e.path),
+						children: ge.map((e) => /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => S(e.path),
+							"aria-label": e.name,
 							className: "group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left",
-							children: /* @__PURE__ */ d("div", {
+							children: /* @__PURE__ */ p("div", {
 								className: "flex items-start gap-4",
 								children: [
-									/* @__PURE__ */ u("div", {
+									/* @__PURE__ */ f("div", {
 										className: `w-12 h-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`,
-										children: /* @__PURE__ */ u(e.icon, { className: `w-6 h-6 ${e.color}` })
+										children: /* @__PURE__ */ f(e.icon, { className: `w-6 h-6 ${e.color}` })
 									}),
-									/* @__PURE__ */ d("div", {
+									/* @__PURE__ */ p("div", {
 										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ u("h4", {
+										children: [/* @__PURE__ */ f("h4", {
 											className: "text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors",
 											children: e.name
-										}), /* @__PURE__ */ u("p", {
+										}), /* @__PURE__ */ f("p", {
 											className: "mt-1 text-sm text-text-secondary ",
 											children: e.description
 										})]
 									}),
-									/* @__PURE__ */ u(_, { className: "w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0" })
+									/* @__PURE__ */ f(g, { className: "w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0" })
 								]
 							})
 						}, e.path))
 					})]
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ p("div", {
 					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ p("div", {
 						className: "p-6 rounded-2xl bg-bg-surface  border border-border-subtle ",
-						children: [/* @__PURE__ */ u("div", {
+						children: [/* @__PURE__ */ f("div", {
 							className: "flex items-start justify-between",
-							children: /* @__PURE__ */ d("div", { children: [
-								/* @__PURE__ */ u("h3", {
+							children: /* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("h3", {
 									className: "text-lg font-semibold text-text-primary",
-									children: C("auth.security.password", "Password")
+									children: x("auth.security.password", "Password")
 								}),
-								/* @__PURE__ */ u("p", {
+								/* @__PURE__ */ f("p", {
 									className: "mt-1 text-sm text-text-secondary ",
-									children: C("auth.security.updatePassword", "Update your password to keep your account secure")
+									children: x("auth.security.updatePassword", "Update your password to keep your account secure")
 								}),
-								/* @__PURE__ */ u("p", {
+								/* @__PURE__ */ f("p", {
 									className: "mt-2 text-xs text-text-tertiary ",
-									children: C("auth.security.lastChanged", "Last changed: Never")
+									children: x("auth.security.lastChanged", "Last changed: Never")
 								})
 							] })
-						}), /* @__PURE__ */ u("button", {
-							onClick: () => w("/auth/reset-password"),
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => S("/auth/reset-password"),
 							className: "auth-primary-button mt-4 w-full px-5 py-2.5 font-semibold sm:w-auto",
-							children: C("auth.security.changePassword", "Change Password")
+							children: x("auth.security.changePassword", "Change Password")
 						})]
-					}), /* @__PURE__ */ d("div", {
+					}), /* @__PURE__ */ p("div", {
 						className: "p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border",
 						children: [
-							/* @__PURE__ */ u("h3", {
+							/* @__PURE__ */ f("h3", {
 								className: "text-lg font-semibold text-status-error-text",
-								children: C("auth.security.dangerZone", "Danger Zone")
+								children: x("auth.security.dangerZone", "Danger Zone")
 							}),
-							/* @__PURE__ */ u("p", {
+							/* @__PURE__ */ f("p", {
 								className: "mt-1 text-sm text-status-error-text/80",
-								children: C("auth.security.dangerWarning", "These actions affect your account. Proceed with caution.")
+								children: x("auth.security.dangerWarning", "These actions affect your account. Proceed with caution.")
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "mt-4 flex flex-wrap gap-3",
-								children: [/* @__PURE__ */ u("button", {
-									onClick: () => R(!0),
+								children: [/* @__PURE__ */ f("button", {
+									ref: J,
+									type: "button",
+									onClick: () => A(!0),
 									className: "px-5 py-2.5 rounded-xl border-2 border-status-warning-border text-status-warning-text font-semibold hover:bg-status-warning-bg-subtle transition-all duration-200",
-									children: C("auth.security.deactivateAccount", "Deactivate Account")
-								}), /* @__PURE__ */ u("button", {
-									onClick: () => B(!0),
+									children: x("auth.security.deactivateAccount", "Deactivate Account")
+								}), /* @__PURE__ */ f("button", {
+									ref: Y,
+									type: "button",
+									onClick: () => M(!0),
 									className: "px-5 py-2.5 rounded-xl border-2 border-status-error-border text-status-error-text font-semibold hover:bg-status-error-bg-subtle transition-all duration-200",
-									children: C("auth.security.deleteAccount", "Delete Account")
+									children: x("auth.security.deleteAccount", "Delete Account")
 								})]
 							})
 						]
 					})]
 				}),
-				L && /* @__PURE__ */ u("div", {
+				k && /* @__PURE__ */ f("div", {
 					className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
-					children: /* @__PURE__ */ d("div", {
-						className: "w-full max-w-md bg-bg-surface  rounded-2xl shadow-2xl p-6",
+					role: "presentation",
+					onClick: (e) => {
+						e.target === e.currentTarget && Q();
+					},
+					children: /* @__PURE__ */ p("div", {
+						ref: X,
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": V,
+						tabIndex: -1,
+						className: "w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none",
 						children: [
-							/* @__PURE__ */ u("h3", {
+							/* @__PURE__ */ f("h3", {
+								id: V,
 								className: "text-xl font-bold text-text-primary mb-2",
-								children: C("auth.security.deactivateTitle", "Deactivate Account")
+								children: x("auth.security.deactivateTitle", "Deactivate Account")
 							}),
-							/* @__PURE__ */ u("p", {
-								className: "text-sm text-text-secondary  mb-4",
-								children: C("auth.security.deactivateDesc", "Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.")
+							/* @__PURE__ */ f("p", {
+								className: "text-sm text-text-secondary mb-4",
+								children: x("auth.security.deactivateDesc", "Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.")
 							}),
-							G && /* @__PURE__ */ u("div", {
+							L && /* @__PURE__ */ f("div", {
+								id: U,
+								role: "alert",
 								className: "mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm",
-								children: G
+								children: L
 							}),
-							q && /* @__PURE__ */ u("div", {
+							z && /* @__PURE__ */ f("div", {
+								role: "status",
 								className: "mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm",
-								children: q
+								children: z
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "mb-4",
-								children: [/* @__PURE__ */ u("label", {
-									className: "block text-sm font-medium text-text-primary  mb-1",
-									children: C("auth.security.enterPasswordConfirm", "Enter your password to confirm")
-								}), /* @__PURE__ */ u("input", {
+								children: [/* @__PURE__ */ f("label", {
+									htmlFor: H,
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: x("auth.security.enterPasswordConfirm", "Enter your password to confirm")
+								}), /* @__PURE__ */ f("input", {
+									id: H,
 									type: "password",
-									value: V,
-									onChange: (e) => H(e.target.value),
-									className: "w-full px-4 py-2 rounded-lg border border-border-default  bg-bg-surface  text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent",
-									placeholder: C("auth.security.yourPassword", "Your password")
+									value: N,
+									onChange: (e) => P(e.target.value),
+									"aria-describedby": L ? U : void 0,
+									className: "w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent",
+									placeholder: x("auth.security.yourPassword", "Your password")
 								})]
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "flex gap-3",
-								children: [/* @__PURE__ */ u("button", {
+								children: [/* @__PURE__ */ f("button", {
+									type: "button",
 									onClick: Q,
-									className: "flex-1 px-4 py-2 rounded-lg border border-border-default  text-text-primary  font-medium hover:bg-bg-sunken  transition-colors",
-									children: C("auth.security.cancel", "Cancel")
-								}), /* @__PURE__ */ d("button", {
-									onClick: X,
-									disabled: !V || k,
+									className: "flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
+									children: x("auth.security.cancel", "Cancel")
+								}), /* @__PURE__ */ p("button", {
+									type: "button",
+									onClick: () => void pe(),
+									disabled: !N || w,
 									className: "flex-1 px-4 py-2 rounded-lg bg-status-warning-bg text-white font-medium hover:bg-status-warning-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2",
-									children: [k && /* @__PURE__ */ u(b, { className: "w-4 h-4 animate-spin" }), C("auth.security.deactivateBtn", "Deactivate")]
+									children: [w && /* @__PURE__ */ f(v, { className: "w-4 h-4 animate-spin" }), x("auth.security.deactivateBtn", "Deactivate")]
 								})]
 							})
 						]
 					})
 				}),
-				z && /* @__PURE__ */ u("div", {
+				j && /* @__PURE__ */ f("div", {
 					className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
-					children: /* @__PURE__ */ d("div", {
-						className: "w-full max-w-md bg-bg-surface  rounded-2xl shadow-2xl p-6",
+					role: "presentation",
+					onClick: (e) => {
+						e.target === e.currentTarget && Q();
+					},
+					children: /* @__PURE__ */ p("div", {
+						ref: Z,
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": W,
+						tabIndex: -1,
+						className: "w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none",
 						children: [
-							/* @__PURE__ */ u("h3", {
+							/* @__PURE__ */ f("h3", {
+								id: W,
 								className: "text-xl font-bold text-status-error-text mb-2",
-								children: C("auth.security.deleteTitle", "Delete Account Permanently")
+								children: x("auth.security.deleteTitle", "Delete Account Permanently")
 							}),
-							/* @__PURE__ */ u("p", {
-								className: "text-sm text-text-secondary  mb-4",
-								children: C("auth.security.deleteDesc", "This action is irreversible. All your data will be permanently deleted and cannot be recovered.")
+							/* @__PURE__ */ f("p", {
+								className: "text-sm text-text-secondary mb-4",
+								children: x("auth.security.deleteDesc", "This action is irreversible. All your data will be permanently deleted and cannot be recovered.")
 							}),
-							G && /* @__PURE__ */ u("div", {
+							L && /* @__PURE__ */ f("div", {
+								id: q,
+								role: "alert",
 								className: "mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm",
-								children: G
+								children: L
 							}),
-							q && /* @__PURE__ */ u("div", {
+							z && /* @__PURE__ */ f("div", {
+								role: "status",
 								className: "mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm",
-								children: q
+								children: z
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "mb-4",
-								children: [/* @__PURE__ */ u("label", {
-									className: "block text-sm font-medium text-text-primary  mb-1",
-									children: C("auth.security.enterPasswordDelete", "Enter your password")
-								}), /* @__PURE__ */ u("input", {
+								children: [/* @__PURE__ */ f("label", {
+									htmlFor: G,
+									className: "block text-sm font-medium text-text-primary mb-1",
+									children: x("auth.security.enterPasswordDelete", "Enter your password")
+								}), /* @__PURE__ */ f("input", {
+									id: G,
 									type: "password",
-									value: V,
-									onChange: (e) => H(e.target.value),
-									className: "w-full px-4 py-2 rounded-lg border border-border-default  bg-bg-surface  text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent",
-									placeholder: C("auth.security.yourPassword", "Your password")
+									value: N,
+									onChange: (e) => P(e.target.value),
+									"aria-describedby": L ? q : void 0,
+									className: "w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent",
+									placeholder: x("auth.security.yourPassword", "Your password")
 								})]
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "mb-4",
-								children: [/* @__PURE__ */ d("label", {
-									className: "block text-sm font-medium text-text-primary  mb-1",
+								children: [/* @__PURE__ */ p("label", {
+									htmlFor: K,
+									className: "block text-sm font-medium text-text-primary mb-1",
 									children: [
-										C("auth.security.type", "Type"),
+										x("auth.security.type", "Type"),
 										" ",
-										/* @__PURE__ */ u("code", {
-											className: "px-1 py-0.5 rounded bg-bg-sunken  text-status-error-text font-mono text-sm",
-											children: x
+										/* @__PURE__ */ f("code", {
+											className: "px-1 py-0.5 rounded bg-bg-sunken text-status-error-text font-mono text-sm",
+											children: y
 										}),
 										" ",
-										C("auth.security.toConfirm", "to confirm")
+										x("auth.security.toConfirm", "to confirm")
 									]
-								}), /* @__PURE__ */ u("input", {
+								}), /* @__PURE__ */ f("input", {
+									id: K,
 									type: "text",
-									value: U,
-									onChange: (e) => W(e.target.value),
-									className: "w-full px-4 py-2 rounded-lg border border-border-default  bg-bg-surface  text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono",
-									placeholder: C("auth.security.deleteConfirmPlaceholder", "DELETE MY ACCOUNT")
+									value: F,
+									onChange: (e) => I(e.target.value),
+									"aria-describedby": L ? q : void 0,
+									className: "w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono",
+									placeholder: x("auth.security.deleteConfirmPlaceholder", "DELETE MY ACCOUNT")
 								})]
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ p("div", {
 								className: "flex gap-3",
-								children: [/* @__PURE__ */ u("button", {
+								children: [/* @__PURE__ */ f("button", {
+									type: "button",
 									onClick: Q,
-									className: "flex-1 px-4 py-2 rounded-lg border border-border-default  text-text-primary  font-medium hover:bg-bg-sunken  transition-colors",
-									children: C("auth.security.cancel", "Cancel")
-								}), /* @__PURE__ */ d("button", {
-									onClick: Z,
-									disabled: !V || U !== x || A,
+									className: "flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
+									children: x("auth.security.cancel", "Cancel")
+								}), /* @__PURE__ */ p("button", {
+									type: "button",
+									onClick: () => void me(),
+									disabled: !N || F !== y || T,
 									className: "flex-1 px-4 py-2 rounded-lg bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2",
-									children: [A && /* @__PURE__ */ u(b, { className: "w-4 h-4 animate-spin" }), C("auth.security.deleteForever", "Delete Forever")]
+									children: [T && /* @__PURE__ */ f(v, { className: "w-4 h-4 animate-spin" }), x("auth.security.deleteForever", "Delete Forever")]
 								})]
 							})
 						]
 					})
 				}),
-				/* @__PURE__ */ u("footer", {
+				/* @__PURE__ */ f("footer", {
 					className: "mt-12 pt-6 border-t border-border-subtle ",
-					children: /* @__PURE__ */ d("div", {
+					children: /* @__PURE__ */ p("div", {
 						className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm text-text-secondary ",
-						children: [/* @__PURE__ */ d("p", { children: [
-							C("auth.security.signedInAs", "Signed in as"),
+						children: [/* @__PURE__ */ p("p", { children: [
+							x("auth.security.signedInAs", "Signed in as"),
 							" ",
-							/* @__PURE__ */ u("span", {
+							/* @__PURE__ */ f("span", {
 								className: "font-medium text-text-primary ",
-								children: T?.email
+								children: C?.email
 							})
-						] }), /* @__PURE__ */ d("div", {
+						] }), /* @__PURE__ */ p("div", {
 							className: "flex items-center gap-4",
 							children: [
-								/* @__PURE__ */ u("button", {
-									onClick: () => w("/auth/login"),
-									className: "hover:text-text-primary  transition-colors",
-									children: C("auth.security.switchAccount", "Switch Account")
+								/* @__PURE__ */ f("button", {
+									type: "button",
+									onClick: () => S("/auth/login"),
+									className: "hover:text-text-primary transition-colors",
+									children: x("auth.security.switchAccount", "Switch Account")
 								}),
-								/* @__PURE__ */ u("span", {
-									className: "text-text-muted ",
+								/* @__PURE__ */ f("span", {
+									className: "text-text-muted",
+									"aria-hidden": "true",
 									children: "|"
 								}),
-								/* @__PURE__ */ u("button", {
-									onClick: () => P(!0),
-									className: "hover:text-status-error-text  transition-colors",
-									children: C("auth.security.signOut", "Sign Out")
+								/* @__PURE__ */ f("button", {
+									type: "button",
+									onClick: () => O(!0),
+									className: "hover:text-status-error-text transition-colors",
+									children: x("auth.security.signOut", "Sign Out")
 								})
 							]
 						})]
@@ -582,6 +650,6 @@ function S() {
 	});
 }
 //#endregion
-export { S as SecurityPage };
+export { b as SecurityPage };
 
 //# sourceMappingURL=SecurityPage.js.map