120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
"use client";
|
|
import Layout from "@/components/layout/Layout";
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function ResetPassword() {
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [isValidReset, setIsValidReset] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
// Placeholder for token validation logic
|
|
const checkResetToken = async () => {
|
|
// Simulate token validation
|
|
const isTokenValid = true; // Replace with actual validation logic
|
|
|
|
if (isTokenValid) {
|
|
setIsValidReset(true);
|
|
} else {
|
|
setMessage(
|
|
"Invalid or expired reset link. Please request a new password reset."
|
|
);
|
|
setTimeout(() => router.push("/forgot-password"), 3000);
|
|
}
|
|
};
|
|
|
|
checkResetToken();
|
|
}, [router]);
|
|
|
|
const handleResetPassword = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
setMessage("Passwords do not match.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Simulate password reset
|
|
const isSuccess = true; // Replace with actual reset logic
|
|
|
|
if (isSuccess) {
|
|
setMessage("Password successfully reset. Redirecting to login...");
|
|
setTimeout(() => router.push("/login"), 3000);
|
|
} else {
|
|
throw new Error("Password reset failed.");
|
|
}
|
|
} catch (error) {
|
|
setMessage(`Error: ${error.message}`);
|
|
}
|
|
};
|
|
|
|
if (!isValidReset) {
|
|
return <p>{message}</p>;
|
|
}
|
|
return (
|
|
<>
|
|
<Layout headerStyle={6} footerStyle={3} transparent={false}>
|
|
<section className="forgot__area-one">
|
|
<div className="container">
|
|
<div className="text-center mb-55">
|
|
<h1 className="text-48-bold">Change Password</h1>
|
|
</div>
|
|
<div className="box-form-login">
|
|
<div className="head-login">
|
|
{message && <p className="text-16-semibold">{message}</p>}
|
|
{!message && (
|
|
<p className="text-16-semibold">
|
|
Please enter your new password
|
|
</p>
|
|
)}
|
|
<div className="form-login form-forgot">
|
|
<form onSubmit={handleResetPassword}>
|
|
<div className="form-group">
|
|
<input
|
|
type="password"
|
|
className="form-control account"
|
|
placeholder="New Password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<input
|
|
type="password"
|
|
className="form-control account"
|
|
placeholder="Confirm New Password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<input
|
|
type="submit"
|
|
className="btn btn-login"
|
|
defaultValue="Reset password"
|
|
/>
|
|
</div>
|
|
</form>
|
|
<p className="text-center">
|
|
<Link href="/contact" className="link-bold">
|
|
Contact Us
|
|
</Link>{" "}
|
|
if you encounter any problem
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|