@burdenoff/microfe-auth 2026.510.127

package/dist/auth/pages/SecurityPage.js

@@ -0,0 +1,587 @@
+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";
+//#region src/auth/pages/SecurityPage.tsx
+var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ u("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M9 5l7 7-7 7"
+	})
+}), v = ({ className: e }) => /* @__PURE__ */ u("svg", {
+	className: e,
+	fill: "currentColor",
+	viewBox: "0 0 20 20",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "currentColor",
+	viewBox: "0 0 20 20",
+	children: /* @__PURE__ */ u("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", {
+	className: e,
+	fill: "none",
+	viewBox: "0 0 24 24",
+	children: [/* @__PURE__ */ u("circle", {
+		className: "opacity-25",
+		cx: "12",
+		cy: "12",
+		r: "10",
+		stroke: "currentColor",
+		strokeWidth: "4"
+	}), /* @__PURE__ */ u("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);
+		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 = [
+		{
+			name: C("auth.security.navProfile", "User Profile"),
+			description: C("auth.security.navProfileDesc", "View and edit your profile information"),
+			path: "/auth/profile",
+			icon: h,
+			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"),
+			path: "/auth/mfa",
+			icon: p,
+			color: "text-accent-purple",
+			bgColor: "bg-accent-purple-subtle"
+		},
+		{
+			name: C("auth.security.navUsers", "Users"),
+			description: C("auth.security.navUsersDesc", "Manage system users"),
+			path: "/auth/users",
+			icon: m,
+			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"),
+		path: "/auth/magic-link",
+		icon: ee,
+		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"),
+		path: "/auth/sso",
+		icon: g,
+		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);
+		try {
+			await E(), w("/auth/login"), P(!1);
+		} catch (e) {
+			console.error("Logout failed:", e), M(!1);
+		}
+	}, X = async () => {
+		K(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"));
+		} catch (e) {
+			K(e instanceof Error ? e.message : C("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"));
+			return;
+		}
+		a("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")));
+		} catch (e) {
+			o("error"), K(e instanceof Error ? e.message : C("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"),
+			variant: "warning",
+			isPending: j,
+			onConfirm: Y
+		}), /* @__PURE__ */ d("main", {
+			className: "max-w-7xl mx-auto space-y-8",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ u("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", {
+						className: "text-lg font-bold text-text-primary",
+						children: C("auth.security.title", "Security Center")
+					}), /* @__PURE__ */ u("p", {
+						className: "text-xs text-text-secondary ",
+						children: C("auth.security.subtitle", "Account & Authentication")
+					})] })]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "auth-hero-card rounded-2xl p-6",
+					children: /* @__PURE__ */ d("div", {
+						className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ u("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", {
+								className: "text-xl font-bold",
+								children: C("auth.security.securityStatus", "Security Status")
+							}), /* @__PURE__ */ u("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")
+							})] })]
+						}), /* @__PURE__ */ u("div", {
+							className: "flex items-center gap-3",
+							children: T?.mfaEnabled ? /* @__PURE__ */ d("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"),
+								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")]
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "mb-8 p-6 rounded-2xl bg-bg-surface  border border-border-subtle  shadow-sm",
+					children: [/* @__PURE__ */ u("h3", {
+						className: "text-lg font-semibold text-text-primary mb-4",
+						children: C("auth.security.accountInfo", "Account Information")
+					}), /* @__PURE__ */ d("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "sm:col-span-2 lg:col-span-1",
+								children: [/* @__PURE__ */ u("dt", {
+									className: "text-sm font-medium text-text-secondary",
+									children: C("auth.security.email", "Email")
+								}), /* @__PURE__ */ d("dd", {
+									className: "mt-1 text-text-primary",
+									children: [/* @__PURE__ */ u("span", {
+										className: "block truncate",
+										title: T?.email,
+										children: T?.email
+									}), T?.emailVerified && /* @__PURE__ */ d("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")]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+								className: "text-sm font-medium text-text-secondary",
+								children: C("auth.security.username", "Username")
+							}), /* @__PURE__ */ u("dd", {
+								className: "mt-1 text-text-primary truncate",
+								title: T?.username ?? void 0,
+								children: T?.username || "-"
+							})] }),
+							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+								className: "text-sm font-medium text-text-secondary",
+								children: C("auth.security.role", "Role")
+							}), /* @__PURE__ */ u("dd", {
+								className: "mt-1",
+								children: /* @__PURE__ */ u("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"
+								})
+							})] }),
+							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("dt", {
+								className: "text-sm font-medium text-text-secondary",
+								children: C("auth.security.memberSince", "Member Since")
+							}), /* @__PURE__ */ u("dd", {
+								className: "mt-1 text-text-primary",
+								children: T?.createdAt ? r(T.createdAt) : "-"
+							})] })
+						]
+					})]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "mb-8",
+					children: [/* @__PURE__ */ u("h3", {
+						className: "text-lg font-semibold text-text-primary mb-4",
+						children: C("auth.security.securityAuth", "Security & Authentication")
+					}), /* @__PURE__ */ u("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),
+							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", {
+								className: "flex items-start gap-4",
+								children: [
+									/* @__PURE__ */ u("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}` })
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ u("h4", {
+											className: "text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors",
+											children: e.name
+										}), /* @__PURE__ */ u("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" })
+								]
+							})
+						}, e.path))
+					})]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "mb-8",
+					children: [/* @__PURE__ */ u("h3", {
+						className: "text-lg font-semibold text-text-primary mb-4",
+						children: C("auth.security.quickActions", "Quick Actions")
+					}), /* @__PURE__ */ u("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+						children: ne.map((e) => /* @__PURE__ */ u("button", {
+							onClick: () => w(e.path),
+							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", {
+								className: "flex items-start gap-4",
+								children: [
+									/* @__PURE__ */ u("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}` })
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ u("h4", {
+											className: "text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors",
+											children: e.name
+										}), /* @__PURE__ */ u("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" })
+								]
+							})
+						}, e.path))
+					})]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+					children: [/* @__PURE__ */ d("div", {
+						className: "p-6 rounded-2xl bg-bg-surface  border border-border-subtle ",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex items-start justify-between",
+							children: /* @__PURE__ */ d("div", { children: [
+								/* @__PURE__ */ u("h3", {
+									className: "text-lg font-semibold text-text-primary",
+									children: C("auth.security.password", "Password")
+								}),
+								/* @__PURE__ */ u("p", {
+									className: "mt-1 text-sm text-text-secondary ",
+									children: C("auth.security.updatePassword", "Update your password to keep your account secure")
+								}),
+								/* @__PURE__ */ u("p", {
+									className: "mt-2 text-xs text-text-tertiary ",
+									children: C("auth.security.lastChanged", "Last changed: Never")
+								})
+							] })
+						}), /* @__PURE__ */ u("button", {
+							onClick: () => w("/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")
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: "p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "text-lg font-semibold text-status-error-text",
+								children: C("auth.security.dangerZone", "Danger Zone")
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "mt-1 text-sm text-status-error-text/80",
+								children: C("auth.security.dangerWarning", "These actions affect your account. Proceed with caution.")
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "mt-4 flex flex-wrap gap-3",
+								children: [/* @__PURE__ */ u("button", {
+									onClick: () => R(!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),
+									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")
+								})]
+							})
+						]
+					})]
+				}),
+				L && /* @__PURE__ */ u("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",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "text-xl font-bold text-text-primary mb-2",
+								children: C("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.")
+							}),
+							G && /* @__PURE__ */ u("div", {
+								className: "mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm",
+								children: G
+							}),
+							q && /* @__PURE__ */ u("div", {
+								className: "mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm",
+								children: q
+							}),
+							/* @__PURE__ */ d("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", {
+									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")
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex gap-3",
+								children: [/* @__PURE__ */ u("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 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")]
+								})]
+							})
+						]
+					})
+				}),
+				z && /* @__PURE__ */ u("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",
+						children: [
+							/* @__PURE__ */ u("h3", {
+								className: "text-xl font-bold text-status-error-text mb-2",
+								children: C("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.")
+							}),
+							G && /* @__PURE__ */ u("div", {
+								className: "mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm",
+								children: G
+							}),
+							q && /* @__PURE__ */ u("div", {
+								className: "mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm",
+								children: q
+							}),
+							/* @__PURE__ */ d("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", {
+									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")
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ d("label", {
+									className: "block text-sm font-medium text-text-primary  mb-1",
+									children: [
+										C("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
+										}),
+										" ",
+										C("auth.security.toConfirm", "to confirm")
+									]
+								}), /* @__PURE__ */ u("input", {
+									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")
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex gap-3",
+								children: [/* @__PURE__ */ u("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 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")]
+								})]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ u("footer", {
+					className: "mt-12 pt-6 border-t border-border-subtle ",
+					children: /* @__PURE__ */ d("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"),
+							" ",
+							/* @__PURE__ */ u("span", {
+								className: "font-medium text-text-primary ",
+								children: T?.email
+							})
+						] }), /* @__PURE__ */ d("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__ */ u("span", {
+									className: "text-text-muted ",
+									children: "|"
+								}),
+								/* @__PURE__ */ u("button", {
+									onClick: () => P(!0),
+									className: "hover:text-status-error-text  transition-colors",
+									children: C("auth.security.signOut", "Sign Out")
+								})
+							]
+						})]
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { S as SecurityPage };
+
+//# sourceMappingURL=SecurityPage.js.map