✨ feat(auth): Add email and SMS code sending functionality with localization updates

apps/user/app/auth/email/auth-form.tsx

@@ -11,15 +11,14 @@ import {
   NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
 } from '@/config/constants';
 import { getRedirectUrl, setAuthorization } from '@/utils/common';
-import UserCheckForm from './user-check-form';
-import UserLoginForm from './user-login-form';
-import UserRegisterForm from './user-register-form';
-import UserResetForm from './user-reset-form';
+import LoginForm from './login-form';
+import RegisterForm from './register-form';
+import ResetForm from './reset-form';
 
-export default function UserAuthForm() {
+export default function EmailAuthForm() {
   const t = useTranslations('auth');
   const router = useRouter();
-  const [type, setType] = useState<'login' | 'register' | 'reset'>();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>('login');
   const [loading, startTransition] = useTransition();
   const [initialValues, setInitialValues] = useState<{
     email?: string;
@@ -56,25 +55,18 @@ export default function UserAuthForm() {
             toast.success(t('reset.success'));
             setType('login');
             break;
-          default: {
-            if (type === 'reset') break;
-            setInitialValues({
-              ...initialValues,
-              ...params,
-            });
-            break;
-          }
         }
       } catch (error) {
         /* empty */
       }
     });
   };
+
   let UserForm: ReactNode = null;
   switch (type) {
     case 'login':
       UserForm = (
-        <UserLoginForm
+        <LoginForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -85,7 +77,7 @@ export default function UserAuthForm() {
       break;
     case 'register':
       UserForm = (
-        <UserRegisterForm
+        <RegisterForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -96,7 +88,7 @@ export default function UserAuthForm() {
       break;
     case 'reset':
       UserForm = (
-        <UserResetForm
+        <ResetForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -105,55 +97,7 @@ export default function UserAuthForm() {
         />
       );
       break;
-    default:
-      UserForm = (
-        <UserCheckForm
-          loading={loading}
-          onSubmit={handleFormSubmit}
-          initialValues={initialValues}
-          setInitialValues={setInitialValues}
-          setType={setType}
-        />
-      );
-      break;
   }
 
-  return (
-    <>
-      <div className='mb-11 text-center'>
-        <h1 className='mb-3 text-2xl font-bold'>{t(`${type || 'check'}.title`)}</h1>
-        <div className='text-muted-foreground font-medium'>
-          {t(`${type || 'check'}.description`)}
-        </div>
-      </div>
-      {/* {!((type === 'register' && register.stop_register) || type === 'reset') && (
-        <>
-          <div className='mb-3 grid items-center justify-center gap-3 font-bold lg:grid-cols-3'>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:telegram' className='mr-2 size-5' />
-              Telegram
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:google' className='mr-2 size-5' />
-              Google
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:apple' className='mr-2 size-5' />
-              Apple
-            </Button>
-          </div>
-          <div
-            className={cn(
-              'my-14 flex h-0 items-center text-center',
-              'before:mr-4 before:block before:w-1/2 before:border-b-[1px]',
-              'after:ml-4 after:w-1/2 after:border-b-[1px]',
-            )}
-          >
-            <span className='text-muted-foreground w-[125px] text-sm'>{t('orWithEmail')}</span>
-          </div>
-        </>
-      )} */}
-      {UserForm}
-    </>
-  );
+  return UserForm;
 }

apps/user/app/auth/email/login-form.tsx

@@ -8,9 +8,9 @@ import { useTranslations } from 'next-intl';
 import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserLoginForm({
+export default function LoginForm({
   loading,
   onSubmit,
   initialValues,
@@ -21,14 +21,14 @@ export default function UserLoginForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.login');
   const { common } = useGlobalStore();
   const { verify } = common;
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
     cf_token:
       verify.enable_login_verify && verify.turnstile_site_key ? z.string() : z.string().optional(),
@@ -48,7 +48,7 @@ export default function UserLoginForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -100,10 +100,10 @@ export default function UserLoginForm({
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('register');
           }}
         >
-          {t('switchAccount')}
+          {t('registerAccount')}
         </Button>
       </div>
     </>

apps/user/app/auth/email/register-form.tsx

@@ -1,19 +1,18 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
 import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserRegisterForm({
+export default function RegisterForm({
   loading,
   onSubmit,
   initialValues,
@@ -24,33 +23,36 @@ export default function UserRegisterForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.register');
   const { common } = useGlobalStore();
-  const { verify, register, invite } = common;
+  const { verify, auth, invite } = common;
 
-  const [targetDate, setTargetDate] = useState<number>();
-  const [, { seconds }] = useCountDown({
-    targetDate,
-    onEnd: () => {
-      setTargetDate(undefined);
-    },
-  });
-  const handleSendCode = async () => {
-    await sendEmailCode({
-      email: initialValues.email,
-      type: 1,
-    });
-    setTargetDate(Date.now() + 60000);
+  const handleCheckUser = async (email: string) => {
+    try {
+      const domain = email.split('@')[1];
+      const isValid =
+        !auth.email.email_enable_verify ||
+        auth.email?.email_domain_suffix_list.split('\n').includes(domain || '');
+      return !isValid;
+    } catch (error) {
+      console.log('Error checking user:', error);
+      return false;
+    }
   };
 
   const formSchema = z
     .object({
-      email: z.string(),
+      email: z
+        .string()
+        .email(t('email'))
+        .refine(handleCheckUser, {
+          message: t('whitelist'),
+        }),
       password: z.string(),
       repeat_password: z.string(),
-      code: register.enable_email_verify ? z.string() : z.string().nullish(),
+      code: auth.email.email_enable_verify ? z.string() : z.string().nullish(),
       invite: invite.forced_invite ? z.string() : z.string().nullish(),
       cf_token:
         verify.enable_register_verify && verify.turnstile_site_key
@@ -77,7 +79,7 @@ export default function UserRegisterForm({
 
   return (
     <>
-      {register.stop_register ? (
+      {auth.register.stop_register ? (
         <Markdown>{t('message')}</Markdown>
       ) : (
         <Form {...form}>
@@ -88,7 +90,7 @@ export default function UserRegisterForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                    <Input placeholder='Enter your email...' type='email' {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -128,7 +130,7 @@ export default function UserRegisterForm({
                 </FormItem>
               )}
             />
-            {register.enable_email_verify && (
+            {auth.email.email_enable_verify && (
               <FormField
                 control={form.control}
                 name='code'
@@ -143,9 +145,13 @@ export default function UserRegisterForm({
                           {...field}
                           value={field.value as string}
                         />
-                        <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
-                          {seconds > 0 ? `${seconds}s` : t('get')}
-                        </Button>
+                        <SendCode
+                          type='email'
+                          params={{
+                            ...form.getValues(),
+                            type: 1,
+                          }}
+                        />
                       </div>
                     </FormControl>
                     <FormMessage />
@@ -192,13 +198,13 @@ export default function UserRegisterForm({
         </Form>
       )}
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/user/app/auth/email/reset-form.tsx

@@ -1,18 +1,17 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
-import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserResetForm({
+export default function ResetForm({
   loading,
   onSubmit,
   initialValues,
@@ -23,32 +22,17 @@ export default function UserResetForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.reset');
 
   const { common } = useGlobalStore();
-  const { verify, register } = common;
-
-  const [targetDate, setTargetDate] = useState<number>();
-  const [, { seconds }] = useCountDown({
-    targetDate,
-    onEnd: () => {
-      setTargetDate(undefined);
-    },
-  });
-  const handleSendCode = async () => {
-    await sendEmailCode({
-      email: initialValues.email,
-      type: 2,
-    });
-    setTargetDate(Date.now() + 60000); // 60秒倒计时
-  };
+  const { verify, auth } = common;
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
-    code: register.enable_email_verify ? z.string() : z.string().nullish(),
+    code: auth?.email?.email_enable_verify ? z.string() : z.string().nullish(),
     cf_token:
       verify.enable_register_verify && verify.turnstile_site_key
         ? z.string()
@@ -69,7 +53,7 @@ export default function UserResetForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -93,7 +77,7 @@ export default function UserResetForm({
             )}
           />
 
-          {register.enable_email_verify && (
+          {auth?.email?.email_enable_verify && (
             <FormField
               control={form.control}
               name='code'
@@ -108,9 +92,13 @@ export default function UserResetForm({
                         {...field}
                         value={field.value as string}
                       />
-                      <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
-                        {seconds > 0 ? `${seconds}s` : t('get')}
-                      </Button>
+                      <SendCode
+                        type='email'
+                        params={{
+                          ...form.getValues(),
+                          type: 2,
+                        }}
+                      />
                     </div>
                   </FormControl>
                   <FormMessage />
@@ -139,13 +127,13 @@ export default function UserResetForm({
         </form>
       </Form>
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/user/app/auth/page.tsx

@@ -4,16 +4,33 @@ import LanguageSwitch from '@/components/language-switch';
 import ThemeSwitch from '@/components/theme-switch';
 import useGlobalStore from '@/config/use-global';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import LoginLottie from '@workspace/ui/lotties/login.json';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
-import UserAuthForm from './user-auth-form';
+import EmailAuthForm from './email/auth-form';
+import PhoneAuthForm from './phone/auth-form';
 
 export default function Page() {
   const t = useTranslations('auth');
   const { common } = useGlobalStore();
-  const { site } = common;
+  const { site, auth } = common;
+
+  const AUTH_COMPONENT_MAP = {
+    email: <EmailAuthForm />,
+    sms: <PhoneAuthForm />,
+  } as const;
+
+  type AuthMethod = keyof typeof AUTH_COMPONENT_MAP;
+  const enabledAuthMethods = Object.entries(auth).reduce<AuthMethod[]>((acc, [key, value]) => {
+    const enabledKey = `${key}_enabled` as const;
+    if (typeof value === 'object' && value !== null && enabledKey in value) {
+      const enabled = (value as Record<typeof enabledKey, boolean>)[enabledKey];
+      if (enabled) acc.push(key as AuthMethod);
+    }
+    return acc;
+  }, []);
 
   return (
     <main className='bg-muted/50 flex h-full min-h-screen items-center'>
@@ -30,7 +47,7 @@ export default function Page() {
               data={LoginLottie}
               autoplay
               loop
-              className='mx-auto hidden w-[275px] md:w-1/2 lg:block xl:w-[500px]'
+              className='mx-auto hidden w-[275px] lg:block xl:w-[500px]'
             />
             <p className='hidden w-[275px] text-center md:w-1/2 lg:block xl:w-[500px]'>
               {site.site_desc}
@@ -38,10 +55,31 @@ export default function Page() {
           </div>
         </div>
         <div className='flex flex-initial justify-center p-12 lg:flex-auto lg:justify-end'>
-          <div className='lg:bg-background flex flex-col items-center rounded-2xl p-10 md:w-[600px] lg:flex-auto lg:shadow'>
-            <div className='flex flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
+          <div className='lg:bg-background flex w-full flex-col items-center rounded-2xl md:w-[600px] md:p-10 lg:flex-auto lg:shadow'>
+            <div className='flex w-full flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
               <div className='pb-15 flex flex-col justify-center lg:flex-auto lg:pb-20'>
-                <UserAuthForm />
+                <h1 className='mb-3 text-center text-2xl font-bold'>{t('verifyAccount')}</h1>
+                <div className='text-muted-foreground mb-6 text-center font-medium'>
+                  {t('verifyAccountDesc')}
+                </div>
+                {enabledAuthMethods.length === 1
+                  ? AUTH_COMPONENT_MAP[enabledAuthMethods[0] as AuthMethod]
+                  : enabledAuthMethods[0] && (
+                      <Tabs defaultValue={enabledAuthMethods[0]}>
+                        <TabsList className='mb-6 flex w-full *:flex-1'>
+                          {enabledAuthMethods.map((method) => (
+                            <TabsTrigger key={method} value={method}>
+                              {t(`methods.${method}`)}
+                            </TabsTrigger>
+                          ))}
+                        </TabsList>
+                        {enabledAuthMethods.map((method) => (
+                          <TabsContent key={method} value={method}>
+                            {AUTH_COMPONENT_MAP[method]}
+                          </TabsContent>
+                        ))}
+                      </Tabs>
+                    )}
               </div>
               <div className='flex items-center justify-between'>
                 <div className='flex items-center gap-5'>

apps/user/app/auth/phone/auth-form.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import {
+  telephoneLogin,
+  telephoneResetPassword,
+  telephoneUserRegister,
+} from '@/services/common/auth';
+import { getRedirectUrl, setAuthorization } from '@/utils/common';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import LoginForm from './login-form';
+import RegisterForm from './register-form';
+import ResetForm from './reset-form';
+
+export default function PhoneAuthForm() {
+  const t = useTranslations('auth');
+  const router = useRouter();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>('login');
+  const [loading, startTransition] = useTransition();
+  const [initialValues, setInitialValues] = useState<API.TelephoneLoginRequest>({
+    telephone: '',
+    telephone_area_code: '1',
+    password: '',
+  });
+
+  const handleFormSubmit = async (params: any) => {
+    const onLogin = async (token?: string) => {
+      if (!token) return;
+      setAuthorization(token);
+      router.replace(getRedirectUrl());
+      router.refresh();
+    };
+    startTransition(async () => {
+      try {
+        switch (type) {
+          case 'login': {
+            const login = await telephoneLogin(params);
+            toast.success(t('login.success'));
+            onLogin(login.data.data?.token);
+            break;
+          }
+          case 'register': {
+            const create = await telephoneUserRegister(params);
+            toast.success(t('register.success'));
+            onLogin(create.data.data?.token);
+            break;
+          }
+          case 'reset':
+            await telephoneResetPassword(params);
+            toast.success(t('reset.success'));
+            setType('login');
+            break;
+        }
+      } catch (error) {
+        /* empty */
+      }
+    });
+  };
+
+  let UserForm: ReactNode = null;
+  switch (type) {
+    case 'login':
+      UserForm = (
+        <LoginForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+    case 'register':
+      UserForm = (
+        <RegisterForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+    case 'reset':
+      UserForm = (
+        <ResetForm
+          loading={loading}
+          onSubmit={handleFormSubmit}
+          initialValues={initialValues}
+          setInitialValues={setInitialValues}
+          onSwitchForm={setType}
+        />
+      );
+      break;
+  }
+
+  return UserForm;
+}

apps/user/app/auth/phone/login-form.tsx

@@ -0,0 +1,164 @@
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Button } from '@workspace/ui/components/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
+
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
+
+export default function LoginForm({
+  loading,
+  onSubmit,
+  initialValues,
+  setInitialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
+}) {
+  const t = useTranslations('auth.login');
+  const { common } = useGlobalStore();
+  const { verify } = common;
+
+  const formSchema = z.object({
+    telephone_area_code: z.string(),
+    telephone: z.string(),
+    telephone_code: z.string().optional(),
+    password: z.string().optional(),
+    cf_token:
+      verify.enable_login_verify && verify.turnstile_site_key ? z.string() : z.string().optional(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+
+  const [mode, setMode] = useState<'password' | 'code'>('password');
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+          <FormField
+            control={form.control}
+            name='telephone'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <div className='flex'>
+                    <FormField
+                      control={form.control}
+                      name='telephone_area_code'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <AreaCodeSelect
+                              simple
+                              className='w-32 rounded-r-none border-r-0'
+                              placeholder='Area code...'
+                              value={field.value}
+                              onChange={(value) => {
+                                if (value.phone) {
+                                  form.setValue('telephone_area_code', value.phone);
+                                }
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <Input
+                      className='rounded-l-none'
+                      placeholder='Enter your telephone...'
+                      type='tel'
+                      {...field}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name={mode === 'code' ? 'telephone_code' : 'password'}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <div className='flex gap-2'>
+                    <Input
+                      disabled={loading}
+                      placeholder={mode === 'code' ? 'Enter code...' : 'Enter password...'}
+                      type={mode === 'code' ? 'text' : 'password'}
+                      {...field}
+                    />
+                    {mode === 'code' && <SendCode type='phone' params={form.getValues()} />}
+                  </div>
+                </FormControl>
+                <div className='!mt-0 text-right'>
+                  <Button
+                    className='text-primary px-0 text-sm'
+                    variant='link'
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setMode(mode === 'password' ? 'code' : 'password');
+                    }}
+                  >
+                    {mode === 'password' ? t('codeLogin') : t('passwordLogin')}
+                  </Button>
+                </div>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {verify.enable_login_verify && (
+            <FormField
+              control={form.control}
+              name='cf_token'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <CloudFlareTurnstile id='login' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <Button type='submit' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+            {t('title')}
+          </Button>
+        </form>
+      </Form>
+      <div className='mt-4 flex w-full justify-between text-sm'>
+        <Button variant='link' type='button' className='p-0' onClick={() => onSwitchForm('reset')}>
+          {t('forgotPassword')}
+        </Button>
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            // setInitialValues(undefined);
+            onSwitchForm('register');
+          }}
+        >
+          {t('registerAccount')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/user/app/auth/phone/register-form.tsx

@@ -0,0 +1,221 @@
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Button } from '@workspace/ui/components/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
+import { Markdown } from '@workspace/ui/custom-components/markdown';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
+
+export default function RegisterForm({
+  loading,
+  onSubmit,
+  initialValues,
+  setInitialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
+}) {
+  const t = useTranslations('auth.register');
+  const { common } = useGlobalStore();
+  const { verify, auth, invite } = common;
+
+  const formSchema = z
+    .object({
+      telephone_area_code: z.string(),
+      telephone: z.string(),
+      password: z.string(),
+      repeat_password: z.string(),
+      code: z.string(),
+      invite: invite.forced_invite ? z.string() : z.string().nullish(),
+      cf_token:
+        verify.enable_register_verify && verify.turnstile_site_key
+          ? z.string()
+          : z.string().nullish(),
+    })
+    .superRefine(({ password, repeat_password }, ctx) => {
+      if (password !== repeat_password) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('passwordMismatch'),
+          path: ['repeat_password'],
+        });
+      }
+    });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+      telephone_area_code: initialValues?.telephone_area_code || '1',
+      invite: localStorage.getItem('invite') || '',
+    },
+  });
+
+  return (
+    <>
+      {auth.register.stop_register ? (
+        <Markdown>{t('message')}</Markdown>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+            <FormField
+              control={form.control}
+              name='telephone'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className='flex'>
+                      <FormField
+                        control={form.control}
+                        name='telephone_area_code'
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <AreaCodeSelect
+                                simple
+                                className='w-32 rounded-r-none border-r-0'
+                                placeholder='Area code...'
+                                value={field.value}
+                                onChange={(value) => {
+                                  if (value.phone) {
+                                    form.setValue('telephone_area_code', value.phone);
+                                  }
+                                }}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <Input
+                        className='rounded-l-none'
+                        placeholder='Enter your telephone...'
+                        type='tel'
+                        {...field}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder='Enter your password...'
+                      type='password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='repeat_password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading}
+                      placeholder='Enter password again...'
+                      type='password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className='flex items-center gap-2'>
+                      <Input
+                        disabled={loading}
+                        placeholder='Enter code...'
+                        type='text'
+                        {...field}
+                        value={field.value as string}
+                      />
+                      <SendCode type='phone' params={form.getValues()} />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='invite'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      disabled={loading || !!localStorage.getItem('invite')}
+                      placeholder={t('invite')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {verify.enable_register_verify && (
+              <FormField
+                control={form.control}
+                name='cf_token'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <CloudFlareTurnstile id='register' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+            <Button type='submit' disabled={loading}>
+              {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+              {t('title')}
+            </Button>
+          </form>
+        </Form>
+      )}
+      <div className='mt-4 text-right text-sm'>
+        {t('existingAccount')}&nbsp;
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            // setInitialValues(undefined);
+            onSwitchForm('login');
+          }}
+        >
+          {t('switchToLogin')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/user/app/auth/phone/reset-form.tsx

@@ -0,0 +1,169 @@
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Button } from '@workspace/ui/components/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
+
+export default function ResetForm({
+  loading,
+  onSubmit,
+  initialValues,
+  onSwitchForm,
+}: {
+  loading?: boolean;
+  onSubmit: (data: any) => void;
+  initialValues: any;
+  setInitialValues: Dispatch<SetStateAction<any>>;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
+}) {
+  const t = useTranslations('auth.reset');
+
+  const { common } = useGlobalStore();
+  const { verify, auth } = common;
+
+  const [targetDate, setTargetDate] = useState<number>();
+
+  const formSchema = z.object({
+    telephone_area_code: z.string(),
+    telephone: z.string(),
+    password: z.string(),
+    code: auth?.email?.email_enable_verify ? z.string() : z.string().nullish(),
+    cf_token:
+      verify.enable_register_verify && verify.turnstile_site_key
+        ? z.string()
+        : z.string().nullish(),
+  });
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
+          <FormField
+            control={form.control}
+            name='telephone'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <div className='flex'>
+                    <FormField
+                      control={form.control}
+                      name='telephone_area_code'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <AreaCodeSelect
+                              simple
+                              className='w-32 rounded-r-none border-r-0'
+                              placeholder='Area code...'
+                              value={field.value}
+                              onChange={(value) => {
+                                if (value.phone) {
+                                  form.setValue('telephone_area_code', value.phone);
+                                }
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <Input
+                      className='rounded-l-none'
+                      placeholder='Enter your telephone...'
+                      type='tel'
+                      {...field}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input
+                    disabled={loading}
+                    placeholder='Enter your password...'
+                    type='password'
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {auth?.email?.email_enable_verify && (
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className='flex items-center gap-2'>
+                      <Input
+                        disabled={loading}
+                        placeholder='Enter code...'
+                        type='text'
+                        {...field}
+                        value={field.value as string}
+                      />
+                      <SendCode type='phone' params={form.getValues()} />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          {verify.enable_reset_password_verify && (
+            <FormField
+              control={form.control}
+              name='cf_token'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <CloudFlareTurnstile id='reset' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <Button type='submit' disabled={loading}>
+            {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+            {t('title')}
+          </Button>
+        </form>
+      </Form>
+      <div className='mt-4 text-right text-sm'>
+        {t('existingAccount')}&nbsp;
+        <Button
+          variant='link'
+          className='p-0'
+          onClick={() => {
+            onSwitchForm('login');
+          }}
+        >
+          {t('switchToLogin')}
+        </Button>
+      </div>
+    </>
+  );
+}

apps/user/app/auth/send-code.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { sendEmailCode, sendSmsCode } from '@/services/common/common';
+import { Button } from '@workspace/ui/components/button';
+import { useCountDown } from 'ahooks';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface SendCodeProps {
+  type: 'email' | 'phone';
+  params: {
+    email?: string;
+    type?: 1 | 2;
+    telephone_area_code?: string;
+    telephone?: string;
+  };
+}
+export default function SendCode({ type, params }: SendCodeProps) {
+  const t = useTranslations('auth');
+  const [targetDate, setTargetDate] = useState<number>();
+
+  const [, { seconds }] = useCountDown({
+    targetDate,
+    onEnd: () => {
+      setTargetDate(undefined);
+    },
+  });
+
+  const getEmailCode = async () => {
+    if (params.email && params.type) {
+      await sendEmailCode({
+        email: params.email,
+        type: params.type,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const getPhoneCode = async () => {
+    if (params.telephone && params.telephone_area_code) {
+      await sendSmsCode({
+        telephone: params.telephone,
+        telephone_area_code: params.telephone_area_code,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const handleSendCode = async () => {
+    if (type === 'email') {
+      getEmailCode();
+    } else {
+      getPhoneCode();
+    }
+  };
+  const disabled =
+    seconds > 0 ||
+    (type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
+
+  return (
+    <Button type='button' onClick={handleSendCode} disabled={disabled}>
+      {seconds > 0 ? `${seconds}s` : t('get')}
+    </Button>
+  );
+}

apps/user/app/auth/user-check-form.tsx

@@ -1,111 +0,0 @@
-import useGlobalStore from '@/config/use-global';
-import { checkUser } from '@/services/common/auth';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react/dist/iconify.js';
-import { Button } from '@workspace/ui/components/button';
-import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
-import { Input } from '@workspace/ui/components/input';
-import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-interface UserCheckFormProps {
-  loading?: boolean;
-  onSubmit: (data: any) => Promise<void>;
-  initialValues: any;
-  setInitialValues: Dispatch<SetStateAction<any>>;
-  setType: (type: 'login' | 'register' | 'reset') => void;
-}
-
-export default function UserCheckForm({
-  loading,
-  onSubmit,
-  initialValues,
-  setInitialValues,
-  setType,
-}: Readonly<UserCheckFormProps>) {
-  const t = useTranslations('auth.check');
-  const { common } = useGlobalStore();
-  const { register } = common;
-
-  const handleCheckUser = async (email: string) => {
-    try {
-      const response = await checkUser({ email });
-      const exist = response.data.data?.exist;
-
-      const newType = exist ? 'login' : 'register';
-      const domain = email.split('@')[1];
-      const isValid =
-        exist ||
-        !register.enable_email_verify ||
-        register.email_domain_suffix_list.split('\n').includes(domain || '');
-
-      setInitialValues({
-        ...initialValues,
-        email,
-      });
-      setType(newType);
-      return !isValid;
-    } catch (error) {
-      console.log('Error checking user:', error);
-      return false;
-    }
-  };
-
-  const formSchema = z.object({
-    email: z
-      .string()
-      .email(t('email'))
-      .refine(handleCheckUser, {
-        message: t('whitelist'),
-      }),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
-  });
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (data: any) => {
-    setIsSubmitting(true);
-    await onSubmit(data);
-    setIsSubmitting(false);
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className='grid gap-6'>
-        <FormField
-          control={form.control}
-          name='email'
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <Input
-                  disabled={loading}
-                  placeholder='Enter your email...'
-                  type='email'
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type='submit' disabled={isSubmitting || loading}>
-          {isSubmitting ? (
-            <>
-              <Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />
-              {t('checking')}
-            </>
-          ) : (
-            t('continue')
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}