88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { CheckCircle2 } from 'lucide-react';
|
||
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle
|
||
} from '@/components/ui/dialog';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
|
||
interface ForgotPasswordModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export const ForgotPasswordModal: React.FC<ForgotPasswordModalProps> = ({
|
||
isOpen,
|
||
onClose
|
||
}) => {
|
||
const [identifier, setIdentifier] = useState('');
|
||
const [sent, setSent] = useState(false);
|
||
|
||
const handleClose = () => {
|
||
onClose();
|
||
// Reset only after the dialog has finished animating out.
|
||
setTimeout(() => {
|
||
setSent(false);
|
||
setIdentifier('');
|
||
}, 200);
|
||
};
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
|
||
<DialogContent className="max-w-md">
|
||
{sent ? (
|
||
<div className="flex flex-col items-center gap-3 py-4 text-center">
|
||
<CheckCircle2 className="size-9 text-primary" strokeWidth={1.8} />
|
||
<DialogTitle className="text-[15px]">لینک بازیابی ارسال شد</DialogTitle>
|
||
<DialogDescription className="max-w-xs">
|
||
لینک تعیین رمز عبور جدید به شناسه شما ارسال شد.
|
||
</DialogDescription>
|
||
<Button onClick={handleClose} className="mt-2">
|
||
بازگشت به ورود
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
if (identifier.trim()) setSent(true);
|
||
}}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>بازیابی رمز عبور</DialogTitle>
|
||
<DialogDescription>
|
||
ایمیل دانشگاهی یا شماره تلفن همراه خود را وارد کنید.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="my-4 flex flex-col gap-1.5">
|
||
<Label htmlFor="recovery">ایمیل یا شماره همراه</Label>
|
||
<Input
|
||
id="recovery"
|
||
required
|
||
value={identifier}
|
||
onChange={(e) => setIdentifier(e.target.value)}
|
||
placeholder="name@ui.ac.ir"
|
||
/>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button type="button" variant="outline" onClick={handleClose}>
|
||
انصراف
|
||
</Button>
|
||
<Button type="submit">ارسال لینک</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|