Merge pull request #54 from sunnybraille/request

Fix: login session maintain
sunnybraille · Mar 11, 2024 · afd023c · afd023c
2 parents debe3db + b6ec330
commit afd023c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/my-app/src/components/AuthContext.tsx b/my-app/src/components/AuthContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 
 interface AuthContextType {
   isLoggedIn: boolean;
@@ -7,10 +7,45 @@ interface AuthContextType {
 
 export const AuthContext = createContext<AuthContextType | null>(null);
 
+const SESSION_TIMEOUT = 10 * 60 * 1000;
+
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [isLoggedIn, setLoggedIn] = useState<boolean>(false);
+  const [isLoggedIn, setLoggedInState] = useState<boolean>(() => {
+    const isUserLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+    const lastLoginTime = localStorage.getItem("lastLoginTime");
+    const isSessionExpired =
+      lastLoginTime &&
+      new Date().getTime() - Number(lastLoginTime) > SESSION_TIMEOUT;
+    return isUserLoggedIn && !isSessionExpired;
+  });
+
+  const setLoggedIn = (loggedIn: boolean) => {
+    localStorage.setItem("isLoggedIn", loggedIn.toString());
+    if (loggedIn) {
+      localStorage.setItem("lastLoginTime", new Date().getTime().toString());
+    } else {
+      localStorage.removeItem("lastLoginTime");
+    }
+    setLoggedInState(loggedIn);
+  };
+
+  useEffect(() => {
+    const updateLastLoginTime = () => {
+      if (isLoggedIn) {
+        localStorage.setItem("lastLoginTime", new Date().getTime().toString());
+      }
+    };
+
+    window.addEventListener("click", updateLastLoginTime);
+    window.addEventListener("keypress", updateLastLoginTime);
+
+    return () => {
+      window.removeEventListener("click", updateLastLoginTime);
+      window.removeEventListener("keypress", updateLastLoginTime);
+    };
+  }, [isLoggedIn]);
 
   return (
     <AuthContext.Provider value={{ isLoggedIn, setLoggedIn }}>

diff --git a/my-app/src/components/LoginPage.tsx b/my-app/src/components/LoginPage.tsx
@@ -32,7 +32,8 @@ const LoginPage: React.FC = () => {
     return () => clearTimeout(timer);
   }, [language]);
 
-  const handleLogin = async () => {
+  const handleLogin = async (event: React.FormEvent) => {
+    event.preventDefault();
     try {
       const apiUrl = process.env.REACT_APP_API_URL;
       const response = await axios.post(
@@ -45,19 +46,16 @@ const LoginPage: React.FC = () => {
         navigate("/");
       }
     } catch (error) {
+      let errorMessage = "An unexpected error occurred.";
       if (axios.isAxiosError(error) && error.response) {
         switch (error.response.status) {
           case 401:
-            setError(
-              "Authentication failed. Please check your login ID and password."
-            );
+            errorMessage =
+              "Authentication failed. Please check your login ID and password.";
             break;
-          default:
-            setError("An unexpected error occurred.");
         }
-      } else {
-        setError("An unexpected error occurred.");
       }
+      setError(errorMessage);
       alert("Error during login: " + messageerror);
     }
   };