inactivity logout added

.env

@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

.env.development

@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

.env.production

@@ -14,4 +14,7 @@ VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
 
 #BANK NAME
 VITE_BANK_NAME='First City Monument Bank'
-VITE_BANK_NAME_SHORT='FCMB'
+VITE_BANK_NAME_SHORT='FCMB'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

src/authorization/UserExist.jsx

@@ -6,6 +6,7 @@ import DashboardLayout from "../components/layouts/DashboardLayout"
 import PageLoader from "../components/PageLoader"
 import { updateUserDetails } from "../store/UserDetails"
 import RouteLinks from "../RouteLinks"
+import debounceFunction from "../helpers/debounce"
 
 export default function UserExist() {
     const dispatch = useDispatch()
@@ -15,6 +16,43 @@ export default function UserExist() {
 
     const {userDetails} = useSelector((state) => state.userDetails)
 
+    const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN
+  
+    // Function to log the user out
+    const logoutUser = () => {
+      localStorage.clear()
+      navigate(RouteLinks.loginPage)
+      window.location.reload()
+    };
+  
+    // Function to reset the activity time
+    const resetTimer = () => {
+      debounceFunction(setLastActivityTime(Date.now()), 1000)
+    };
+
+    useEffect(()=>{
+      const timer = setTimeout(()=>{
+        if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){
+          logoutUser()
+        }
+      }, Number(process.env.REACT_APP_TIMEOUT)) //600000
+
+      // Listen for activity events
+      const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
+
+      // Adding event listeners
+      events.forEach(event => {
+        window.addEventListener(event, resetTimer);
+      });
+      
+      return () => {
+        clearTimeout(timer)
+        events.forEach(event => {
+          window.removeEventListener(event, resetTimer);
+        })
+      }
+    },[lastActivityTime])
+
     useEffect(()=>{
         const loadUser = (token) =>{
             const userExist = [{name:'dummy'}]

src/helpers/debounce.js

@@ -0,0 +1,15 @@
+function debounceFunction(func, delay) {
+    let timer;
+    
+    return function(...args) {
+        // Clear the previous timer if the function is called before the delay
+        clearTimeout(timer);
+  
+        // Set a new timer to execute the function after the specified delay
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+  }
+  
+    export default debounceFunction