Implemented a countdown timer with automatic redirection to the login…

client/src/assets/components/subcomponents/CountdownTimer.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+
+const CountdownTimer = () => {
+ const [timeLeft, setTimeLeft] = useState(5);
+
+  useEffect(() => {
+   const timer = setInterval(() => {
+    setTimeLeft(prevTimeLeft => prevTimeLeft - 1);
+   }, 1000);
+
+  return () => clearInterval(timer);
+
+}, []);
+
+  useEffect(() => {
+   if (timeLeft <= 0) {
+    window.location.href = "/login";
+   }
+  }, [timeLeft]);
+
+  return (
+    <div className="text-sm text-green mt-2">
+     {timeLeft > 0 ? `You will be redirected to the login page in ${timeLeft} seconds.` : "Redirecting to login page..."}
+    </div>
+   );
+};
+
+export default CountdownTimer;

client/src/assets/components/subcomponents/Login.jsx

@@ -45,7 +45,7 @@ const Login = () => {
   const {
     message: successMessage,
     show: showSuccessToast,
-    showSuccess,
+    //showSuccess,
   } = useSuccessToast();
 
   const handleChange = (e) => {

client/src/assets/components/subcomponents/Register.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, Navigate } from "react-router-dom";
 import axios from "../../../api/axios";
 import { IoMdEyeOff, IoMdEye } from "react-icons/io";
 import { FaTimesCircle } from "react-icons/fa";
@@ -9,6 +9,8 @@ import ErrorToast from "../toast/ErrorToast";
 import { useErrorToast } from "../toast/useErrorToast";
 import SuccessToast from "../toast/SuccessToast";
 import { useSuccessToast } from "../toast/useSuccessToast";
+// import CountdownTimer
+import CountdownTimer from "./CountdownTimer";
 
 // REGEX for validation
 const NAME_REGEX = /^[a-zA-Z][a-zA-Z- ]{1,50}$/;
@@ -73,6 +75,9 @@ const Register = () => {
 
   const [buttonStatus, setButtonStatus] = useState("Sign Up");
 
+  // For countdowntimer
+  const isCountdownTimer = success;
+
   useEffect(() => {
     firstNameRef.current.focus();
   }, []);
@@ -138,7 +143,7 @@ const Register = () => {
         headers: { "Content-Type": "application/json" },
         withCredentials: true,
       });
-
+      
       showSuccess("Registration Successful! You can now log in.");
       setSuccess(true);
       // Optionally: navigate to login page
@@ -824,6 +829,9 @@ const Register = () => {
             </form>
           )}
         </div>
+        <div className="countdown-timer">
+          {isCountdownTimer && <CountdownTimer className="text-green-600 text-4xl" />}
+        </div>
       </div>
       <SuccessToast
         message={successMessage}
@@ -841,6 +849,6 @@ const Register = () => {
       />
     </div>
   );
-};
+}
 
 export default Register;