249 lines
10 KiB
JavaScript
249 lines
10 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
import { Mail, Key, Lock, CheckCircle, ArrowLeft, RefreshCw } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { requestForgetPasswordOtp, verifyForgetPasswordOtp } from '../utils/api';
|
|
import InteractiveBackground from '../components/Animation/Background';
|
|
|
|
export default function ForgotPasswordPage() {
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
const [step, setStep] = useState(1);
|
|
const [email, setEmail] = useState('');
|
|
const [code, setCode] = useState('');
|
|
const [newPassword, setNewPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleRequestOtp = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!email.trim()) {
|
|
toast.error(t('forgotPassword.emailRequired'));
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await requestForgetPasswordOtp(email);
|
|
toast.success(t('forgotPassword.otpSent'));
|
|
setStep(2);
|
|
} catch (err) {
|
|
toast.error(err?.message || t('forgotPassword.otpSendFailed'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleVerifyOtp = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!code.trim()) {
|
|
toast.error(t('forgotPassword.otpRequired'));
|
|
return;
|
|
}
|
|
|
|
if (newPassword.length < 6) {
|
|
toast.error(t('validation.passwordMinLength'));
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await verifyForgetPasswordOtp(email, code, newPassword);
|
|
toast.success(t('forgotPassword.resetSuccess'));
|
|
setTimeout(() => router.push('/login'), 1200);
|
|
} catch (err) {
|
|
toast.error(err?.message || t('forgotPassword.otpVerifyFailed'));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const inputClass = "w-full pr-12 pl-4 py-3 bg-white/10 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 transition-all";
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
|
|
<Toaster position="top-center" reverseOrder={false} />
|
|
<InteractiveBackground/>
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute -top-40 -right-40 w-80 h-80 bg-amber-400 rounded-full opacity-20 blur-3xl animate-pulse"></div>
|
|
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-orange-400 rounded-full opacity-20 blur-3xl animate-pulse delay-1000"></div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="relative w-full max-w-md"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="absolute -top-16 left-0"
|
|
>
|
|
<Link href="/login" className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors group">
|
|
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
|
<span>{t('forgotPassword.backToLogin')}</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/60 overflow-hidden">
|
|
<div className="bg-gradient-to-l from-amber-500 to-amber-600 p-8 text-center">
|
|
<motion.h1
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
className="text-3xl font-bold text-white mb-2"
|
|
>
|
|
{t('forgotPassword.title')}
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ y: 20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-amber-100"
|
|
>
|
|
{step === 1 ? t('forgotPassword.step1Instruction') : t('forgotPassword.step2Instruction')}
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="p-8">
|
|
<AnimatePresence mode="wait">
|
|
{step === 1 && (
|
|
<motion.form
|
|
key="step1"
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: 30 }}
|
|
onSubmit={handleRequestOtp}
|
|
className="space-y-6"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('forgotPassword.emailLabel')}
|
|
</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<Mail className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500 transition-colors" />
|
|
</div>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className={inputClass}
|
|
placeholder={t('forgotPassword.emailPlaceholder')}
|
|
dir="ltr"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
whileHover={{ scale: isLoading ? 1 : 1.02 }}
|
|
whileTap={{ scale: isLoading ? 1 : 0.98 }}
|
|
className="w-full bg-gradient-to-l from-amber-500 to-amber-600 text-white py-3 rounded-xl font-bold text-lg hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-500/25"
|
|
>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
<span>{t('forgotPassword.sending')}</span>
|
|
</div>
|
|
) : (
|
|
t('forgotPassword.sendOtp')
|
|
)}
|
|
</motion.button>
|
|
</motion.form>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<motion.form
|
|
key="step2"
|
|
initial={{ opacity: 0, x: 30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -30 }}
|
|
onSubmit={handleVerifyOtp}
|
|
className="space-y-6"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('forgotPassword.otpLabel')}
|
|
</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<Key className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500 transition-colors" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value)}
|
|
className={inputClass}
|
|
placeholder={t('forgotPassword.otpPlaceholder')}
|
|
dir="ltr"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
{t('forgotPassword.newPasswordLabel')}
|
|
</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<Lock className="w-5 h-5 text-gray-400 group-focus-within:text-amber-500 transition-colors" />
|
|
</div>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
className={inputClass}
|
|
placeholder={t('forgotPassword.newPasswordPlaceholder')}
|
|
required
|
|
minLength={6}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
whileHover={{ scale: isLoading ? 1 : 1.02 }}
|
|
whileTap={{ scale: isLoading ? 1 : 0.98 }}
|
|
className="w-full bg-gradient-to-l from-amber-500 to-amber-600 text-white py-3 rounded-xl font-bold text-lg hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-500/25"
|
|
>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
<span>{t('forgotPassword.verifying')}</span>
|
|
</div>
|
|
) : (
|
|
t('forgotPassword.resetPassword')
|
|
)}
|
|
</motion.button>
|
|
|
|
<div className="text-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setStep(1)}
|
|
className="text-sm text-amber-600 hover:text-amber-700 transition-colors flex items-center justify-center gap-1 mx-auto"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
<span>{t('forgotPassword.changeEmail')}</span>
|
|
</button>
|
|
</div>
|
|
</motion.form>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|