@mesob/auth-react 0.1.0 → 0.2.0

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.
Files changed (116) hide show
  1. package/dist/components/auth/{auth-page-layout.d.ts → auth-layout.d.ts} +3 -3
  2. package/dist/components/auth/{auth-page-layout.js → auth-layout.js} +4 -4
  3. package/dist/components/auth/auth-layout.js.map +1 -0
  4. package/dist/components/auth/countdown.js +15 -6
  5. package/dist/components/auth/countdown.js.map +1 -1
  6. package/dist/components/auth/forgot-password.d.ts +1 -9
  7. package/dist/components/auth/forgot-password.js +267 -43
  8. package/dist/components/auth/forgot-password.js.map +1 -1
  9. package/dist/components/auth/reset-password-form.d.ts +2 -10
  10. package/dist/components/auth/reset-password-form.js +366 -118
  11. package/dist/components/auth/reset-password-form.js.map +1 -1
  12. package/dist/components/auth/sign-in.d.ts +2 -10
  13. package/dist/components/auth/sign-in.js +358 -130
  14. package/dist/components/auth/sign-in.js.map +1 -1
  15. package/dist/components/auth/sign-up.d.ts +2 -10
  16. package/dist/components/auth/sign-up.js +379 -131
  17. package/dist/components/auth/sign-up.js.map +1 -1
  18. package/dist/components/auth/verification-form.d.ts +2 -16
  19. package/dist/components/auth/verification-form.js +15 -6
  20. package/dist/components/auth/verification-form.js.map +1 -1
  21. package/dist/components/auth/verify-email.d.ts +10 -0
  22. package/dist/components/auth/{pages/verify-email-page.js → verify-email.js} +54 -34
  23. package/dist/components/auth/verify-email.js.map +1 -0
  24. package/dist/components/auth/verify-phone.d.ts +11 -0
  25. package/dist/components/auth/{pages/verify-phone-page.js → verify-phone.js} +53 -46
  26. package/dist/components/auth/verify-phone.js.map +1 -0
  27. package/dist/components/error-boundary.d.ts +2 -2
  28. package/dist/components/iam/permissions.d.ts +5 -0
  29. package/dist/components/iam/{permissions/permissions-page.js → permissions.js} +29 -13
  30. package/dist/components/iam/permissions.js.map +1 -0
  31. package/dist/components/iam/roles.d.ts +5 -0
  32. package/dist/components/iam/{roles/roles-page.js → roles.js} +29 -13
  33. package/dist/components/iam/roles.js.map +1 -0
  34. package/dist/components/iam/sessions.d.ts +5 -0
  35. package/dist/components/iam/{sessions/sessions-page.js → sessions.js} +13 -11
  36. package/dist/components/iam/sessions.js.map +1 -0
  37. package/dist/components/iam/tenants.d.ts +5 -0
  38. package/dist/components/iam/{tenants/tenants-page.js → tenants.js} +13 -11
  39. package/dist/components/iam/tenants.js.map +1 -0
  40. package/dist/components/iam/users.d.ts +5 -0
  41. package/dist/components/iam/{users/users-page.js → users.js} +13 -11
  42. package/dist/components/iam/users.js.map +1 -0
  43. package/dist/components/profile/account.d.ts +5 -0
  44. package/dist/components/profile/account.js +66 -0
  45. package/dist/components/profile/account.js.map +1 -0
  46. package/dist/components/profile/change-email-form.d.ts +5 -0
  47. package/dist/components/profile/change-email-form.js +721 -0
  48. package/dist/components/profile/change-email-form.js.map +1 -0
  49. package/dist/components/profile/change-password-form.d.ts +5 -0
  50. package/dist/components/profile/change-password-form.js +256 -0
  51. package/dist/components/profile/change-password-form.js.map +1 -0
  52. package/dist/components/profile/change-phone-form.d.ts +5 -0
  53. package/dist/components/profile/change-phone-form.js +758 -0
  54. package/dist/components/profile/change-phone-form.js.map +1 -0
  55. package/dist/components/profile/change-profile.d.ts +9 -0
  56. package/dist/components/profile/change-profile.js +37 -0
  57. package/dist/components/profile/change-profile.js.map +1 -0
  58. package/dist/components/profile/otp-verification-modal.d.ts +15 -0
  59. package/dist/components/profile/otp-verification-modal.js +261 -0
  60. package/dist/components/profile/otp-verification-modal.js.map +1 -0
  61. package/dist/components/profile/request-change-email-form.d.ts +10 -0
  62. package/dist/components/profile/request-change-email-form.js +293 -0
  63. package/dist/components/profile/request-change-email-form.js.map +1 -0
  64. package/dist/components/profile/request-change-phone-form.d.ts +10 -0
  65. package/dist/components/profile/request-change-phone-form.js +331 -0
  66. package/dist/components/profile/request-change-phone-form.js.map +1 -0
  67. package/dist/components/profile/security.d.ts +5 -0
  68. package/dist/components/profile/security.js +1439 -0
  69. package/dist/components/profile/security.js.map +1 -0
  70. package/dist/components/profile/verify-change-email-form.d.ts +11 -0
  71. package/dist/components/profile/verify-change-email-form.js +402 -0
  72. package/dist/components/profile/verify-change-email-form.js.map +1 -0
  73. package/dist/components/profile/verify-change-phone-form.d.ts +11 -0
  74. package/dist/components/profile/verify-change-phone-form.js +406 -0
  75. package/dist/components/profile/verify-change-phone-form.js.map +1 -0
  76. package/dist/components/shared/{data-table/data-table.js → data-table.js} +2 -2
  77. package/dist/components/shared/data-table.js.map +1 -0
  78. package/dist/index.d.ts +42 -88
  79. package/dist/index.js +2297 -1299
  80. package/dist/index.js.map +1 -1
  81. package/dist/types-D3s9oE-5.d.ts +75 -0
  82. package/dist/verification-form-ipSRTtQB.d.ts +22 -0
  83. package/package.json +3 -2
  84. package/dist/components/auth/auth-page-layout.js.map +0 -1
  85. package/dist/components/auth/pages/forgot-password-page.d.ts +0 -6
  86. package/dist/components/auth/pages/forgot-password-page.js +0 -362
  87. package/dist/components/auth/pages/forgot-password-page.js.map +0 -1
  88. package/dist/components/auth/pages/reset-password-page.d.ts +0 -9
  89. package/dist/components/auth/pages/reset-password-page.js +0 -514
  90. package/dist/components/auth/pages/reset-password-page.js.map +0 -1
  91. package/dist/components/auth/pages/sign-in-page.d.ts +0 -8
  92. package/dist/components/auth/pages/sign-in-page.js +0 -565
  93. package/dist/components/auth/pages/sign-in-page.js.map +0 -1
  94. package/dist/components/auth/pages/sign-up-page.d.ts +0 -9
  95. package/dist/components/auth/pages/sign-up-page.js +0 -518
  96. package/dist/components/auth/pages/sign-up-page.js.map +0 -1
  97. package/dist/components/auth/pages/verify-email-page.d.ts +0 -10
  98. package/dist/components/auth/pages/verify-email-page.js.map +0 -1
  99. package/dist/components/auth/pages/verify-phone-page.d.ts +0 -11
  100. package/dist/components/auth/pages/verify-phone-page.js.map +0 -1
  101. package/dist/components/iam/permissions/permissions-page.d.ts +0 -5
  102. package/dist/components/iam/permissions/permissions-page.js.map +0 -1
  103. package/dist/components/iam/roles/roles-page.d.ts +0 -5
  104. package/dist/components/iam/roles/roles-page.js.map +0 -1
  105. package/dist/components/iam/sessions/sessions-page.d.ts +0 -5
  106. package/dist/components/iam/sessions/sessions-page.js.map +0 -1
  107. package/dist/components/iam/tenants/tenants-page.d.ts +0 -5
  108. package/dist/components/iam/tenants/tenants-page.js.map +0 -1
  109. package/dist/components/iam/users/users-page.d.ts +0 -5
  110. package/dist/components/iam/users/users-page.js.map +0 -1
  111. package/dist/components/profile/profile-page.d.ts +0 -8
  112. package/dist/components/profile/profile-page.js +0 -163
  113. package/dist/components/profile/profile-page.js.map +0 -1
  114. package/dist/components/shared/data-table/data-table.js.map +0 -1
  115. package/dist/handle-error-BqDMxnQZ.d.ts +0 -8
  116. /package/dist/components/shared/{data-table/data-table.d.ts → data-table.d.ts} +0 -0
@@ -0,0 +1,721 @@
1
+ "use client";
2
+
3
+ // src/components/profile/change-email-form.tsx
4
+ import { Button as Button4 } from "@mesob/ui/components/button";
5
+ import {
6
+ Collapsible,
7
+ CollapsibleContent,
8
+ CollapsibleTrigger
9
+ } from "@mesob/ui/components/collapsible";
10
+ import { IconChevronDown } from "@tabler/icons-react";
11
+ import { useState as useState5 } from "react";
12
+
13
+ // src/provider.tsx
14
+ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
15
+ import { deepmerge } from "deepmerge-ts";
16
+ import createFetchClient from "openapi-fetch";
17
+ import createClient from "openapi-react-query";
18
+ import { createContext, useContext, useMemo, useState } from "react";
19
+
20
+ // src/lib/translations.ts
21
+ function createTranslator(messages, namespace) {
22
+ return (key, params) => {
23
+ const fullKey = namespace ? `${namespace}.${key}` : key;
24
+ const keys = fullKey.split(".");
25
+ let value = messages;
26
+ for (const k of keys) {
27
+ if (value && typeof value === "object" && value !== null) {
28
+ value = value[k];
29
+ } else {
30
+ return fullKey;
31
+ }
32
+ }
33
+ if (typeof value !== "string") {
34
+ return fullKey;
35
+ }
36
+ if (params) {
37
+ return value.replace(
38
+ /\{(\w+)\}/g,
39
+ (_, param) => String(params[param] ?? `{${param}}`)
40
+ );
41
+ }
42
+ return value;
43
+ };
44
+ }
45
+
46
+ // src/utils/cookie.ts
47
+ var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
48
+
49
+ // src/provider.tsx
50
+ import { jsx } from "react/jsx-runtime";
51
+ var SessionContext = createContext(null);
52
+ var ApiContext = createContext(null);
53
+ var ConfigContext = createContext(null);
54
+ var queryClient = new QueryClient({
55
+ defaultOptions: {
56
+ queries: {
57
+ refetchOnWindowFocus: false
58
+ }
59
+ }
60
+ });
61
+ function useSession() {
62
+ const context = useContext(SessionContext);
63
+ if (!context) {
64
+ throw new Error("useSession must be used within MesobAuthProvider");
65
+ }
66
+ return context;
67
+ }
68
+ function useApi() {
69
+ const context = useContext(ApiContext);
70
+ if (!context) {
71
+ throw new Error("useApi must be used within MesobAuthProvider");
72
+ }
73
+ return context;
74
+ }
75
+ function useConfig() {
76
+ const context = useContext(ConfigContext);
77
+ if (!context) {
78
+ throw new Error("useConfig must be used within MesobAuthProvider");
79
+ }
80
+ return context;
81
+ }
82
+
83
+ // src/components/profile/request-change-email-form.tsx
84
+ import { zodResolver } from "@hookform/resolvers/zod";
85
+ import { Button } from "@mesob/ui/components/button";
86
+ import { Input } from "@mesob/ui/components/input";
87
+ import { Label } from "@mesob/ui/components/label";
88
+ import { Spinner } from "@mesob/ui/components/spinner";
89
+ import { IconEye, IconEyeOff } from "@tabler/icons-react";
90
+ import { useEffect, useState as useState2 } from "react";
91
+ import { useForm } from "react-hook-form";
92
+ import { toast } from "sonner";
93
+ import { z } from "zod";
94
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
95
+ var emailPasswordSchema = z.object({
96
+ email: z.string().email("Invalid email address"),
97
+ password: z.string().min(8, "Password must be at least 8 characters").max(128, "Password too long")
98
+ });
99
+ function isAuthError(error) {
100
+ return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
101
+ }
102
+ function getErrorCode(error) {
103
+ if (error.code) {
104
+ return error.code;
105
+ }
106
+ if (error.message) {
107
+ const upperMessage = error.message.toUpperCase().trim();
108
+ const validCodes = [
109
+ "USER_NOT_FOUND",
110
+ "USER_EXISTS",
111
+ "INVALID_PASSWORD",
112
+ "VERIFICATION_EXPIRED",
113
+ "VERIFICATION_MISMATCH",
114
+ "VERIFICATION_NOT_FOUND",
115
+ "TOO_MANY_ATTEMPTS",
116
+ "UNAUTHORIZED"
117
+ ];
118
+ if (validCodes.includes(upperMessage)) {
119
+ return upperMessage;
120
+ }
121
+ }
122
+ return void 0;
123
+ }
124
+ function getErrorMessage(error) {
125
+ if (isAuthError(error)) {
126
+ const errorCode = getErrorCode(error);
127
+ switch (errorCode) {
128
+ case "USER_EXISTS":
129
+ return "This email is already taken. Please use a different email.";
130
+ case "VERIFICATION_EXPIRED":
131
+ return "Verification code has expired. Please request a new one.";
132
+ case "VERIFICATION_MISMATCH":
133
+ return "Invalid verification code. Please try again.";
134
+ case "VERIFICATION_NOT_FOUND":
135
+ return "Verification not found. Please request a new code.";
136
+ default:
137
+ return error.message || "An error occurred. Please try again.";
138
+ }
139
+ }
140
+ if (error instanceof Error) {
141
+ return error.message;
142
+ }
143
+ return "An error occurred. Please try again.";
144
+ }
145
+ function RequestChangeEmailForm({
146
+ onSuccess,
147
+ onCancel,
148
+ buttonText
149
+ }) {
150
+ const { user } = useSession();
151
+ const { hooks } = useApi();
152
+ const [isSubmitting, setIsSubmitting] = useState2(false);
153
+ const [isChecking, setIsChecking] = useState2(true);
154
+ const [showPassword, setShowPassword] = useState2(false);
155
+ const getPendingAccountChangeQuery = hooks.useQuery(
156
+ "get",
157
+ "/account-change/pending",
158
+ {},
159
+ { enabled: false }
160
+ );
161
+ const verifyPasswordMutation = hooks.useMutation("post", "/password/verify");
162
+ const checkUserMutation = hooks.useMutation("post", "/check-account");
163
+ const requestEmailVerificationMutation = hooks.useMutation(
164
+ "post",
165
+ "/email/verification/request"
166
+ );
167
+ const emailPasswordForm = useForm({
168
+ resolver: zodResolver(emailPasswordSchema),
169
+ defaultValues: {
170
+ email: "",
171
+ password: ""
172
+ }
173
+ });
174
+ const {
175
+ register,
176
+ handleSubmit,
177
+ getValues,
178
+ setValue,
179
+ formState: { errors }
180
+ } = emailPasswordForm;
181
+ useEffect(() => {
182
+ let active = true;
183
+ const run = async () => {
184
+ try {
185
+ const data = await getPendingAccountChangeQuery.refetch();
186
+ if (!active) {
187
+ return;
188
+ }
189
+ const accountChange = data.data?.accountChange;
190
+ const verificationId = data.data?.verificationId;
191
+ if (accountChange?.changeType !== "email") {
192
+ setIsChecking(false);
193
+ return;
194
+ }
195
+ if (!accountChange.newEmail) {
196
+ setIsChecking(false);
197
+ return;
198
+ }
199
+ if (getValues("email")) {
200
+ setIsChecking(false);
201
+ return;
202
+ }
203
+ setValue("email", accountChange.newEmail, { shouldValidate: true });
204
+ if (verificationId) {
205
+ toast.message("Resuming verification\u2026");
206
+ onSuccess(verificationId, accountChange.newEmail);
207
+ return;
208
+ }
209
+ setIsChecking(false);
210
+ } catch {
211
+ setIsChecking(false);
212
+ }
213
+ };
214
+ run().catch(() => void 0);
215
+ return () => {
216
+ active = false;
217
+ };
218
+ }, [getPendingAccountChangeQuery.refetch, getValues, onSuccess, setValue]);
219
+ const onEmailPasswordSubmit = async (data) => {
220
+ if (!user) {
221
+ toast.error("User not found");
222
+ return;
223
+ }
224
+ try {
225
+ setIsSubmitting(true);
226
+ await verifyPasswordMutation.mutateAsync({
227
+ body: { password: data.password }
228
+ });
229
+ const checkResult = await checkUserMutation.mutateAsync({
230
+ body: { identifier: data.email }
231
+ });
232
+ if (checkResult.data?.exists) {
233
+ if (user?.email?.toLowerCase() === data.email.toLowerCase()) {
234
+ toast.error("This is already your current email address.");
235
+ return;
236
+ }
237
+ toast.error(
238
+ "This email is already taken. Please use a different email."
239
+ );
240
+ return;
241
+ }
242
+ const verification = await requestEmailVerificationMutation.mutateAsync({
243
+ body: { email: data.email }
244
+ });
245
+ toast.success("Verification code sent to your email");
246
+ onSuccess(verification.data?.verificationId ?? "", data.email);
247
+ } catch (error) {
248
+ const errorMessage = getErrorMessage(error);
249
+ if (isAuthError(error)) {
250
+ const errorCode = getErrorCode(error);
251
+ if (errorCode === "INVALID_PASSWORD" || errorCode === "USER_NOT_FOUND") {
252
+ toast.error("Incorrect password. Please try again.");
253
+ return;
254
+ }
255
+ }
256
+ toast.error(errorMessage);
257
+ } finally {
258
+ setIsSubmitting(false);
259
+ }
260
+ };
261
+ const isLoading = isSubmitting || isChecking;
262
+ return /* @__PURE__ */ jsxs(
263
+ "form",
264
+ {
265
+ onSubmit: handleSubmit(onEmailPasswordSubmit),
266
+ className: "p-4 space-y-4 border-t",
267
+ children: [
268
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4 w-full md:w-1/2", children: [
269
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
270
+ /* @__PURE__ */ jsx2(Label, { htmlFor: "email", children: "New Email Address" }),
271
+ /* @__PURE__ */ jsx2(
272
+ Input,
273
+ {
274
+ id: "email",
275
+ type: "email",
276
+ placeholder: "Enter your new email",
277
+ ...register("email"),
278
+ disabled: isLoading
279
+ }
280
+ ),
281
+ errors.email && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.email.message })
282
+ ] }),
283
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
284
+ /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
285
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
286
+ /* @__PURE__ */ jsx2(
287
+ Input,
288
+ {
289
+ id: "password",
290
+ type: showPassword ? "text" : "password",
291
+ autoComplete: "current-password",
292
+ placeholder: "Enter your password",
293
+ ...register("password"),
294
+ disabled: isLoading
295
+ }
296
+ ),
297
+ /* @__PURE__ */ jsx2(
298
+ "button",
299
+ {
300
+ type: "button",
301
+ onClick: () => setShowPassword(!showPassword),
302
+ className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
303
+ disabled: isLoading,
304
+ children: showPassword ? /* @__PURE__ */ jsx2(IconEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx2(IconEye, { className: "h-4 w-4" })
305
+ }
306
+ )
307
+ ] }),
308
+ errors.password && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: errors.password.message })
309
+ ] })
310
+ ] }),
311
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
312
+ /* @__PURE__ */ jsx2(
313
+ Button,
314
+ {
315
+ type: "button",
316
+ variant: "outline",
317
+ onClick: onCancel,
318
+ disabled: isLoading,
319
+ children: "Cancel"
320
+ }
321
+ ),
322
+ /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isLoading, children: [
323
+ isLoading && /* @__PURE__ */ jsx2(Spinner, { className: "mr-2 h-4 w-4" }),
324
+ isChecking ? "Checking\u2026" : buttonText
325
+ ] })
326
+ ] })
327
+ ]
328
+ }
329
+ );
330
+ }
331
+
332
+ // src/components/profile/verify-change-email-form.tsx
333
+ import { useState as useState4 } from "react";
334
+ import { toast as toast2 } from "sonner";
335
+
336
+ // src/components/profile/otp-verification-modal.tsx
337
+ import {
338
+ Dialog,
339
+ DialogContent,
340
+ DialogDescription,
341
+ DialogHeader,
342
+ DialogTitle
343
+ } from "@mesob/ui/components/dialog";
344
+
345
+ // src/components/auth/verification-form.tsx
346
+ import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
347
+ import { Button as Button3 } from "@mesob/ui/components/button";
348
+ import { Field, FieldError, FieldGroup } from "@mesob/ui/components/field";
349
+ import {
350
+ InputOTP,
351
+ InputOTPGroup,
352
+ InputOTPSlot
353
+ } from "@mesob/ui/components/input-otp";
354
+ import { Spinner as Spinner3 } from "@mesob/ui/components/spinner";
355
+ import { Controller, useForm as useForm2 } from "react-hook-form";
356
+ import { z as z2 } from "zod";
357
+
358
+ // src/hooks/use-translator.ts
359
+ import { useMesob } from "@mesob/ui/components/mesob-context";
360
+ function useTranslator(namespace) {
361
+ const mesob = useMesob();
362
+ const { config } = useConfig();
363
+ if (mesob?.t) {
364
+ return (key, params) => mesob.t(namespace ? `${namespace}.${key}` : key, params);
365
+ }
366
+ return createTranslator(config.messages || {}, namespace);
367
+ }
368
+
369
+ // src/components/auth/countdown.tsx
370
+ import { Button as Button2 } from "@mesob/ui/components/button";
371
+ import { Spinner as Spinner2 } from "@mesob/ui/components/spinner";
372
+ import { useEffect as useEffect2, useState as useState3 } from "react";
373
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
374
+ var Countdown = ({
375
+ initialSeconds = 60,
376
+ onResend,
377
+ resending = false
378
+ }) => {
379
+ const t = useTranslator("Common");
380
+ const [seconds, setSeconds] = useState3(initialSeconds);
381
+ const [isResending, setIsResending] = useState3(false);
382
+ useEffect2(() => {
383
+ if (seconds <= 0) {
384
+ return;
385
+ }
386
+ const timer = setInterval(() => {
387
+ setSeconds((prev) => {
388
+ if (prev <= 1) {
389
+ clearInterval(timer);
390
+ return 0;
391
+ }
392
+ return prev - 1;
393
+ });
394
+ }, 1e3);
395
+ return () => clearInterval(timer);
396
+ }, [seconds]);
397
+ const handleResend = async () => {
398
+ setIsResending(true);
399
+ try {
400
+ await onResend();
401
+ setSeconds(initialSeconds);
402
+ } catch (_error) {
403
+ } finally {
404
+ setIsResending(false);
405
+ }
406
+ };
407
+ if (seconds > 0) {
408
+ return /* @__PURE__ */ jsx3(Button2, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
409
+ }
410
+ return /* @__PURE__ */ jsxs2(
411
+ Button2,
412
+ {
413
+ variant: "ghost",
414
+ onClick: handleResend,
415
+ disabled: isResending || resending,
416
+ children: [
417
+ isResending || resending && /* @__PURE__ */ jsx3(Spinner2, {}),
418
+ t("resend")
419
+ ]
420
+ }
421
+ );
422
+ };
423
+
424
+ // src/components/auth/verification-form.tsx
425
+ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
426
+ var verificationSchema = (t) => z2.object({
427
+ code: z2.string().length(6, t("form.codeLength"))
428
+ });
429
+ var VerificationForm = ({
430
+ onSubmit,
431
+ onResend,
432
+ isLoading = false
433
+ }) => {
434
+ const t = useTranslator("Auth.verification");
435
+ const form = useForm2({
436
+ resolver: zodResolver2(verificationSchema(t)),
437
+ defaultValues: {
438
+ code: ""
439
+ }
440
+ });
441
+ const handleSubmit = form.handleSubmit(async (values) => {
442
+ await onSubmit(values);
443
+ });
444
+ return /* @__PURE__ */ jsxs3("form", { id: "verification-form", onSubmit: handleSubmit, children: [
445
+ /* @__PURE__ */ jsx4(FieldGroup, { children: /* @__PURE__ */ jsx4(
446
+ Controller,
447
+ {
448
+ name: "code",
449
+ control: form.control,
450
+ render: ({ field, fieldState }) => /* @__PURE__ */ jsxs3(Field, { "data-invalid": fieldState.invalid, children: [
451
+ /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(
452
+ InputOTP,
453
+ {
454
+ maxLength: 6,
455
+ id: "otp",
456
+ required: true,
457
+ value: field.value ?? "",
458
+ onChange: field.onChange,
459
+ onBlur: field.onBlur,
460
+ containerClassName: "gap-4 justify-center mb-2 flex items-center",
461
+ "aria-invalid": fieldState.invalid,
462
+ children: /* @__PURE__ */ jsxs3(InputOTPGroup, { className: "gap-3 *:data-[slot=input-otp-slot]:h-12 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl", children: [
463
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 0 }),
464
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 1 }),
465
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 2 }),
466
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 3 }),
467
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 4 }),
468
+ /* @__PURE__ */ jsx4(InputOTPSlot, { className: "h-12", index: 5 })
469
+ ] })
470
+ }
471
+ ) }),
472
+ fieldState.invalid && /* @__PURE__ */ jsx4(FieldError, { errors: [fieldState.error] })
473
+ ] })
474
+ }
475
+ ) }),
476
+ /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center mt-4", children: [
477
+ /* @__PURE__ */ jsx4(Countdown, { onResend, resending: isLoading }),
478
+ /* @__PURE__ */ jsxs3(
479
+ Button3,
480
+ {
481
+ type: "submit",
482
+ form: "verification-form",
483
+ disabled: isLoading || form.watch("code").length !== 6,
484
+ children: [
485
+ isLoading && /* @__PURE__ */ jsx4(Spinner3, {}),
486
+ t("form.confirm")
487
+ ]
488
+ }
489
+ )
490
+ ] })
491
+ ] });
492
+ };
493
+
494
+ // src/components/profile/otp-verification-modal.tsx
495
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
496
+ function OtpVerificationModal({
497
+ open,
498
+ title,
499
+ description,
500
+ verificationId,
501
+ isLoading,
502
+ onSubmit,
503
+ onResend,
504
+ onCancel
505
+ }) {
506
+ return /* @__PURE__ */ jsx5(
507
+ Dialog,
508
+ {
509
+ open,
510
+ onOpenChange: (nextOpen) => {
511
+ if (!nextOpen) {
512
+ onCancel?.();
513
+ }
514
+ },
515
+ children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
516
+ /* @__PURE__ */ jsxs4(DialogHeader, { children: [
517
+ /* @__PURE__ */ jsx5(DialogTitle, { children: title }),
518
+ description && /* @__PURE__ */ jsx5(DialogDescription, { children: description })
519
+ ] }),
520
+ /* @__PURE__ */ jsx5(
521
+ VerificationForm,
522
+ {
523
+ verificationId,
524
+ isLoading,
525
+ onSubmit: async ({ code }) => onSubmit(code),
526
+ onResend: onResend ?? (() => void 0)
527
+ }
528
+ )
529
+ ] })
530
+ }
531
+ );
532
+ }
533
+
534
+ // src/components/profile/verify-change-email-form.tsx
535
+ import { jsx as jsx6 } from "react/jsx-runtime";
536
+ function isAuthError2(error) {
537
+ return typeof error === "object" && error !== null && ("code" in error || "message" in error || "name" in error);
538
+ }
539
+ function getErrorCode2(error) {
540
+ if (error.code) {
541
+ return error.code;
542
+ }
543
+ if (error.message) {
544
+ const upperMessage = error.message.toUpperCase().trim();
545
+ const validCodes = [
546
+ "USER_NOT_FOUND",
547
+ "USER_EXISTS",
548
+ "INVALID_PASSWORD",
549
+ "VERIFICATION_EXPIRED",
550
+ "VERIFICATION_MISMATCH",
551
+ "VERIFICATION_NOT_FOUND",
552
+ "TOO_MANY_ATTEMPTS",
553
+ "UNAUTHORIZED"
554
+ ];
555
+ if (validCodes.includes(upperMessage)) {
556
+ return upperMessage;
557
+ }
558
+ }
559
+ return void 0;
560
+ }
561
+ function getErrorMessage2(error) {
562
+ if (isAuthError2(error)) {
563
+ const errorCode = getErrorCode2(error);
564
+ switch (errorCode) {
565
+ case "USER_EXISTS":
566
+ return "This email is already taken. Please use a different email.";
567
+ case "VERIFICATION_EXPIRED":
568
+ return "Verification code has expired. Please request a new one.";
569
+ case "VERIFICATION_MISMATCH":
570
+ return "Invalid verification code. Please try again.";
571
+ case "VERIFICATION_NOT_FOUND":
572
+ return "Verification not found. Please request a new code.";
573
+ default:
574
+ return error.message || "An error occurred. Please try again.";
575
+ }
576
+ }
577
+ if (error instanceof Error) {
578
+ return error.message;
579
+ }
580
+ return "An error occurred. Please try again.";
581
+ }
582
+ function VerifyChangeEmailForm({
583
+ email,
584
+ verificationId,
585
+ onSuccess,
586
+ onCancel
587
+ }) {
588
+ const { refresh } = useSession();
589
+ const { hooks } = useApi();
590
+ const [isSubmitting, setIsSubmitting] = useState4(false);
591
+ const [currentVerificationId, setCurrentVerificationId] = useState4(verificationId);
592
+ const verifyEmailMutation = hooks.useMutation(
593
+ "post",
594
+ "/email/verification/confirm"
595
+ );
596
+ const updateEmailMutation = hooks.useMutation("put", "/profile/email");
597
+ const requestEmailVerificationMutation = hooks.useMutation(
598
+ "post",
599
+ "/email/verification/request"
600
+ );
601
+ const onOtpSubmit = async (code) => {
602
+ if (!currentVerificationId) {
603
+ toast2.error("Verification not found. Please request a new code.");
604
+ return;
605
+ }
606
+ try {
607
+ setIsSubmitting(true);
608
+ await verifyEmailMutation.mutateAsync({
609
+ body: {
610
+ verificationId: currentVerificationId,
611
+ code
612
+ }
613
+ });
614
+ await updateEmailMutation.mutateAsync({
615
+ body: { email }
616
+ });
617
+ toast2.success("Email updated successfully");
618
+ await refresh();
619
+ onSuccess();
620
+ } catch (error) {
621
+ const errorMessage = getErrorMessage2(error);
622
+ toast2.error(errorMessage);
623
+ } finally {
624
+ setIsSubmitting(false);
625
+ }
626
+ };
627
+ if (!currentVerificationId) {
628
+ toast2.error("Verification not found. Please request a new code.");
629
+ return null;
630
+ }
631
+ return /* @__PURE__ */ jsx6(
632
+ OtpVerificationModal,
633
+ {
634
+ open: true,
635
+ title: "Verify email",
636
+ description: `Enter the verification code sent to ${email}`,
637
+ verificationId: currentVerificationId,
638
+ isLoading: isSubmitting,
639
+ onSubmit: onOtpSubmit,
640
+ onResend: async () => {
641
+ try {
642
+ setIsSubmitting(true);
643
+ const next = await requestEmailVerificationMutation.mutateAsync({
644
+ body: { email }
645
+ });
646
+ setCurrentVerificationId(next.data?.verificationId ?? null);
647
+ toast2.success("Verification code resent");
648
+ } catch (error) {
649
+ toast2.error(getErrorMessage2(error));
650
+ } finally {
651
+ setIsSubmitting(false);
652
+ }
653
+ },
654
+ onCancel
655
+ }
656
+ );
657
+ }
658
+
659
+ // src/components/profile/change-email-form.tsx
660
+ import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
661
+ function ChangeEmailForm() {
662
+ const { user } = useSession();
663
+ const [isOpen, setIsOpen] = useState5(false);
664
+ const [showOtp, setShowOtp] = useState5(false);
665
+ const [verificationId, setVerificationId] = useState5(null);
666
+ const [newEmail, setNewEmail] = useState5("");
667
+ const resetForms = () => {
668
+ setShowOtp(false);
669
+ setVerificationId(null);
670
+ setNewEmail("");
671
+ };
672
+ const handleRequestSuccess = (id, email) => {
673
+ setVerificationId(id);
674
+ setNewEmail(email);
675
+ setShowOtp(true);
676
+ };
677
+ const handleVerifySuccess = () => {
678
+ resetForms();
679
+ setIsOpen(false);
680
+ };
681
+ const handleCancel = () => {
682
+ resetForms();
683
+ setIsOpen(false);
684
+ };
685
+ const title = user?.email ? "Change Email" : "Add Email";
686
+ const description = user?.email ? "Update your email address" : "Add an email address to your account";
687
+ return /* @__PURE__ */ jsx7(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs5("div", { className: "border rounded-lg", children: [
688
+ /* @__PURE__ */ jsx7(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(Button4, { variant: "ghost", className: "w-full justify-between p-4 h-auto", children: [
689
+ /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start", children: [
690
+ /* @__PURE__ */ jsx7("span", { className: "font-medium", children: title }),
691
+ /* @__PURE__ */ jsx7("span", { className: "text-sm text-muted-foreground", children: description })
692
+ ] }),
693
+ /* @__PURE__ */ jsx7(
694
+ IconChevronDown,
695
+ {
696
+ className: `h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`
697
+ }
698
+ )
699
+ ] }) }),
700
+ /* @__PURE__ */ jsx7(CollapsibleContent, { children: showOtp ? /* @__PURE__ */ jsx7(
701
+ VerifyChangeEmailForm,
702
+ {
703
+ email: newEmail,
704
+ verificationId,
705
+ onSuccess: handleVerifySuccess,
706
+ onCancel: handleCancel
707
+ }
708
+ ) : /* @__PURE__ */ jsx7(
709
+ RequestChangeEmailForm,
710
+ {
711
+ onSuccess: handleRequestSuccess,
712
+ onCancel: handleCancel,
713
+ buttonText: title
714
+ }
715
+ ) })
716
+ ] }) });
717
+ }
718
+ export {
719
+ ChangeEmailForm
720
+ };
721
+ //# sourceMappingURL=change-email-form.js.map