From 7e99f0877a64ea853ac70fb3ea6cf1e1ca079ffa Mon Sep 17 00:00:00 2001
From: LiebeAnnette <liebeannette@gmail.com>
Date: Wed, 4 Jun 2025 20:58:53 -0500
Subject: [PATCH] auto logout timer set to 15 minutes. Working Locally.

---
 client/src/App.tsx | 100 +++++++++++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 340725c..513fde4 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,22 +1,54 @@
-import React from "react";
-//import { BrowserRouter as Router, Route, Link } from "react-router-dom";
-//import {Routes} from "react-router";
+import React, { useEffect, useRef } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 import Home from "./components/Home";
-import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
 import TripForm from "./components/TripForm";
 import TripDashboard from "./components/TripDashboard";
 import TripPDFButton from "./components/TripPDFButton";
 import AuthForm from "./components/AuthForm";
- // import LogoutButton from "./components/LogoutButton";
-import { useAuth } from "./context/AuthContext";
 import VehicleManager from "./components/VehicleManager";
 import MaintenanceAlerts from "./components/MaintenanceAlerts";
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
 import ExpenseManager from "./components/ExpenseManager";
+import { useAuth } from "./context/AuthContext";
+
+// TODO: change to 30
+const INACTIVITY_LIMIT = 15 * 60 * 1000; // 15 minutes
+// const INACTIVITY_LIMIT = 5000; // 5 seconds FOR TESTING
 
 const App: React.FC = () => {
-  const { token } = useAuth();
+  const { token, setToken } = useAuth();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleLogout = () => {
+    setToken(null);
+    localStorage.removeItem("token");
+    alert("You were logged out due to inactivity.\nPlease login again.");
+  };
+
+  const resetTimer = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(handleLogout, INACTIVITY_LIMIT);
+  };
+
+  useEffect(() => {
+    if (!token) return;
+
+    resetTimer(); // set timer on login
+
+    const events = ["mousemove", "keydown", "click"];
+    events.forEach((event) => window.addEventListener(event, resetTimer));
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      events.forEach((event) => window.removeEventListener(event, resetTimer));
+    };
+  }, [token]);
 
   if (!token) {
     return <AuthForm />;
@@ -24,46 +56,24 @@ const App: React.FC = () => {
 
   return (
     <Router>
-     <div className="mainpage">
-      <Navbar />
-      <div className="flex-1">
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/trips" element={<TripDashboard />} />
-        <Route path="/add-trip" element={<TripForm />} />
-        <Route path="/vehicles" element={<VehicleManager />} />
-        <Route path="/alerts" element={<MaintenanceAlerts />} />
-        <Route path="/pdf" element={<TripPDFButton />} />
-        <Route path="*" element={<Navigate to="/" />} />
-        <Route path="/expenses" element={<ExpenseManager />} />
-      </Routes>
-      </div>
-      <Footer />
+      <div className="mainpage">
+        <Navbar />
+        <div className="flex-1">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/trips" element={<TripDashboard />} />
+            <Route path="/add-trip" element={<TripForm />} />
+            <Route path="/vehicles" element={<VehicleManager />} />
+            <Route path="/alerts" element={<MaintenanceAlerts />} />
+            <Route path="/pdf" element={<TripPDFButton />} />
+            <Route path="/expenses" element={<ExpenseManager />} />
+            <Route path="*" element={<Navigate to="/" />} />
+          </Routes>
+        </div>
+        <Footer />
       </div>
     </Router>
   );
-
-
-
-
-//   return (
-//     <div>
-//       <Navbar />
-//       {!token ? (
-//         <AuthForm />
-//       ) : (
-//         <div className="mainpage">
-//           {/* <LogoutButton /> */}
-//           <TripPDFButton />
-//           <VehicleManager />
-//           <MaintenanceAlerts />
-//           <TripForm />
-//           <TripDashboard />
-//         </div>
-//       )}
-//       <Footer />
-//     </div>
-//   );
- };
+};
 
 export default App;