hof 20.3.11 → 20.4.0-beta-session-timeout

package/frontend/themes/gov-uk/client-js/dialog/index.js

@@ -0,0 +1,358 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
+'use strict';
+
+require('./utils');
+
+const aria = window.aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @description
+ *  Key code constants
+ */
+aria.KeyCode = {
+  BACKSPACE: 8,
+  TAB: 9,
+  RETURN: 13,
+  SHIFT: 16,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+  DELETE: 46
+};
+
+(function () {
+  // eslint-disable-next-line no-console
+  console.log('TEST DIALOG.js', aria);
+  /*
+   * When util functions move focus around, set this true so the focus listener
+   * can ignore the events.
+   */
+  aria.Utils.IgnoreUtilFocusChanges = false;
+
+  aria.Utils.dialogOpenClass = 'has-dialog';
+
+  /**
+   * @description Set focus on descendant nodes until the first focusable element is
+   *       found.
+   * @param element
+   *          DOM node for which to find the first focusable descendant.
+   * @returns {boolean}
+   *  true if a focusable element is found and focus is set.
+   */
+  aria.Utils.focusFirstDescendant = function (element) {
+    for (let i = 0; i < element.childNodes.length; i++) {
+      const child = element.childNodes[i];
+      if (
+        aria.Utils.attemptFocus(child) ||
+        aria.Utils.focusFirstDescendant(child)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }; // end focusFirstDescendant
+
+  /**
+   * @description Find the last descendant node that is focusable.
+   * @param element
+   *          DOM node for which to find the last focusable descendant.
+   * @returns {boolean}
+   *  true if a focusable element is found and focus is set.
+   */
+  aria.Utils.focusLastDescendant = function (element) {
+    for (let i = element.childNodes.length - 1; i >= 0; i--) {
+      const child = element.childNodes[i];
+      if (
+        aria.Utils.attemptFocus(child) ||
+        aria.Utils.focusLastDescendant(child)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }; // end focusLastDescendant
+
+  /**
+   * @description Set Attempt to set focus on the current node.
+   * @param element
+   *          The node to attempt to focus on.
+   * @returns {boolean}
+   *  true if element is focused.
+   */
+  aria.Utils.attemptFocus = function (element) {
+    if (!aria.Utils.isFocusable(element)) {
+      return false;
+    }
+
+    aria.Utils.IgnoreUtilFocusChanges = true;
+    try {
+      element.focus();
+    } catch (e) {
+      // continue regardless of error
+    }
+    aria.Utils.IgnoreUtilFocusChanges = false;
+    return document.activeElement === element;
+  }; // end attemptFocus
+
+  /* Modals can open modals. Keep track of them with this array. */
+  aria.OpenDialogList = aria.OpenDialogList || new Array(0);
+
+  /**
+   * @returns {object} the last opened dialog (the current dialog)
+   */
+  aria.getCurrentDialog = function () {
+    if (aria.OpenDialogList && aria.OpenDialogList.length) {
+      return aria.OpenDialogList[aria.OpenDialogList.length - 1];
+    }
+  };
+
+  aria.closeCurrentDialog = function () {
+    const currentDialog = aria.getCurrentDialog();
+    if (currentDialog) {
+      currentDialog.close();
+      return true;
+    }
+
+    return false;
+  };
+
+  aria.handleEscape = function (event) {
+    const key = event.which || event.keyCode;
+
+    if (key === aria.KeyCode.ESC && aria.closeCurrentDialog()) {
+      event.stopPropagation();
+    }
+  };
+
+  document.addEventListener('keyup', aria.handleEscape);
+
+  /**
+   * @class
+   * @description Dialog object providing modal focus management.
+   *
+   * Assumptions: The element serving as the dialog container is present in the
+   * DOM and hidden. The dialog container has role='dialog'.
+   * @param dialogId
+   *          The ID of the element serving as the dialog container.
+   * @param focusAfterClosed
+   *          Either the DOM node or the ID of the DOM node to focus when the
+   *          dialog closes.
+   * @param focusFirst
+   *          Optional parameter containing either the DOM node or the ID of the
+   *          DOM node to focus when the dialog opens. If not specified, the
+   *          first focusable element in the dialog will receive focus.
+   */
+  aria.Dialog = function (dialogId, focusAfterClosed, focusFirst) {
+    this.dialogNode = document.getElementById(dialogId);
+    if (this.dialogNode === null) {
+      throw new Error('No element found with id="' + dialogId + '".');
+    }
+
+    const validRoles = ['dialog', 'alertdialog'];
+    const isDialog = (this.dialogNode.getAttribute('role') || '')
+      .trim()
+      .split(/\s+/g)
+      .some(function (token) {
+        return validRoles.some(function (role) {
+          return token === role;
+        });
+      });
+    if (!isDialog) {
+      throw new Error(
+        'Dialog() requires a DOM element with ARIA role of dialog or alertdialog.'
+      );
+    }
+
+    // Wrap in an individual backdrop element if one doesn't exist
+    // Native <dialog> elements use the ::backdrop pseudo-element, which
+    // works similarly.
+    const backdropClass = 'dialog-backdrop';
+    if (this.dialogNode.parentNode.classList.contains(backdropClass)) {
+      this.backdropNode = this.dialogNode.parentNode;
+    } else {
+      this.backdropNode = document.createElement('div');
+      this.backdropNode.className = backdropClass;
+      this.dialogNode.parentNode.insertBefore(
+        this.backdropNode,
+        this.dialogNode
+      );
+      this.backdropNode.appendChild(this.dialogNode);
+    }
+    this.backdropNode.classList.add('active');
+
+    // Disable scroll on the body element
+    document.body.classList.add(aria.Utils.dialogOpenClass);
+
+    if (typeof focusAfterClosed === 'string') {
+      this.focusAfterClosed = document.getElementById(focusAfterClosed);
+    } else if (typeof focusAfterClosed === 'object') {
+      this.focusAfterClosed = focusAfterClosed;
+    } else {
+      throw new Error(
+        'the focusAfterClosed parameter is required for the aria.Dialog constructor.'
+      );
+    }
+
+    if (typeof focusFirst === 'string') {
+      this.focusFirst = document.getElementById(focusFirst);
+    } else if (typeof focusFirst === 'object') {
+      this.focusFirst = focusFirst;
+    } else {
+      this.focusFirst = null;
+    }
+
+    // Bracket the dialog node with two invisible, focusable nodes.
+    // While this dialog is open, we use these to make sure that focus never
+    // leaves the document even if dialogNode is the first or last node.
+    const preDiv = document.createElement('div');
+    this.preNode = this.dialogNode.parentNode.insertBefore(
+      preDiv,
+      this.dialogNode
+    );
+    this.preNode.tabIndex = 0;
+    const postDiv = document.createElement('div');
+    this.postNode = this.dialogNode.parentNode.insertBefore(
+      postDiv,
+      this.dialogNode.nextSibling
+    );
+    this.postNode.tabIndex = 0;
+
+    // If this modal is opening on top of one that is already open,
+    // get rid of the document focus listener of the open dialog.
+    if (aria.OpenDialogList.length > 0) {
+      aria.getCurrentDialog().removeListeners();
+    }
+
+    this.addListeners();
+    aria.OpenDialogList.push(this);
+    this.clearDialog();
+    this.dialogNode.className = 'default_dialog'; // make visible
+
+    if (this.focusFirst) {
+      this.focusFirst.focus();
+    } else {
+      aria.Utils.focusFirstDescendant(this.dialogNode);
+    }
+
+    this.lastFocus = document.activeElement;
+  }; // end Dialog constructor
+
+  aria.Dialog.prototype.clearDialog = function () {
+    Array.prototype.map.call(
+      this.dialogNode.querySelectorAll('input'),
+      function (input) {
+        input.value = '';
+      }
+    );
+  };
+
+  /**
+   * @description
+   *  Hides the current top dialog,
+   *  removes listeners of the top dialog,
+   *  restore listeners of a parent dialog if one was open under the one that just closed,
+   *  and sets focus on the element specified for focusAfterClosed.
+   */
+  aria.Dialog.prototype.close = function () {
+    aria.OpenDialogList.pop();
+    this.removeListeners();
+    aria.Utils.remove(this.preNode);
+    aria.Utils.remove(this.postNode);
+    this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
+    this.focusAfterClosed.focus();
+
+    // If a dialog was open underneath this one, restore its listeners.
+    if (aria.OpenDialogList.length > 0) {
+      aria.getCurrentDialog().addListeners();
+    } else {
+      document.body.classList.remove(aria.Utils.dialogOpenClass);
+    }
+  }; // end close
+
+  /**
+   * @description
+   *  Hides the current dialog and replaces it with another.
+   * @param newDialogId
+   *  ID of the dialog that will replace the currently open top dialog.
+   * @param newFocusAfterClosed
+   *  Optional ID or DOM node specifying where to place focus when the new dialog closes.
+   *  If not specified, focus will be placed on the element specified by the dialog being replaced.
+   * @param newFocusFirst
+   *  Optional ID or DOM node specifying where to place focus in the new dialog when it opens.
+   *  If not specified, the first focusable element will receive focus.
+   */
+  aria.Dialog.prototype.replace = function (
+    newDialogId,
+    newFocusAfterClosed,
+    newFocusFirst
+  ) {
+    aria.OpenDialogList.pop();
+    this.removeListeners();
+    aria.Utils.remove(this.preNode);
+    aria.Utils.remove(this.postNode);
+    this.dialogNode.className = 'hidden';
+    this.backdropNode.classList.remove('active');
+
+    const focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
+    new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
+  }; // end replace
+
+  aria.Dialog.prototype.addListeners = function () {
+    document.addEventListener('focus', this.trapFocus, true);
+  }; // end addListeners
+
+  aria.Dialog.prototype.removeListeners = function () {
+    document.removeEventListener('focus', this.trapFocus, true);
+  }; // end removeListeners
+
+  aria.Dialog.prototype.trapFocus = function (event) {
+    if (aria.Utils.IgnoreUtilFocusChanges) {
+      return;
+    }
+    const currentDialog = aria.getCurrentDialog();
+    if (currentDialog.dialogNode.contains(event.target)) {
+      currentDialog.lastFocus = event.target;
+    } else {
+      aria.Utils.focusFirstDescendant(currentDialog.dialogNode);
+      if (currentDialog.lastFocus === document.activeElement) {
+        aria.Utils.focusLastDescendant(currentDialog.dialogNode);
+      }
+      currentDialog.lastFocus = document.activeElement;
+    }
+  }; // end trapFocus
+
+  window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
+    new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
+  };
+
+  window.closeDialog = function (closeButton) {
+    const topDialog = aria.getCurrentDialog();
+    if (topDialog.dialogNode.contains(closeButton)) {
+      topDialog.close();
+    }
+  }; // end closeDialog
+
+  window.replaceDialog = function (
+    newDialogId,
+    newFocusAfterClosed,
+    newFocusFirst
+  ) {
+    const topDialog = aria.getCurrentDialog();
+    if (topDialog.dialogNode.contains(document.activeElement)) {
+      topDialog.replace(newDialogId, newFocusAfterClosed, newFocusFirst);
+    }
+  }; // end replaceDialog
+})();

package/frontend/themes/gov-uk/client-js/dialog/utils.js

@@ -0,0 +1,114 @@
+'use strict';
+/**
+ * @namespace aria
+ */
+
+window.aria = window.aria || {};
+
+(function () {
+  // eslint-disable-next-line no-console
+  // console.log('TEST UTILS.js', aria);
+})();
+
+window.aria.Utils = window.aria.Utils || {};
+
+// Polyfill src https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+window.aria.Utils.matches = function (element, selector) {
+  if (!Element.prototype.matches) {
+    Element.prototype.matches =
+      Element.prototype.matchesSelector ||
+      Element.prototype.mozMatchesSelector ||
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.oMatchesSelector ||
+      Element.prototype.webkitMatchesSelector ||
+      function (s) {
+        const matches = element.parentNode.querySelectorAll(s);
+        let i = matches.length;
+        while (--i >= 0 && matches.item(i) !== this) {
+          // empty
+        }
+        return i > -1;
+      };
+  }
+
+  return element.matches(selector);
+};
+
+window.aria.Utils.remove = function (item) {
+  if (item.remove && typeof item.remove === 'function') {
+    return item.remove();
+  }
+  if (
+    item.parentNode &&
+    item.parentNode.removeChild &&
+    typeof item.parentNode.removeChild === 'function'
+  ) {
+    return item.parentNode.removeChild(item);
+  }
+  return false;
+};
+
+window.aria.Utils.isFocusable = function (element) {
+  if (element.tabIndex < 0) {
+    return false;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+window.aria.Utils.getAncestorBySelector = function (element, selector) {
+  if (!window.aria.Utils.matches(element, selector + ' ' + element.tagName)) {
+    // Element is not inside an element that matches selector
+    return null;
+  }
+
+  // Move up the DOM tree until a parent matching the selector is found
+  let currentNode = element;
+  let ancestor = null;
+  while (ancestor === null) {
+    if (window.aria.Utils.matches(currentNode.parentNode, selector)) {
+      ancestor = currentNode.parentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return ancestor;
+};
+
+window.aria.Utils.hasClass = function (element, className) {
+  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
+};
+
+window.aria.Utils.addClass = function (element, className) {
+  if (!window.aria.Utils.hasClass(element, className)) {
+    element.className += ' ' + className;
+  }
+};
+
+window.aria.Utils.removeClass = function (element, className) {
+  const classRegex = new RegExp('(\\s|^)' + className + '(\\s|$)');
+  element.className = element.className.replace(classRegex, ' ').trim();
+};
+
+window.aria.Utils.bindMethods = function (object /* , ...methodNames */) {
+  const methodNames = Array.prototype.slice.call(arguments, 1);
+  methodNames.forEach(function (method) {
+    object[method] = object[method].bind(object);
+  });
+};

package/frontend/themes/gov-uk/client-js/index.js

@@ -11,6 +11,7 @@ var validation = toolkit.validation;
 var GOVUK = require('govuk-frontend');
 GOVUK.initAll();
 window.GOVUK = GOVUK;
+var dialog = require('./dialog');
 var skipToMain = require('./skip-to-main');
 var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');

package/frontend/themes/gov-uk/styles/govuk.scss

@@ -26,6 +26,7 @@ $path: "/public/images/" !default;
 @import "cookie-settings";
 @import "check_your_answers";
 @import "pdf";
+@import "session_timeout";
 
 // Modules
 @import "modules/validation";

package/frontend/themes/gov-uk/styles/session_timeout.scss

@@ -0,0 +1,138 @@
+//autocomplete styling
+.tt-menu {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  width: 65%;
+}
+
+.tt-suggestion {
+padding: 0.5em;
+
+&:hover,
+&.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+&:hover {
+  cursor: pointer;
+}
+}
+
+.twitter-typeahead {
+width: 100%;
+}
+
+.hidden {
+display: none;
+}
+
+[role="dialog"] {
+box-sizing: border-box;
+padding: 15px;
+border: 1px solid #000;
+background-color: #fff;
+min-height: 100vh;
+}
+
+@media screen and (min-width: 640px) {
+[role="dialog"] {
+  position: absolute;
+  top: 25vh;
+  left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
+  transform: translateX(
+      -50%
+  ); /* move backwards 50% of this element's width */
+  min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
+  min-height: auto;
+  box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
+}
+}
+
+.dialog_form {
+margin: 15px;
+}
+
+.dialog_form .label_text {
+box-sizing: border-box;
+padding-right: 0.5em;
+display: inline-block;
+font-size: 16px;
+font-weight: bold;
+width: 30%;
+text-align: right;
+}
+
+.dialog_form .label_info {
+box-sizing: border-box;
+padding-right: 0.5em;
+font-size: 12px;
+width: 30%;
+text-align: right;
+display: inline-block;
+}
+
+.dialog_form_item {
+margin: 10px 0;
+font-size: 0;
+}
+
+.dialog_form_item .wide_input {
+box-sizing: border-box;
+max-width: 70%;
+width: 27em;
+}
+
+.dialog_form_actions {
+text-align: right;
+padding: 0 20px 20px;
+}
+
+.dialog_close_button {
+float: right;
+position: absolute;
+top: 10px;
+left: 92%;
+height: 25px;
+}
+
+.dialog_close_button img {
+border: 0;
+}
+
+.dialog_desc {
+padding: 10px 20px;
+}
+
+/* native <dialog> element uses the ::backdrop pseudo-element */
+
+/* dialog::backdrop, */
+.dialog-backdrop {
+display: none;
+position: fixed;
+overflow-y: auto;
+top: 0;
+right: 0;
+bottom: 0;
+left: 0;
+z-index: 1;
+}
+
+@media screen and (min-width: 640px) {
+.dialog-backdrop {
+  background: rgb(0 0 0 / 30%);
+}
+}
+
+.dialog-backdrop.active {
+display: block;
+}
+
+.no-scroll {
+overflow-y: auto !important;
+}
+
+/* this is added to the body when a dialog is open */
+.has-dialog {
+overflow: hidden;
+}

package/lib/ga-tag.js

@@ -2,6 +2,16 @@
 
 const _ = require('lodash');
 
+const convertToGTMPage = text => {
+  // Remove leading and trailing slashes
+  let str = text.replace(/^\/|\/$/g, '');
+  // Replace hyphens with spaces and capitalize each word
+  str = str.replace(/-+/g, ' ').replace(/(^|\s)\S/g, function (match) {
+    return match.toUpperCase();
+  });
+  return str;
+};
+
 const pageView = (path, pageMap) => pageMap.get(path) || path;
 
 const createUris = routes => {
@@ -42,19 +52,35 @@ const setupPageMap = routes => {
 module.exports = (app, config) => {
   const gaTagId = config.gaTagId;
   const ga4TagId = config.ga4TagId;
+  const gtm = config.gtm;
   const gaCrossDomainTrackingTagId = config.gaCrossDomainTrackingTagId;
   const routes = config.routes;
 
-  if (gaTagId || ga4TagId) {
+  if (gaTagId || ga4TagId || gtm.tagId) {
     const pageMap = setupPageMap(routes);
 
     app.use((req, res, next) => {
-      res.locals.gaAllowDebug = config.env === 'development';
-      res.locals.gaTagId = gaTagId;
-      res.locals.ga4TagId = ga4TagId;
-      res.locals.gaCrossDomainTrackingTagId = gaCrossDomainTrackingTagId;
-      res.locals['ga-id'] = gaTagId;
-      res.locals['ga-page'] = pageView(req.path, pageMap);
+      const page = pageView(req.path, pageMap);
+
+      // Preparing common res.locals properties
+      const properties = {
+        gaAllowDebug: config.env === 'development',
+        gaTagId: gaTagId,
+        ga4TagId: ga4TagId,
+        gaCrossDomainTrackingTagId: gaCrossDomainTrackingTagId,
+        'ga-id': gaTagId,
+        'ga-page': page
+      };
+
+      // Adding extra properties if a GTM TAG is available
+      if (gtm.tagId) {
+        gtm.config.pageName = gtm.composePageName(page, convertToGTMPage);
+        Object.assign(properties, {
+          gtmConfig: JSON.stringify(gtm.config),
+          gtmTagId: gtm.tagId
+        });
+      }
+      res.locals = Object.assign(res.locals, properties);
       next();
     });
   }

package/lib/health.js

@@ -15,7 +15,7 @@ module.exports = redis => {
 
   router.get('/readiness', healthCheck({
     test: () => {
-      if (!redis.isOpen && !redis.isReady) {
+      if (!redis.connected && !redis.ready) {
         return new Error('Session store unhealthy');
       }
       return 0;

package/lib/sessions.js

@@ -51,8 +51,6 @@ module.exports = (app, config) => {
     });
   }
 
-  client.connect();
-
   const store = new RedisStore({
     client: client,
     ttl: config.session.ttl,