hmrc-frontend 5.4.0 → 5.7.0

package/hmrc/VERSION.txt

@@ -1 +1 @@
-5.4.0
+5.7.0

package/hmrc/all.js

@@ -40,6 +40,31 @@
     }, _typeof(obj);
   }
 
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -1385,7 +1410,11 @@
   };
 
   ValidateInput.string = function (stringToValidate) {
-    return stringToValidate && ("".concat(stringToValidate) || undefined);
+    return typeof stringToValidate === 'string' ? stringToValidate : undefined;
+  };
+
+  ValidateInput["boolean"] = function (stringToValidate) {
+    return String(stringToValidate).toLowerCase() === 'true';
   };
 
   function RedirectHelper() {}
@@ -1395,11 +1424,12 @@
     window.location.href = url;
   };
 
-  function TimeoutDialog($module) {
+  function TimeoutDialog($module, $sessionActivityService) {
     var options = {};
     var settings = {};
     var cleanupFunctions = [];
     var currentTimer;
+    var sessionActivityService = $sessionActivityService;
     cleanupFunctions.push(function () {
       if (currentTimer) {
         window.clearTimeout(currentTimer);
@@ -1446,15 +1476,31 @@
         message: validate.string(lookupData('data-message')),
         messageSuffix: validate.string(lookupData('data-message-suffix')),
         keepAliveButtonText: validate.string(lookupData('data-keep-alive-button-text')),
-        signOutButtonText: validate.string(lookupData('data-sign-out-button-text'))
+        signOutButtonText: validate.string(lookupData('data-sign-out-button-text')),
+        synchroniseTabs: validate["boolean"](lookupData('data-synchronise-tabs') || false)
       }; // Default timeoutUrl to signOutUrl if not set
 
       options.timeoutUrl = options.timeoutUrl || options.signOutUrl;
       validateInput(options);
       settings = mergeOptionsWithDefaults(options, localisedDefaults);
       setupDialogTimer();
+      listenForSessionActivityAndResetDialogTimer();
     }
 
+    var broadcastSessionActivity = function broadcastSessionActivity() {
+      sessionActivityService.logActivity();
+    };
+
+    var listenForSessionActivityAndResetDialogTimer = function listenForSessionActivityAndResetDialogTimer() {
+      if (settings.synchroniseTabs) {
+        sessionActivityService.onActivity(function (event) {
+          var timeOfActivity = event.timestamp;
+          cleanup();
+          setupDialogTimer(timeOfActivity);
+        });
+      }
+    };
+
     var validateInput = function validateInput(config) {
       var requiredConfig = ['timeout', 'countdown', 'keepAliveUrl', 'signOutUrl'];
       var missingRequiredConfig = [];
@@ -1485,10 +1531,13 @@
     };
 
     var setupDialogTimer = function setupDialogTimer() {
-      settings.signout_time = getDateNow() + settings.timeout * 1000;
+      var timeOfLastActivity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getDateNow();
+      var signoutTime = timeOfLastActivity + settings.timeout * 1000;
+      var delta = getDateNow() - timeOfLastActivity;
+      var secondsUntilTimeoutDialog = settings.timeout - settings.countdown;
       var timeout = window.setTimeout(function () {
-        setupDialog();
-      }, (settings.timeout - settings.countdown) * 1000);
+        setupDialog(signoutTime);
+      }, secondsUntilTimeoutDialog * 1000 - delta);
       cleanupFunctions.push(function () {
         window.clearTimeout(timeout);
       });
@@ -1501,7 +1550,7 @@
       return $wrapper;
     };
 
-    var setupDialog = function setupDialog() {
+    var setupDialog = function setupDialog(signoutTime) {
       var $element = utils.generateDomElementFromString('<div>');
 
       if (settings.title) {
@@ -1536,18 +1585,15 @@
       });
       dialogControl.addCloseHandler(keepAliveAndClose);
       dialogControl.setAriaLabelledBy('hmrc-timeout-heading hmrc-timeout-message');
-      startCountdown($countdownElement, $audibleMessage);
-    };
 
-    var getMillisecondsRemaining = function getMillisecondsRemaining() {
-      return settings.signout_time - getDateNow();
-    };
+      var getMillisecondsRemaining = function getMillisecondsRemaining() {
+        return signoutTime - getDateNow();
+      };
 
-    var getSecondsRemaining = function getSecondsRemaining() {
-      return Math.round(getMillisecondsRemaining() / 1000);
-    };
+      var getSecondsRemaining = function getSecondsRemaining() {
+        return Math.round(getMillisecondsRemaining() / 1000);
+      };
 
-    var startCountdown = function startCountdown($countdownElement, $screenReaderCountdownElement) {
       var getHumanText = function getHumanText(counter) {
         var minutes;
         var visibleMessage;
@@ -1597,7 +1643,7 @@
         var visibleMessage = getHumanText(counter);
         var audibleHumanText = getAudibleHumanText(counter);
         updateTextIfChanged($countdownElement, visibleMessage);
-        updateTextIfChanged($screenReaderCountdownElement, audibleHumanText);
+        updateTextIfChanged($audibleMessage, audibleHumanText);
       };
 
       var getNextTimeout = function getNextTimeout() {
@@ -1629,6 +1675,7 @@
       cleanup();
       setupDialogTimer();
       utils.ajaxGet(settings.keepAliveUrl, function () {});
+      broadcastSessionActivity();
     };
 
     var getDateNow = function getDateNow() {
@@ -3005,6 +3052,37 @@
     clearInterval(this.valueChecker);
   };
 
+  var SessionActivityService = /*#__PURE__*/function () {
+    function SessionActivityService(BrowserBroadcastChannel) {
+      _classCallCheck(this, SessionActivityService);
+
+      this.activityChannel = BrowserBroadcastChannel && new BrowserBroadcastChannel('session-activity');
+    }
+
+    _createClass(SessionActivityService, [{
+      key: "logActivity",
+      value: function logActivity() {
+        if (this.activityChannel) {
+          var event = {
+            timestamp: Date.now()
+          };
+          this.activityChannel.postMessage(event);
+        }
+      }
+    }, {
+      key: "onActivity",
+      value: function onActivity(callback) {
+        if (this.activityChannel) {
+          this.activityChannel.onmessage = function (event) {
+            callback(event.data);
+          };
+        }
+      }
+    }]);
+
+    return SessionActivityService;
+  }();
+
   function initAll() {
     var $AccountMenuSelector = '[data-module="hmrc-account-menu"]';
 
@@ -3012,10 +3090,12 @@
       new AccountMenu($AccountMenuSelector).init();
     }
 
+    var sessionActivityService = new SessionActivityService(window.BroadcastChannel);
+    sessionActivityService.logActivity();
     var $TimeoutDialog = document.querySelector('meta[name="hmrc-timeout-dialog"]');
 
     if ($TimeoutDialog) {
-      new TimeoutDialog($TimeoutDialog).init();
+      new TimeoutDialog($TimeoutDialog, sessionActivityService).init();
     }
 
     var $UserResearchBanner = document.querySelector('[data-module="hmrc-user-research-banner"]');

package/hmrc/components/header/template.njk

@@ -60,7 +60,7 @@
       {% endif %}
       {% if params.navigation | length %}
       <nav class="govuk-header__navigation" aria-label="Top Level Navigation">
-        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation" hidden>Menu</button>
         <ul id="navigation" class="govuk-header__navigation-list{{ (' ' + params.navigationClasses) if params.navigationClasses }}">
           {% for item in params.navigation %}
             {% if item.text or item.html %}

package/hmrc/components/timeout-dialog/session-activity-service.js

@@ -0,0 +1,20 @@
+export default class SessionActivityService {
+  constructor(BrowserBroadcastChannel) {
+    this.activityChannel = BrowserBroadcastChannel && new BrowserBroadcastChannel('session-activity');
+  }
+
+  logActivity() {
+    if (this.activityChannel) {
+      const event = { timestamp: Date.now() };
+      this.activityChannel.postMessage(event);
+    }
+  }
+
+  onActivity(callback) {
+    if (this.activityChannel) {
+      this.activityChannel.onmessage = (event) => {
+        callback(event.data);
+      };
+    }
+  }
+}

package/hmrc/components/timeout-dialog/template.njk

@@ -11,4 +11,5 @@
       data-message="{{ params.message }}"
       data-message-suffix="{{ params.messageSuffix }}"
       data-keep-alive-button-text="{{ params.keepAliveButtonText }}"
-      data-sign-out-button-text="{{ params.signOutButtonText }}" />
+      data-sign-out-button-text="{{ params.signOutButtonText }}"
+      data-synchronise-tabs="{{ params.synchroniseTabs }}"/>

package/hmrc/components/timeout-dialog/timeout-dialog.js

@@ -8,13 +8,14 @@ import ValidateInput from './validate-input';
 import RedirectHelper from './redirectHelper';
 import utils from './utils';
 
-// TODO: rewruite this to follow govuk-frontend's protoytpe module pattern
+// TODO: rewrite this to follow govuk-frontend prototype module pattern
 
-function TimeoutDialog($module) {
+function TimeoutDialog($module, $sessionActivityService) {
   let options = {};
   let settings = {};
   const cleanupFunctions = [];
   let currentTimer;
+  const sessionActivityService = $sessionActivityService;
 
   cleanupFunctions.push(() => {
     if (currentTimer) {
@@ -68,6 +69,9 @@ function TimeoutDialog($module) {
       signOutButtonText: validate.string(
         lookupData('data-sign-out-button-text'),
       ),
+      synchroniseTabs: validate.boolean(
+        lookupData('data-synchronise-tabs') || false,
+      ),
     };
 
     // Default timeoutUrl to signOutUrl if not set
@@ -76,8 +80,23 @@ function TimeoutDialog($module) {
     validateInput(options);
     settings = mergeOptionsWithDefaults(options, localisedDefaults);
     setupDialogTimer();
+    listenForSessionActivityAndResetDialogTimer();
   }
 
+  const broadcastSessionActivity = () => {
+    sessionActivityService.logActivity();
+  };
+
+  const listenForSessionActivityAndResetDialogTimer = () => {
+    if (settings.synchroniseTabs) {
+      sessionActivityService.onActivity((event) => {
+        const timeOfActivity = event.timestamp;
+        cleanup();
+        setupDialogTimer(timeOfActivity);
+      });
+    }
+  };
+
   const validateInput = (config) => {
     const requiredConfig = ['timeout', 'countdown', 'keepAliveUrl', 'signOutUrl'];
     const missingRequiredConfig = [];
@@ -113,12 +132,14 @@ function TimeoutDialog($module) {
     return clone;
   };
 
-  const setupDialogTimer = () => {
-    settings.signout_time = getDateNow() + settings.timeout * 1000;
+  const setupDialogTimer = (timeOfLastActivity = getDateNow()) => {
+    const signoutTime = timeOfLastActivity + settings.timeout * 1000;
 
+    const delta = getDateNow() - timeOfLastActivity;
+    const secondsUntilTimeoutDialog = settings.timeout - settings.countdown;
     const timeout = window.setTimeout(() => {
-      setupDialog();
-    }, (settings.timeout - settings.countdown) * 1000);
+      setupDialog(signoutTime);
+    }, (secondsUntilTimeoutDialog * 1000) - delta);
 
     cleanupFunctions.push(() => {
       window.clearTimeout(timeout);
@@ -133,7 +154,7 @@ function TimeoutDialog($module) {
     return $wrapper;
   };
 
-  const setupDialog = () => {
+  const setupDialog = (signoutTime) => {
     const $element = utils.generateDomElementFromString('<div>');
 
     if (settings.title) {
@@ -189,14 +210,9 @@ function TimeoutDialog($module) {
 
     dialogControl.setAriaLabelledBy('hmrc-timeout-heading hmrc-timeout-message');
 
-    startCountdown($countdownElement, $audibleMessage);
-  };
-
-  const getMillisecondsRemaining = () => settings.signout_time - getDateNow();
+    const getMillisecondsRemaining = () => signoutTime - getDateNow();
+    const getSecondsRemaining = () => Math.round(getMillisecondsRemaining() / 1000);
 
-  const getSecondsRemaining = () => Math.round(getMillisecondsRemaining() / 1000);
-
-  const startCountdown = ($countdownElement, $screenReaderCountdownElement) => {
     const getHumanText = (counter) => {
       let minutes; let
         visibleMessage;
@@ -240,7 +256,7 @@ function TimeoutDialog($module) {
       const audibleHumanText = getAudibleHumanText(counter);
 
       updateTextIfChanged($countdownElement, visibleMessage);
-      updateTextIfChanged($screenReaderCountdownElement, audibleHumanText);
+      updateTextIfChanged($audibleMessage, audibleHumanText);
     };
 
     const getNextTimeout = () => {
@@ -267,8 +283,8 @@ function TimeoutDialog($module) {
   const keepAliveAndClose = () => {
     cleanup();
     setupDialogTimer();
-    utils.ajaxGet(settings.keepAliveUrl, () => {
-    });
+    utils.ajaxGet(settings.keepAliveUrl, () => {});
+    broadcastSessionActivity();
   };
 
   const getDateNow = () => Date.now();

package/hmrc/components/timeout-dialog/validate-input.js

@@ -8,6 +8,8 @@ ValidateInput.int = (stringToValidate) => {
   return Number.isNaN(parsedInt) ? undefined : parsedInt;
 };
 
-ValidateInput.string = (stringToValidate) => stringToValidate && ((`${stringToValidate}`) || undefined);
+ValidateInput.string = (stringToValidate) => (typeof stringToValidate === 'string' ? stringToValidate : undefined);
+
+ValidateInput.boolean = (stringToValidate) => String(stringToValidate).toLowerCase() === 'true';
 
 export default ValidateInput;