"use client" import * as React from "react" import Link from "next/link" import { ArrowLeft } from "lucide-react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { cn } from "@/lib/utils" import { forgotPasswordSchema, type ForgotPasswordValues, } from "@/lib/validations" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" export interface ForgotPasswordFormProps { /** Called with the validated email address when the user submits. */ onSubmit?: (values: ForgotPasswordValues) => void | Promise /** Route for the "Back to login" link. */ loginHref?: string /** External error message displayed above the form. */ error?: string /** Disables the submit button and shows loading state. */ loading?: boolean /** * When true, shows a success message instead of the form. * Set this after `onSubmit` resolves successfully. */ submitted?: boolean className?: string } /** * Password reset request form with Zod-validated email input, back-to-login * link, and a success state shown after submission. * * @example * ```tsx * const [submitted, setSubmitted] = useState(false) * * { * await sendResetEmail(email) * setSubmitted(true) * }} * submitted={submitted} * /> * ``` */ export function ForgotPasswordForm({ onSubmit, loginHref = "/login", error, loading = false, submitted = false, className, }: ForgotPasswordFormProps) { const form = useForm({ resolver: zodResolver(forgotPasswordSchema), defaultValues: { email: "" }, }) async function handleSubmit(values: ForgotPasswordValues) { await onSubmit?.(values) } return (

{/* Back link */} Back to login {submitted ? ( /* Success state */

Check your email

We sent a password reset link to your email address. Please check your inbox and follow the instructions.

) : ( /* Form state */ <>

Forgot your password?

Enter your email and we'll send you a reset link

{/* External error */} {error && (

{error}

)}

) }

Prop	Type	Required	Description
`onSubmit`	`(values: ForgotPasswordFormValues) => void`	—	Submit handler.
`loginHref`	`string`	—	Back to login link.