[ERP-877] Replace javascript alert that notifies the user of their se…

…ssion about to timeout with a Bootstrap modal. * Add modal * Add countdown component to modal that notifies the user approx how many seconds are left in their session * redirect to the logout screen after it is deemed that a user's session has timed out.
eresearchqut · Dec 1, 2023 · 304538e · 304538e
1 parent f83f291
commit 304538e
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/rdrf/rdrf/templates/rdrf_cdes/form.html b/rdrf/rdrf/templates/rdrf_cdes/form.html
@@ -12,6 +12,7 @@
 {% load i18n admin_urls static admin_modify %}
 {% load translate %}
 {% load session_refresh_interval %}
+{% load session_refresh_lead_time %}
 
 
 {% block extrastyle %}
@@ -540,19 +541,74 @@
 
  </div>
 
+    <div id="sessionTimeoutModal" class="modal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{% trans "Your session is about to expire." %}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
+                </div>
+                <div class="modal-body">
+                    <p>{% trans "Your session will expire in " %}<strong id="sessionExpiryTimeout">X seconds</strong>.</p>
+                    <p>{% trans "Press 'OK' and save your changes or reload the page to continue using this session." %}</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{% trans "OK" %}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
 
 <script>
     $(document).ready(function () {
+
         $(":input").not(':input[type=checkbox], :input[type=radio], :input[type=button], :input[type=submit], :input[type=reset]').addClass("form-control");
         $("textarea").addClass("form-control");
         $("select").addClass("form-select");
         $("label[for*='-clear']").removeClass();
 
-        var session_refresh_interval = setInterval( function() {
-            $.get("{% url 'session_refresh' %}", function( data ) {
+        const $sessionTimeoutModal = $('#sessionTimeoutModal');
+        const sessionTimeoutModal = new bootstrap.Modal($sessionTimeoutModal, {backdrop: "static"});
+
+        const showSessionTimeoutModal = () => {
+            const updateSessionTimeoutMessage = (secondsLeft) => {
+                $sessionTimeoutModal.find("#sessionExpiryTimeout").text(`${secondsLeft} ${gettext("seconds")}`);
+            }
+
+            const logout = () => {
+                window.location.href = '{% url "logout" %}?next={% url "login_router" %}'
+            }
+
+            let sessionExpiryCountdownInterval;
+            let sessionExpiryIntervalDelayInSeconds = 30;
+            let sessionExpiresInSeconds = parseInt("{% session_refresh_lead_time %}");
+
+            const sessionExpiryCountdown = () => {
+                if (sessionExpiresInSeconds >= 0) {
+                    updateSessionTimeoutMessage(sessionExpiresInSeconds);
+                    if (sessionExpiresInSeconds === 30) {
+                        clearInterval(sessionExpiryCountdownInterval);
+                        sessionExpiryIntervalDelayInSeconds = 10;
+                        sessionExpiryCountdownInterval = setInterval(sessionExpiryCountdown, sessionExpiryIntervalDelayInSeconds * 1000);
+                    }
+                    sessionExpiresInSeconds -= sessionExpiryIntervalDelayInSeconds;
+                } else {
+                    setTimeout( ()=>{ logout() }, 10 * 1000);
+                }
+            }
+
+            sessionExpiryCountdownInterval = setInterval(sessionExpiryCountdown, sessionExpiryIntervalDelayInSeconds * 1000);
+            sessionExpiryCountdown();
+            sessionTimeoutModal.show();
+        }
+
+        const session_refresh_interval = setInterval( function() {
+            $.get("{% url 'session_refresh' %}", function( data, status, jqXHR ) {
                 if (data && !data.success) {
                     clearInterval(session_refresh_interval);
-                    alert("{% trans "Your session is about to expire. Press 'OK' and submit your changes or reload the page to continue using this session" %}");
+
+                    showSessionTimeoutModal();
                 }
             }).fail(function() {
                 alert("{% trans "Error while refreshing session. Please check your connection" %}");

diff --git a/rdrf/rdrf/templatetags/session_refresh_interval.py b/rdrf/rdrf/templatetags/session_refresh_interval.py
@@ -6,5 +6,5 @@
 
 @register.simple_tag
 def session_refresh_interval():
-    # 15 seconds before session expiration in ms
+    # Interval is every X seconds (SESSION_REFRESH_LEAD_TIME), before the session is due to expire (SESSION_COOKIE_AGE)
     return (settings.SESSION_COOKIE_AGE - settings.SESSION_REFRESH_LEAD_TIME) * 1000
diff --git a/rdrf/rdrf/templatetags/session_refresh_lead_time.py b/rdrf/rdrf/templatetags/session_refresh_lead_time.py
@@ -0,0 +1,9 @@
+from django import template
+from django.conf import settings
+
+register = template.Library()
+
+
+@register.simple_tag
+def session_refresh_lead_time():
+    return settings.SESSION_REFRESH_LEAD_TIME