112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { infer as zInfer } from 'zod'
|
|
import { useState, useTransition } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
import { CardWrapper } from '@/components/auth/CardWrapper'
|
|
import { useI18n } from '@/locales/client'
|
|
import { Button } from '@/components/ui/button'
|
|
import FormError from '@/components/FormError'
|
|
import FormSuccess from '@/components/FormSuccess'
|
|
import { login } from '@/actions/login'
|
|
import { LoginSchema } from '@/schemas'
|
|
import { AUTH_REGISTER_URL } from '@/config/routes'
|
|
|
|
export const LoginForm = () => {
|
|
const t = useI18n()
|
|
|
|
const searchParams = useSearchParams()
|
|
const urlError = searchParams.get('error') === 'OAuthAccountNotLinked'
|
|
? t('auth.form.error.email_in_use')
|
|
: ''
|
|
|
|
const [error, setError] = useState<string | undefined>('')
|
|
const [success, setSuccess] = useState<string | undefined>('')
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
const form = useForm<zInfer<typeof LoginSchema>>({
|
|
resolver: zodResolver(LoginSchema), defaultValues: {
|
|
email: '', password: '',
|
|
},
|
|
})
|
|
|
|
const onSubmit = (values: zInfer<typeof LoginSchema>) => {
|
|
setError('')
|
|
setSuccess('')
|
|
|
|
startTransition(() => {
|
|
login(values).then((data) => {
|
|
// @ts-ignore
|
|
setError(t(data?.error))
|
|
// @ts-ignore
|
|
setSuccess(t(data?.success))
|
|
})
|
|
})
|
|
}
|
|
|
|
return (<CardWrapper
|
|
headerLabel={t('auth.form.login.header_label')}
|
|
headerTitle={t('auth.title')}
|
|
backButtonLabel={t('auth.form.login.back_button_label')}
|
|
backButtonHref={AUTH_REGISTER_URL}
|
|
showSocial
|
|
continueWithLabel={t('form.label.continue_with')}
|
|
>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-6"
|
|
>
|
|
<div className="space-y-4">
|
|
<FormField control={form.control} name="email"
|
|
render={({ field }) => (<FormItem>
|
|
<FormLabel>{t('form.label.email')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
disabled={isPending}
|
|
placeholder={t('form.placeholder.email')}
|
|
type="email"
|
|
autoComplete="username"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
{/*Password*/}
|
|
<FormField control={form.control} name="password"
|
|
render={({ field }) => (<FormItem>
|
|
<FormLabel>{t('form.label.password')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
disabled={isPending}
|
|
placeholder="******"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
</div>
|
|
<FormSuccess message={success}/>
|
|
<FormError message={error || urlError}/>
|
|
<Button type="submit" className="w-full" disabled={isPending}>
|
|
{t('form.label.login')}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardWrapper>)
|
|
}
|
|
|
|
//1:30:00
|