flashcards-example-project/src/components/auth/recover-password/recover-password.tsx

import { useForm } from 'react-hook-form'
import { Link } from 'react-router-dom'

import { Button, Card, ControlledTextField, Typography } from '@/components'
import { DevTool } from '@hookform/devtools'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

import s from './recover-password.module.scss'

const schema = z.object({
    email: z.string().email('Invalid email address').nonempty('Enter email'),
})

type FormType = z.infer<typeof schema>

type Props = {
    onSubmit: (data: FormType) => void
}

export const RecoverPassword = (props: Props) => {
    const { control, handleSubmit } = useForm<FormType>({
        defaultValues: {
            email: '',
        },
        mode: 'onSubmit',
        resolver: zodResolver(schema),
    })

    const handleFormSubmitted = handleSubmit(props.onSubmit)

    return (
        <>
            <DevTool control={control} />
            <Card className={s.card}>
                <Typography className={s.title} variant={'large'}>
                    Forgot your password?
                </Typography>
                <form onSubmit={handleFormSubmitted}>
                    <div className={s.form}>
                        <ControlledTextField
                            control={control}
                            name={'email'}
                            placeholder={'Email'}
                        />
                    </div>
                    <Typography className={s.instructions} variant={'body2'}>
                        Enter your email address and we will send you further instructions
                    </Typography>
                    <Button className={s.button} fullWidth type={'submit'}>
                        Send Instructions
                    </Button>
                </form>
                <Typography className={s.caption} variant={'body2'}>
                    Did you remember your password?
                </Typography>
                <Typography as={Link} className={s.loginLink} to={'/sign-in'} variant={'link1'}>
                    Try logging in
                </Typography>
            </Card>
        </>
    )
}