Functionality for session timer display

app/assets/javascripts/timeoutPopup.js

@@ -1,15 +1,47 @@
-(function(global ) {
+(function(global) {
     "use strict";
+    hideTimerButtons();
 
-    var cookie = window.GOVUK.getCookie('notify_admin_session');
+    setTimeout(function() {
+        var timeTillSessionEnd = new Date().getTime() + (5 * 60 * 1000);
+        var x = setInterval(function() {
+            var now = new Date().getTime();
+            var difference = timeTillSessionEnd - now;
+            var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+            var seconds = Math.floor((difference % (1000 * 60)) / 1000);
 
-    if (cookie) {
-        window.alert("Session will expire: Cookie Value" + cookie);
-    } else {
-        window.alert('Session has expired');
+            document.getElementById("timerWarning").innerHTML = "Your session will " +
+                "expire in " + minutes + "m " + seconds + "s ";
+            showTimerButtons();
+            document.getElementById("logOutTimer").addEventListener("click", logoutByUser);
+            document.getElementById("extendSessionTimer").addEventListener("click", extendSession);
+            if (difference === 0) {
+                clearInterval(x);
+                redirectToSignin();
+            }
+        }, 1000);
+    }, 25 * 60 * 1000);
+
+    function redirectToSignin() {
+        window.location.href = '/sign-in';
     }
-    console.log(cookie);
 
+    function logoutByUser() {
+        window.location.href = '/sign-out';
+    }
+
+    function extendSession() {
+        window.location.reload();
+    }
+
+    function hideTimerButtons() {
+        document.getElementById("logOutTimer").style.display = 'none';
+        document.getElementById("extendSessionTimer").style.display = 'none';
+    }
+
+    function showTimerButtons() {
+        document.getElementById("logOutTimer").style.display = 'block';
+        document.getElementById("extendSessionTimer").style.display = 'block';
+    }
 
 })(window);
-

app/templates/admin_template.html

@@ -11,6 +11,13 @@
 {% endblock %}
 
 {% block head %}
+    {% block sessionUserWarning %}
+        <div id="sessionTimerContent">
+            <p id="timerWarning"></p>
+            <button id="logOutTimer">Log Out</button>
+            <button id="extendSessionTimer">Extend Session</button>
+        </div>
+    {% endblock %}
   {%- for font in font_paths %}
   <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
   {%- endfor %}
@@ -231,6 +238,6 @@
   {% endblock %}
   <!--[if gt IE 8]><!-->
   <script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
-  <script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
+    <script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
   <!--<![endif]-->
 {% endblock %}

gulpfile.js

@@ -127,6 +127,7 @@ const javascripts = () => {
     paths.src + 'javascripts/updateStatus.js',
     paths.src + 'javascripts/errorBanner.js',
     paths.src + 'javascripts/homepage.js',
+    paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())