124 lines
3.1 KiB
JavaScript
124 lines
3.1 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import axios from "axios";
|
|
import { useParams } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
import Navbar from "./Navbar";
|
|
import Footer from "./Footer";
|
|
|
|
const ResetPassword = () => {
|
|
const { userId, token } = useParams();
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
|
|
const BASE_URL = import.meta.env.VITE_REACT_APP_SECRET;
|
|
|
|
const handleResetPassword = async () => {
|
|
try {
|
|
if (!password || password.trim() === "") {
|
|
setMessage("Password not entered");
|
|
toast.error("Password not entered"); // Use toast.error instead of toast.success
|
|
return;
|
|
}
|
|
|
|
const response = await axios.post(
|
|
`${BASE_URL}/users/resetpassword/${userId}/${token}`,
|
|
{ userId, token, password }
|
|
);
|
|
|
|
if (password !== confirmPassword) {
|
|
setMessage("Passwords do not match.");
|
|
toast.error("Passwords do not match.");
|
|
return;
|
|
} else {
|
|
setMessage("Password reset successfull");
|
|
toast.success(response.data.message);
|
|
}
|
|
} catch (error) {
|
|
console.error("Reset Password Error:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Clear any existing toasts when the component mounts
|
|
toast.dismiss();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section className="card mb-0 vh-100">
|
|
<div className="container py-10 h-100">
|
|
<div className="row d-flex align-items-center justify-content-center h-100">
|
|
<div className="col-md-10 col-lg-5 col-xl-5 offset-xl-1 card mb-10">
|
|
<h2 className="card-header" style={{ color: '#F74B02' }}>
|
|
<span className="pi pi-lock-open" style={{ color: '#067ADC' }}> </span> {" "}
|
|
Reset Password
|
|
</h2>
|
|
<br />
|
|
<p className="card-title text-center" style={{ color: '#F74B02' }}>
|
|
Enter your new password:
|
|
</p>
|
|
|
|
|
|
<input
|
|
className="form-control vh-10"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Enter your new password"
|
|
style={{ display: "flex", gap: "35px" }}
|
|
/>
|
|
<br />
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
placeholder="Confirm your new password"
|
|
/>
|
|
<br />
|
|
|
|
<button onClick={handleResetPassword} className="btn btn-primary" style={{
|
|
width: "35%" }}>
|
|
Reset Password
|
|
|
|
</button>
|
|
|
|
<p style={{ color: "#067ADC" }} className="card-title text-center">
|
|
{message}
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ResetPassword;
|