🐛 fix(auth): Update UserCheckForm to use setInitialValues and modify onSubmit type

This commit is contained in:
web@ppanel 2025-01-10 13:04:33 +07:00
parent f275f01f25
commit c984c0d9c0
2 changed files with 22 additions and 54 deletions

View File

@ -111,7 +111,7 @@ export default function UserAuthForm() {
loading={loading}
onSubmit={handleFormSubmit}
initialValues={initialValues}
type={type}
setInitialValues={setInitialValues}
setType={setType}
/>
);

View File

@ -6,15 +6,15 @@ 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 { Dispatch, SetStateAction, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
interface UserCheckFormProps {
loading?: boolean;
onSubmit: (data: any) => void;
onSubmit: (data: any) => Promise<void>;
initialValues: any;
type?: 'login' | 'register' | 'reset';
setInitialValues: Dispatch<SetStateAction<any>>;
setType: (type: 'login' | 'register' | 'reset') => void;
}
@ -22,7 +22,7 @@ export default function UserCheckForm({
loading,
onSubmit,
initialValues,
type,
setInitialValues,
setType,
}: Readonly<UserCheckFormProps>) {
const t = useTranslations('auth.check');
@ -34,25 +34,19 @@ export default function UserCheckForm({
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 newType = exist ? 'login' : 'register';
const domain = email.split('@')[1];
const isValid = register.email_domain_suffix_list.split('\n').includes(domain || '');
const isValid =
exist ||
!register.enable_email_verify ||
register.email_domain_suffix_list.split('\n').includes(domain || '');
if (isValid) {
setType('register');
return true;
}
return false;
setInitialValues({
...initialValues,
email,
});
setType(newType);
return !isValid;
} catch (error) {
console.log('Error checking user:', error);
return false;
@ -74,41 +68,16 @@ export default function UserCheckForm({
});
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);
const handleSubmit = async (data: any) => {
setIsSubmitting(true);
await onSubmit(data);
setIsSubmitting(false);
};
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'>
<form onSubmit={form.handleSubmit(handleSubmit)} className='grid gap-6'>
<FormField
control={form.control}
name='email'
@ -120,14 +89,13 @@ export default function UserCheckForm({
placeholder='Enter your email...'
type='email'
{...field}
onChange={(e) => handleEmailChange(e.target.value)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type='submit' disabled={!isSubmitting}>
<Button type='submit' disabled={isSubmitting || loading}>
{isSubmitting ? (
<>
<Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />