@burdenoff/microfe-auth 2026.520.1 → 2026.521.1

package/dist/auth/pages/UserProfilePage.js

@@ -4,164 +4,167 @@ import "../hooks/index.js";
 import { AuthLayout as n } from "../components/AuthLayout.js";
 import { AlertIcon as r, CheckIcon as i, EmailIcon as a, SpinnerIcon as o, UserIcon as s } from "../components/AuthIcons.js";
 import { useCompleteAvatarUploadMutation as c, useInitiateAvatarUploadMutation as l } from "../../generated/wspace-operations.js";
-import { useEffect as u, useRef as d, useState as f } from "react";
-import { useNavigate as p } from "react-router-dom";
-import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { useNavigate as m } from "react-router-dom";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useGatewayClient as y } from "@burdenoff/fe-libs/shared/graphql";
+import { useAuth as b } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
 //#region src/auth/pages/UserProfilePage.tsx
-function v() {
-	let { t: v } = m(), y = (e, t) => {
-		let n = v(e);
+function x() {
+	let { t: x } = h(), S = (e, t) => {
+		let n = x(e);
 		return n === e ? t : n;
-	}, b = p(), x = e((e) => e.isAuthenticated), S = e((e) => e.user), { updateCurrentUserProfile: C, isLoading: w } = t(), [T] = l(), [E] = c(), D = d(null), [O, k] = f(!1), A = async (e) => {
+	}, C = m(), w = b(), T = e((e) => e.isAuthenticated), E = e((e) => e.user), { updateCurrentUserProfile: D, isLoading: O } = t(), k = d(), A = d(), j = d(), M = d(), N = d(), P = y("workspace"), [F] = l({ client: P }), [I] = c({ client: P }), L = f(null), [R, z] = p(!1), B = async (e) => {
 		let t = e.target.files?.[0];
 		if (t) {
 			if (!t.type.startsWith("image/")) {
-				I(y("auth.profile.invalidImageType", "Please select an image file"));
+				K(S("auth.profile.invalidImageType", "Please select an image file"));
 				return;
 			}
-			k(!0), I(null);
+			z(!0), K(null);
 			try {
-				let e = await T({ variables: { input: {
+				let e = t.name.split(".").pop()?.toLowerCase() ?? "", n = await F({ variables: { input: {
 					fileName: t.name,
 					fileSize: t.size.toString(),
-					mimeType: t.type
-				} } }), n = e.data?.initiateUpload.session, r = e.data?.initiateUpload.uploadUrl;
-				if (!n || !r) throw Error("Failed to initiate upload");
-				if (!(await fetch(r, {
+					mimeType: t.type,
+					extension: e
+				} } }), r = n.data?.initiateUpload.session, i = n.data?.initiateUpload.uploadUrl;
+				if (!r || !i) throw Error("Failed to initiate upload");
+				if (!(await fetch(i, {
 					method: "PUT",
 					headers: { "Content-Type": t.type },
 					body: t
 				})).ok) throw Error("Failed to upload file");
-				let i = (await E({ variables: { input: { sessionId: n.id } } })).data?.completeUpload.file?.downloadUrl;
-				if (!i) throw Error("Upload succeeded but no URL returned");
-				await C({ avatar: i }), R(y("auth.profile.avatarUpdated", "Profile picture updated!"));
+				let a = (await I({ variables: { input: { sessionId: r.id } } })).data?.completeUpload.file?.downloadUrl;
+				if (!a) throw Error("Upload succeeded but no URL returned");
+				await D({ avatar: a }), w.updateUser({ avatar: a }), J(S("auth.profile.avatarUpdated", "Profile picture updated!"));
 			} catch (e) {
-				I(e instanceof Error ? e.message : y("auth.profile.avatarFailed", "Failed to upload picture"));
+				K(e instanceof Error ? e.message : S("auth.profile.avatarFailed", "Failed to upload picture"));
 			} finally {
-				k(!1), D.current && (D.current.value = "");
+				z(!1), L.current && (L.current.value = "");
 			}
 		}
-	}, [j, M] = f(!1), [N, P] = f({
+	}, [V, H] = p(!1), [U, W] = p({
 		username: "",
 		firstName: "",
 		lastName: "",
 		name: "",
 		phoneNumber: ""
-	}), [F, I] = f(null), [L, R] = f(null);
+	}), [G, K] = p(null), [q, J] = p(null);
 	return u(() => {
-		S && P({
-			username: S.username || "",
-			firstName: S.firstName || "",
-			lastName: S.lastName || "",
-			name: S.name || "",
-			phoneNumber: S.phoneNumber || ""
+		E && W({
+			username: E.username || "",
+			firstName: E.firstName || "",
+			lastName: E.lastName || "",
+			name: E.name || "",
+			phoneNumber: E.phoneNumber || ""
 		});
-	}, [S]), !x || !S ? /* @__PURE__ */ g(n, {
-		title: y("auth.profile.title", "Profile"),
-		subtitle: y("auth.profile.subtitle", "View and manage your profile"),
-		children: /* @__PURE__ */ _("div", {
+	}, [E]), !T || !E ? /* @__PURE__ */ _(n, {
+		title: S("auth.profile.title", "Profile"),
+		subtitle: S("auth.profile.subtitle", "View and manage your profile"),
+		children: /* @__PURE__ */ v("div", {
 			className: "text-center py-12",
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ _("div", {
 					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-status-warning-bg-subtle)] flex items-center justify-center",
-					children: /* @__PURE__ */ g(r, { className: "w-8 h-8 text-[var(--color-status-warning-text)]" })
+					children: /* @__PURE__ */ _(r, { className: "w-8 h-8 text-[var(--color-status-warning-text)]" })
 				}),
-				/* @__PURE__ */ g("h2", {
+				/* @__PURE__ */ _("h2", {
 					className: "text-xl font-semibold text-[var(--color-text-primary)] mb-2",
-					children: y("auth.profile.authRequired", "Authentication Required")
+					children: S("auth.profile.authRequired", "Authentication Required")
 				}),
-				/* @__PURE__ */ g("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-[var(--color-text-secondary)] mb-6",
-					children: y("auth.profile.signInToView", "Please sign in to view your profile")
+					children: S("auth.profile.signInToView", "Please sign in to view your profile")
 				}),
-				/* @__PURE__ */ g("button", {
-					onClick: () => b("/auth/login"),
+				/* @__PURE__ */ _("button", {
+					onClick: () => C("/auth/login"),
 					className: "auth-primary-button px-6 py-3 font-semibold",
-					children: y("auth.profile.signIn", "Sign In")
+					children: S("auth.profile.signIn", "Sign In")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ _("div", {
+	}) : /* @__PURE__ */ v("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ v("div", {
 				className: "mb-8",
-				children: [/* @__PURE__ */ g("h1", {
+				children: [/* @__PURE__ */ _("h1", {
 					className: "text-3xl font-semibold text-[var(--color-text-primary)]",
-					children: y("auth.profile.myProfile", "My Profile")
-				}), /* @__PURE__ */ g("p", {
+					children: S("auth.profile.myProfile", "My Profile")
+				}), /* @__PURE__ */ _("p", {
 					className: "text-[var(--color-text-secondary)] mt-2",
-					children: y("auth.profile.viewAndManage", "View and manage your account information")
+					children: S("auth.profile.viewAndManage", "View and manage your account information")
 				})]
 			}),
-			L && /* @__PURE__ */ _("div", {
+			q && /* @__PURE__ */ v("div", {
 				className: "mb-6 flex items-center gap-3 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]",
 				children: [
-					/* @__PURE__ */ g(i, { className: "w-5 h-5 text-[var(--color-status-success-text)] flex-shrink-0" }),
-					/* @__PURE__ */ g("p", {
+					/* @__PURE__ */ _(i, { className: "w-5 h-5 text-[var(--color-status-success-text)] flex-shrink-0" }),
+					/* @__PURE__ */ _("p", {
 						className: "text-[var(--color-status-success-text)]",
-						children: L
+						children: q
 					}),
-					/* @__PURE__ */ g("button", {
-						onClick: () => R(null),
+					/* @__PURE__ */ _("button", {
+						onClick: () => J(null),
 						className: "ml-auto text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200",
-						children: y("auth.profile.dismiss", "Dismiss")
+						children: S("auth.profile.dismiss", "Dismiss")
 					})
 				]
 			}),
-			F && /* @__PURE__ */ _("div", {
+			G && /* @__PURE__ */ v("div", {
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]",
 				children: [
-					/* @__PURE__ */ g(r, { className: "w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ _(r, { className: "w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }),
+					/* @__PURE__ */ _("div", {
 						className: "flex-1",
-						children: /* @__PURE__ */ g("p", {
+						children: /* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-status-error-text)]",
-							children: F
+							children: G
 						})
 					}),
-					/* @__PURE__ */ g("button", {
-						onClick: () => I(null),
+					/* @__PURE__ */ _("button", {
+						onClick: () => K(null),
 						className: "text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200",
-						children: y("auth.profile.dismiss", "Dismiss")
+						children: S("auth.profile.dismiss", "Dismiss")
 					})
 				]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ v("div", {
 				className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm overflow-hidden",
-				children: [/* @__PURE__ */ g("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "auth-hero-card p-6",
-					children: /* @__PURE__ */ _("div", {
+					children: /* @__PURE__ */ v("div", {
 						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ v("div", {
 							className: "relative group",
 							children: [
-								S.avatar ? /* @__PURE__ */ g("img", {
-									src: S.avatar,
-									alt: y("auth.profile.avatarAlt", "Profile picture"),
+								E.avatar ? /* @__PURE__ */ _("img", {
+									src: E.avatar,
+									alt: S("auth.profile.avatarAlt", "Profile picture"),
 									className: "w-20 h-20 rounded-full object-cover shadow-lg"
-								}) : /* @__PURE__ */ g("div", {
+								}) : /* @__PURE__ */ _("div", {
 									className: "w-20 h-20 rounded-full bg-bg-surface/20 backdrop-blur-sm flex items-center justify-center text-white text-3xl font-semibold shadow-lg",
-									children: (S.name || S.username || S.email).charAt(0).toUpperCase()
+									children: (E.name || E.username || E.email).charAt(0).toUpperCase()
 								}),
-								/* @__PURE__ */ g("button", {
+								/* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: () => D.current?.click(),
-									disabled: O,
-									"aria-label": y("auth.profile.changeAvatar", "Change profile picture"),
+									onClick: () => L.current?.click(),
+									disabled: R,
+									"aria-label": S("auth.profile.changeAvatar", "Change profile picture"),
 									className: "absolute inset-0 rounded-full flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer",
-									children: O ? /* @__PURE__ */ g(o, { className: "w-6 h-6 text-white animate-spin" }) : /* @__PURE__ */ _("svg", {
+									children: R ? /* @__PURE__ */ _(o, { className: "w-6 h-6 text-white animate-spin" }) : /* @__PURE__ */ v("svg", {
 										className: "w-6 h-6 text-white",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
-										children: [/* @__PURE__ */ g("path", {
+										children: [/* @__PURE__ */ _("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
 											d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-										}), /* @__PURE__ */ g("path", {
+										}), /* @__PURE__ */ _("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
@@ -169,298 +172,311 @@ function v() {
 										})]
 									})
 								}),
-								/* @__PURE__ */ g("input", {
-									ref: D,
+								/* @__PURE__ */ _("input", {
+									ref: L,
 									type: "file",
 									accept: "image/*",
 									className: "hidden",
-									onChange: (e) => void A(e),
+									onChange: (e) => void B(e),
 									"aria-hidden": "true"
 								})
 							]
-						}), /* @__PURE__ */ _("div", {
+						}), /* @__PURE__ */ v("div", {
 							className: "text-white",
 							children: [
-								/* @__PURE__ */ g("h2", {
+								/* @__PURE__ */ _("h2", {
 									className: "text-2xl font-semibold",
-									children: S.name || `${S.firstName || ""} ${S.lastName || ""}`.trim() || S.username
+									children: E.name || `${E.firstName || ""} ${E.lastName || ""}`.trim() || E.username
 								}),
-								/* @__PURE__ */ _("p", {
-									className: "text-blue-100 flex items-center gap-2",
-									children: [/* @__PURE__ */ g(a, { className: "w-4 h-4" }), S.email]
+								/* @__PURE__ */ v("p", {
+									className: "text-white/80 flex items-center gap-2",
+									children: [/* @__PURE__ */ _(a, { className: "w-4 h-4" }), E.email]
 								}),
-								/* @__PURE__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "flex items-center gap-2 mt-2",
-									children: [/* @__PURE__ */ g("span", {
+									children: [/* @__PURE__ */ _("span", {
 										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/20 backdrop-blur-sm",
-										children: S.role?.replace("_", " ") || y("auth.profile.member", "Member")
-									}), S.emailVerified && /* @__PURE__ */ _("span", {
+										children: E.role?.replace("_", " ") || S("auth.profile.member", "Member")
+									}), E.emailVerified && /* @__PURE__ */ v("span", {
 										className: "px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-text/30 flex items-center gap-1",
-										children: [/* @__PURE__ */ g(i, { className: "w-3 h-3" }), y("auth.profile.verified", "Verified")]
+										children: [/* @__PURE__ */ _(i, { className: "w-3 h-3" }), S("auth.profile.verified", "Verified")]
 									})]
 								})
 							]
 						})]
 					})
-				}), /* @__PURE__ */ g("div", {
+				}), /* @__PURE__ */ _("div", {
 					className: "p-6",
-					children: j ? /* @__PURE__ */ _("form", {
+					children: V ? /* @__PURE__ */ v("form", {
 						onSubmit: async (e) => {
-							e.preventDefault(), I(null), R(null);
+							e.preventDefault(), K(null), J(null);
 							try {
-								await C({
-									username: N.username || void 0,
-									firstName: N.firstName || void 0,
-									lastName: N.lastName || void 0,
-									name: N.name || void 0,
-									phoneNumber: N.phoneNumber || void 0
-								}), R(y("auth.profile.updateSuccess", "Profile updated successfully!")), M(!1);
+								await D({
+									username: U.username || void 0,
+									firstName: U.firstName || void 0,
+									lastName: U.lastName || void 0,
+									name: U.name || void 0,
+									phoneNumber: U.phoneNumber || void 0
+								}), J(S("auth.profile.updateSuccess", "Profile updated successfully!")), H(!1);
 							} catch (e) {
-								I(e instanceof Error ? e.message : y("auth.profile.updateFailed", "Failed to update profile"));
+								K(e instanceof Error ? e.message : S("auth.profile.updateFailed", "Failed to update profile"));
 							}
 						},
 						className: "space-y-6",
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ v("div", {
 							className: "grid grid-cols-1 md:grid-cols-2 gap-6",
 							children: [
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									htmlFor: k,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: y("auth.profile.username", "Username")
-								}), /* @__PURE__ */ _("div", {
+									children: S("auth.profile.username", "Username")
+								}), /* @__PURE__ */ v("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ g("div", {
+									children: [/* @__PURE__ */ _("div", {
 										className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
-										children: /* @__PURE__ */ g(s, { className: "w-5 h-5 text-[var(--color-text-tertiary)]" })
-									}), /* @__PURE__ */ g("input", {
+										children: /* @__PURE__ */ _(s, {
+											className: "w-5 h-5 text-[var(--color-text-tertiary)]",
+											"aria-hidden": "true"
+										})
+									}), /* @__PURE__ */ _("input", {
+										id: k,
 										type: "text",
-										value: N.username,
-										onChange: (e) => P({
-											...N,
+										value: U.username,
+										onChange: (e) => W({
+											...U,
 											username: e.target.value
 										}),
 										className: "block w-full pl-[3.5rem] pr-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-										placeholder: y("auth.profile.usernamePlaceholder", "Enter username")
+										placeholder: S("auth.profile.usernamePlaceholder", "Enter username")
 									})]
 								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									htmlFor: A,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: y("auth.profile.displayName", "Display Name")
-								}), /* @__PURE__ */ g("input", {
+									children: S("auth.profile.displayName", "Display Name")
+								}), /* @__PURE__ */ _("input", {
+									id: A,
 									type: "text",
-									value: N.name,
-									onChange: (e) => P({
-										...N,
+									value: U.name,
+									onChange: (e) => W({
+										...U,
 										name: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: y("auth.profile.displayNamePlaceholder", "Enter display name")
+									placeholder: S("auth.profile.displayNamePlaceholder", "Enter display name")
 								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									htmlFor: j,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: y("auth.profile.firstName", "First Name")
-								}), /* @__PURE__ */ g("input", {
+									children: S("auth.profile.firstName", "First Name")
+								}), /* @__PURE__ */ _("input", {
+									id: j,
 									type: "text",
-									value: N.firstName,
-									onChange: (e) => P({
-										...N,
+									value: U.firstName,
+									onChange: (e) => W({
+										...U,
 										firstName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: y("auth.profile.firstNamePlaceholder", "Enter first name")
+									placeholder: S("auth.profile.firstNamePlaceholder", "Enter first name")
 								})] }),
-								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									htmlFor: M,
 									className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-									children: y("auth.profile.lastName", "Last Name")
-								}), /* @__PURE__ */ g("input", {
+									children: S("auth.profile.lastName", "Last Name")
+								}), /* @__PURE__ */ _("input", {
+									id: M,
 									type: "text",
-									value: N.lastName,
-									onChange: (e) => P({
-										...N,
+									value: U.lastName,
+									onChange: (e) => W({
+										...U,
 										lastName: e.target.value
 									}),
 									className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-									placeholder: y("auth.profile.lastNamePlaceholder", "Enter last name")
+									placeholder: S("auth.profile.lastNamePlaceholder", "Enter last name")
 								})] }),
-								/* @__PURE__ */ _("div", {
+								/* @__PURE__ */ v("div", {
 									className: "md:col-span-2",
-									children: [/* @__PURE__ */ g("label", {
+									children: [/* @__PURE__ */ _("label", {
+										htmlFor: N,
 										className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
-										children: y("auth.profile.phoneNumber", "Phone Number")
-									}), /* @__PURE__ */ g("input", {
+										children: S("auth.profile.phoneNumber", "Phone Number")
+									}), /* @__PURE__ */ _("input", {
+										id: N,
 										type: "tel",
-										value: N.phoneNumber,
-										onChange: (e) => P({
-											...N,
+										value: U.phoneNumber,
+										onChange: (e) => W({
+											...U,
 											phoneNumber: e.target.value
 										}),
 										className: "block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300",
-										placeholder: y("auth.profile.phonePlaceholder", "Enter phone number")
+										placeholder: S("auth.profile.phonePlaceholder", "Enter phone number")
 									})]
 								})
 							]
-						}), /* @__PURE__ */ _("div", {
+						}), /* @__PURE__ */ v("div", {
 							className: "flex gap-3 pt-4 border-t border-[var(--color-border-default)]",
-							children: [/* @__PURE__ */ g("button", {
+							children: [/* @__PURE__ */ _("button", {
 								type: "submit",
-								disabled: w,
+								disabled: O,
 								className: "auth-primary-button flex items-center gap-2 px-6 py-3 font-medium",
-								children: w ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(o, { className: "w-4 h-4 animate-spin" }), y("auth.profile.saving", "Saving...")] }) : y("auth.profile.saveChanges", "Save Changes")
-							}), /* @__PURE__ */ g("button", {
+								children: O ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(o, { className: "w-4 h-4 animate-spin" }), S("auth.profile.saving", "Saving...")] }) : S("auth.profile.saveChanges", "Save Changes")
+							}), /* @__PURE__ */ _("button", {
 								type: "button",
 								onClick: () => {
-									S && P({
-										username: S.username || "",
-										firstName: S.firstName || "",
-										lastName: S.lastName || "",
-										name: S.name || "",
-										phoneNumber: S.phoneNumber || ""
-									}), M(!1), I(null);
+									E && W({
+										username: E.username || "",
+										firstName: E.firstName || "",
+										lastName: E.lastName || "",
+										name: E.name || "",
+										phoneNumber: E.phoneNumber || ""
+									}), H(!1), K(null);
 								},
 								className: "px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200",
-								children: y("auth.profile.cancel", "Cancel")
+								children: S("auth.profile.cancel", "Cancel")
 							})]
 						})]
-					}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
+					}) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ v("div", {
 						className: "grid grid-cols-1 md:grid-cols-2 gap-6",
 						children: [
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.username", "Username")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.username", "Username")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.username || "-"
+									children: E.username || "-"
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.displayName", "Display Name")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.displayName", "Display Name")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.name || "-"
+									children: E.name || "-"
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.firstName", "First Name")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.firstName", "First Name")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.firstName || "-"
+									children: E.firstName || "-"
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.lastName", "Last Name")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.lastName", "Last Name")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.lastName || "-"
+									children: E.lastName || "-"
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.email", "Email")
-								}), /* @__PURE__ */ _("p", {
+									children: S("auth.profile.email", "Email")
+								}), /* @__PURE__ */ v("p", {
 									className: "text-[var(--color-text-primary)] font-medium flex items-center gap-2",
-									children: [S.email, S.emailVerified && /* @__PURE__ */ _("span", {
+									children: [E.email, E.emailVerified && /* @__PURE__ */ v("span", {
 										className: "inline-flex items-center gap-1 text-[var(--color-status-success-text)] text-xs",
-										children: [/* @__PURE__ */ g(i, { className: "w-3 h-3" }), y("auth.profile.verified", "Verified")]
+										children: [/* @__PURE__ */ _(i, { className: "w-3 h-3" }), S("auth.profile.verified", "Verified")]
 									})]
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.phoneNumber", "Phone Number")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.phoneNumber", "Phone Number")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.phoneNumber || "-"
+									children: E.phoneNumber || "-"
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.role", "Role")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.role", "Role")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.role?.replace("_", " ") || y("auth.profile.member", "Member")
+									children: E.role?.replace("_", " ") || S("auth.profile.member", "Member")
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.mfaStatus", "MFA Status")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.mfaStatus", "MFA Status")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.mfaEnabled ? /* @__PURE__ */ _("span", {
+									children: E.mfaEnabled ? /* @__PURE__ */ v("span", {
 										className: "text-[var(--color-status-success-text)] flex items-center gap-1",
-										children: [/* @__PURE__ */ g(i, { className: "w-4 h-4" }), y("auth.profile.enabled", "Enabled")]
-									}) : /* @__PURE__ */ g("span", {
+										children: [/* @__PURE__ */ _(i, { className: "w-4 h-4" }), S("auth.profile.enabled", "Enabled")]
+									}) : /* @__PURE__ */ _("span", {
 										className: "text-[var(--color-status-warning-text)]",
-										children: y("auth.profile.notEnabled", "Not Enabled")
+										children: S("auth.profile.notEnabled", "Not Enabled")
 									})
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.lastLogin", "Last Login")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.lastLogin", "Last Login")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.lastLoginAt ? new Date(S.lastLoginAt).toLocaleString() : y("auth.profile.never", "Never")
+									children: E.lastLoginAt ? new Date(E.lastLoginAt).toLocaleString() : S("auth.profile.never", "Never")
 								})]
 							}),
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ v("div", {
 								className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
-								children: [/* @__PURE__ */ g("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
-									children: y("auth.profile.accountCreated", "Account Created")
-								}), /* @__PURE__ */ g("p", {
+									children: S("auth.profile.accountCreated", "Account Created")
+								}), /* @__PURE__ */ _("p", {
 									className: "text-[var(--color-text-primary)] font-medium",
-									children: S.createdAt ? new Date(S.createdAt).toLocaleString() : "-"
+									children: E.createdAt ? new Date(E.createdAt).toLocaleString() : "-"
 								})]
 							})
 						]
-					}), /* @__PURE__ */ _("div", {
+					}), /* @__PURE__ */ v("div", {
 						className: "flex gap-3 pt-6 mt-6 border-t border-[var(--color-border-default)]",
-						children: [/* @__PURE__ */ g("button", {
-							onClick: () => M(!0),
+						children: [/* @__PURE__ */ _("button", {
+							onClick: () => H(!0),
 							className: "auth-primary-button px-6 py-3 font-medium",
-							children: y("auth.profile.editProfile", "Edit Profile")
-						}), /* @__PURE__ */ g("button", {
-							onClick: () => b("/auth/security"),
+							children: S("auth.profile.editProfile", "Edit Profile")
+						}), /* @__PURE__ */ _("button", {
+							onClick: () => C("/auth/security"),
 							className: "px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200",
-							children: y("auth.profile.securitySettings", "Security Settings")
+							children: S("auth.profile.securitySettings", "Security Settings")
 						})]
 					})] })
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ v("div", {
 				className: "mt-8 grid grid-cols-1 md:grid-cols-3 gap-4",
-				children: [/* @__PURE__ */ _("button", {
-					onClick: () => b("/auth/mfa"),
+				children: [/* @__PURE__ */ v("button", {
+					onClick: () => C("/auth/mfa"),
 					className: "p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-primary-border)] transition-colors duration-200 text-left group",
 					children: [
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "w-10 h-10 rounded-lg bg-[var(--color-bg-accent)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-primary-bg-subtle)] transition-colors duration-200",
-							children: /* @__PURE__ */ g("svg", {
+							children: /* @__PURE__ */ _("svg", {
 								className: "w-5 h-5 text-[var(--color-text-link)]",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
-								children: /* @__PURE__ */ g("path", {
+								children: /* @__PURE__ */ _("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
@@ -468,27 +484,27 @@ function v() {
 								})
 							})
 						}),
-						/* @__PURE__ */ g("h3", {
+						/* @__PURE__ */ _("h3", {
 							className: "font-medium text-[var(--color-text-primary)]",
-							children: y("auth.profile.twoFactorAuth", "Two-Factor Auth")
+							children: S("auth.profile.twoFactorAuth", "Two-Factor Auth")
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-text-tertiary)] mt-1",
-							children: S.mfaEnabled ? y("auth.profile.manageMfa", "Manage MFA settings") : y("auth.profile.enableMfa", "Enable MFA for extra security")
+							children: E.mfaEnabled ? S("auth.profile.manageMfa", "Manage MFA settings") : S("auth.profile.enableMfa", "Enable MFA for extra security")
 						})
 					]
-				}), /* @__PURE__ */ _("button", {
-					onClick: () => b("/auth/api-keys"),
+				}), /* @__PURE__ */ v("button", {
+					onClick: () => C("/auth/api-keys"),
 					className: "p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-secondary-border)] transition-colors duration-200 text-left group",
 					children: [
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "w-10 h-10 rounded-lg bg-[var(--color-action-secondary-bg-subtle)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-secondary-bg-subtle)] transition-colors duration-200",
-							children: /* @__PURE__ */ g("svg", {
+							children: /* @__PURE__ */ _("svg", {
 								className: "w-5 h-5 text-[var(--color-action-secondary-text)]",
 								fill: "none",
 								viewBox: "0 0 24 24",
 								stroke: "currentColor",
-								children: /* @__PURE__ */ g("path", {
+								children: /* @__PURE__ */ _("path", {
 									strokeLinecap: "round",
 									strokeLinejoin: "round",
 									strokeWidth: 2,
@@ -496,13 +512,13 @@ function v() {
 								})
 							})
 						}),
-						/* @__PURE__ */ g("h3", {
+						/* @__PURE__ */ _("h3", {
 							className: "font-medium text-[var(--color-text-primary)]",
-							children: y("auth.profile.apiKeys", "API Keys")
+							children: S("auth.profile.apiKeys", "API Keys")
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ _("p", {
 							className: "text-sm text-[var(--color-text-tertiary)] mt-1",
-							children: y("auth.profile.manageApiKeys", "Manage your API access credentials")
+							children: S("auth.profile.manageApiKeys", "Manage your API access credentials")
 						})
 					]
 				})]
@@ -511,6 +527,6 @@ function v() {
 	});
 }
 //#endregion
-export { v as UserProfilePage };
+export { x as UserProfilePage };
 
 //# sourceMappingURL=UserProfilePage.js.map