107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import IconMail from '@/components/icon/icon-mail';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';
|
|
|
|
interface ResetPasswordFormValues {
|
|
email: string;
|
|
}
|
|
|
|
const ComponentsAuthResetPasswordForm: React.FC = () => {
|
|
const router = useRouter();
|
|
const [formData, setFormData] = useState<ResetPasswordFormValues>({ email: '' });
|
|
const [loading, setLoading] = useState(false);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
const [msg, setMsg] = useState<string | null>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData({ email: e.target.value });
|
|
};
|
|
|
|
const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setErr(null);
|
|
setMsg(null);
|
|
|
|
if (!formData.email) {
|
|
setErr('Please enter your email.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.post(`${ApiServerBaseUrl}/auth/forgot-password`, {
|
|
email: formData.email,
|
|
});
|
|
|
|
setMsg(res.data.message || 'Password reset link sent to your email.');
|
|
setFormData({ email: '' });
|
|
|
|
// Redirect after 2 seconds
|
|
setTimeout(() => {
|
|
router.push('/login');
|
|
}, 2000);
|
|
|
|
} catch (error: any) {
|
|
setErr(error.response?.data?.error || 'Something went wrong.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className="space-y-5" onSubmit={submitForm}>
|
|
{err && (
|
|
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{err}
|
|
</div>
|
|
)}
|
|
|
|
{msg && (
|
|
<div className="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
|
|
{msg} <br /> Redirecting to login...
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label htmlFor="Email" className="dark:text-white">
|
|
Email
|
|
</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="Email"
|
|
type="email"
|
|
placeholder="Enter Email"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconMail fill />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* UPDATED BUTTON WITH LOGIN-PAGE STYLE */}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full
|
|
bg-[radial-gradient(circle,#1d8be0_0%,#6cb655_100%)]
|
|
hover:opacity-95 transition-all duration-300
|
|
hover:shadow-[0_0_30px_rgba(255,255,255,0.20)]
|
|
hover:scale-[1.015]
|
|
text-white text-lg font-medium py-3 rounded-lg mt-6"
|
|
>
|
|
{loading ? 'Sending...' : 'RECOVER'}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ComponentsAuthResetPasswordForm;
|