diff --git a/client/src/App.js b/client/src/App.js
index cabb331..6173d50 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -106,7 +106,7 @@ function App() {
} />
} />
} />
- } />
+ } />
} />
} />
} />
diff --git a/client/src/components/ForgotPassword.js b/client/src/components/ForgotPassword.js
index 460d61f..7d309e1 100644
--- a/client/src/components/ForgotPassword.js
+++ b/client/src/components/ForgotPassword.js
@@ -34,7 +34,7 @@ const ForgotPassword = () => {
);
// Handle the response based on your API's specification
- navigate("/reset-password");
+ navigate(`/reset-password/${email}`);
Swal.fire(
"Success",
"OTP request has been sent successfully.",
diff --git a/client/src/components/ResetPassword.js b/client/src/components/ResetPassword.js
index 90d1c13..a90ca01 100644
--- a/client/src/components/ResetPassword.js
+++ b/client/src/components/ResetPassword.js
@@ -1,5 +1,5 @@
-import React, { useState, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useState, useRef, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
import Swal from "sweetalert2";
import axios from "axios";
import "./css/ResetPassword.css";
@@ -9,15 +9,62 @@ import { useLoading } from "./LoadingContext.js";
const ResetPassword = () => {
const [otp, setOtp] = useState("");
+ const { email } = useParams();
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
+ const [timeLeft, setTimeLeft] = useState(10);
const otpRef = useRef(null);
const passwordRef = useRef(null);
const confirmPasswordRef = useRef(null);
const navigate = useNavigate();
const { loading, setLoading } = useLoading();
+ useEffect(() => {
+ if (!timeLeft) {
+ Swal.fire({
+ title: "Time's up",
+ text: "You ran out of time to reset your password",
+ icon: "info",
+ showCancelButton: true,
+ confirmButtonText: "Retry",
+ cancelButtonText: "Go to Login",
+ }).then((result) => {
+ if (result.isConfirmed) {
+ requestNewOTP();
+ } else {
+ navigate("/login-container");
+ }
+ });
+ return;
+ }
+
+ const intervalId = setInterval(() => {
+ setTimeLeft(timeLeft - 1);
+ }, 1000);
+
+ return () => clearInterval(intervalId);
+ }, [timeLeft, navigate]);
+
+ const requestNewOTP = async () => {
+ try {
+ setLoading(true);
+ await axios.post(
+ `${process.env.REACT_APP_API_PATH}/auth/password-reset-request`,
+ { email }
+ );
+ setLoading(false);
+ Swal.fire(
+ "OTP Sent",
+ "A new OTP has been sent to your email.",
+ "success"
+ );
+ setTimeLeft(300); // Reset timer
+ } catch (error) {
+ Swal.fire("Error", "There was a problem requesting a new OTP.", "error");
+ }
+ };
+
const handleSubmit = async (event) => {
event.preventDefault();
setError("");
@@ -42,7 +89,6 @@ const ResetPassword = () => {
newPassword: password,
}
);
- // Handle the response based on your API's specification
Swal.fire("Success", "Password has been reset successfully.", "success");
navigate("/login-container");
} catch (error) {
@@ -84,6 +130,10 @@ const ResetPassword = () => {
>