124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import axios from 'axios';
|
|
import Link from 'next/link';
|
|
import IconMail from '@/components/icon/icon-mail';
|
|
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';
|
|
|
|
export default function ForgotPasswordForm() {
|
|
const [email, setEmail] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [msg, setMsg] = useState('');
|
|
const [err, setErr] = useState('');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setErr('');
|
|
setMsg('');
|
|
|
|
if (!email) {
|
|
setErr('Email is required');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await axios.post(`${ApiServerBaseUrl}/auth/forgot-password`, { email });
|
|
setMsg('Password reset link sent to your email');
|
|
} catch (error: any) {
|
|
setErr(error.response?.data?.error || 'Something went wrong');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative group w-full max-w-[420px]">
|
|
|
|
{/* ✅ Hover Gradient Overlay */}
|
|
<div
|
|
className="
|
|
absolute inset-0 rounded-3xl
|
|
bg-gradient-to-br from-blue-700/20 via-transparent to-pink-600/20
|
|
opacity-0 group-hover:opacity-100
|
|
transition-opacity duration-500
|
|
"
|
|
/>
|
|
|
|
{/* ✅ Card */}
|
|
<div className="relative z-10 bg-[#0f1022] rounded-3xl p-8 shadow-2xl border border-white/10">
|
|
|
|
{/* ✅ Gradient Heading */}
|
|
<h1
|
|
className="
|
|
text-3xl font-extrabold text-center mb-2
|
|
bg-gradient-to-r from-blue-500 to-pink-500
|
|
bg-clip-text text-transparent
|
|
"
|
|
>
|
|
Forgot Password
|
|
</h1>
|
|
|
|
<p className="text-gray-400 text-sm text-center mb-6">
|
|
Enter your email to receive a reset link
|
|
</p>
|
|
|
|
{err && (
|
|
<p className="text-red-500 text-sm text-center mb-3">{err}</p>
|
|
)}
|
|
{msg && (
|
|
<p className="text-green-500 text-sm text-center mb-3">{msg}</p>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
|
|
{/* ✅ Email Input (Dark on all devices) */}
|
|
<div className="relative">
|
|
<input
|
|
type="email"
|
|
placeholder="Email address"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="
|
|
w-full bg-[#15162e] text-white
|
|
rounded-lg ps-10 py-3 outline-none
|
|
border border-white/10
|
|
focus:border-blue-500
|
|
placeholder-gray-400
|
|
"
|
|
/>
|
|
<span className="absolute start-3 top-1/2 -translate-y-1/2 text-gray-300">
|
|
<IconMail fill />
|
|
</span>
|
|
</div>
|
|
|
|
{/* ✅ Button with SAME Dashboard Gradient Feel */}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="
|
|
relative w-full py-3 rounded-xl
|
|
font-semibold text-white
|
|
bg-gradient-to-r from-blue-600 to-pink-500
|
|
shadow-lg transition-all
|
|
hover:opacity-95 hover:scale-[1.02]
|
|
disabled:opacity-60
|
|
"
|
|
>
|
|
{loading ? 'Sending...' : 'Send Reset Link'}
|
|
</button>
|
|
</form>
|
|
|
|
{/* ✅ Footer */}
|
|
<p className="text-center text-sm text-gray-400 mt-6">
|
|
Remembered your password?{' '}
|
|
<Link href="/login" className="text-blue-400 hover:underline">
|
|
Login
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|