You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.0 KiB
119 lines
3.0 KiB
'use client'
|
|
|
|
import { signIn } from 'next-auth/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useForm } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import * as z from 'zod'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Routes } from '@/config/routes'
|
|
|
|
const loginSchema = z.object({
|
|
email: z.string().email({ message: 'Invalid email address' }),
|
|
password: z.string().min(1, { message: 'Password is required' }),
|
|
})
|
|
|
|
type LoginFormValues = z.infer<typeof loginSchema>
|
|
|
|
export default function LoginForm() {
|
|
const router = useRouter()
|
|
|
|
const form = useForm<LoginFormValues>({
|
|
resolver: zodResolver(loginSchema),
|
|
defaultValues: {
|
|
email: '',
|
|
password: '',
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (data: LoginFormValues) => {
|
|
try {
|
|
const result = await signIn('email-password-login', {
|
|
redirect: false,
|
|
email: data.email,
|
|
password: data.password,
|
|
})
|
|
|
|
if (result?.error) {
|
|
form.setError('root', {
|
|
type: 'manual',
|
|
message: 'Invalid email or password',
|
|
})
|
|
} else {
|
|
router.push(Routes.dashboard)
|
|
}
|
|
} catch (error) {
|
|
console.error('login error:', error)
|
|
form.setError('root', {
|
|
type: 'manual',
|
|
message: 'An unexpected error occurred. Please try again.',
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
|
|
<FormField
|
|
control={form.control}
|
|
name='email'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder='m@example.com'
|
|
{...field}
|
|
className='bg-white'
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name='password'
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Password</FormLabel>
|
|
<FormControl>
|
|
<Input type='password' {...field} className='bg-white' />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
{form.formState.errors.root && (
|
|
<p className='text-sm font-medium text-red-500'>
|
|
{form.formState.errors.root.message}
|
|
</p>
|
|
)}
|
|
<Button
|
|
className='w-full'
|
|
type='submit'
|
|
disabled={form.formState.isSubmitting}
|
|
>
|
|
{form.formState.isSubmitting ? (
|
|
<>
|
|
{/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
|
|
Signing in...
|
|
</>
|
|
) : (
|
|
'Sign In'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
)
|
|
}
|