"use client"; import { ArrowLeft, CheckCircle2, Loader2, Mail } from "lucide-react"; import { useCallback, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; export interface AuthForgotPasswordProps { onSubmit?: (email: string) => void; onBack?: () => void; className?: string; defaultEmail?: string; isLoading?: boolean; isSuccess?: boolean; errors?: { email?: string; general?: string; }; successMessage?: string; } 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 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; }; 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 = (e: React.ChangeEvent) => { const value = e.target.value; setEmail(value); if (localErrors.email) { setLocalErrors((prev) => ({ ...prev, email: validateEmail(value) })); } }; const emailError = errors?.email || localErrors.email; const generalError = errors?.general; if (isSuccess) { return ( Check your email We've sent you a password reset link

{successMessage}

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

{onBack && ( )}

); } return ( Reset password Enter your email address and we'll send you a link to reset your password

{generalError && (

{generalError}

)} Email * {emailError && ( {emailError} )} We'll send a password reset link to this email address

{onBack && ( )}

); }

Example Usage