✨Warning on session expair

frontend/package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
+    "react-idle-timer": "^5.7.2",
     "react-router-dom": "^6.20.0",
     "react-select": "^5.8.0",
     "react-toggle-dark-mode": "^1.1.1",

frontend/src/components/Utils/IdleTimer.jsx

@@ -0,0 +1,71 @@
+import React, {useState } from 'react'
+import { useIdleTimer } from 'react-idle-timer'
+import {
+  MDBBtn,
+  MDBModal,
+  MDBModalDialog,
+  MDBModalContent,
+  MDBModalHeader,
+  MDBModalTitle,
+  MDBModalBody,
+  MDBModalFooter,
+} from 'mdb-react-ui-kit';
+
+export default function App() {
+  const [timeoutModal, setTimeoutModal] = useState(false);
+  const [state, setState] = useState('Active')
+
+  const handleIdle = () => {
+    setTimeoutModal(false)
+    window.location.reload()
+  }
+
+  const onIdle = () => {
+    setState('Idle')
+    setTimeoutModal(true)
+  }
+
+  const {
+  } = useIdleTimer({
+    onIdle,
+    timeout: 3600 * 1000,
+    crossTab: true,
+    leaderElection: true,
+    syncTimers: 200
+  })
+
+  return (
+    <>
+     {state === 'Idle' && (
+        <MDBModal
+          open={timeoutModal}
+          tabIndex="-1"
+        >
+          <MDBModalDialog>
+            <MDBModalContent className="message-modal-content">
+              <MDBModalHeader className="bg-primary text-white">
+                <MDBModalTitle>Session Timeout</MDBModalTitle>
+                <MDBBtn
+                  className="btn-close btn-close-white"
+                  color="none"
+                  onClick={handleIdle}
+                ></MDBBtn>
+              </MDBModalHeader>
+              <MDBModalBody className='text-center'>
+                <h5> Your login session has expired due to inactivity⌛</h5>
+                <h5> Please login again.</h5>
+                <h5> Don't worry, your code is saved!</h5>
+              </MDBModalBody>
+
+              <MDBModalFooter>
+                <MDBBtn color="secondary" onClick={handleIdle}>
+                  OK
+                </MDBBtn>
+              </MDBModalFooter>
+            </MDBModalContent>
+          </MDBModalDialog>
+        </MDBModal>
+      )}
+    </>
+  )
+}

frontend/src/components/Utils/Nav.jsx

@@ -22,6 +22,7 @@ import CustomSnackbar from './Modals/CustomSnackbar.jsx';
 import ConfirmModal from './Modals/ConfirmModal.jsx';
 import { downloadUserData, deleteProfile } from '../../api/playgroundApi.js';
 import axiosAuth from '../../api/axiosAuth.js';
+import IdleTimer from './IdleTimer.jsx'
 
 /**
  * Display the header and navigation bar.
@@ -138,6 +139,7 @@ export default function Navbar({ setEditorValue, setLanguage }) {
         Are you sure you want to delete your profile?`}
         onConfirm={handleUserProfileDelete}
       />
+      <IdleTimer />
       <header className='fixed-top'>
         <MDBNavbar expand='lg' light bgColor='light'>
           <MDBContainer >