89 lines
2.6 KiB
TypeScript
89 lines
2.6 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 { ResetSchema } from '@/schemas'
|
|
import { AUTH_LOGIN_URL } from '@/config/routes'
|
|
import { reset } from '@/actions/reset'
|
|
|
|
export const ResetForm = () => {
|
|
const t = useI18n()
|
|
|
|
const [error, setError] = useState<string | undefined>('')
|
|
const [success, setSuccess] = useState<string | undefined>('')
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
const form = useForm<zInfer<typeof ResetSchema>>({
|
|
resolver: zodResolver(ResetSchema), defaultValues: {
|
|
email: '',
|
|
},
|
|
})
|
|
|
|
const onSubmit = (values: zInfer<typeof ResetSchema>) => {
|
|
setError('')
|
|
setSuccess('')
|
|
|
|
startTransition(() => {
|
|
reset(values).then((data) => {
|
|
// @ts-ignore
|
|
setError(t(data?.error))
|
|
// @ts-ignore
|
|
setSuccess(t(data?.success))
|
|
})
|
|
})
|
|
}
|
|
|
|
return (<CardWrapper
|
|
headerTitle={t('auth.title')}
|
|
headerLabel={t('auth.form.reset.header_label')}
|
|
backButtonLabel={t('auth.form.reset.back_button_label')}
|
|
backButtonHref={AUTH_LOGIN_URL}
|
|
>
|
|
<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="email"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage className="text-xs"/>
|
|
</FormItem>)}/>
|
|
</div>
|
|
|
|
<FormSuccess message={success}/>
|
|
<FormError message={error}/>
|
|
<Button type="submit" className="w-full" disabled={isPending}>
|
|
{t('auth.form.reset.button')}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardWrapper>)
|
|
}
|