144 lines
3.8 KiB
TypeScript
144 lines
3.8 KiB
TypeScript
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 { useEffect, useRef, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { z } from 'zod';
|
|
|
|
interface UserCheckFormProps {
|
|
loading?: boolean;
|
|
onSubmit: (data: any) => void;
|
|
initialValues: any;
|
|
type?: 'login' | 'register' | 'reset';
|
|
setType: (type: 'login' | 'register' | 'reset') => void;
|
|
}
|
|
|
|
export default function UserCheckForm({
|
|
loading,
|
|
onSubmit,
|
|
initialValues,
|
|
type,
|
|
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;
|
|
|
|
if (exist) {
|
|
setType('login');
|
|
return true;
|
|
}
|
|
|
|
if (!register.enable_email_domain_suffix) {
|
|
setType('register');
|
|
return true;
|
|
}
|
|
|
|
const domain = email.split('@')[1];
|
|
const isValid = register.email_domain_suffix_list.split('\n').includes(domain || '');
|
|
|
|
if (isValid) {
|
|
setType('register');
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
} 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 typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const handleEmailChange = async (value: string) => {
|
|
form.setValue('email', value);
|
|
|
|
if (typingTimeoutRef.current) {
|
|
clearTimeout(typingTimeoutRef.current);
|
|
}
|
|
|
|
typingTimeoutRef.current = setTimeout(async () => {
|
|
const isValid = await form.trigger('email');
|
|
if (isValid) {
|
|
setIsSubmitting(true);
|
|
form.handleSubmit(onSubmit)();
|
|
} else {
|
|
setIsSubmitting(false);
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (initialValues?.email) {
|
|
handleEmailChange(initialValues.email);
|
|
}
|
|
return () => {
|
|
if (typingTimeoutRef.current) {
|
|
clearTimeout(typingTimeoutRef.current);
|
|
}
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
|
|
<FormField
|
|
control={form.control}
|
|
name='email'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
disabled={loading}
|
|
placeholder='Enter your email...'
|
|
type='email'
|
|
{...field}
|
|
onChange={(e) => handleEmailChange(e.target.value)}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type='submit' disabled={!isSubmitting}>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />
|
|
{t('checking')}
|
|
</>
|
|
) : (
|
|
t('continue')
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|