Dev

client/src/App.js

@@ -106,7 +106,7 @@ function App() {
             <Route path="/register" element={<Register />} />
             <Route path="/otp-request-container" element={<OtpRequest />} />
             <Route path="/reset-code" element={<ResetCode />} />
-            <Route path="/reset-password" element={<ResetPassword />} />
+            <Route path="/reset-password/:email" element={<ResetPassword />} />
             <Route path="/movie/:id" element={<MoviePage />} />
             <Route path="/booking/:id" element={<Booking />} />
             <Route path="/seating/:showTimeId/:id" element={<Seating />} />

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.",

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 = () => {
       >
         <form onSubmit={handleSubmit}>
           <h1>Reset Your Password</h1>
+          <div className="timer">
+            Time remaining to reset password: {Math.floor(timeLeft / 60)}:
+            {("0" + (timeLeft % 60)).slice(-2)}
+          </div>
           <input
             ref={otpRef}
             type="text"

client/src/components/css/ResetPassword.css

@@ -59,10 +59,10 @@
 
 .reset-password .error {
   color: red;
-  font-size: 1em; 
-  margin-bottom: 1rem; 
+  font-size: 1em;
+  margin-bottom: 1rem;
   text-align: center;
-  display: block; 
+  display: block;
   overflow: hidden;
   height: 1em;
   line-height: 1em;
@@ -73,3 +73,7 @@
     font-size: 28px;
   }
 }
+.timer {
+  text-align: center;
+  padding: 10px;
+}