125 lines
4.3 KiB
TypeScript
125 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import { infer as zInfer } from 'zod'
|
|
import { useState, useTransition } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
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/card-wrapper'
|
|
import { useI18n } from '@/locales/client'
|
|
import { Button } from '@/components/ui/button'
|
|
import FormError from '@/components/form-error'
|
|
import FormSuccess from '@/components/form-success'
|
|
|
|
import { register } from '@/actions/register'
|
|
import { RegisterSchema } from '@/schemas'
|
|
import { AUTH_LOGIN_URL } from '@/config/routes'
|
|
|
|
export const RegisterForm = () => {
|
|
// TODO: create repeat password field
|
|
// const [currentPassword, setCurrentPassword] = useState('')
|
|
// const [password, setPassword] = useState('')
|
|
// const [passwordConfirmation, setPasswordConfirmation] = useState('')
|
|
const [error, setError] = useState<string | undefined>('')
|
|
const [success, setSuccess] = useState<string | undefined>('')
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
const t = useI18n()
|
|
|
|
const form = useForm<zInfer<typeof RegisterSchema>>({
|
|
resolver: zodResolver(RegisterSchema), defaultValues: {
|
|
email: '', password: '', name: '',
|
|
},
|
|
})
|
|
|
|
const onSubmit = (values: zInfer<typeof RegisterSchema>) => {
|
|
setError('')
|
|
setSuccess('')
|
|
|
|
startTransition(() => {
|
|
register(values).then((data) => {
|
|
// @ts-ignore
|
|
setError(t(data?.error))
|
|
// @ts-ignore
|
|
setSuccess(t(data?.success))
|
|
})
|
|
})
|
|
}
|
|
|
|
return (<CardWrapper
|
|
headerLabel={t('auth.form.register.header_label')}
|
|
headerTitle={t('auth.title')}
|
|
backButtonLabel={t('auth.form.register.back_button_label')}
|
|
backButtonHref={AUTH_LOGIN_URL}
|
|
showSocial
|
|
continueWithLabel={t('auth.form.label.continue_with')}
|
|
>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-6"
|
|
>
|
|
<div className="space-y-4">
|
|
{/*Name*/}
|
|
<FormField control={form.control} name="name"
|
|
render={({ field }) => (<FormItem>
|
|
<FormLabel>{t('form.label.name')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
disabled={isPending}
|
|
placeholder={t('form.placeholder.name')}
|
|
type="text"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
{/*Email*/}
|
|
<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="email"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
{/*Password*/}
|
|
<FormField control={form.control} name="password"
|
|
render={({ field }) => (<FormItem className="zhopa">
|
|
<FormLabel>{t('form.label.password')}</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
disabled={isPending}
|
|
type="password"
|
|
placeholder="******"
|
|
autoComplete="new-password"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
</div>
|
|
<FormSuccess message={success}/>
|
|
<FormError message={error}/>
|
|
<Button type="submit" className="w-full" disabled={isPending}>
|
|
{t('auth.form.register.button')}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardWrapper>)
|
|
}
|