"use client"; import { ArrowLeft, CheckCircle2, Loader2, Mail } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/registry/new-york/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/new-york/ui/input-group"; export interface AuthForgotPasswordProps { onSubmit?: (email: string) => void; onBack?: () => void; className?: string; defaultEmail?: string; isLoading?: boolean; isSuccess?: boolean; errors?: { email?: string; general?: string; }; successMessage?: string; } function validateEmail(value: string): string | undefined { if (!value.trim()) { return "Email is required"; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(value)) { return "Please enter a valid email address"; } return; } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

{message}

); } interface EmailFieldProps { id: string; value: string; onChange: (e: React.ChangeEvent) => void; error?: string; } function EmailField({ id, value, onChange, error }: EmailFieldProps) { return ( Email * {error && {error}} We'll send a password reset link to this email address ); } interface SuccessStateProps { message: string; onBack?: () => void; className?: string; } function SuccessState({ message, onBack, className }: SuccessStateProps) { return ( Check your email We've sent you a password reset link

{message}

If you don't see the email, check your spam folder.

{onBack && ( )}

); } export default function AuthForgotPassword({ onSubmit, onBack, className, defaultEmail = "", isLoading = false, isSuccess = false, errors, successMessage = "We've sent a password reset link to your email address.", }: AuthForgotPasswordProps) { const [email, setEmail] = useState(defaultEmail); const [localErrors, setLocalErrors] = useState<{ email?: string; }>({}); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const emailError = validateEmail(email); if (emailError) { setLocalErrors({ email: emailError }); return; } setLocalErrors({}); onSubmit?.(email.trim()); }, [email, onSubmit] ); const handleEmailChange = useCallback( (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }, [localErrors.email] ); const emailError = errors?.email || localErrors.email; const generalError = errors?.general; if (isSuccess) { return ( ); } return ( Reset password Enter your email address and we'll send you a link to reset your password ); }

Example Usage