"use client" ;
import { useState } from "react" ;
import {
KeyRound,
Mail,
Loader2,
ArrowLeft,
Check,
Send,
} from "lucide-react" ;
import { Button } from "@/components/ui/button" ;
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog" ;
import { Input } from "@/components/ui/input" ;
import { Label } from "@/components/ui/label" ;
import { cn } from "@/lib/utils" ;
export const title = "React Dialog Block Forgot Password" ;
export default function DialogForgotPassword () {
const [ open , setOpen ] = useState ( false );
const [ email , setEmail ] = useState ( "" );
const [ isLoading , setIsLoading ] = useState ( false );
const [ isSent , setIsSent ] = useState ( false );
const isValidEmail = email. includes ( "@" ) && email. includes ( "." );
const handleSubmit = async ( e : React . FormEvent ) => {
e. preventDefault ();
if ( ! isValidEmail) return ;
setIsLoading ( true );
await new Promise (( resolve ) => setTimeout (resolve, 1500 ));
setIsLoading ( false );
setIsSent ( true );
};
const handleResend = async () => {
setIsLoading ( true );
await new Promise (( resolve ) => setTimeout (resolve, 1000 ));
setIsLoading ( false );
};
const handleClose = () => {
setOpen ( false );
setTimeout (() => {
setEmail ( "" );
setIsSent ( false );
}, 200 );
};
const handleBackToLogin = () => {
handleClose ();
// In real app: navigate to login or switch dialog
};
if (isSent) {
return (
< Dialog open = {open} onOpenChange = {setOpen}>
< div className = "flex min-h-[350px] items-center justify-center" >
< DialogTrigger asChild >
< Button variant = "outline" >
< KeyRound className = "mr-2 h-4 w-4" />
Forgot Password
</ Button >
</ DialogTrigger >
</ div >
< DialogContent className = "sm:max-w-md" >
< div className = "flex flex-col items-center justify-center py-6 text-center" >
< div className = "flex h-12 w-12 items-center justify-center rounded-full border-2 border-primary" >
< Check className = "h-6 w-6 text-primary" />
</ div >
< h3 className = "mt-4 text-lg font-semibold" >Check your email</ h3 >
< p className = "mt-2 text-sm text-muted-foreground" >
We've sent a password reset link to
</ p >
< p className = "mt-1 font-medium" >{email}</ p >
< div className = "mt-6 w-full space-y-3" >
< div className = "rounded-lg border p-4 text-left" >
< p className = "text-sm text-muted-foreground" >
< span className = "font-medium text-foreground" >Didn't receive the email?</ span >
{ " " }Check your spam folder, or{ " " }
< Button
variant = "link"
className = "h-auto p-0 text-sm"
onClick = {handleResend}
disabled = {isLoading}
>
{isLoading ? "Sending..." : "click here to resend" }
</ Button >
</ p >
</ div >
< p className = "text-xs text-muted-foreground" >
The link will expire in 15 minutes for security reasons.
</ p >
</ div >
< Button
variant = "outline"
className = "mt-6"
onClick = {handleBackToLogin}
>
< ArrowLeft className = "mr-2 h-4 w-4" />
Back to login
</ Button >
</ div >
</ DialogContent >
</ Dialog >
);
}
return (
< Dialog open = {open} onOpenChange = {setOpen}>
< div className = "flex min-h-[350px] items-center justify-center" >
< DialogTrigger asChild >
< Button variant = "outline" >
< KeyRound className = "mr-2 h-4 w-4" />
Forgot Password
</ Button >
</ DialogTrigger >
</ div >
< DialogContent className = "sm:max-w-md" >
< DialogHeader className = "text-center" >
< div className = "flex justify-center mb-2" >
< div className = "flex h-12 w-12 items-center justify-center rounded-full border" >
< KeyRound className = "h-6 w-6" />
</ div >
</ div >
< DialogTitle >Forgot your password?</ DialogTitle >
< DialogDescription >
No worries, we'll send you reset instructions.
</ DialogDescription >
</ DialogHeader >
< form onSubmit = {handleSubmit} className = "space-y-4 py-4" >
< div className = "space-y-2" >
< Label htmlFor = "reset-email" >Email address</ Label >
< div className = "relative" >
< Mail className = "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
< Input
id = "reset-email"
type = "email"
placeholder = "[email protected] "
value = {email}
onChange = {( e ) => setEmail (e.target.value)}
className = "pl-9"
disabled = {isLoading}
autoFocus
/>
</ div >
< p className = "text-xs text-muted-foreground" >
Enter the email address associated with your account.
</ p >
</ div >
< Button
type = "submit"
className = "w-full"
disabled = { ! isValidEmail || isLoading}
>
{isLoading ? (
<>
< Loader2 className = "mr-2 h-4 w-4 animate-spin" />
Sending link...
</>
) : (
<>
< Send className = "mr-2 h-4 w-4" />
Send reset link
</>
)}
</ Button >
</ form >
< div className = "flex items-center justify-center pt-2 border-t" >
< Button
variant = "ghost"
size = "sm"
onClick = {handleBackToLogin}
>
< ArrowLeft className = "mr-2 h-4 w-4" />
Back to login
</ Button >
</ div >
</ DialogContent >
</ Dialog >
);
}