@burdenoff/microfe-auth 2026.916.1 → 2026.917.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,30 +4,31 @@ import { AuthLayout as n } from "../components/AuthLayout.js";
4
4
  import { AlertIcon as r, CheckIcon as i, EmailIcon as a, SpinnerIcon as o, UserIcon as s } from "../components/AuthIcons.js";
5
5
  import { useUserOperations as c } from "../hooks/useUserOperations.js";
6
6
  import { useCompleteAvatarUploadMutation as l, useInitiateAvatarUploadMutation as u } from "../../generated/wspace-operations.js";
7
- import { useEffect as d, useId as f, useRef as p, useState as m } from "react";
8
- import { useNavigate as h } from "react-router";
9
- import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
10
- import { Button as y } from "@burdenoff/fe-libs/button";
11
- import { NextSteps as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
12
- import { useGatewayClient as S } from "@burdenoff/fe-libs/shared/graphql";
13
- import { useAuth as C } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
7
+ import { validateUserFields as d } from "../utils/validation.js";
8
+ import { useEffect as f, useId as p, useRef as m, useState as h } from "react";
9
+ import { useNavigate as g } from "react-router";
10
+ import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
11
+ import { Button as b } from "@burdenoff/fe-libs/button";
12
+ import { NextSteps as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
13
+ import { useGatewayClient as C } from "@burdenoff/fe-libs/shared/graphql";
14
+ import { useAuth as w } from "@burdenoff/fe-libs/shared/providers/shell/AuthProvider";
14
15
  //#region src/auth/pages/UserProfilePage.tsx
15
- function w() {
16
- let w = t(), T = h(), E = C(), D = e((e) => e.isAuthenticated), O = e((e) => e.user), k = e((e) => e.setUser), { updateCurrentUserProfile: A, isLoading: j } = c(), M = f(), N = f(), P = f(), F = f(), I = f(), L = e((e) => e.currentWorkspaceId), R = S("workspace"), [z] = u({ client: R }), [B] = l({ client: R }), V = p(null), [H, U] = m(!1), W = async (e) => {
16
+ function T() {
17
+ let T = t(), E = g(), D = w(), O = e((e) => e.isAuthenticated), k = e((e) => e.user), A = e((e) => e.setUser), { updateCurrentUserProfile: j, isLoading: M } = c(), N = p(), P = p(), F = p(), I = p(), L = p(), R = e((e) => e.currentWorkspaceId), z = C("workspace"), [B] = u({ client: z }), [V] = l({ client: z }), H = m(null), [U, W] = h(!1), G = async (e) => {
17
18
  let t = e.target.files?.[0];
18
19
  if (!t) return;
19
20
  if (!t.type.startsWith("image/")) {
20
- X(w("auth.profile.invalidImageType", "Please select an image file"));
21
+ Z(T("auth.profile.invalidImageType", "Please select an image file"));
21
22
  return;
22
23
  }
23
- if (!L) {
24
- X(w("auth.profile.noWorkspace", "Please select a workspace before uploading a profile picture"));
24
+ if (!R) {
25
+ Z(T("auth.profile.noWorkspace", "Please select a workspace before uploading a profile picture"));
25
26
  return;
26
27
  }
27
- U(!0), X(null);
28
- let n = { "x-workspace-id": L };
28
+ W(!0), Z(null);
29
+ let n = { "x-workspace-id": R };
29
30
  try {
30
- let e = t.name.split(".").pop()?.toLowerCase() ?? "", r = await z({
31
+ let e = t.name.split(".").pop()?.toLowerCase() ?? "", r = await B({
31
32
  variables: { input: {
32
33
  fileName: t.name,
33
34
  fileSize: t.size.toString(),
@@ -42,152 +43,152 @@ function w() {
42
43
  headers: { "Content-Type": t.type },
43
44
  body: t
44
45
  })).ok) throw Error("Failed to upload file");
45
- let o = (await B({
46
+ let o = (await V({
46
47
  variables: { input: { sessionId: i.id } },
47
48
  context: { headers: n }
48
49
  })).data?.completeUpload.file?.downloadUrl;
49
50
  if (!o) throw Error("Upload succeeded but no URL returned");
50
- await A({ avatar: o }), O && k({
51
- ...O,
51
+ await j({ avatar: o }), k && A({
52
+ ...k,
52
53
  avatar: o
53
- }), E.updateUser({ avatar: o }), Q(w("auth.profile.avatarUpdated", "Profile picture updated!"));
54
+ }), D.updateUser({ avatar: o }), $(T("auth.profile.avatarUpdated", "Profile picture updated!"));
54
55
  } catch (e) {
55
- X(e instanceof Error ? e.message : w("auth.profile.avatarFailed", "Failed to upload picture"));
56
+ Z(e instanceof Error ? e.message : T("auth.profile.avatarFailed", "Failed to upload picture"));
56
57
  } finally {
57
- U(!1), V.current && (V.current.value = "");
58
+ W(!1), H.current && (H.current.value = "");
58
59
  }
59
- }, [G, K] = m(!1), [q, J] = m({
60
+ }, [K, q] = h(!1), [J, Y] = h({
60
61
  username: "",
61
62
  firstName: "",
62
63
  lastName: "",
63
64
  name: "",
64
65
  phoneNumber: ""
65
- }), [Y, X] = m(null), [Z, Q] = m(null);
66
- return d(() => {
67
- O && J({
68
- username: O.username || "",
69
- firstName: O.firstName || "",
70
- lastName: O.lastName || "",
71
- name: O.name || "",
72
- phoneNumber: O.phoneNumber || ""
66
+ }), [X, Z] = h(null), [Q, $] = h(null);
67
+ return f(() => {
68
+ k && Y({
69
+ username: k.username || "",
70
+ firstName: k.firstName || "",
71
+ lastName: k.lastName || "",
72
+ name: k.name || "",
73
+ phoneNumber: k.phoneNumber || ""
73
74
  });
74
- }, [O]), !D || !O ? /* @__PURE__ */ _(n, {
75
- title: w("auth.profile.title", "Profile"),
76
- subtitle: w("auth.profile.subtitle", "View and manage your profile"),
77
- children: /* @__PURE__ */ v("div", {
75
+ }, [k]), !O || !k ? /* @__PURE__ */ v(n, {
76
+ title: T("auth.profile.title", "Profile"),
77
+ subtitle: T("auth.profile.subtitle", "View and manage your profile"),
78
+ children: /* @__PURE__ */ y("div", {
78
79
  className: "text-center py-12",
79
80
  children: [
80
- /* @__PURE__ */ _("div", {
81
+ /* @__PURE__ */ v("div", {
81
82
  className: "size-16 mx-auto mb-4 rounded-full bg-[var(--color-status-warning-bg-subtle)] flex items-center justify-center",
82
- children: /* @__PURE__ */ _(r, { className: "size-8 text-[var(--color-status-warning-text)]" })
83
+ children: /* @__PURE__ */ v(r, { className: "size-8 text-[var(--color-status-warning-text)]" })
83
84
  }),
84
- /* @__PURE__ */ _("h2", {
85
+ /* @__PURE__ */ v("h2", {
85
86
  className: "text-xl font-semibold text-[var(--color-text-primary)] mb-2",
86
- children: w("auth.profile.authRequired", "Authentication Required")
87
+ children: T("auth.profile.authRequired", "Authentication Required")
87
88
  }),
88
- /* @__PURE__ */ _("p", {
89
+ /* @__PURE__ */ v("p", {
89
90
  className: "text-[var(--color-text-secondary)] mb-6",
90
- children: w("auth.profile.signInToView", "Please sign in to view your profile")
91
+ children: T("auth.profile.signInToView", "Please sign in to view your profile")
91
92
  }),
92
- /* @__PURE__ */ _(y, {
93
+ /* @__PURE__ */ v(b, {
93
94
  type: "button",
94
- onClick: () => T("/auth/login"),
95
+ onClick: () => E("/auth/login"),
95
96
  variant: "default",
96
97
  size: "lg",
97
98
  className: "font-semibold",
98
- children: w("auth.profile.signIn", "Sign In")
99
+ children: T("auth.profile.signIn", "Sign In")
99
100
  })
100
101
  ]
101
102
  })
102
- }) : /* @__PURE__ */ v("div", {
103
+ }) : /* @__PURE__ */ y("div", {
103
104
  className: "max-w-4xl mx-auto p-6",
104
105
  children: [
105
- /* @__PURE__ */ v("div", {
106
+ /* @__PURE__ */ y("div", {
106
107
  className: "mb-8",
107
108
  children: [
108
- /* @__PURE__ */ _("h1", {
109
+ /* @__PURE__ */ v("h1", {
109
110
  className: "text-3xl font-semibold text-[var(--color-text-primary)]",
110
- children: w("auth.profile.myProfile", "My Profile")
111
+ children: T("auth.profile.myProfile", "My Profile")
111
112
  }),
112
- /* @__PURE__ */ _("p", {
113
+ /* @__PURE__ */ v("p", {
113
114
  className: "text-[var(--color-text-secondary)] mt-2",
114
- children: w("auth.profile.viewAndManage", "View and manage your account information")
115
+ children: T("auth.profile.viewAndManage", "View and manage your account information")
115
116
  }),
116
- /* @__PURE__ */ _(x, {
117
+ /* @__PURE__ */ v(S, {
117
118
  className: "mt-3",
118
- children: w("auth.profile.purpose", "This is how you appear across the platform. Update your name, photo, and contact details here — teammates see this information, and we use your email for sign-in and important notices.")
119
+ children: T("auth.profile.purpose", "This is how you appear across the platform. Update your name, photo, and contact details here — teammates see this information, and we use your email for sign-in and important notices.")
119
120
  })
120
121
  ]
121
122
  }),
122
- Z && /* @__PURE__ */ v("div", {
123
+ Q && /* @__PURE__ */ y("div", {
123
124
  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)]",
124
125
  children: [
125
- /* @__PURE__ */ _(i, { className: "size-5 text-[var(--color-status-success-text)] flex-shrink-0" }),
126
- /* @__PURE__ */ _("p", {
126
+ /* @__PURE__ */ v(i, { className: "size-5 text-[var(--color-status-success-text)] flex-shrink-0" }),
127
+ /* @__PURE__ */ v("p", {
127
128
  className: "text-[var(--color-status-success-text)]",
128
- children: Z
129
+ children: Q
129
130
  }),
130
- /* @__PURE__ */ _("button", {
131
+ /* @__PURE__ */ v("button", {
131
132
  type: "button",
132
- onClick: () => Q(null),
133
+ onClick: () => $(null),
133
134
  className: "ml-auto text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200",
134
- children: w("auth.profile.dismiss", "Dismiss")
135
+ children: T("auth.profile.dismiss", "Dismiss")
135
136
  })
136
137
  ]
137
138
  }),
138
- Y && /* @__PURE__ */ v("div", {
139
+ X && /* @__PURE__ */ y("div", {
139
140
  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)]",
140
141
  children: [
141
- /* @__PURE__ */ _(r, { className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }),
142
- /* @__PURE__ */ _("div", {
142
+ /* @__PURE__ */ v(r, { className: "size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5" }),
143
+ /* @__PURE__ */ v("div", {
143
144
  className: "flex-1",
144
- children: /* @__PURE__ */ _("p", {
145
+ children: /* @__PURE__ */ v("p", {
145
146
  className: "text-sm text-[var(--color-status-error-text)]",
146
- children: Y
147
+ children: X
147
148
  })
148
149
  }),
149
- /* @__PURE__ */ _("button", {
150
+ /* @__PURE__ */ v("button", {
150
151
  type: "button",
151
- onClick: () => X(null),
152
+ onClick: () => Z(null),
152
153
  className: "text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200",
153
- children: w("auth.profile.dismiss", "Dismiss")
154
+ children: T("auth.profile.dismiss", "Dismiss")
154
155
  })
155
156
  ]
156
157
  }),
157
- /* @__PURE__ */ v("div", {
158
+ /* @__PURE__ */ y("div", {
158
159
  className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm overflow-hidden",
159
- children: [/* @__PURE__ */ _("div", {
160
+ children: [/* @__PURE__ */ v("div", {
160
161
  className: "bg-accent-wash border-b border-border-seam p-6 text-text-primary",
161
- children: /* @__PURE__ */ v("div", {
162
+ children: /* @__PURE__ */ y("div", {
162
163
  className: "flex items-center gap-4",
163
- children: [/* @__PURE__ */ v("div", {
164
+ children: [/* @__PURE__ */ y("div", {
164
165
  className: "relative group",
165
166
  children: [
166
- O.avatar ? /* @__PURE__ */ _("img", {
167
- src: O.avatar,
168
- alt: w("auth.profile.avatarAlt", "Profile picture"),
167
+ k.avatar ? /* @__PURE__ */ v("img", {
168
+ src: k.avatar,
169
+ alt: T("auth.profile.avatarAlt", "Profile picture"),
169
170
  className: "size-20 rounded-full object-cover shadow-lg"
170
- }) : /* @__PURE__ */ _("div", {
171
+ }) : /* @__PURE__ */ v("div", {
171
172
  className: "size-20 rounded-full bg-accent-soft backdrop-blur-sm flex items-center justify-center text-[var(--color-action-primary-bg)] text-3xl font-semibold shadow-lg",
172
- children: (O.name || O.username || O.email).charAt(0).toUpperCase()
173
+ children: (k.name || k.username || k.email).charAt(0).toUpperCase()
173
174
  }),
174
- /* @__PURE__ */ _("button", {
175
+ /* @__PURE__ */ v("button", {
175
176
  type: "button",
176
- onClick: () => V.current?.click(),
177
- disabled: H,
178
- "aria-label": w("auth.profile.changeAvatar", "Change profile picture"),
177
+ onClick: () => H.current?.click(),
178
+ disabled: U,
179
+ "aria-label": T("auth.profile.changeAvatar", "Change profile picture"),
179
180
  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",
180
- children: H ? /* @__PURE__ */ _(o, { className: "size-6 text-white animate-spin" }) : /* @__PURE__ */ v("svg", {
181
+ children: U ? /* @__PURE__ */ v(o, { className: "size-6 text-white animate-spin" }) : /* @__PURE__ */ y("svg", {
181
182
  className: "size-6 text-white",
182
183
  fill: "none",
183
184
  viewBox: "0 0 24 24",
184
185
  stroke: "currentColor",
185
- children: [/* @__PURE__ */ _("path", {
186
+ children: [/* @__PURE__ */ v("path", {
186
187
  strokeLinecap: "round",
187
188
  strokeLinejoin: "round",
188
189
  strokeWidth: 2,
189
190
  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"
190
- }), /* @__PURE__ */ _("path", {
191
+ }), /* @__PURE__ */ v("path", {
191
192
  strokeLinecap: "round",
192
193
  strokeLinejoin: "round",
193
194
  strokeWidth: 2,
@@ -195,350 +196,355 @@ function w() {
195
196
  })]
196
197
  })
197
198
  }),
198
- /* @__PURE__ */ _("input", {
199
- ref: V,
199
+ /* @__PURE__ */ v("input", {
200
+ ref: H,
200
201
  type: "file",
201
202
  accept: "image/*",
202
203
  className: "hidden",
203
- onChange: (e) => void W(e),
204
+ onChange: (e) => void G(e),
204
205
  tabIndex: -1,
205
- "aria-label": w("auth.profile.avatarUpload", "Upload avatar image")
206
+ "aria-label": T("auth.profile.avatarUpload", "Upload avatar image")
206
207
  })
207
208
  ]
208
- }), /* @__PURE__ */ v("div", {
209
+ }), /* @__PURE__ */ y("div", {
209
210
  className: "text-text-primary",
210
211
  children: [
211
- /* @__PURE__ */ _("h2", {
212
+ /* @__PURE__ */ v("h2", {
212
213
  className: "text-2xl font-semibold",
213
- children: O.name || `${O.firstName || ""} ${O.lastName || ""}`.trim() || O.username
214
+ children: k.name || `${k.firstName || ""} ${k.lastName || ""}`.trim() || k.username
214
215
  }),
215
- /* @__PURE__ */ v("p", {
216
+ /* @__PURE__ */ y("p", {
216
217
  className: "text-text-secondary flex items-center gap-2",
217
- children: [/* @__PURE__ */ _(a, { className: "size-4" }), O.email]
218
+ children: [/* @__PURE__ */ v(a, { className: "size-4" }), k.email]
218
219
  }),
219
- /* @__PURE__ */ v("div", {
220
+ /* @__PURE__ */ y("div", {
220
221
  className: "flex items-center gap-2 mt-2",
221
- children: [/* @__PURE__ */ _("span", {
222
+ children: [/* @__PURE__ */ v("span", {
222
223
  className: "px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/60 text-text-secondary backdrop-blur-sm",
223
- children: O.role?.replace("_", " ") || w("auth.profile.member", "Member")
224
- }), O.emailVerified && /* @__PURE__ */ v("span", {
224
+ children: k.role?.replace("_", " ") || T("auth.profile.member", "Member")
225
+ }), k.emailVerified && /* @__PURE__ */ y("span", {
225
226
  className: "px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-bg-subtle text-status-success-text flex items-center gap-1",
226
- children: [/* @__PURE__ */ _(i, { className: "size-3" }), w("auth.profile.verified", "Verified")]
227
+ children: [/* @__PURE__ */ v(i, { className: "size-3" }), T("auth.profile.verified", "Verified")]
227
228
  })]
228
229
  })
229
230
  ]
230
231
  })]
231
232
  })
232
- }), /* @__PURE__ */ _("div", {
233
+ }), /* @__PURE__ */ v("div", {
233
234
  className: "p-6",
234
- children: G ? /* @__PURE__ */ v("form", {
235
+ children: K ? /* @__PURE__ */ y("form", {
235
236
  onSubmit: async (e) => {
236
- e.preventDefault(), X(null), Q(null);
237
+ e.preventDefault(), Z(null), $(null);
238
+ let t = d(J, { requireAll: !1 });
239
+ if (!t.valid) {
240
+ Z(t.errors.map((e) => T(`auth.profile.${e.field}_${e.code}`, e.message)).join(" · "));
241
+ return;
242
+ }
237
243
  try {
238
- await A({
239
- username: q.username || void 0,
240
- firstName: q.firstName || void 0,
241
- lastName: q.lastName || void 0,
242
- name: q.name || void 0,
243
- phoneNumber: q.phoneNumber || void 0
244
- }), Q(w("auth.profile.updateSuccess", "Profile updated successfully!")), K(!1);
244
+ await j({
245
+ username: t.values.username || void 0,
246
+ firstName: t.values.firstName || void 0,
247
+ lastName: t.values.lastName || void 0,
248
+ name: J.name || void 0,
249
+ phoneNumber: J.phoneNumber || void 0
250
+ }), $(T("auth.profile.updateSuccess", "Profile updated successfully!")), q(!1);
245
251
  } catch (e) {
246
- X(e instanceof Error ? e.message : w("auth.profile.updateFailed", "Failed to update profile"));
252
+ Z(e instanceof Error ? e.message : T("auth.profile.updateFailed", "Failed to update profile"));
247
253
  }
248
254
  },
249
255
  className: "space-y-6",
250
- children: [/* @__PURE__ */ v("div", {
256
+ children: [/* @__PURE__ */ y("div", {
251
257
  className: "grid grid-cols-1 md:grid-cols-2 gap-6",
252
258
  children: [
253
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
254
- htmlFor: M,
259
+ /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
260
+ htmlFor: N,
255
261
  className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
256
- children: w("auth.profile.username", "Username")
257
- }), /* @__PURE__ */ v("div", {
262
+ children: T("auth.profile.username", "Username")
263
+ }), /* @__PURE__ */ y("div", {
258
264
  className: "relative",
259
- children: [/* @__PURE__ */ _("div", {
265
+ children: [/* @__PURE__ */ v("div", {
260
266
  className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none",
261
- children: /* @__PURE__ */ _(s, {
267
+ children: /* @__PURE__ */ v(s, {
262
268
  className: "size-5 text-[var(--color-text-tertiary)]",
263
269
  "aria-hidden": "true"
264
270
  })
265
- }), /* @__PURE__ */ _("input", {
266
- id: M,
271
+ }), /* @__PURE__ */ v("input", {
272
+ id: N,
267
273
  type: "text",
268
- "aria-label": w("auth.profile.username", "Username"),
269
- value: q.username,
270
- onChange: (e) => J({
271
- ...q,
274
+ "aria-label": T("auth.profile.username", "Username"),
275
+ value: J.username,
276
+ onChange: (e) => Y({
277
+ ...J,
272
278
  username: e.target.value
273
279
  }),
274
280
  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",
275
- placeholder: w("auth.profile.usernamePlaceholder", "Enter username")
281
+ placeholder: T("auth.profile.usernamePlaceholder", "Enter username")
276
282
  })]
277
283
  })] }),
278
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
279
- htmlFor: N,
284
+ /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
285
+ htmlFor: P,
280
286
  className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
281
- children: w("auth.profile.displayName", "Display Name")
282
- }), /* @__PURE__ */ _("input", {
283
- id: N,
287
+ children: T("auth.profile.displayName", "Display Name")
288
+ }), /* @__PURE__ */ v("input", {
289
+ id: P,
284
290
  type: "text",
285
- "aria-label": w("auth.profile.displayName", "Display Name"),
286
- value: q.name,
287
- onChange: (e) => J({
288
- ...q,
291
+ "aria-label": T("auth.profile.displayName", "Display Name"),
292
+ value: J.name,
293
+ onChange: (e) => Y({
294
+ ...J,
289
295
  name: e.target.value
290
296
  }),
291
297
  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",
292
- placeholder: w("auth.profile.displayNamePlaceholder", "Enter display name")
298
+ placeholder: T("auth.profile.displayNamePlaceholder", "Enter display name")
293
299
  })] }),
294
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
295
- htmlFor: P,
300
+ /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
301
+ htmlFor: F,
296
302
  className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
297
- children: w("auth.profile.firstName", "First Name")
298
- }), /* @__PURE__ */ _("input", {
299
- id: P,
303
+ children: T("auth.profile.firstName", "First Name")
304
+ }), /* @__PURE__ */ v("input", {
305
+ id: F,
300
306
  type: "text",
301
- "aria-label": w("auth.profile.firstName", "First Name"),
302
- value: q.firstName,
303
- onChange: (e) => J({
304
- ...q,
307
+ "aria-label": T("auth.profile.firstName", "First Name"),
308
+ value: J.firstName,
309
+ onChange: (e) => Y({
310
+ ...J,
305
311
  firstName: e.target.value
306
312
  }),
307
313
  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",
308
- placeholder: w("auth.profile.firstNamePlaceholder", "Enter first name")
314
+ placeholder: T("auth.profile.firstNamePlaceholder", "Enter first name")
309
315
  })] }),
310
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
311
- htmlFor: F,
316
+ /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
317
+ htmlFor: I,
312
318
  className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
313
- children: w("auth.profile.lastName", "Last Name")
314
- }), /* @__PURE__ */ _("input", {
315
- id: F,
319
+ children: T("auth.profile.lastName", "Last Name")
320
+ }), /* @__PURE__ */ v("input", {
321
+ id: I,
316
322
  type: "text",
317
- "aria-label": w("auth.profile.lastName", "Last Name"),
318
- value: q.lastName,
319
- onChange: (e) => J({
320
- ...q,
323
+ "aria-label": T("auth.profile.lastName", "Last Name"),
324
+ value: J.lastName,
325
+ onChange: (e) => Y({
326
+ ...J,
321
327
  lastName: e.target.value
322
328
  }),
323
329
  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",
324
- placeholder: w("auth.profile.lastNamePlaceholder", "Enter last name")
330
+ placeholder: T("auth.profile.lastNamePlaceholder", "Enter last name")
325
331
  })] }),
326
- /* @__PURE__ */ v("div", {
332
+ /* @__PURE__ */ y("div", {
327
333
  className: "md:col-span-2",
328
- children: [/* @__PURE__ */ _("label", {
329
- htmlFor: I,
334
+ children: [/* @__PURE__ */ v("label", {
335
+ htmlFor: L,
330
336
  className: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
331
- children: w("auth.profile.phoneNumber", "Phone Number")
332
- }), /* @__PURE__ */ _("input", {
333
- id: I,
337
+ children: T("auth.profile.phoneNumber", "Phone Number")
338
+ }), /* @__PURE__ */ v("input", {
339
+ id: L,
334
340
  type: "tel",
335
- "aria-label": w("auth.profile.phoneNumber", "Phone Number"),
336
- value: q.phoneNumber,
337
- onChange: (e) => J({
338
- ...q,
341
+ "aria-label": T("auth.profile.phoneNumber", "Phone Number"),
342
+ value: J.phoneNumber,
343
+ onChange: (e) => Y({
344
+ ...J,
339
345
  phoneNumber: e.target.value
340
346
  }),
341
347
  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",
342
- placeholder: w("auth.profile.phonePlaceholder", "Enter phone number")
348
+ placeholder: T("auth.profile.phonePlaceholder", "Enter phone number")
343
349
  })]
344
350
  })
345
351
  ]
346
- }), /* @__PURE__ */ v("div", {
352
+ }), /* @__PURE__ */ y("div", {
347
353
  className: "flex gap-3 pt-4 border-t border-[var(--color-border-default)]",
348
- children: [/* @__PURE__ */ _(y, {
354
+ children: [/* @__PURE__ */ v(b, {
349
355
  type: "submit",
350
- disabled: j,
356
+ disabled: M,
351
357
  variant: "default",
352
358
  size: "lg",
353
359
  className: "font-semibold",
354
- children: j ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(o, { className: "size-4 animate-spin" }), w("auth.profile.saving", "Saving...")] }) : w("auth.profile.saveChanges", "Save Changes")
355
- }), /* @__PURE__ */ _("button", {
360
+ children: M ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(o, { className: "size-4 animate-spin" }), T("auth.profile.saving", "Saving...")] }) : T("auth.profile.saveChanges", "Save Changes")
361
+ }), /* @__PURE__ */ v("button", {
356
362
  type: "button",
357
363
  onClick: () => {
358
- O && J({
359
- username: O.username || "",
360
- firstName: O.firstName || "",
361
- lastName: O.lastName || "",
362
- name: O.name || "",
363
- phoneNumber: O.phoneNumber || ""
364
- }), K(!1), X(null);
364
+ k && Y({
365
+ username: k.username || "",
366
+ firstName: k.firstName || "",
367
+ lastName: k.lastName || "",
368
+ name: k.name || "",
369
+ phoneNumber: k.phoneNumber || ""
370
+ }), q(!1), Z(null);
365
371
  },
366
372
  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",
367
- children: w("auth.profile.cancel", "Cancel")
373
+ children: T("auth.profile.cancel", "Cancel")
368
374
  })]
369
375
  })]
370
- }) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ v("div", {
376
+ }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y("div", {
371
377
  className: "grid grid-cols-1 md:grid-cols-2 gap-6",
372
378
  children: [
373
- /* @__PURE__ */ v("div", {
379
+ /* @__PURE__ */ y("div", {
374
380
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
375
- children: [/* @__PURE__ */ _("label", {
381
+ children: [/* @__PURE__ */ v("label", {
376
382
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
377
- children: w("auth.profile.username", "Username")
378
- }), /* @__PURE__ */ _("p", {
383
+ children: T("auth.profile.username", "Username")
384
+ }), /* @__PURE__ */ v("p", {
379
385
  className: "text-[var(--color-text-primary)] font-medium",
380
- children: O.username || "-"
386
+ children: k.username || "-"
381
387
  })]
382
388
  }),
383
- /* @__PURE__ */ v("div", {
389
+ /* @__PURE__ */ y("div", {
384
390
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
385
- children: [/* @__PURE__ */ _("label", {
391
+ children: [/* @__PURE__ */ v("label", {
386
392
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
387
- children: w("auth.profile.displayName", "Display Name")
388
- }), /* @__PURE__ */ _("p", {
393
+ children: T("auth.profile.displayName", "Display Name")
394
+ }), /* @__PURE__ */ v("p", {
389
395
  className: "text-[var(--color-text-primary)] font-medium",
390
- children: O.name || "-"
396
+ children: k.name || "-"
391
397
  })]
392
398
  }),
393
- /* @__PURE__ */ v("div", {
399
+ /* @__PURE__ */ y("div", {
394
400
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
395
- children: [/* @__PURE__ */ _("label", {
401
+ children: [/* @__PURE__ */ v("label", {
396
402
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
397
- children: w("auth.profile.firstName", "First Name")
398
- }), /* @__PURE__ */ _("p", {
403
+ children: T("auth.profile.firstName", "First Name")
404
+ }), /* @__PURE__ */ v("p", {
399
405
  className: "text-[var(--color-text-primary)] font-medium",
400
- children: O.firstName || "-"
406
+ children: k.firstName || "-"
401
407
  })]
402
408
  }),
403
- /* @__PURE__ */ v("div", {
409
+ /* @__PURE__ */ y("div", {
404
410
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
405
- children: [/* @__PURE__ */ _("label", {
411
+ children: [/* @__PURE__ */ v("label", {
406
412
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
407
- children: w("auth.profile.lastName", "Last Name")
408
- }), /* @__PURE__ */ _("p", {
413
+ children: T("auth.profile.lastName", "Last Name")
414
+ }), /* @__PURE__ */ v("p", {
409
415
  className: "text-[var(--color-text-primary)] font-medium",
410
- children: O.lastName || "-"
416
+ children: k.lastName || "-"
411
417
  })]
412
418
  }),
413
- /* @__PURE__ */ v("div", {
419
+ /* @__PURE__ */ y("div", {
414
420
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
415
- children: [/* @__PURE__ */ _("label", {
421
+ children: [/* @__PURE__ */ v("label", {
416
422
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
417
- children: w("auth.profile.email", "Email")
418
- }), /* @__PURE__ */ v("p", {
423
+ children: T("auth.profile.email", "Email")
424
+ }), /* @__PURE__ */ y("p", {
419
425
  className: "text-[var(--color-text-primary)] font-medium flex items-center gap-2",
420
- children: [O.email, O.emailVerified && /* @__PURE__ */ v("span", {
426
+ children: [k.email, k.emailVerified && /* @__PURE__ */ y("span", {
421
427
  className: "inline-flex items-center gap-1 text-[var(--color-status-success-text)] text-xs",
422
- children: [/* @__PURE__ */ _(i, { className: "size-3" }), w("auth.profile.verified", "Verified")]
428
+ children: [/* @__PURE__ */ v(i, { className: "size-3" }), T("auth.profile.verified", "Verified")]
423
429
  })]
424
430
  })]
425
431
  }),
426
- /* @__PURE__ */ v("div", {
432
+ /* @__PURE__ */ y("div", {
427
433
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
428
- children: [/* @__PURE__ */ _("label", {
434
+ children: [/* @__PURE__ */ v("label", {
429
435
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
430
- children: w("auth.profile.phoneNumber", "Phone Number")
431
- }), /* @__PURE__ */ _("p", {
436
+ children: T("auth.profile.phoneNumber", "Phone Number")
437
+ }), /* @__PURE__ */ v("p", {
432
438
  className: "text-[var(--color-text-primary)] font-medium",
433
- children: O.phoneNumber || "-"
439
+ children: k.phoneNumber || "-"
434
440
  })]
435
441
  }),
436
- /* @__PURE__ */ v("div", {
442
+ /* @__PURE__ */ y("div", {
437
443
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
438
- children: [/* @__PURE__ */ _("label", {
444
+ children: [/* @__PURE__ */ v("label", {
439
445
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
440
- children: w("auth.profile.role", "Role")
441
- }), /* @__PURE__ */ _("p", {
446
+ children: T("auth.profile.role", "Role")
447
+ }), /* @__PURE__ */ v("p", {
442
448
  className: "text-[var(--color-text-primary)] font-medium",
443
- children: O.role?.replace("_", " ") || w("auth.profile.member", "Member")
449
+ children: k.role?.replace("_", " ") || T("auth.profile.member", "Member")
444
450
  })]
445
451
  }),
446
- /* @__PURE__ */ v("div", {
452
+ /* @__PURE__ */ y("div", {
447
453
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
448
- children: [/* @__PURE__ */ _("label", {
454
+ children: [/* @__PURE__ */ v("label", {
449
455
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
450
- children: w("auth.profile.mfaStatus", "MFA Status")
451
- }), /* @__PURE__ */ _("p", {
456
+ children: T("auth.profile.mfaStatus", "MFA Status")
457
+ }), /* @__PURE__ */ v("p", {
452
458
  className: "text-[var(--color-text-primary)] font-medium",
453
- children: O.mfaEnabled ? /* @__PURE__ */ v("span", {
459
+ children: k.mfaEnabled ? /* @__PURE__ */ y("span", {
454
460
  className: "text-[var(--color-status-success-text)] flex items-center gap-1",
455
- children: [/* @__PURE__ */ _(i, { className: "size-4" }), w("auth.profile.enabled", "Enabled")]
456
- }) : /* @__PURE__ */ _("span", {
461
+ children: [/* @__PURE__ */ v(i, { className: "size-4" }), T("auth.profile.enabled", "Enabled")]
462
+ }) : /* @__PURE__ */ v("span", {
457
463
  className: "text-[var(--color-status-warning-text)]",
458
- children: w("auth.profile.notEnabled", "Not Enabled")
464
+ children: T("auth.profile.notEnabled", "Not Enabled")
459
465
  })
460
466
  })]
461
467
  }),
462
- /* @__PURE__ */ v("div", {
468
+ /* @__PURE__ */ y("div", {
463
469
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
464
- children: [/* @__PURE__ */ _("label", {
470
+ children: [/* @__PURE__ */ v("label", {
465
471
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
466
- children: w("auth.profile.lastLogin", "Last Login")
467
- }), /* @__PURE__ */ _("p", {
472
+ children: T("auth.profile.lastLogin", "Last Login")
473
+ }), /* @__PURE__ */ v("p", {
468
474
  className: "text-[var(--color-text-primary)] font-medium",
469
- children: O.lastLoginAt ? new Date(O.lastLoginAt).toLocaleString() : w("auth.profile.never", "Never")
475
+ children: k.lastLoginAt ? new Date(k.lastLoginAt).toLocaleString() : T("auth.profile.never", "Never")
470
476
  })]
471
477
  }),
472
- /* @__PURE__ */ v("div", {
478
+ /* @__PURE__ */ y("div", {
473
479
  className: "p-4 rounded-xl bg-[var(--color-bg-muted)]",
474
- children: [/* @__PURE__ */ _("label", {
480
+ children: [/* @__PURE__ */ v("label", {
475
481
  className: "block text-sm font-medium text-[var(--color-text-tertiary)] mb-1",
476
- children: w("auth.profile.accountCreated", "Account Created")
477
- }), /* @__PURE__ */ _("p", {
482
+ children: T("auth.profile.accountCreated", "Account Created")
483
+ }), /* @__PURE__ */ v("p", {
478
484
  className: "text-[var(--color-text-primary)] font-medium",
479
- children: O.createdAt ? new Date(O.createdAt).toLocaleString() : "-"
485
+ children: k.createdAt ? new Date(k.createdAt).toLocaleString() : "-"
480
486
  })]
481
487
  })
482
488
  ]
483
- }), /* @__PURE__ */ v("div", {
489
+ }), /* @__PURE__ */ y("div", {
484
490
  className: "flex gap-3 pt-6 mt-6 border-t border-[var(--color-border-default)]",
485
- children: [/* @__PURE__ */ _(y, {
491
+ children: [/* @__PURE__ */ v(b, {
486
492
  type: "button",
487
- onClick: () => K(!0),
493
+ onClick: () => q(!0),
488
494
  variant: "default",
489
495
  size: "lg",
490
496
  className: "font-semibold",
491
- children: w("auth.profile.editProfile", "Edit Profile")
492
- }), /* @__PURE__ */ _("button", {
497
+ children: T("auth.profile.editProfile", "Edit Profile")
498
+ }), /* @__PURE__ */ v("button", {
493
499
  type: "button",
494
- onClick: () => T("/auth/security"),
500
+ onClick: () => E("/auth/security"),
495
501
  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",
496
- children: w("auth.profile.securitySettings", "Security Settings")
502
+ children: T("auth.profile.securitySettings", "Security Settings")
497
503
  })]
498
504
  })] })
499
505
  })]
500
506
  }),
501
- /* @__PURE__ */ _(b, {
507
+ /* @__PURE__ */ v(x, {
502
508
  className: "mt-8",
503
509
  storageKey: "auth-profile",
504
510
  steps: [
505
511
  {
506
512
  id: "edit-profile",
507
- label: w("auth.profile.nextEdit", "Complete your profile"),
508
- description: w("auth.profile.nextEditDesc", "Add your display name and photo so teammates recognise you."),
509
- onClick: () => K(!0),
510
- done: !!(O.name && O.avatar)
513
+ label: T("auth.profile.nextEdit", "Complete your profile"),
514
+ description: T("auth.profile.nextEditDesc", "Add your display name and photo so teammates recognise you."),
515
+ onClick: () => q(!0),
516
+ done: !!(k.name && k.avatar)
511
517
  },
512
518
  {
513
519
  id: "enable-mfa",
514
- label: w("auth.profile.nextMfa", "Secure your account with 2FA"),
515
- description: w("auth.profile.nextMfaDesc", "Turn on two-factor authentication for stronger protection."),
516
- onClick: () => T("/auth/mfa"),
517
- done: !!O.mfaEnabled
520
+ label: T("auth.profile.nextMfa", "Secure your account with 2FA"),
521
+ description: T("auth.profile.nextMfaDesc", "Turn on two-factor authentication for stronger protection."),
522
+ onClick: () => E("/auth/mfa"),
523
+ done: !!k.mfaEnabled
518
524
  },
519
525
  {
520
526
  id: "security-center",
521
- label: w("auth.profile.nextSecurity", "Visit the Security Center"),
522
- description: w("auth.profile.nextSecurityDesc", "Review sessions, password, and account options."),
523
- onClick: () => T("/auth/security")
527
+ label: T("auth.profile.nextSecurity", "Visit the Security Center"),
528
+ description: T("auth.profile.nextSecurityDesc", "Review sessions, password, and account options."),
529
+ onClick: () => E("/auth/security")
524
530
  }
525
531
  ]
526
532
  }),
527
- /* @__PURE__ */ v("div", {
533
+ /* @__PURE__ */ y("div", {
528
534
  className: "mt-8 grid grid-cols-1 md:grid-cols-3 gap-4",
529
- children: [/* @__PURE__ */ v("button", {
535
+ children: [/* @__PURE__ */ y("button", {
530
536
  type: "button",
531
- onClick: () => T("/auth/mfa"),
537
+ onClick: () => E("/auth/mfa"),
532
538
  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",
533
539
  children: [
534
- /* @__PURE__ */ _("div", {
540
+ /* @__PURE__ */ v("div", {
535
541
  className: "size-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",
536
- children: /* @__PURE__ */ _("svg", {
542
+ children: /* @__PURE__ */ v("svg", {
537
543
  className: "size-5 text-[var(--color-text-link)]",
538
544
  fill: "none",
539
545
  viewBox: "0 0 24 24",
540
546
  stroke: "currentColor",
541
- children: /* @__PURE__ */ _("path", {
547
+ children: /* @__PURE__ */ v("path", {
542
548
  strokeLinecap: "round",
543
549
  strokeLinejoin: "round",
544
550
  strokeWidth: 2,
@@ -546,28 +552,28 @@ function w() {
546
552
  })
547
553
  })
548
554
  }),
549
- /* @__PURE__ */ _("h3", {
555
+ /* @__PURE__ */ v("h3", {
550
556
  className: "font-medium text-[var(--color-text-primary)]",
551
- children: w("auth.profile.twoFactorAuth", "Two-Factor Auth")
557
+ children: T("auth.profile.twoFactorAuth", "Two-Factor Auth")
552
558
  }),
553
- /* @__PURE__ */ _("p", {
559
+ /* @__PURE__ */ v("p", {
554
560
  className: "text-sm text-[var(--color-text-tertiary)] mt-1",
555
- children: O.mfaEnabled ? w("auth.profile.manageMfa", "Manage MFA settings") : w("auth.profile.enableMfa", "Enable MFA for extra security")
561
+ children: k.mfaEnabled ? T("auth.profile.manageMfa", "Manage MFA settings") : T("auth.profile.enableMfa", "Enable MFA for extra security")
556
562
  })
557
563
  ]
558
- }), /* @__PURE__ */ v("button", {
564
+ }), /* @__PURE__ */ y("button", {
559
565
  type: "button",
560
- onClick: () => T("/devportal/api-keys"),
566
+ onClick: () => E("/devportal/api-keys"),
561
567
  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",
562
568
  children: [
563
- /* @__PURE__ */ _("div", {
569
+ /* @__PURE__ */ v("div", {
564
570
  className: "size-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",
565
- children: /* @__PURE__ */ _("svg", {
571
+ children: /* @__PURE__ */ v("svg", {
566
572
  className: "size-5 text-[var(--color-action-secondary-text)]",
567
573
  fill: "none",
568
574
  viewBox: "0 0 24 24",
569
575
  stroke: "currentColor",
570
- children: /* @__PURE__ */ _("path", {
576
+ children: /* @__PURE__ */ v("path", {
571
577
  strokeLinecap: "round",
572
578
  strokeLinejoin: "round",
573
579
  strokeWidth: 2,
@@ -575,13 +581,13 @@ function w() {
575
581
  })
576
582
  })
577
583
  }),
578
- /* @__PURE__ */ _("h3", {
584
+ /* @__PURE__ */ v("h3", {
579
585
  className: "font-medium text-[var(--color-text-primary)]",
580
- children: w("auth.profile.apiKeys", "API Keys")
586
+ children: T("auth.profile.apiKeys", "API Keys")
581
587
  }),
582
- /* @__PURE__ */ _("p", {
588
+ /* @__PURE__ */ v("p", {
583
589
  className: "text-sm text-[var(--color-text-tertiary)] mt-1",
584
- children: w("auth.profile.manageApiKeys", "Manage your API access credentials")
590
+ children: T("auth.profile.manageApiKeys", "Manage your API access credentials")
585
591
  })
586
592
  ]
587
593
  })]
@@ -590,6 +596,6 @@ function w() {
590
596
  });
591
597
  }
592
598
  //#endregion
593
- export { w as UserProfilePage };
599
+ export { T as UserProfilePage };
594
600
 
595
601
  //# sourceMappingURL=UserProfilePage.js.map