HOFF-737-session-timeout-continue-form

- configure session timeout warning in frontend/themes/gov-uk/client-js/session-timeout-dialog.js
- add frontend/template-partials/partials/session-timeout-warning.html
- amend frontend/template-partials/partials/page.html to include session timeout warning in pages with forms.
- add styling for session timeout warning
- add leave form button in dialog box which resets session and goes to exit page informing user info has not been saved. This is for non save and return forms.
- create session timeout component exit page customisable and session timeout warning dialog content customisable
- add session timeout warning component readme
- amend confirmation page so it doesn't show popup
- amend pr template name so it is picked up
- add tests
- update change log

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2024, Version 22.0.0, @Rhodine-orleans-lindsay
+* Adds session timeout warning
+ - user can stay on page or exit form
+ - adds exit html
+ - updates confirmation html to a static page
+ - allows for customisation of session timeout warning dialog content and exit page content
+* Fixes accessibility issues
+* Sandbox area for testing hof changes
+* Updates patch and minor dependency versions
+
 ## 2024-07-22, Version 21.0.0 (Stable), @Rhodine-orleans-lindsay
 * Replaces deprecated request module with axios
   - refactors the hof model and apis to use axios instead of request

components/index.js

@@ -8,5 +8,6 @@ module.exports = {
   emailer: require('./emailer'),
   homeOfficeCountries: require('./homeoffice-countries'),
   notify: require('./notify'),
-  summary: require('./summary')
+  summary: require('./summary'),
+  sessionTimeoutWarning: require('./session-timeout-warning')
 };

components/session-timeout-warning/Readme.md

@@ -0,0 +1,45 @@
+# Session Timeout Warning Behaviour
+
+## What this does
+Makes the content related to the session timeout warning behaviour customisable. This includes the content in the session timeout warning dialog and on the exit page after the user clicks to exit the form from the session timeout warning dialog.
+
+The component should be set in the project's hof.settings.json
+```
+ "behaviours": [
+    "hof/components/session-timeout-warning"
+  ]
+```
+
+It will then pick the default content from hof.
+
+If you require customised content at a project level, the following variables must be set to false in hof.settings.json
+
+```
+ behaviours: [
+    require('../').components.sessionTimeoutWarning
+  ],
+  sessionTimeoutWarningContent: false,
+  exitFormContent: false
+```
+
+You can then set the content in the project's pages.json
+
+```
+"exit": {
+  "message": "We have cleared your information to keep it secure. Your information has not been saved."
+},
+"session-timeout-warning": {
+   "dialog-title": "Your application will close soon",
+   "dialog-text": "If that happens, your progress will not be saved.",
+   "timeout-continue-button": "Stay on this page",
+   "dialog-exit-link": "Exit this form"
+}
+```
+
+To customise the exit page's header and title, you can create an exit.json file and set the content:
+```
+{
+  "header": "You have left this application",
+  "title": "You have left this application"
+}
+```

components/session-timeout-warning/index.js

@@ -0,0 +1,32 @@
+
+'use strict';
+const config = require('../../config/hof-defaults');
+
+module.exports = superclass => class extends superclass {
+  configure(req, res, next) {
+    // reset the session if user chooses to exit on session timeout warning
+    if (req.form.options.route === '/exit') {
+      req.sessionModel.reset();
+    }
+    return super.configure(req, res, next);
+  }
+
+  locals(req, res) {
+    // set the default session dialog message
+    const superLocals = super.locals(req, res);
+    if (res.locals.sessionTimeoutWarningContent === true) {
+      superLocals.dialogTitle = true;
+      superLocals.dialogText = true;
+      superLocals.timeoutContinueButton = true;
+      superLocals.dialogExitLink = true;
+    }
+    // set the default content on /exit page
+    if (req.form.options.route === '/exit' && config.exitFormContent === true) {
+      superLocals.header = req.translate('exit.header');
+      superLocals.title = req.translate('exit.title');
+      superLocals.message = req.translate('exit.message');
+      return superLocals;
+    }
+    return superLocals;
+  }
+};

config/hof-defaults.js

@@ -14,6 +14,8 @@ const defaults = {
   getCookies: true,
   getTerms: true,
   getAccessibility: false,
+  sessionTimeoutWarningContent: true,
+  exitFormContent: true,
   viewEngine: 'html',
   protocol: process.env.PROTOCOL || 'http',
   noCache: process.env.NO_CACHE || false,
@@ -46,7 +48,8 @@ const defaults = {
   apis: {
     pdfConverter: process.env.PDF_CONVERTER_URL
   },
-  serveStatic: process.env.SERVE_STATIC_FILES !== 'false'
+  serveStatic: process.env.SERVE_STATIC_FILES !== 'false',
+  sessionTimeOutWarning: process.env.SESSION_TIMEOUT_WARNING || 300
 };
 
 module.exports = Object.assign({}, defaults, rateLimits);

frontend/template-partials/translations/src/en/exit.json

@@ -0,0 +1,5 @@
+{
+  "header": "You have left this form",
+  "title": "You have left this form",
+  "message": "We have cleared your information to keep it secure. Your information has not been saved."
+}

frontend/template-partials/views/confirmation.html

@@ -1,6 +1,19 @@
-{{<partials-page}}
-  {{$page-content}}
+{{<layout}}
+  {{$journeyHeader}}
+  {{#t}}journey.header{{/t}}
+  {{/journeyHeader}}
+
+  {{$propositionHeader}}
+  {{> partials-navigation}}
+  {{/propositionHeader}}
+
+  {{$header}}
+    {{header}}
+  {{/header}}
+
+  {{$content}}
     {{>partials-confirmation-alert}}
     {{#markdown}}what-happens-next{{/markdown}}
-  {{/page-content}}
-{{/partials-page}}
+  {{/content}}
+{{/layout}}
+

frontend/template-partials/views/exit.html

@@ -0,0 +1,9 @@
+{{<layout}}
+  {{$header}}
+    {{header}}
+  {{/header}}
+  {{$content}}
+  <h2 class="govuk-heading-m">{{#exitFormContent}}{{message}}{{/exitFormContent}}{{^exitFormContent}}{{#t}}pages.exit.message{{/t}}{{/exitFormContent}}</h2>
+  <a href="/" class="govuk-button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+  {{/content}}
+{{/layout}}

frontend/template-partials/views/partials/head.html

@@ -22,4 +22,7 @@
 {{/gtmTagId}}
 
 <meta name="format-detection" content="telephone=no">
+<noscript>
+  <meta http-equiv="refresh" content="{{sessionTimeOut}};url='/session-timeout'"/>
+</noscript>
 <link rel="stylesheet" href="{{assetPath}}/css/app.css">

frontend/template-partials/views/partials/page.html

@@ -16,6 +16,7 @@
     {{<partials-form}}
       {{$form}}
         {{$page-content}}{{/page-content}}
+        {{> partials-session-timeout-warning}}
       {{/form}}
     {{/partials-form}}
   {{/content}}

frontend/template-partials/views/partials/session-timeout-warning.html

@@ -0,0 +1,22 @@
+<div class="govuk-timeout-warning-fallback">
+  <p>We will reset your application if you do not complete the page and press continue
+  in 5 minutes.</p>
+  <p>We do this to keep your information secure.</p>
+</div>
+
+<dialog id="js-modal-dialog" data-session-timeout="{{sessionTimeOut}}" data-session-timeout-warning="{{sessionTimeOutWarning}}"
+data-url-redirect="/session-timeout" class="modal-dialog dialog" role="dialog"
+  aria-live="polite" aria-labelledby="dialog-title" aria-describedby="at-timer">
+  <div class="modal-dialog__inner">
+    <h1 id="dialog-title" class="govuk-heading-l">
+      {{#dialogTitle}}Your page will time out soon {{/dialogTitle}}{{^dialogTitle}}{{#t}}pages.session-timeout-warning.dialog-title{{/t}}{{/dialogTitle}}
+    </h1>
+    <div class="modal-dialog__inner__text govuk-body">
+      <div id="timer" class="timer" aria-hidden="true" aria-relevant="additions"></div>
+      <div id="at-timer" class="at-timer govuk-visually-hidden" role="status"></div>
+      <p class="dialog-text visually-hidden">{{#dialogText}}If that happens, your progress will not be saved.{{/dialogText}}{{^dialogText}}{{#t}}pages.session-timeout-warning.dialog-text{{/t}}{{/dialogText}}</p>
+    </div>
+      <button class="govuk-button dialog-button modal-dialog__inner__button js-dialog-close" id="timeout-continue-button" data-module="govuk-button">{{#timeoutContinueButton}}Stay on this page{{/timeoutContinueButton}}{{^timeoutContinueButton}}{{#t}}pages.session-timeout-warning.timeout-continue-button{{/t}}{{/timeoutContinueButton}}</button>
+      <a href="/exit" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}Exit this form{{/dialogExitLink}}{{^dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}</a>
+  </div>
+</dialog>

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

@@ -14,6 +14,7 @@ window.GOVUK = GOVUK;
 var skipToMain = require('./skip-to-main');
 var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');
+var sessionDialog = require('./session-timeout-dialog');
 
 toolkit.detailsSummary();