@mesob/auth-react 0.1.1 → 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.
- package/dist/components/auth/{auth-page-layout.d.ts → auth-layout.d.ts} +3 -3
- package/dist/components/auth/{auth-page-layout.js → auth-layout.js} +4 -4
- package/dist/components/auth/auth-layout.js.map +1 -0
- package/dist/components/auth/countdown.js +15 -6
- package/dist/components/auth/countdown.js.map +1 -1
- package/dist/components/auth/forgot-password.d.ts +1 -9
- package/dist/components/auth/forgot-password.js +267 -43
- package/dist/components/auth/forgot-password.js.map +1 -1
- package/dist/components/auth/reset-password-form.d.ts +2 -10
- package/dist/components/auth/reset-password-form.js +366 -118
- package/dist/components/auth/reset-password-form.js.map +1 -1
- package/dist/components/auth/sign-in.d.ts +2 -10
- package/dist/components/auth/sign-in.js +358 -130
- package/dist/components/auth/sign-in.js.map +1 -1
- package/dist/components/auth/sign-up.d.ts +2 -10
- package/dist/components/auth/sign-up.js +379 -131
- package/dist/components/auth/sign-up.js.map +1 -1
- package/dist/components/auth/verification-form.d.ts +2 -16
- package/dist/components/auth/verification-form.js +15 -6
- package/dist/components/auth/verification-form.js.map +1 -1
- package/dist/components/auth/verify-email.d.ts +10 -0
- package/dist/components/auth/{pages/verify-email-page.js → verify-email.js} +54 -34
- package/dist/components/auth/verify-email.js.map +1 -0
- package/dist/components/auth/verify-phone.d.ts +11 -0
- package/dist/components/auth/{pages/verify-phone-page.js → verify-phone.js} +53 -46
- package/dist/components/auth/verify-phone.js.map +1 -0
- package/dist/components/error-boundary.d.ts +2 -2
- package/dist/components/iam/permissions.d.ts +5 -0
- package/dist/components/iam/{permissions/permissions-page.js → permissions.js} +29 -13
- package/dist/components/iam/permissions.js.map +1 -0
- package/dist/components/iam/roles.d.ts +5 -0
- package/dist/components/iam/{roles/roles-page.js → roles.js} +29 -13
- package/dist/components/iam/roles.js.map +1 -0
- package/dist/components/iam/sessions.d.ts +5 -0
- package/dist/components/iam/{sessions/sessions-page.js → sessions.js} +13 -11
- package/dist/components/iam/sessions.js.map +1 -0
- package/dist/components/iam/tenants.d.ts +5 -0
- package/dist/components/iam/{tenants/tenants-page.js → tenants.js} +13 -11
- package/dist/components/iam/tenants.js.map +1 -0
- package/dist/components/iam/users.d.ts +5 -0
- package/dist/components/iam/{users/users-page.js → users.js} +13 -11
- package/dist/components/iam/users.js.map +1 -0
- package/dist/components/profile/account.d.ts +5 -0
- package/dist/components/profile/account.js +66 -0
- package/dist/components/profile/account.js.map +1 -0
- package/dist/components/profile/change-email-form.d.ts +5 -0
- package/dist/components/profile/change-email-form.js +721 -0
- package/dist/components/profile/change-email-form.js.map +1 -0
- package/dist/components/profile/change-password-form.d.ts +5 -0
- package/dist/components/profile/change-password-form.js +256 -0
- package/dist/components/profile/change-password-form.js.map +1 -0
- package/dist/components/profile/change-phone-form.d.ts +5 -0
- package/dist/components/profile/change-phone-form.js +758 -0
- package/dist/components/profile/change-phone-form.js.map +1 -0
- package/dist/components/profile/change-profile.d.ts +9 -0
- package/dist/components/profile/change-profile.js +37 -0
- package/dist/components/profile/change-profile.js.map +1 -0
- package/dist/components/profile/otp-verification-modal.d.ts +15 -0
- package/dist/components/profile/otp-verification-modal.js +261 -0
- package/dist/components/profile/otp-verification-modal.js.map +1 -0
- package/dist/components/profile/request-change-email-form.d.ts +10 -0
- package/dist/components/profile/request-change-email-form.js +293 -0
- package/dist/components/profile/request-change-email-form.js.map +1 -0
- package/dist/components/profile/request-change-phone-form.d.ts +10 -0
- package/dist/components/profile/request-change-phone-form.js +331 -0
- package/dist/components/profile/request-change-phone-form.js.map +1 -0
- package/dist/components/profile/security.d.ts +5 -0
- package/dist/components/profile/security.js +1439 -0
- package/dist/components/profile/security.js.map +1 -0
- package/dist/components/profile/verify-change-email-form.d.ts +11 -0
- package/dist/components/profile/verify-change-email-form.js +402 -0
- package/dist/components/profile/verify-change-email-form.js.map +1 -0
- package/dist/components/profile/verify-change-phone-form.d.ts +11 -0
- package/dist/components/profile/verify-change-phone-form.js +406 -0
- package/dist/components/profile/verify-change-phone-form.js.map +1 -0
- package/dist/components/shared/{data-table/data-table.js → data-table.js} +2 -2
- package/dist/components/shared/data-table.js.map +1 -0
- package/dist/index.d.ts +42 -93
- package/dist/index.js +2297 -1299
- package/dist/index.js.map +1 -1
- package/dist/types-D3s9oE-5.d.ts +75 -0
- package/dist/verification-form-ipSRTtQB.d.ts +22 -0
- package/package.json +3 -2
- package/dist/components/auth/auth-page-layout.js.map +0 -1
- package/dist/components/auth/pages/forgot-password-page.d.ts +0 -6
- package/dist/components/auth/pages/forgot-password-page.js +0 -362
- package/dist/components/auth/pages/forgot-password-page.js.map +0 -1
- package/dist/components/auth/pages/reset-password-page.d.ts +0 -9
- package/dist/components/auth/pages/reset-password-page.js +0 -514
- package/dist/components/auth/pages/reset-password-page.js.map +0 -1
- package/dist/components/auth/pages/sign-in-page.d.ts +0 -8
- package/dist/components/auth/pages/sign-in-page.js +0 -565
- package/dist/components/auth/pages/sign-in-page.js.map +0 -1
- package/dist/components/auth/pages/sign-up-page.d.ts +0 -9
- package/dist/components/auth/pages/sign-up-page.js +0 -518
- package/dist/components/auth/pages/sign-up-page.js.map +0 -1
- package/dist/components/auth/pages/verify-email-page.d.ts +0 -10
- package/dist/components/auth/pages/verify-email-page.js.map +0 -1
- package/dist/components/auth/pages/verify-phone-page.d.ts +0 -11
- package/dist/components/auth/pages/verify-phone-page.js.map +0 -1
- package/dist/components/iam/permissions/permissions-page.d.ts +0 -5
- package/dist/components/iam/permissions/permissions-page.js.map +0 -1
- package/dist/components/iam/roles/roles-page.d.ts +0 -5
- package/dist/components/iam/roles/roles-page.js.map +0 -1
- package/dist/components/iam/sessions/sessions-page.d.ts +0 -5
- package/dist/components/iam/sessions/sessions-page.js.map +0 -1
- package/dist/components/iam/tenants/tenants-page.d.ts +0 -5
- package/dist/components/iam/tenants/tenants-page.js.map +0 -1
- package/dist/components/iam/users/users-page.d.ts +0 -5
- package/dist/components/iam/users/users-page.js.map +0 -1
- package/dist/components/profile/profile-page.d.ts +0 -8
- package/dist/components/profile/profile-page.js +0 -163
- package/dist/components/profile/profile-page.js.map +0 -1
- package/dist/components/shared/data-table/data-table.js.map +0 -1
- package/dist/handle-error-BqDMxnQZ.d.ts +0 -8
- /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
|