feat: 增加线路优化注册功能

apps/user/app/(main)/(content)/register/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+import EmailAuthForm2 from '@/app/auth/email2/auth-form';
+
+export default function RegisterPage() {
+  return (
+    <div className='container w-[496px] py-8'>
+      <EmailAuthForm2 isRedirect={true} />
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { resetPassword, userLogin, userRegister } from '@/services/common/auth';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
+import {
+  NEXT_PUBLIC_DEFAULT_USER_EMAIL,
+  NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
+} from '@/config/constants';
+import useGlobalStore from '@/config/use-global';
+import { getRedirectUrl, setAuthorization } from '@/utils/common';
+import LoginForm from './login-form';
+import RegisterForm from './register-form';
+import ResetForm from './reset-form';
+
+export default function EmailAuthForm(props: { isRedirect: boolean }) {
+  const t = useTranslations('auth');
+  const router = useRouter();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>('register');
+  const [loading, startTransition] = useTransition();
+  const [initialValues, setInitialValues] = useState<{
+    email?: string;
+    password?: string;
+  }>({
+    email: NEXT_PUBLIC_DEFAULT_USER_EMAIL,
+    password: NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
+  });
+  const { getUserInfo } = useGlobalStore();
+  const handleFormSubmit = async (params: any) => {
+    const onLogin = async (token?: string) => {
+      if (!token) return;
+      setAuthorization(token);
+      console.log('props.isRedirect', token);
+      console.log('props.isRedirect', props.isRedirect);
+      console.log('props.isRedirect ', getRedirectUrl());
+      if (props.isRedirect) {
+        router.replace(getRedirectUrl());
+        router.refresh();
+      } else {
+        await getUserInfo();
+      }
+    };
+    startTransition(async () => {
+      try {
+        switch (type) {
+          case 'login': {
+            const login = await userLogin(params);
+            toast.success(t('login.success'));
+            onLogin(login.data.data?.token);
+            break;
+          }
+          case 'register': {
+            const create = await userRegister(params);
+            toast.success(t('register.success'));
+            onLogin(create.data.data?.token);
+            break;
+          }
+          case 'reset':
+            await resetPassword(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/email2/login-form.tsx

@@ -0,0 +1,147 @@
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@workspace/airo-ui/components/form';
+import { Input } from '@workspace/airo-ui/components/input';
+import { Icon } from '@workspace/airo-ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import CloudFlareTurnstile, { TurnstileRef } 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({
+    email: z.string().email(t('email')),
+    password: z.string(),
+    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 turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
+  return (
+    <>
+      <div className={'h-[84px] text-2xl font-bold leading-[84px]'}>账户验证</div>
+      <Form {...form}>
+        <form onSubmit={handleSubmit} className=''>
+          <FormField
+            control={form.control}
+            name='email'
+            render={({ field }) => (
+              <FormItem className={'mb-5'}>
+                <FormControl>
+                  <Input
+                    className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                    placeholder='Email'
+                    type='email'
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem className={'mb-2'}>
+                <FormControl>
+                  <Input
+                    className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                    placeholder='Password'
+                    type='password'
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {verify.enable_login_verify && (
+            <FormField
+              control={form.control}
+              name='cf_token'
+              render={({ field }) => (
+                <FormItem className={'last:mb-0'}>
+                  <FormControl>
+                    <CloudFlareTurnstile id='login' {...field} ref={turnstile} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+          <div className='flex w-full justify-between text-sm'>
+            <Button
+              variant='link'
+              type='button'
+              className='p-0 text-[#225BA9]'
+              onClick={() => onSwitchForm('reset')}
+            >
+              {t('forgotPassword')}
+            </Button>
+            <Button
+              variant='link'
+              type='button'
+              className='p-0 text-[#225BA9]'
+              onClick={() => {
+                setInitialValues(undefined);
+                onSwitchForm('register');
+              }}
+            >
+              {t('registerAccount')}
+            </Button>
+          </div>
+
+          <div className='mt-6 flex justify-center'>
+            <AiroButton
+              type='submit'
+              variant='default'
+              disabled={loading}
+              className='h-auto min-w-[157px] py-2 text-lg font-medium'
+            >
+              {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+              {t('title')}
+            </AiroButton>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+}

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

@@ -0,0 +1,262 @@
+'use client';
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
+import { Button } from '@workspace/airo-ui/components/button';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@workspace/airo-ui/components/form';
+import { Input } from '@workspace/airo-ui/components/input';
+import { Icon } from '@workspace/airo-ui/custom-components/icon';
+import { Markdown } from '@workspace/airo-ui/custom-components/markdown';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import SendCode from '../send-code';
+import CloudFlareTurnstile, { TurnstileRef } 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 router = useRouter();
+  const handleCheckUser = async (email: string) => {
+    try {
+      if (!auth.email.enable_domain_suffix) return true;
+      const domain = email.split('@')[1];
+      const isValid = auth.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(t('email'))
+        .refine(handleCheckUser, {
+          message: t('whitelist'),
+        }),
+      password: z.string().min(1, '请输入密码'), // 必填提示
+      repeat_password: z.string().min(1, '请重复输入密码'), // 必填
+      code: auth.email.enable_verify
+        ? z.string().min(1, '请输入验证码') // 必填
+        : z.string().nullish(),
+      invite: invite.forced_invite ? z.string().min(1, '请输入邀请码') : 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 [inviteDefault, setInviteDefault] = useState('');
+
+  useEffect(() => {
+    const invite = localStorage.getItem('invite') || '';
+    setInviteDefault(invite);
+  }, []);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      ...initialValues,
+      invite: inviteDefault,
+    },
+  });
+
+  const turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
+  return (
+    <>
+      <div className={'h-[84px] text-2xl font-bold leading-[84px]'}>线路优化</div>
+
+      {auth.register.stop_register ? (
+        <Markdown>{t('message')}</Markdown>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            <div className='grid gap-5'>
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                        placeholder='电子邮箱'
+                        type='email'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='password'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                        placeholder='设置密码'
+                        type='password'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='repeat_password'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                        disabled={loading}
+                        placeholder='再次输入密码'
+                        type='password'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {auth.email.enable_verify && (
+                <FormField
+                  control={form.control}
+                  name='code'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <div className='flex items-center gap-8'>
+                          <Input
+                            disabled={loading}
+                            className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                            placeholder='邮箱验证码'
+                            type='text'
+                            {...field}
+                            value={field.value as string}
+                          />
+                          <SendCode
+                            type='email'
+                            form={form}
+                            params={{
+                              ...form.getValues(),
+                              type: 1,
+                            }}
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name='invite'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                        disabled={loading || !!inviteDefault}
+                        placeholder={'邀请码（非必填）'}
+                        {...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} ref={turnstile} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+
+            <div className='text-right text-sm'>
+              {t('existingAccount')}&nbsp;
+              <Button
+                variant='link'
+                type='button'
+                className='p-0 text-[#225BA9]'
+                onClick={() => {
+                  router.replace('/');
+                }}
+              >
+                {t('switchToLogin')}
+              </Button>
+            </div>
+            <div className='mt-6 flex justify-center'>
+              <AiroButton
+                type='submit'
+                disabled={loading}
+                className='h-auto min-w-[157px] py-2 text-lg font-medium'
+              >
+                {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+                {t('title')}
+              </AiroButton>
+            </div>
+          </form>
+        </Form>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,174 @@
+import useGlobalStore from '@/config/use-global';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
+import { Button } from '@workspace/airo-ui/components/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@workspace/airo-ui/components/form';
+import { Input } from '@workspace/airo-ui/components/input';
+import { Icon } from '@workspace/airo-ui/custom-components/icon';
+import { useTranslations } from 'next-intl';
+import { Dispatch, SetStateAction, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import SendCode from '../send-code';
+import CloudFlareTurnstile, { TurnstileRef } from '../turnstile';
+
+export default function ResetForm({
+  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.reset');
+
+  const { common } = useGlobalStore();
+  const { verify, auth } = common;
+
+  const formSchema = z.object({
+    email: z.string().email(t('email')),
+    password: z.string(),
+    code: auth?.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,
+  });
+
+  const turnstile = useRef<TurnstileRef>(null);
+  const handleSubmit = form.handleSubmit((data) => {
+    try {
+      onSubmit(data);
+    } catch (error) {
+      turnstile.current?.reset();
+    }
+  });
+
+  return (
+    <>
+      <div className={'h-[84px] text-2xl font-bold leading-[84px]'}>找回账户</div>
+      <Form {...form}>
+        <form onSubmit={handleSubmit}>
+          <div className='grid gap-5'>
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                      placeholder='Enter your email...'
+                      type='email'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <div className='flex items-center gap-8'>
+                      <Input
+                        className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                        disabled={loading}
+                        placeholder='Enter code...'
+                        type='text'
+                        {...field}
+                        value={field.value as string}
+                      />
+                      <SendCode
+                        type='email'
+                        form={form}
+                        params={{
+                          ...form.getValues(),
+                          type: 2,
+                        }}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      className={'h-[46px] rounded-full shadow-[inset_0_0_7.6px_0_#00000040]'}
+                      placeholder='Enter your new password...'
+                      type='password'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {verify.enable_reset_password_verify && (
+              <FormField
+                control={form.control}
+                name='cf_token'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+          </div>
+          <div className='text-right text-sm'>
+            {t('existingAccount')}&nbsp;
+            <Button
+              variant='link'
+              type='button'
+              className='p-0 text-[#225BA9]'
+              onClick={() => {
+                setInitialValues(undefined);
+                onSwitchForm('login');
+              }}
+            >
+              {t('switchToLogin')}
+            </Button>
+          </div>
+          <div className='mt-6 flex justify-center'>
+            <AiroButton
+              type='submit'
+              disabled={loading}
+              className='h-auto min-w-[157px] py-2 text-lg font-medium'
+            >
+              {loading && <Icon icon='mdi:loading' className='animate-spin' />}
+              {t('title')}
+            </AiroButton>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+}

apps/user/utils/common.ts

@@ -53,7 +53,7 @@ export function Logout() {
   Crisp.session.reset(); // 2. Unbind the current session
   const pathname = location.pathname;
   if (
-    !['', '/', '/auth', '/tos', '/privacy-policy'].includes(pathname) &&
+    !['', '/', '/auth', '/tos', '/privacy-policy', '/register'].includes(pathname) &&
     !pathname.startsWith('/purchasing') &&
     !pathname.startsWith('/oauth/')
   ) {