Add timeout warning

app/assets/javascripts/packs/application.js

@@ -0,0 +1,4 @@
+
+
+import '../../../javascripts/timeout_warning'; // Import the timeout warning logic
+// ... other imports

app/assets/javascripts/timeout_warning.js

@@ -0,0 +1,82 @@
+document.addEventListener("DOMContentLoaded", function() {
+  const timeoutWarningTime = 60 * 1000;
+  const sessionTimeout = 90 * 1000;
+
+  let timeoutId;
+  let modal;
+
+  function createTimeoutModal() {
+    modal = document.createElement('div');
+    modal.id = 'timeoutModal';
+    modal.style.display = 'none';
+    modal.style.position = 'fixed';
+    modal.style.top = '0';
+    modal.style.left = '0';
+    modal.style.width = '100%';
+    modal.style.height = '100%';
+    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    modal.style.zIndex = '1000';
+
+    const modalContent = document.createElement('div');
+    modalContent.style.position = 'absolute';
+    modalContent.style.top = '50%';
+    modalContent.style.left = '50%';
+    modalContent.style.transform = 'translate(-50%, -50%)';
+    modalContent.style.backgroundColor = 'white';
+    modalContent.style.padding = '20px';
+    modalContent.style.borderRadius = '5px';
+    modalContent.style.textAlign = 'center';
+
+    const message = document.createElement('p');
+    message.textContent = 'Your session will time out soon. Click Continue to keep working.';
+    modalContent.appendChild(message);
+
+    const continueButton = document.createElement('button');
+    continueButton.textContent = 'Continue';
+    continueButton.addEventListener('click', continueSession);
+    modalContent.appendChild(continueButton);
+
+    modal.appendChild(modalContent);
+    document.body.appendChild(modal);
+  }
+
+
+
+  function showTimeoutModal() {
+
+    console.log("Show timeout warning modal!");
+    modal.style.display = 'block';
+  }
+
+  function resetTimeout() {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(showTimeoutModal, sessionTimeout - timeoutWarningTime);
+  }
+
+  function continueSession() {
+
+    fetch('/extend_session')
+      .then(response => {
+        if (response.ok) {
+          console.log("Session extended");
+          modal.style.display = 'none';
+          resetTimeout();
+        } else {
+          console.error("Failed to extend session");
+
+        }
+      })
+      .catch(error => {
+        console.error("Error extending session:", error);
+
+      });
+  }
+
+  createTimeoutModal();
+
+  resetTimeout();
+
+  document.addEventListener("mousemove", resetTimeout);
+  document.addEventListener("keypress", resetTimeout);
+});
+

app/assets/stylesheets/application.scss

@@ -30,6 +30,12 @@ $govuk-font-url-function: "font-url";
 @import "./utilities/colours";
 @import "./components/*";
 @import "./utilities/*";
+/* ... other imports */
+/* ... other imports */
+// Import timeout warning styles
+@import "timeout_warning";
+
+
 
 // TODO: This shouldn't be needed, but fixes the display for actions
 // within a summary list, like on the team members page

app/assets/stylesheets/timeout_warning.scss

@@ -0,0 +1,23 @@
+#timeoutModal {
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: none;
+
+  & > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+  }
+}
+

app/controllers/application_controller.rb

@@ -95,4 +95,9 @@ def sidebar
   def authorise_manage_locations
     redirect_to(root_path) unless current_user.can_manage_locations?(current_organisation)
   end
+
+  def extend_session
+    session[:expires_at] = 2.minutes.from_now  # Reset the session expiry
+    render json: { status: 'ok' } # Respond with success
+  end
 end

app/javascripts/timeout_warning.js

@@ -0,0 +1,87 @@
+// app/javascript/timeout_warning.js
+
+document.addEventListener("DOMContentLoaded", function() {
+  const timeoutWarningTime = 1 * 60 * 1000; // 5 minutes before timeout
+  const sessionTimeout = 2 * 60 * 1000; // 30 minutes total session
+
+  let timeoutId;
+  let modal;
+
+  function createTimeoutModal() {
+    modal = document.createElement('div');
+    modal.id = 'timeoutModal';
+    modal.style.display = 'none';  // Initially hidden
+    modal.style.position = 'fixed';
+    modal.style.top = '0';
+    modal.style.left = '0';
+    modal.style.width = '100%';
+    modal.style.height = '100%';
+    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Semi-transparent background
+    modal.style.zIndex = '1000'; // Ensure it's on top
+
+    const modalContent = document.createElement('div');
+    modalContent.style.position = 'absolute';
+    modalContent.style.top = '50%';
+    modalContent.style.left = '50%';
+    modalContent.style.transform = 'translate(-50%, -50%)';
+    modalContent.style.backgroundColor = 'white';
+    modalContent.style.padding = '20px';
+    modalContent.style.borderRadius = '5px';
+    modalContent.style.textAlign = 'center';
+
+    const message = document.createElement('p');
+    message.textContent = 'Your session will time out soon. Click Continue to keep working.';
+    modalContent.appendChild(message);
+
+    const continueButton = document.createElement('button');
+    continueButton.textContent = 'Continue';
+    continueButton.addEventListener('click', continueSession);
+    modalContent.appendChild(continueButton);
+
+    modal.appendChild(modalContent);
+    document.body.appendChild(modal);
+  }
+
+
+
+  function showTimeoutModal() {
+    // Code to display the modal
+    console.log("Show timeout warning modal!");
+    modal.style.display = 'block'; // Make modal visible
+  }
+
+  function resetTimeout() {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(showTimeoutModal, sessionTimeout - timeoutWarningTime);
+  }
+
+  function continueSession() {
+    // Call API to extend the session (if needed)
+    fetch('/extend_session') //Adjust based on your backend route
+      .then(response => {
+        if (response.ok) {
+          console.log("Session extended");
+          modal.style.display = 'none'; // Hide modal
+          resetTimeout(); // Restart the timer
+        } else {
+          console.error("Failed to extend session");
+          // Handle error (e.g., display an error message)
+        }
+      })
+      .catch(error => {
+        console.error("Error extending session:", error);
+        //Handle error
+      });
+  }
+
+  //Initialize the modal on load
+  createTimeoutModal();
+
+  // Start the timer when the page loads
+  resetTimeout();
+
+  // Reset the timer on user activity
+  document.addEventListener("mousemove", resetTimeout);
+  document.addEventListener("keypress", resetTimeout);
+});
+

config/routes.rb

@@ -102,8 +102,11 @@
     end
     resource :wifi_admin_search, only: %i[show create]
   end
+  # ... other routes
+  post '/extend_session', to: 'application#extend_session'
+
+%w[404 422 500].each do |code|
+  get code, to: "application#error", code: code
+end
 
-  %w[404 422 500].each do |code|
-    get code, to: "application#error", code:
-  end
 end