Session timeout notification 2 (#12225)

* session-timeout-notification

* add authenticated check before sending notification

* add new line at end of context_processors file

* manage aria-hidden attribute on session notification modal

* remove docker-compose DD_SESSION_COOKIE_AGE tests

---------

Co-authored-by: Kevin Vuong <kevin.vuong@hrsdc-rhdcc.gc>

Author: kevin-vuong99

dojo/context_processors.py

@@ -57,3 +57,22 @@ def bind_announcement(request):
             ).get(user=request.user)
             return {"announcement": user_announcement.announcement}
     return {}
+
+
+def session_expiry_notification(request):
+    import time
+
+    try:
+        if request.user.is_authenticated:
+            last_activity = request.session.get("_last_activity", time.time())
+            expiry_time = last_activity + settings.SESSION_COOKIE_AGE  # When the session will expire
+            warning_time = settings.SESSION_EXPIRE_WARNING  # Show warning X seconds before expiry
+            notify_time = expiry_time - warning_time
+        else:
+            notify_time = None
+    except Exception:
+        return {}
+    else:
+        return {
+            "session_notify_time": notify_time,
+        }

dojo/settings/settings.dist.py

@@ -43,6 +43,7 @@
     DD_SECURE_HSTS_SECONDS=(int, 31536000),  # One year expiration
     DD_SESSION_COOKIE_SECURE=(bool, False),
     DD_SESSION_EXPIRE_AT_BROWSER_CLOSE=(bool, False),
+    DD_SESSION_EXPIRE_WARNING=(int, 300),  # warning 5 mins before expiration
     DD_SESSION_COOKIE_AGE=(int, 1209600),  # 14 days
     DD_CSRF_COOKIE_SECURE=(bool, False),
     DD_CSRF_TRUSTED_ORIGINS=(list, []),
@@ -756,6 +757,7 @@ def generate_url(scheme, double_slashes, user, password, host, port, path, param
     SECURE_HSTS_INCLUDE_SUBDOMAINS = env("DD_SECURE_HSTS_INCLUDE_SUBDOMAINS")
 
 SESSION_EXPIRE_AT_BROWSER_CLOSE = env("DD_SESSION_EXPIRE_AT_BROWSER_CLOSE")
+SESSION_EXPIRE_WARNING = env("DD_SESSION_EXPIRE_WARNING")
 SESSION_COOKIE_AGE = env("DD_SESSION_COOKIE_AGE")
 
 # ------------------------------------------------------------------------------
@@ -858,6 +860,7 @@ def generate_url(scheme, double_slashes, user, password, host, port, path, param
                 "dojo.context_processors.bind_system_settings",
                 "dojo.context_processors.bind_alert_count",
                 "dojo.context_processors.bind_announcement",
+                "dojo.context_processors.session_expiry_notification",
             ],
         },
     },

dojo/templates/base.html

@@ -1032,6 +1032,26 @@ <h3 class="no-margin-top" style="padding-bottom: 5px;">
             </div>
             <!-- /.dojo-modals-wrapper -->
 
+            <!-- Session Timeout Modal -->
+            <div class="modal fade" id="sessionTimeoutModal" tabindex="-1" role="dialog" aria-labelledby="sessionModalLabel" aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header"> 
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="sessionModalLabel">Session Expiring Soon</h4>
+                    </div>
+                    <div class="modal-body">
+                        Your session is about to expire due to inactivity.
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+                </div>
+            </div>
+
             <!-- #footer-wrapper -->
             <div id="footer-wrapper">
             {% block footer %}
@@ -1083,6 +1103,27 @@ <h3 class="no-margin-top" style="padding-bottom: 5px;">
                     function() { $(this).popover('show'); }, // hover
                     function() { $(this).popover('hide'); } // unhover
                 );
+                
+                {% if request.user.is_authenticated %}
+                    function session_notifcation() {
+                        var warningTime = "{{ session_notify_time|default:0|escapejs }}"; // When the warning will show
+                        var currentTime = Math.floor(Date.now() / 1000);  // Get current timestamp in seconds
+                        var timeout = warningTime - currentTime; // how many seconds until warning needs to show
+
+                        setTimeout(() => {
+                            $('#sessionTimeoutModal').modal('show');
+                        }, timeout * 1000);
+
+                    }  
+                    session_notifcation();
+                    $('#sessionTimeoutModal').on('show.bs.modal', function (event) {
+                        $(this).attr('aria-hidden', 'false');
+                    })
+                    $('#sessionTimeoutModal').on('hidden.bs.modal', function (event) {
+                        $(this).attr('aria-hidden', 'true');
+                    })
+                {% endif %}
+
                 {% if request.user.is_authenticated and not 'DISABLE_ALERT_COUNTER'|setting_enabled %}
                     function get_alerts() {
                         $('.dropdown-alerts').html('<div class="text-center"><i class="fa-solid fa-spinner fa-spin"></i></div>');