hof 21.0.20-axios-beta → 22.0.0-timeout-warning-beta.2

package/frontend/themes/gov-uk/client-js/session-timeout-dialog.js

@@ -0,0 +1,333 @@
+/* eslint max-len: 0 */
+'use strict';
+
+const $ = require('jquery');
+
+// Modal dialog prototype
+window.GOVUK.sessionDialog = {
+  el: document.getElementById('js-modal-dialog'),
+  $el: $('#js-modal-dialog'),
+  $lastFocusedEl: null,
+  $closeButton: $('.modal-dialog .js-dialog-close'),
+  dialogIsOpenClass: 'dialog-is-open',
+  timers: [],
+  warningTextPrefix: 'To protect your information, this page will time out in ',
+  warningTextSuffix: '.',
+  warningText: $('.dialog-text').text(),
+  warningTextExtra: '',
+
+  // Timer specific markup. If these are not present, timeout and redirection are disabled
+  $timer: $('#js-modal-dialog .timer'),
+  $accessibleTimer: $('#js-modal-dialog .at-timer'),
+
+  secondsSessionTimeout: parseInt($('#js-modal-dialog').data('session-timeout'), 10 || 1800),
+  secondsTimeoutWarning: parseInt($('#js-modal-dialog').data('session-timeout-warning'), 10 || 300),
+  timeoutRedirectUrl: $('#js-modal-dialog').data('url-redirect'),
+  timeSessionRefreshed: new Date(),
+
+  bindUIElements: function () {
+    window.GOVUK.sessionDialog.$closeButton.on('click', function (e) {
+      e.preventDefault();
+      window.GOVUK.sessionDialog.closeDialog();
+    });
+
+    // Close modal when ESC pressed
+    $(document).keydown(function (e) {
+      if (window.GOVUK.sessionDialog.isDialogOpen() && e.keyCode === 27) {
+        window.GOVUK.sessionDialog.closeDialog();
+      }
+    });
+  },
+
+  isDialogOpen: function () {
+    return window.GOVUK.sessionDialog.el.open;
+  },
+
+  isConfigured: function () {
+    return window.GOVUK.sessionDialog.$timer.length > 0 &&
+      window.GOVUK.sessionDialog.$accessibleTimer.length > 0 &&
+      window.GOVUK.sessionDialog.secondsSessionTimeout &&
+      window.GOVUK.sessionDialog.secondsTimeoutWarning &&
+      window.GOVUK.sessionDialog.timeoutRedirectUrl;
+  },
+
+  openDialog: function () {
+    if (!window.GOVUK.sessionDialog.isDialogOpen()) {
+      $('html, body').addClass(window.GOVUK.sessionDialog.dialogIsOpenClass);
+      window.GOVUK.sessionDialog.saveLastFocusedEl();
+      window.GOVUK.sessionDialog.makePageContentInert();
+      window.GOVUK.sessionDialog.el.showModal();
+    }
+  },
+
+  closeDialog: function () {
+    if (window.GOVUK.sessionDialog.isDialogOpen()) {
+      $('html, body').removeClass(window.GOVUK.sessionDialog.dialogIsOpenClass);
+      window.GOVUK.sessionDialog.el.close();
+      window.GOVUK.sessionDialog.setFocusOnLastFocusedEl();
+      window.GOVUK.sessionDialog.removeInertFromPageContent();
+      window.GOVUK.sessionDialog.refreshSession();
+    }
+  },
+
+  saveLastFocusedEl: function () {
+    window.GOVUK.sessionDialog.$lastFocusedEl = document.activeElement;
+    if (!window.GOVUK.sessionDialog.$lastFocusedEl || window.GOVUK.sessionDialog.$lastFocusedEl === document.body) {
+      window.GOVUK.sessionDialog.$lastFocusedEl = null;
+    } else if (document.querySelector) {
+      window.GOVUK.sessionDialog.$lastFocusedEl = document.querySelector(':focus');
+    }
+  },
+
+  // Set focus back on last focused el when modal closed
+  setFocusOnLastFocusedEl: function () {
+    if (window.GOVUK.sessionDialog.$lastFocusedEl) {
+      window.setTimeout(function () {
+        window.GOVUK.sessionDialog.$lastFocusedEl.focus();
+      }, 0);
+    }
+  },
+
+  // Set page content to inert to indicate to screenreaders it's inactive
+  // NB: This will look for #content for toggling inert state
+  makePageContentInert: function () {
+    if (document.querySelector('#content')) {
+      document.querySelector('#content').inert = true;
+      document.querySelector('#content').setAttribute('aria-hidden', 'true');
+    }
+  },
+
+  // Make page content active when modal is not open
+  // NB: This will look for #content for toggling inert state
+  removeInertFromPageContent: function () {
+    if (document.querySelector('#content')) {
+      document.querySelector('#content').inert = false;
+      document.querySelector('#content').setAttribute('aria-hidden', 'false');
+    }
+  },
+
+  numberToWords: function (n) {
+    const string = n.toString();
+    let start;
+    let end;
+    let chunk;
+    let ints;
+    let i;
+    let word;
+    let words = 'and';
+
+    if (parseInt(string, 10) === 0) {
+      return 'zero';
+    }
+
+    /* Array of units as words */
+    const units = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+
+    /* Array of tens as words */
+    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+
+    /* Array of scales as words */
+    const scales = ['', 'thousand', 'million', 'billion', 'trillion', 'quadrillion', 'quintillion', 'sextillion', 'septillion', 'octillion', 'nonillion', 'decillion', 'undecillion', 'duodecillion', 'tredecillion', 'quatttuor-decillion', 'quindecillion', 'sexdecillion', 'septen-decillion', 'octodecillion', 'novemdecillion', 'vigintillion', 'centillion'];
+
+    /* Split user arguemnt into 3 digit chunks from right to left */
+    start = string.length;
+    const chunks = [];
+    while (start > 0) {
+      end = start;
+      chunks.push(string.slice((start = Math.max(0, start - 3)), end));
+    }
+
+    /* Check if function has enough scale words to be able to stringify the user argument */
+    const chunksLen = chunks.length;
+    if (chunksLen > scales.length) {
+      return '';
+    }
+
+    /* Stringify each integer in each chunk */
+    words = [];
+    for (i = 0; i < chunksLen; i++) {
+      chunk = parseInt(chunks[i], 10);
+
+      if (chunk) {
+        /* Split chunk into array of individual integers */
+        ints = chunks[i].split('').reverse().map(parseFloat);
+
+        /* If tens integer is 1, i.e. 10, then add 10 to units integer */
+        if (ints[1] === 1) {
+          ints[0] += 10;
+        }
+
+        /* Add scale word if chunk is not zero and array item exists */
+        if ((word === scales[i])) {
+          words.push(word);
+        }
+
+        /* Add unit word if array item exists */
+        if ((word === units[ints[0]])) {
+          words.push(word);
+        }
+
+        /* Add tens word if array item exists */
+        if ((word === tens[ints[1]])) {
+          words.push(word);
+        }
+
+        /* Add hundreds word if array item exists */
+        if ((word === units[ints[2]])) {
+          words.push(word + ' hundred');
+        }
+      }
+    }
+    return words.reverse().join(' ');
+  },
+
+  // Attempt to convert numerics into text as OS VoiceOver
+  // occasionally stalled when encountering numbers
+  timeToWords: function (t, unit) {
+    let words;
+    if (t > 0) {
+      try {
+        words = window.GOVUK.sessionDialog.numberToWords(t);
+      } catch (e) {
+        words = t;
+      }
+      words = words + ' ' + window.GOVUK.sessionDialog.pluralise(t, unit);
+    } else {
+      words = '';
+    }
+    return words;
+  },
+
+  pluralise: function (n, unit) {
+    return n === 1 ? unit : unit + 's';
+  },
+
+  numericSpan: function (n, unit) {
+    return '<span class="tabular-numbers">' + n + '</span> ' + window.GOVUK.sessionDialog.pluralise(n, unit);
+  },
+
+  countdownText: function (minutes, seconds) {
+    const minutesText = window.GOVUK.sessionDialog.numericSpan(minutes, 'minute');
+    const secondsText = window.GOVUK.sessionDialog.numericSpan(seconds, 'second');
+    return minutes > 0 ? minutesText : secondsText;
+  },
+
+  countdownAtText: function (minutes, seconds) {
+    const minutesText = window.GOVUK.sessionDialog.timeToWords(minutes, 'minute');
+    const secondsText = window.GOVUK.sessionDialog.timeToWords(seconds, 'second');
+    return minutes > 0 ? minutesText : secondsText;
+  },
+
+  startCountdown: function () {
+    const $timer = window.GOVUK.sessionDialog.$timer;
+    const $accessibleTimer = window.GOVUK.sessionDialog.$accessibleTimer;
+    let timerRunOnce = false;
+    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+    const seconds = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+    const minutes = seconds / 60;
+
+    $timer.text(minutes + ' minute' + (minutes > 1 ? 's' : ''));
+
+    (function countdown() {
+      const secondsUntilSessionTimeout = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+      const timerExpired = secondsUntilSessionTimeout <= window.GOVUK.sessionDialog.secondsFinalWarning;
+
+      if (!timerExpired) {
+        const minutesLeft = parseInt(secondsUntilSessionTimeout / 60, 10);
+        const secondsLeft = parseInt(secondsUntilSessionTimeout % 60, 10);
+        const atMinutesText = window.GOVUK.sessionDialog.timeToWords(minutesLeft, 'minute');
+        const atSecondsText = window.GOVUK.sessionDialog.timeToWords(secondsLeft, 'second');
+
+        // Below string will get read out by screen readers every time
+        // the timeout refreshes.
+        // Add additional information in extraText which will get announced to AT the
+        // first time the time out opens
+        const countdownText = window.GOVUK.sessionDialog.countdownText(minutesLeft, secondsLeft);
+        const text = window.GOVUK.sessionDialog.warningTextPrefix + '<strong>' + countdownText + '</strong>' + window.GOVUK.sessionDialog.warningTextSuffix;
+        const countdownAtText = window.GOVUK.sessionDialog.countdownAtText(atMinutesText, atSecondsText);
+        const atText = window.GOVUK.sessionDialog.warningTextPrefix + countdownAtText + window.GOVUK.sessionDialog.warningTextSuffix + 'bgbhj ' + window.GOVUK.sessionDialog.warningText;
+        const extraText = '\n' + window.GOVUK.sessionDialog.warningTextExtra;
+
+        $timer.html(text + ' ' + extraText);
+
+        // Update screen reader friendly content every 20 secs
+        if (secondsLeft % 20 === 0) {
+          // Read out the extra content only once.
+          // Don't read out on iOS VoiceOver which stalls on the longer text
+          if (!timerRunOnce && !iOS) {
+            $accessibleTimer.text(atText + extraText);
+            timerRunOnce = true;
+          } else {
+            $accessibleTimer.text(atText);
+          }
+        }
+
+        window.GOVUK.sessionDialog.addTimer(countdown, 20);
+      }
+    })();
+  },
+
+  // Clears all timers
+  clearTimers: function () {
+    for (let i = 0; i < window.GOVUK.sessionDialog.timers.length; i++) {
+      clearInterval(window.GOVUK.sessionDialog.timers[i]);
+    }
+  },
+
+  refreshSession: function () {
+    $.get('');
+    window.GOVUK.sessionDialog.timeSessionRefreshed = new Date();
+    window.GOVUK.sessionDialog.controller();
+  },
+
+  redirect: function () {
+    window.location = window.GOVUK.sessionDialog.timeoutRedirectUrl;
+  },
+
+  // JS doesn't allow resetting timers globally so timers need
+  // to be retained for resetting.
+  addTimer: function (f, seconds) {
+    window.GOVUK.sessionDialog.timers.push(setInterval(f, seconds * 1000));
+  },
+
+  secondsSinceRefresh: function () {
+    return Math.round(Math.abs((window.GOVUK.sessionDialog.timeSessionRefreshed - new Date()) / 1000));
+  },
+
+  secondsUntilSessionTimeout: function () {
+    return window.GOVUK.sessionDialog.secondsSessionTimeout - window.GOVUK.sessionDialog.secondsSinceRefresh();
+  },
+
+  secondsUntilTimeoutWarning: function () {
+    return window.GOVUK.sessionDialog.secondsUntilSessionTimeout() - window.GOVUK.sessionDialog.secondsTimeoutWarning;
+  },
+
+  // countdown controller logic
+  controller: function () {
+    window.GOVUK.sessionDialog.clearTimers();
+
+    const secondsUntilSessionTimeout = window.GOVUK.sessionDialog.secondsUntilSessionTimeout();
+
+    if (secondsUntilSessionTimeout <= 0) {
+      // timed out - redirect
+      window.GOVUK.sessionDialog.redirect();
+    } else if (secondsUntilSessionTimeout <= window.GOVUK.sessionDialog.secondsTimeoutWarning) {
+      // timeout warning - show countdown and schedule redirect
+      window.GOVUK.sessionDialog.openDialog();
+      window.GOVUK.sessionDialog.startCountdown();
+      window.GOVUK.sessionDialog.addTimer(window.GOVUK.sessionDialog.controller, window.GOVUK.sessionDialog.secondsUntilSessionTimeout());
+    } else {
+      // wait for warning
+      window.GOVUK.sessionDialog.addTimer(window.GOVUK.sessionDialog.controller, window.GOVUK.sessionDialog.secondsUntilTimeoutWarning());
+    }
+  },
+
+  init: function (options) {
+    $.extend(window.GOVUK.sessionDialog, options);
+    if (window.GOVUK.sessionDialog.el && window.GOVUK.sessionDialog.isConfigured()) {
+      window.GOVUK.sessionDialog.bindUIElements();
+      window.GOVUK.sessionDialog.controller();
+    }
+  }
+};

package/frontend/themes/gov-uk/styles/_session-timeout-dialog.scss

@@ -0,0 +1,209 @@
+.modal-dialog {
+  display: none;
+}
+
+.modal-dialog--no-js-persistent {
+  display: inline-block;
+}
+
+.js-enabled {
+  .modal-dialog--no-js-persistent {
+    display: none;
+
+    &[open], .dialog-button {
+      display: inline-block;
+    }
+  }
+
+  .modal-dialog[open] {
+    display: inline-block;
+  }
+}
+
+.modal-dialog[open] {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 90vh;
+  padding: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+  position: fixed;
+  top: 50% !important;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+
+@media (min-width: 641px) {
+  .modal-dialog[open] {
+    padding: 0;
+  }
+}
+
+.modal-dialog__inner {
+  padding: 20px;
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner {
+    padding: 30px;
+  }
+}
+
+.modal-dialog__inner__text {
+  font-family: "nta", Arial, sans-serif;
+  font-weight: 400;
+  text-transform: none;
+  font-size: 16px;
+  line-height: 1.25;
+  padding-top: 2px;
+  padding-bottom: 8px;
+  margin-bottom: 20px;
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner__text {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner__text {
+    padding-top: 0;
+    padding-bottom: 5px;
+  }
+}
+
+.modal-dialog__inner__button {
+  font-size: 19px;
+  margin-top: 10px;
+}
+
+.modal-dialog__inner__link {
+  font-family: "nta", Arial, sans-serif;
+  font-weight: 400;
+  text-transform: none;
+  font-size: 16px;
+  line-height: 1.25;
+  padding-top: 2px;
+  padding-bottom: 8px;
+  background: none;
+  border: none;
+  vertical-align: middle;
+  margin-top: 20px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner__link {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner__link {
+    padding-top: 0;
+    padding-bottom: 5px;
+  }
+}
+
+@media (max-width: 640px) {
+  .modal-dialog__inner__link {
+    text-align: center;
+    display: block;
+    margin-top: 25px;
+  }
+}
+
+@media (min-width: 641px) {
+  .modal-dialog__inner__link {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0;
+    margin: 0 0 0 30px;
+  }
+}
+
+.modal-dialog__inner__block {
+  position: relative;
+}
+
+.modal-dialog #dialog-title {
+  margin-top: 0;
+}
+
+.dialog-is-open {
+  overflow: hidden;
+}
+
+dialog {
+  left: 0;
+  right: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  border: solid;
+  padding: 1em;
+  background: white;
+  color: black;
+  display: none;
+  border: 5px solid black;
+
+  + .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  &[open] {
+    display: block;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 15px;
+    width: 90%;
+
+    + .backdrop, &::backdrop {
+      background: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
+
+@media (min-width: 641px) {
+  dialog[open] {
+    padding: 30px;
+    margin: 30px auto;
+    max-width: 500px;
+  }
+}
+
+.tabular-numbers {
+  font-family: "ntatabularnumbers", "nta", Arial, sans-serif;
+}
+
+.dialog-sign-out-link {
+  @include govuk-font($size: 24);
+  display: inline-block;
+  margin: 5px;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font($size: 19);
+
+    position: relative;
+    top: 2px;
+    padding: 0.526315em 0.789473em 0.263157em;
+    line-height: 1.5;
+  }
+}

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-dialog";
 
 // Modules
 @import "modules/validation";

package/index.js

@@ -84,6 +84,7 @@ const getContentSecurityPolicy = (config, res) => {
       'www.google.co.uk/ads/ga-audiences'
     ],
     connectSrc: [
+      "'self'",
       'https://www.google-analytics.com',
       'https://region1.google-analytics.com',
       'https://region1.analytics.google.com'
@@ -147,6 +148,9 @@ function bootstrap(options) {
     res.locals.appName = config.appName;
     res.locals.htmlLang = config.htmlLang;
     res.locals.cookieName = config.session.name;
+    // session timeout warning configs
+    res.locals.sessionTimeOut = config.session.ttl;
+    res.locals.sessionTimeOutWarning = config.sessionTimeOutWarning;
     next();
   });
 
@@ -189,10 +193,10 @@ function bootstrap(options) {
   app.use(morgan('sessionId=:id ' + morgan.combined, {
     stream: config.logger.stream,
     skip: (req, res) => config.loglevel !== 'debug' &&
-        (
-          res.statusCode >= 300 || !_.get(req, 'session.id') ||
-          config.ignoreMiddlewareLogs.some(v => req.originalUrl.includes(v))
-        )
+      (
+        res.statusCode >= 300 || !_.get(req, 'session.id') ||
+        config.ignoreMiddlewareLogs.some(v => req.originalUrl.includes(v))
+      )
   }));
 
   serveStatic(app, config);

package/lib/ga-tag.js

@@ -52,26 +52,35 @@ const setupPageMap = routes => {
 module.exports = (app, config) => {
   const gaTagId = config.gaTagId;
   const ga4TagId = config.ga4TagId;
-  const gtmTagId = config.gtmTagId;
-  const environmentType = config.environmentType ? config.environmentType : 'dev';
+  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) => {
       const page = pageView(req.path, pageMap);
-      res.locals.gaAllowDebug = config.env === 'development';
-      res.locals.isETA = config.appName === 'ETA';
-      res.locals.gaTagId = gaTagId;
-      res.locals.ga4TagId = ga4TagId;
-      res.locals.gtmTagId = gtmTagId;
-      res.locals.environmentType = environmentType;
-      res.locals.gaCrossDomainTrackingTagId = gaCrossDomainTrackingTagId;
-      res.locals['ga-id'] = gaTagId;
-      res.locals['ga-page'] = page;
-      res.locals['gtm-page'] = convertToGTMPage(page);
+
+      // 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();
     });
   }