111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import useGlobalStore from '@/config/use-global';
|
|
import { Icon } from '@iconify/react';
|
|
import { Button } from '@shadcn/ui/button';
|
|
import { Form, FormControl, FormField, FormItem, FormMessage } from '@shadcn/ui/form';
|
|
import { Input } from '@shadcn/ui/input';
|
|
import { useForm } from '@shadcn/ui/lib/react-hook-form';
|
|
import { z, zodResolver } from '@shadcn/ui/lib/zod';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Dispatch, SetStateAction } from 'react';
|
|
|
|
import CloudFlareTurnstile from './turnstile';
|
|
|
|
export default function UserLoginForm({
|
|
loading,
|
|
onSubmit,
|
|
initialValues,
|
|
setInitialValues,
|
|
onSwitchForm,
|
|
}: {
|
|
loading?: boolean;
|
|
onSubmit: (data: any) => void;
|
|
initialValues: any;
|
|
setInitialValues: Dispatch<SetStateAction<any>>;
|
|
onSwitchForm: (type?: 'register' | 'reset') => void;
|
|
}) {
|
|
const t = useTranslations('auth.login');
|
|
const { common } = useGlobalStore();
|
|
const { verify } = common;
|
|
|
|
const formSchema = z.object({
|
|
email: z.string(),
|
|
password: z.string(),
|
|
cf_token: verify.enable_login_verify ? z.string() : z.string().optional(),
|
|
});
|
|
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='email'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input disabled placeholder='Enter your email...' type='email' {...field} />
|
|
</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>
|
|
)}
|
|
/>
|
|
{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(undefined);
|
|
}}
|
|
>
|
|
{t('switchAccount')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|