64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { FormProvider, useForm } from 'react-hook-form';
|
|
import { formLoginSchema, TFormLoginValues } from "./schemas";
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { Title } from "@/components/shared/title";
|
|
import { FormInput } from "@/components/shared/form";
|
|
import { Button } from "@/components/ui/button";
|
|
import { signIn } from "next-auth/react";
|
|
import toast from "react-hot-toast";
|
|
|
|
interface Props {
|
|
onClose?: VoidFunction;
|
|
}
|
|
|
|
export const LoginForm: React.FC<Props> = ({onClose}) => {
|
|
const form = useForm<TFormLoginValues>({
|
|
resolver: zodResolver(formLoginSchema),
|
|
defaultValues: {
|
|
email: '',
|
|
password: '',
|
|
}
|
|
})
|
|
|
|
const onSubmit = async (data: TFormLoginValues) => {
|
|
try {
|
|
const resp = await signIn('credentials', {
|
|
...data,
|
|
redirect: false
|
|
})
|
|
|
|
if (!resp?.ok) {
|
|
toast.error("Incorrect login or password")
|
|
throw Error();
|
|
}
|
|
toast.success("Login successful")
|
|
onClose?.()
|
|
} catch (error) {
|
|
toast.error("Error login")
|
|
console.error('Error [LOGIN]', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<FormProvider {...form}>
|
|
<form className="flex flex-col gap-5" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<div className="fles justify-between items-center">
|
|
<div className="mr-2">
|
|
<Title text="Login" size='md' className="font-bold" />
|
|
<p className="text-gray-400">Enter your email to login</p>
|
|
</div>
|
|
{/* <img src="..." /> */}
|
|
</div>
|
|
<FormInput name='email' label='E-Mail' required />
|
|
<FormInput name='password' label='Password' required />
|
|
|
|
<Button loading={form.formState.isSubmitting} className="h-12 text-base" type='submit' >
|
|
{
|
|
'Login'
|
|
}
|
|
</Button>
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
} |