@mesob/auth-react 0.0.3

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 (46) hide show
  1. package/dist/components/auth-card.d.ts +9 -0
  2. package/dist/components/auth-card.js +11 -0
  3. package/dist/components/auth-card.js.map +1 -0
  4. package/dist/components/auth-page-layout.d.ts +14 -0
  5. package/dist/components/auth-page-layout.js +28 -0
  6. package/dist/components/auth-page-layout.js.map +1 -0
  7. package/dist/components/countdown.d.ts +10 -0
  8. package/dist/components/countdown.js +57 -0
  9. package/dist/components/countdown.js.map +1 -0
  10. package/dist/components/forgot-password.d.ts +13 -0
  11. package/dist/components/forgot-password.js +67 -0
  12. package/dist/components/forgot-password.js.map +1 -0
  13. package/dist/components/pages/forgot-password-page.d.ts +17 -0
  14. package/dist/components/pages/forgot-password-page.js +224 -0
  15. package/dist/components/pages/forgot-password-page.js.map +1 -0
  16. package/dist/components/pages/reset-password-page.d.ts +19 -0
  17. package/dist/components/pages/reset-password-page.js +357 -0
  18. package/dist/components/pages/reset-password-page.js.map +1 -0
  19. package/dist/components/pages/sign-in-page.d.ts +19 -0
  20. package/dist/components/pages/sign-in-page.js +343 -0
  21. package/dist/components/pages/sign-in-page.js.map +1 -0
  22. package/dist/components/pages/sign-up-page.d.ts +18 -0
  23. package/dist/components/pages/sign-up-page.js +360 -0
  24. package/dist/components/pages/sign-up-page.js.map +1 -0
  25. package/dist/components/pages/verify-email-page.d.ts +19 -0
  26. package/dist/components/pages/verify-email-page.js +356 -0
  27. package/dist/components/pages/verify-email-page.js.map +1 -0
  28. package/dist/components/pages/verify-phone-page.d.ts +20 -0
  29. package/dist/components/pages/verify-phone-page.js +368 -0
  30. package/dist/components/pages/verify-phone-page.js.map +1 -0
  31. package/dist/components/reset-password-form.d.ts +16 -0
  32. package/dist/components/reset-password-form.js +142 -0
  33. package/dist/components/reset-password-form.js.map +1 -0
  34. package/dist/components/sign-in.d.ts +16 -0
  35. package/dist/components/sign-in.js +128 -0
  36. package/dist/components/sign-in.js.map +1 -0
  37. package/dist/components/sign-up.d.ts +17 -0
  38. package/dist/components/sign-up.js +179 -0
  39. package/dist/components/sign-up.js.map +1 -0
  40. package/dist/components/verification-form.d.ts +15 -0
  41. package/dist/components/verification-form.js +155 -0
  42. package/dist/components/verification-form.js.map +1 -0
  43. package/dist/index.d.ts +222 -0
  44. package/dist/index.js +1640 -0
  45. package/dist/index.js.map +1 -0
  46. package/package.json +48 -0
@@ -0,0 +1,128 @@
1
+ "use client";
2
+
3
+ // src/components/sign-in.tsx
4
+ import { zodResolver } from "@hookform/resolvers/zod";
5
+ import { Button } from "@mesob/ui/components/button";
6
+ import {
7
+ Form,
8
+ FormControl,
9
+ FormField,
10
+ FormItem,
11
+ FormLabel,
12
+ FormMessage
13
+ } from "@mesob/ui/components/form";
14
+ import { Input } from "@mesob/ui/components/input";
15
+ import { Eye, EyeOff } from "lucide-react";
16
+ import { useTranslations } from "next-intl";
17
+ import { useMemo, useState } from "react";
18
+ import { useForm } from "react-hook-form";
19
+ import { z } from "zod";
20
+ import { jsx, jsxs } from "react/jsx-runtime";
21
+ var SignIn = ({
22
+ onSubmit,
23
+ isLoading = false,
24
+ identifier = "",
25
+ step = "identifier",
26
+ onBack: _onBack
27
+ }) => {
28
+ const t = useTranslations("Auth.signIn");
29
+ const [showPassword, setShowPassword] = useState(false);
30
+ const identifierSchema = useMemo(
31
+ () => z.object({
32
+ account: z.string().min(1, t("errors.accountRequired")).email(t("errors.invalidEmail"))
33
+ }),
34
+ [t]
35
+ );
36
+ const passwordSchema = useMemo(
37
+ () => z.object({
38
+ password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError"))
39
+ }),
40
+ [t]
41
+ );
42
+ const identifierForm = useForm({
43
+ resolver: zodResolver(identifierSchema),
44
+ defaultValues: {
45
+ account: identifier
46
+ }
47
+ });
48
+ const passwordForm = useForm({
49
+ resolver: zodResolver(passwordSchema),
50
+ defaultValues: {
51
+ password: ""
52
+ }
53
+ });
54
+ const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {
55
+ await onSubmit({ account: values.account, password: "" }, "identifier");
56
+ });
57
+ const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {
58
+ await onSubmit(
59
+ { account: identifier, password: values.password },
60
+ "password"
61
+ );
62
+ });
63
+ if (step === "password") {
64
+ return /* @__PURE__ */ jsx(Form, { ...passwordForm, children: /* @__PURE__ */ jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-4", children: [
65
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
66
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: t("form.enterPasswordFor") }),
67
+ /* @__PURE__ */ jsx("p", { className: "font-bold", children: identifier })
68
+ ] }),
69
+ /* @__PURE__ */ jsx(
70
+ FormField,
71
+ {
72
+ control: passwordForm.control,
73
+ name: "password",
74
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
75
+ /* @__PURE__ */ jsx(FormLabel, { children: t("form.passwordLabel") }),
76
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
77
+ /* @__PURE__ */ jsx(
78
+ Input,
79
+ {
80
+ type: showPassword ? "text" : "password",
81
+ placeholder: t("form.passwordPlaceholder"),
82
+ ...field
83
+ }
84
+ ),
85
+ /* @__PURE__ */ jsx(
86
+ "button",
87
+ {
88
+ type: "button",
89
+ onClick: () => setShowPassword(!showPassword),
90
+ className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
91
+ children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
92
+ }
93
+ )
94
+ ] }) }),
95
+ /* @__PURE__ */ jsx(FormMessage, {})
96
+ ] })
97
+ }
98
+ ),
99
+ /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
100
+ ] }) });
101
+ }
102
+ return /* @__PURE__ */ jsx(Form, { ...identifierForm, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleIdentifierSubmit, className: "space-y-4", children: [
103
+ /* @__PURE__ */ jsx(
104
+ FormField,
105
+ {
106
+ control: identifierForm.control,
107
+ name: "account",
108
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
109
+ /* @__PURE__ */ jsx(FormLabel, { children: t("form.accountLabel") }),
110
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
111
+ Input,
112
+ {
113
+ type: "text",
114
+ placeholder: t("form.accountPlaceholder"),
115
+ ...field
116
+ }
117
+ ) }),
118
+ /* @__PURE__ */ jsx(FormMessage, {})
119
+ ] })
120
+ }
121
+ ),
122
+ /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.continue") })
123
+ ] }) });
124
+ };
125
+ export {
126
+ SignIn
127
+ };
128
+ //# sourceMappingURL=sign-in.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n Form,\n FormControl,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from '@mesob/ui/components/form';\nimport { Input } from '@mesob/ui/components/input';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { useTranslations } from 'next-intl';\nimport { useMemo, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\n\ntype SignInFormValues = {\n account: string;\n password: string;\n};\n\ntype SignInProps = {\n onSubmit: (\n values: SignInFormValues,\n step: 'identifier' | 'password',\n ) => Promise<void> | void;\n isLoading?: boolean;\n identifier?: string;\n step?: 'identifier' | 'password';\n onBack?: () => void;\n};\n\nexport const SignIn = ({\n onSubmit,\n isLoading = false,\n identifier = '',\n step = 'identifier',\n onBack: _onBack,\n}: SignInProps) => {\n const t = useTranslations('Auth.signIn');\n const [showPassword, setShowPassword] = useState(false);\n\n const identifierSchema = useMemo(\n () =>\n z.object({\n account: z\n .string()\n .min(1, t('errors.accountRequired'))\n .email(t('errors.invalidEmail')),\n }),\n [t],\n );\n\n const passwordSchema = useMemo(\n () =>\n z.object({\n password: z\n .string()\n .min(8, t('errors.passwordLength'))\n .max(128, t('errors.longPasswordError')),\n }),\n [t],\n );\n\n const identifierForm = useForm<{ account: string }>({\n resolver: zodResolver(identifierSchema),\n defaultValues: {\n account: identifier,\n },\n });\n\n const passwordForm = useForm<{ password: string }>({\n resolver: zodResolver(passwordSchema),\n defaultValues: {\n password: '',\n },\n });\n\n const handleIdentifierSubmit = identifierForm.handleSubmit(async (values) => {\n await onSubmit({ account: values.account, password: '' }, 'identifier');\n });\n\n const handlePasswordSubmit = passwordForm.handleSubmit(async (values) => {\n await onSubmit(\n { account: identifier, password: values.password },\n 'password',\n );\n });\n\n if (step === 'password') {\n return (\n <Form {...passwordForm}>\n <form onSubmit={handlePasswordSubmit} className=\"space-y-4\">\n <div className=\"text-center\">\n <p className=\"text-sm text-muted-foreground mb-2\">\n {t('form.enterPasswordFor')}\n </p>\n <p className=\"font-bold\">{identifier}</p>\n </div>\n <FormField\n control={passwordForm.control}\n name=\"password\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>{t('form.passwordLabel')}</FormLabel>\n <FormControl>\n <div className=\"relative\">\n <Input\n type={showPassword ? 'text' : 'password'}\n placeholder={t('form.passwordPlaceholder')}\n {...field}\n />\n <button\n type=\"button\"\n onClick={() => setShowPassword(!showPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showPassword ? (\n <EyeOff className=\"h-4 w-4\" />\n ) : (\n <Eye className=\"h-4 w-4\" />\n )}\n </button>\n </div>\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n {isLoading ? t('form.submitting') : t('form.submit')}\n </Button>\n </form>\n </Form>\n );\n }\n\n return (\n <Form {...identifierForm}>\n <form onSubmit={handleIdentifierSubmit} className=\"space-y-4\">\n <FormField\n control={identifierForm.control}\n name=\"account\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>{t('form.accountLabel')}</FormLabel>\n <FormControl>\n <Input\n type=\"text\"\n placeholder={t('form.accountPlaceholder')}\n {...field}\n />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n {isLoading ? t('form.submitting') : t('form.continue')}\n </Button>\n </form>\n </Form>\n );\n};\n"],"mappings":"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","names":[]}
@@ -0,0 +1,17 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ type SignUpFormValues = {
4
+ fullName: string;
5
+ identifier: string;
6
+ handle?: string;
7
+ password: string;
8
+ confirmPassword: string;
9
+ };
10
+ type SignUpProps = {
11
+ onSubmit: (values: SignUpFormValues) => Promise<void> | void;
12
+ isLoading?: boolean;
13
+ initialIdentifier?: string;
14
+ };
15
+ declare const SignUp: ({ onSubmit, isLoading, initialIdentifier, }: SignUpProps) => react_jsx_runtime.JSX.Element;
16
+
17
+ export { SignUp };
@@ -0,0 +1,179 @@
1
+ "use client";
2
+
3
+ // src/components/sign-up.tsx
4
+ import { zodResolver } from "@hookform/resolvers/zod";
5
+ import { Button } from "@mesob/ui/components/button";
6
+ import {
7
+ Form,
8
+ FormControl,
9
+ FormField,
10
+ FormItem,
11
+ FormLabel,
12
+ FormMessage
13
+ } from "@mesob/ui/components/form";
14
+ import { Input } from "@mesob/ui/components/input";
15
+ import { Eye, EyeOff } from "lucide-react";
16
+ import { useTranslations } from "next-intl";
17
+ import { useEffect, useMemo, useState } from "react";
18
+ import { useForm } from "react-hook-form";
19
+ import { z } from "zod";
20
+ import { jsx, jsxs } from "react/jsx-runtime";
21
+ var isPhone = (s) => /^\+?[0-9()[\]\s-]{6,}$/.test(s);
22
+ var SignUp = ({
23
+ onSubmit,
24
+ isLoading = false,
25
+ initialIdentifier
26
+ }) => {
27
+ const t = useTranslations("Auth.signUp");
28
+ const hasInitialIdentifier = !!initialIdentifier;
29
+ const [showPassword, setShowPassword] = useState(false);
30
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
31
+ const signUpSchema = useMemo(
32
+ () => z.object({
33
+ fullName: z.string().min(1, t("errors.fullNameRequired")),
34
+ identifier: z.string().min(1, t("errors.contactRequired")).refine(
35
+ (val) => {
36
+ if (!val) {
37
+ return false;
38
+ }
39
+ return val.includes("@") || isPhone(val);
40
+ },
41
+ {
42
+ message: t("errors.invalidEmailOrPhone")
43
+ }
44
+ ),
45
+ password: z.string().min(8, t("errors.passwordLength")).max(128, t("errors.longPasswordError")),
46
+ confirmPassword: z.string()
47
+ }).refine((data) => data.password === data.confirmPassword, {
48
+ message: t("errors.passwordsMismatch"),
49
+ path: ["confirmPassword"]
50
+ }),
51
+ [t]
52
+ );
53
+ const form = useForm({
54
+ resolver: zodResolver(signUpSchema),
55
+ defaultValues: {
56
+ fullName: "",
57
+ identifier: initialIdentifier || "",
58
+ password: "",
59
+ confirmPassword: ""
60
+ }
61
+ });
62
+ useEffect(() => {
63
+ if (initialIdentifier) {
64
+ form.setValue("identifier", initialIdentifier);
65
+ }
66
+ }, [initialIdentifier, form]);
67
+ const handleSubmit = form.handleSubmit(async (values) => {
68
+ await onSubmit(values);
69
+ });
70
+ const getIdentifierLabel = () => {
71
+ if (!hasInitialIdentifier) {
72
+ return t("form.accountLabel") || "Email/Phone";
73
+ }
74
+ if (initialIdentifier?.includes("@")) {
75
+ return t("form.emailLabel");
76
+ }
77
+ return t("form.phoneLabel");
78
+ };
79
+ const identifierLabel = getIdentifierLabel();
80
+ return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
81
+ /* @__PURE__ */ jsx(
82
+ FormField,
83
+ {
84
+ control: form.control,
85
+ name: "fullName",
86
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
87
+ /* @__PURE__ */ jsx(FormLabel, { children: t("form.fullNameLabel") }),
88
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: t("form.fullNamePlaceholder"), ...field }) }),
89
+ /* @__PURE__ */ jsx(FormMessage, {})
90
+ ] })
91
+ }
92
+ ),
93
+ /* @__PURE__ */ jsx(
94
+ FormField,
95
+ {
96
+ control: form.control,
97
+ name: "identifier",
98
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
99
+ /* @__PURE__ */ jsx(FormLabel, { className: hasInitialIdentifier ? "block" : void 0, children: identifierLabel }),
100
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
101
+ Input,
102
+ {
103
+ type: field.value.includes("@") ? "email" : "tel",
104
+ placeholder: hasInitialIdentifier ? void 0 : t("form.accountPlaceholder") || "Email or phone number",
105
+ ...field,
106
+ disabled: hasInitialIdentifier
107
+ }
108
+ ) }),
109
+ /* @__PURE__ */ jsx(FormMessage, {})
110
+ ] })
111
+ }
112
+ ),
113
+ /* @__PURE__ */ jsx(
114
+ FormField,
115
+ {
116
+ control: form.control,
117
+ name: "password",
118
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
119
+ /* @__PURE__ */ jsx(FormLabel, { children: t("form.passwordLabel") }),
120
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
121
+ /* @__PURE__ */ jsx(
122
+ Input,
123
+ {
124
+ type: showPassword ? "text" : "password",
125
+ placeholder: t("form.passwordPlaceholder"),
126
+ ...field
127
+ }
128
+ ),
129
+ /* @__PURE__ */ jsx(
130
+ "button",
131
+ {
132
+ type: "button",
133
+ onClick: () => setShowPassword(!showPassword),
134
+ className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
135
+ children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
136
+ }
137
+ )
138
+ ] }) }),
139
+ /* @__PURE__ */ jsx(FormMessage, {})
140
+ ] })
141
+ }
142
+ ),
143
+ /* @__PURE__ */ jsx(
144
+ FormField,
145
+ {
146
+ control: form.control,
147
+ name: "confirmPassword",
148
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
149
+ /* @__PURE__ */ jsx(FormLabel, { children: t("form.confirmPasswordLabel") }),
150
+ /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
151
+ /* @__PURE__ */ jsx(
152
+ Input,
153
+ {
154
+ type: showConfirmPassword ? "text" : "password",
155
+ placeholder: t("form.passwordPlaceholder"),
156
+ ...field
157
+ }
158
+ ),
159
+ /* @__PURE__ */ jsx(
160
+ "button",
161
+ {
162
+ type: "button",
163
+ onClick: () => setShowConfirmPassword(!showConfirmPassword),
164
+ className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
165
+ children: showConfirmPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
166
+ }
167
+ )
168
+ ] }) }),
169
+ /* @__PURE__ */ jsx(FormMessage, {})
170
+ ] })
171
+ }
172
+ ),
173
+ /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? t("form.submitting") : t("form.submit") })
174
+ ] }) });
175
+ };
176
+ export {
177
+ SignUp
178
+ };
179
+ //# sourceMappingURL=sign-up.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/sign-up.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n Form,\n FormControl,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from '@mesob/ui/components/form';\nimport { Input } from '@mesob/ui/components/input';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { useTranslations } from 'next-intl';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\n\nconst isPhone = (s: string) => /^\\+?[0-9()[\\]\\s-]{6,}$/.test(s);\n\ntype SignUpFormValues = {\n fullName: string;\n identifier: string;\n handle?: string;\n password: string;\n confirmPassword: string;\n};\n\ntype SignUpProps = {\n onSubmit: (values: SignUpFormValues) => Promise<void> | void;\n isLoading?: boolean;\n initialIdentifier?: string;\n};\n\nexport const SignUp = ({\n onSubmit,\n isLoading = false,\n initialIdentifier,\n}: SignUpProps) => {\n const t = useTranslations('Auth.signUp');\n const hasInitialIdentifier = !!initialIdentifier;\n const [showPassword, setShowPassword] = useState(false);\n const [showConfirmPassword, setShowConfirmPassword] = useState(false);\n\n const signUpSchema = useMemo(\n () =>\n z\n .object({\n fullName: z.string().min(1, t('errors.fullNameRequired')),\n identifier: z\n .string()\n .min(1, t('errors.contactRequired'))\n .refine(\n (val) => {\n if (!val) {\n return false;\n }\n return val.includes('@') || isPhone(val);\n },\n {\n message: t('errors.invalidEmailOrPhone'),\n },\n ),\n password: z\n .string()\n .min(8, t('errors.passwordLength'))\n .max(128, t('errors.longPasswordError')),\n confirmPassword: z.string(),\n })\n .refine((data) => data.password === data.confirmPassword, {\n message: t('errors.passwordsMismatch'),\n path: ['confirmPassword'],\n }),\n [t],\n );\n\n const form = useForm<SignUpFormValues>({\n resolver: zodResolver(signUpSchema),\n defaultValues: {\n fullName: '',\n identifier: initialIdentifier || '',\n password: '',\n confirmPassword: '',\n },\n });\n\n useEffect(() => {\n if (initialIdentifier) {\n form.setValue('identifier', initialIdentifier);\n }\n }, [initialIdentifier, form]);\n\n const handleSubmit = form.handleSubmit(async (values) => {\n await onSubmit(values);\n });\n\n const getIdentifierLabel = () => {\n if (!hasInitialIdentifier) {\n return t('form.accountLabel') || 'Email/Phone';\n }\n if (initialIdentifier?.includes('@')) {\n return t('form.emailLabel');\n }\n return t('form.phoneLabel');\n };\n const identifierLabel = getIdentifierLabel();\n\n return (\n <Form {...form}>\n <form onSubmit={handleSubmit} className=\"space-y-4\">\n <FormField\n control={form.control}\n name=\"fullName\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>{t('form.fullNameLabel')}</FormLabel>\n <FormControl>\n <Input placeholder={t('form.fullNamePlaceholder')} {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <FormField\n control={form.control}\n name=\"identifier\"\n render={({ field }) => (\n <FormItem>\n <FormLabel className={hasInitialIdentifier ? 'block' : undefined}>\n {identifierLabel}\n </FormLabel>\n <FormControl>\n <Input\n type={field.value.includes('@') ? 'email' : 'tel'}\n placeholder={\n hasInitialIdentifier\n ? undefined\n : t('form.accountPlaceholder') || 'Email or phone number'\n }\n {...field}\n disabled={hasInitialIdentifier}\n />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <FormField\n control={form.control}\n name=\"password\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>{t('form.passwordLabel')}</FormLabel>\n <FormControl>\n <div className=\"relative\">\n <Input\n type={showPassword ? 'text' : 'password'}\n placeholder={t('form.passwordPlaceholder')}\n {...field}\n />\n <button\n type=\"button\"\n onClick={() => setShowPassword(!showPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showPassword ? (\n <EyeOff className=\"h-4 w-4\" />\n ) : (\n <Eye className=\"h-4 w-4\" />\n )}\n </button>\n </div>\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <FormField\n control={form.control}\n name=\"confirmPassword\"\n render={({ field }) => (\n <FormItem>\n <FormLabel>{t('form.confirmPasswordLabel')}</FormLabel>\n <FormControl>\n <div className=\"relative\">\n <Input\n type={showConfirmPassword ? 'text' : 'password'}\n placeholder={t('form.passwordPlaceholder')}\n {...field}\n />\n <button\n type=\"button\"\n onClick={() => setShowConfirmPassword(!showConfirmPassword)}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n >\n {showConfirmPassword ? (\n <EyeOff className=\"h-4 w-4\" />\n ) : (\n <Eye className=\"h-4 w-4\" />\n )}\n </button>\n </div>\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\n {isLoading ? t('form.submitting') : t('form.submit')}\n </Button>\n </form>\n </Form>\n );\n};\n"],"mappings":"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","names":[]}
@@ -0,0 +1,15 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+
3
+ type VerificationFormValues = {
4
+ code: string;
5
+ };
6
+ type VerificationFormProps = {
7
+ verificationId: string;
8
+ onSubmit: (values: VerificationFormValues) => Promise<void> | void;
9
+ onResend: () => Promise<void> | void;
10
+ isLoading?: boolean;
11
+ error?: string | null;
12
+ };
13
+ declare const VerificationForm: ({ onSubmit, onResend, isLoading, }: VerificationFormProps) => react_jsx_runtime.JSX.Element;
14
+
15
+ export { VerificationForm };
@@ -0,0 +1,155 @@
1
+ "use client";
2
+
3
+ // src/components/verification-form.tsx
4
+ import { zodResolver } from "@hookform/resolvers/zod";
5
+ import { Button as Button2 } from "@mesob/ui/components/button";
6
+ import {
7
+ Form,
8
+ FormControl,
9
+ FormField,
10
+ FormItem,
11
+ FormMessage
12
+ } from "@mesob/ui/components/form";
13
+ import {
14
+ InputOTP,
15
+ InputOTPGroup,
16
+ InputOTPSlot
17
+ } from "@mesob/ui/components/input-otp";
18
+ import { useTranslations as useTranslations2 } from "next-intl";
19
+ import { useMemo } from "react";
20
+ import { useForm } from "react-hook-form";
21
+ import { z } from "zod";
22
+
23
+ // src/components/countdown.tsx
24
+ import { Button } from "@mesob/ui/components/button";
25
+ import { useTranslations } from "next-intl";
26
+ import { useEffect, useState } from "react";
27
+ import { jsx } from "react/jsx-runtime";
28
+ var Countdown = ({
29
+ initialSeconds = 60,
30
+ onResend,
31
+ resending = false
32
+ }) => {
33
+ const t = useTranslations("Common");
34
+ const [seconds, setSeconds] = useState(initialSeconds);
35
+ const [isResending, setIsResending] = useState(false);
36
+ useEffect(() => {
37
+ if (seconds <= 0) {
38
+ return;
39
+ }
40
+ const timer = setInterval(() => {
41
+ setSeconds((prev) => {
42
+ if (prev <= 1) {
43
+ clearInterval(timer);
44
+ return 0;
45
+ }
46
+ return prev - 1;
47
+ });
48
+ }, 1e3);
49
+ return () => clearInterval(timer);
50
+ }, [seconds]);
51
+ const handleResend = async () => {
52
+ setIsResending(true);
53
+ try {
54
+ await onResend();
55
+ setSeconds(initialSeconds);
56
+ } catch (_error) {
57
+ } finally {
58
+ setIsResending(false);
59
+ }
60
+ };
61
+ if (seconds > 0) {
62
+ return /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: true, children: t("resendIn", { seconds }) });
63
+ }
64
+ return /* @__PURE__ */ jsx(
65
+ Button,
66
+ {
67
+ variant: "ghost",
68
+ onClick: handleResend,
69
+ disabled: isResending || resending,
70
+ children: isResending || resending ? t("resending") : t("resend")
71
+ }
72
+ );
73
+ };
74
+
75
+ // src/components/verification-form.tsx
76
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
77
+ var VerificationForm = ({
78
+ onSubmit,
79
+ onResend,
80
+ isLoading = false
81
+ }) => {
82
+ const t = useTranslations2("Auth.verification");
83
+ const verificationSchema = useMemo(
84
+ () => z.object({
85
+ code: z.string().length(6, t("form.codeLength"))
86
+ }),
87
+ [t]
88
+ );
89
+ const form = useForm({
90
+ resolver: zodResolver(verificationSchema),
91
+ defaultValues: {
92
+ code: ""
93
+ }
94
+ });
95
+ const handleComplete = async (value) => {
96
+ const valid = await form.trigger("code");
97
+ if (valid) {
98
+ await onSubmit({ code: value });
99
+ }
100
+ };
101
+ return /* @__PURE__ */ jsx2(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { className: "space-y-4", children: [
102
+ /* @__PURE__ */ jsx2(
103
+ FormField,
104
+ {
105
+ control: form.control,
106
+ name: "code",
107
+ render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
108
+ /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
109
+ InputOTP,
110
+ {
111
+ maxLength: 6,
112
+ value: field.value,
113
+ onChange: (value) => {
114
+ field.onChange(value);
115
+ if (value.length === 6) {
116
+ handleComplete(value);
117
+ }
118
+ },
119
+ disabled: isLoading,
120
+ children: /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
121
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 0 }),
122
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 1 }),
123
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 2 }),
124
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 3 }),
125
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 4 }),
126
+ /* @__PURE__ */ jsx2(InputOTPSlot, { index: 5 })
127
+ ] })
128
+ }
129
+ ) }) }),
130
+ /* @__PURE__ */ jsx2(FormMessage, {})
131
+ ] })
132
+ }
133
+ ),
134
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
135
+ /* @__PURE__ */ jsx2(Countdown, { onResend, resending: isLoading }),
136
+ /* @__PURE__ */ jsx2(
137
+ Button2,
138
+ {
139
+ type: "button",
140
+ onClick: () => {
141
+ form.handleSubmit(async (values) => {
142
+ await onSubmit(values);
143
+ })();
144
+ },
145
+ disabled: isLoading || form.watch("code").length !== 6,
146
+ children: t("form.confirm")
147
+ }
148
+ )
149
+ ] })
150
+ ] }) });
151
+ };
152
+ export {
153
+ VerificationForm
154
+ };
155
+ //# sourceMappingURL=verification-form.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/verification-form.tsx","../../src/components/countdown.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Button } from '@mesob/ui/components/button';\nimport {\n Form,\n FormControl,\n FormField,\n FormItem,\n FormMessage,\n} from '@mesob/ui/components/form';\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from '@mesob/ui/components/input-otp';\nimport { useTranslations } from 'next-intl';\nimport { useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { z } from 'zod';\nimport { Countdown } from './countdown';\n\ntype VerificationFormValues = {\n code: string;\n};\n\ntype VerificationFormProps = {\n verificationId: string;\n onSubmit: (values: VerificationFormValues) => Promise<void> | void;\n onResend: () => Promise<void> | void;\n isLoading?: boolean;\n error?: string | null;\n};\n\nexport const VerificationForm = ({\n onSubmit,\n onResend,\n isLoading = false,\n}: VerificationFormProps) => {\n const t = useTranslations('Auth.verification');\n const verificationSchema = useMemo(\n () =>\n z.object({\n code: z.string().length(6, t('form.codeLength')),\n }),\n [t],\n );\n const form = useForm<VerificationFormValues>({\n resolver: zodResolver(verificationSchema),\n defaultValues: {\n code: '',\n },\n });\n const handleComplete = async (value: string) => {\n const valid = await form.trigger('code');\n if (valid) {\n await onSubmit({ code: value });\n }\n };\n\n return (\n <Form {...form}>\n <form className=\"space-y-4\">\n <FormField\n control={form.control}\n name=\"code\"\n render={({ field }) => (\n <FormItem>\n <FormControl>\n <div className=\"flex justify-center\">\n <InputOTP\n maxLength={6}\n value={field.value}\n onChange={(value) => {\n field.onChange(value);\n if (value.length === 6) {\n handleComplete(value);\n }\n }}\n disabled={isLoading}\n >\n <InputOTPGroup>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n </div>\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n\n <div className=\"flex justify-between items-center\">\n <Countdown onResend={onResend} resending={isLoading} />\n <Button\n type=\"button\"\n onClick={() => {\n form.handleSubmit(async (values) => {\n await onSubmit(values);\n })();\n }}\n disabled={isLoading || form.watch('code').length !== 6}\n >\n {t('form.confirm')}\n </Button>\n </div>\n </form>\n </Form>\n );\n};\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { useTranslations } from 'next-intl';\nimport { useEffect, useState } from 'react';\n\ntype CountdownProps = {\n initialSeconds?: number;\n onResend: () => Promise<void> | void;\n resending?: boolean;\n};\n\nexport const Countdown = ({\n initialSeconds = 60,\n onResend,\n resending = false,\n}: CountdownProps) => {\n const t = useTranslations('Common');\n const [seconds, setSeconds] = useState(initialSeconds);\n const [isResending, setIsResending] = useState(false);\n\n useEffect(() => {\n if (seconds <= 0) {\n return;\n }\n\n const timer = setInterval(() => {\n setSeconds((prev) => {\n if (prev <= 1) {\n clearInterval(timer);\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n\n return () => clearInterval(timer);\n }, [seconds]);\n\n const handleResend = async () => {\n setIsResending(true);\n try {\n await onResend();\n setSeconds(initialSeconds);\n } catch (_error) {\n // Error handling is done by parent\n } finally {\n setIsResending(false);\n }\n };\n\n if (seconds > 0) {\n return (\n <Button variant=\"ghost\" disabled>\n {t('resendIn', { seconds })}\n </Button>\n );\n }\n\n return (\n <Button\n variant=\"ghost\"\n onClick={handleResend}\n disabled={isResending || resending}\n >\n {isResending || resending ? t('resending') : t('resend')}\n </Button>\n );\n};\n"],"mappings":"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","names":["Button","useTranslations","jsx","useTranslations","Button"]}