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

import useGlobalStore from '@/config/use-global';
import { zodResolver } from '@hookform/resolvers/zod';
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 { Icon } from '@workspace/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={'pb-9 pt-10 text-4xl font-bold'}>找回账户</div>
      <Form {...form}>
        <form onSubmit={handleSubmit}>
          <div className='grid gap-5'>
            <FormField
              control={form.control}
              name='email'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      className={
                        'h-[60px] rounded-[20px] text-xl 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-[60px] flex-1 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
                        }
                        disabled={loading}
                        placeholder='Enter code...'
                        type='text'
                        {...field}
                        value={field.value as string}
                      />
                      <SendCode
                        type='email'
                        params={{
                          ...form.getValues(),
                          type: 2,
                        }}
                      />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='password'
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      className={
                        'h-[60px] rounded-[20px] text-xl 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'
              className='p-0 text-[#225BA9]'
              onClick={() => {
                setInitialValues(undefined);
                onSwitchForm('login');
              }}
            >
              {t('switchToLogin')}
            </Button>
          </div>
          <div className='mt-6 flex justify-center'>
            <Button
              type='submit'
              disabled={loading}
              className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
            >
              {loading && <Icon icon='mdi:loading' className='animate-spin' />}
              {t('title')}
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
}