HOFF-738: Session timeout warning(sign in required)

- add showSaveAndExit locals to session-timeout-warning.html to set content to be used by save and exit forms
- add default save-and-exit html template
- set showSaveAndExit locals to true on /dob step in sandbox/index.js for demo purposes.
- amend sandbox/pages.json to include flag save and exit content
- amend sessionDialog.js so it can pick up configured warning text instead of it being hard coded
- amend changelog and package.json

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2024, Version 22.1.0, @Rhodine-orleans-lindsay
+* Adds session timeout warning content for save and exit forms
+ - user can stay signed in page or save and exit form
+ - adds save-and-exit html
+ - allows for customisation of save-and-exit page content
+* Fixes accessibility issues
+* Sandbox area for testing hof changes
+* Updates patch and minor dependency versions
+
 ## 2024, Version 22.0.0, @Rhodine-orleans-lindsay
 * Adds session timeout warning
  - user can stay on page or exit form

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

@@ -8,15 +8,30 @@
 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">
+    {{^showSaveAndExit}}
     <h2 id="dialog-title" class="govuk-heading-l">
       {{#dialogTitle}}{{#t}}pages.session-timeout-warning.dialog-title{{/t}}{{/dialogTitle}}{{^dialogTitle}}Your page will time out soon{{/dialogTitle}}
     </h2>
     <div class="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-prefix visually-hidden">To protect your information, this page will time out in </p>
       <p class="dialog-text visually-hidden">{{#dialogText}}{{#t}}pages.session-timeout-warning.dialog-text{{/t}}{{/dialogText}}{{^dialogText}}If that happens, your progress will not be saved.{{/dialogText}}</p>
     </div>
       <button class="govuk-button dialog-button js-dialog-close" id="timeout-continue-button" data-module="govuk-button">{{#timeoutContinueButton}}{{#t}}pages.session-timeout-warning.timeout-continue-button{{/t}}{{/timeoutContinueButton}}{{^timeoutContinueButton}}Stay on this page{{/timeoutContinueButton}}</button>
       <a href="/exit" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Exit this form{{/dialogExitLink}}</a>
+    {{/showSaveAndExit}}
+    {{#showSaveAndExit}}
+    <h2 id="dialog-title" class="govuk-heading-l">
+      {{#dialogTitle}}{{#t}}pages.session-timeout-warning.dialog-title{{/t}}{{/dialogTitle}}{{^dialogTitle}}You will be signed out soon{{/dialogTitle}}
+    </h2>
+    <div class="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-prefix visually-hidden">To protect your information, you will be signed out in </p>
+    </div>
+      <button class="govuk-button dialog-button js-dialog-close" id="timeout-continue-button" data-module="govuk-button">{{#timeoutContinueButton}}{{#t}}pages.session-timeout-warning.timeout-continue-button{{/t}}{{/timeoutContinueButton}}{{^timeoutContinueButton}}Stay signed in{{/timeoutContinueButton}}</button>
+      <a href="{{baseUrl}}/save-and-exit" class="govuk-link dialog-exit-link" role="button">{{#dialogExitLink}}{{#t}}pages.session-timeout-warning.dialog-exit-link{{/t}}{{/dialogExitLink}}{{^dialogExitLink}}Sign out{{/dialogExitLink}}</a>
+    {{/showSaveAndExit}}
   </div>
 </dialog>

frontend/template-partials/views/save-and-exit.html

@@ -0,0 +1,19 @@
+{{<layout}}
+  {{$journeyHeader}}
+  {{#t}}journey.header{{/t}}
+  {{/journeyHeader}}
+
+  {{$propositionHeader}}
+  {{> partials-navigation}}
+  {{/propositionHeader}}
+
+  {{$header}}
+    {{header}}
+  {{/header}}
+
+  {{$content}}
+    <p>{{#t}}pages.save-and-exit.paragraph-1{{/t}}</p>
+    <p>{{#t}}pages.save-and-exit.paragraph-2{{/t}}</p>
+    <p>{{#t}}pages.save-and-exit.paragraph-3{{/t}} <a href="/" class="govuk-link">start page.</a></p>
+  {{/content}}
+{{/layout}}

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

@@ -13,7 +13,7 @@ window.GOVUK.sessionDialog = {
   $fallBackElement: $('.govuk-timeout-warning-fallback'),
   dialogIsOpenClass: 'dialog-is-open',
   timers: [],
-  warningTextPrefix: 'To protect your information, this page will time out in ',
+  warningTextPrefix: $('.dialog-text-prefix').text(),
   warningTextSuffix: '.',
   warningText: $('.dialog-text').text(),
   warningTextExtra: '',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "22.0.0",
+  "version": "22.1.0-timeout-warning-sign-in-beta.2",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",

sandbox/apps/sandbox/index.js

@@ -30,6 +30,7 @@ module.exports = {
     },
     '/dob': {
       fields: ['dateOfBirth'],
+      locals: { showSaveAndExit: true },
       next: '/address'
     },
     '/address': {
@@ -92,6 +93,7 @@ module.exports = {
       next: '/confirm'
     },
     '/session-timeout': {},
-    '/exit': {}
+    '/exit': {},
+    '/save-and-exit': {}
   }
 };

sandbox/apps/sandbox/translations/src/en/pages.json

@@ -58,9 +58,15 @@
     "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"
+    "dialog-title": "{{^showSaveAndExit}}Your application will close soon{{/showSaveAndExit}}{{#showSaveAndExit}}You will be signed out soon{{/showSaveAndExit}}",
+    "dialog-text": "{{^showSaveAndExit}}If that happens, your progress will not be saved.{{/showSaveAndExit}}{{#showSaveAndExit}}Any answers you have saved will not be affected, but your progress on this page will not be saved.{{/showSaveAndExit}}",
+    "timeout-continue-button": "{{^showSaveAndExit}}Stay on this page{{/showSaveAndExit}}{{#showSaveAndExit}}Stay signed in{{/showSaveAndExit}}",
+    "dialog-exit-link": "{{^showSaveAndExit}}Exit this form{{/showSaveAndExit}}{{#showSaveAndExit}}Sign out{{/showSaveAndExit}}"
+  },
+  "save-and-exit": {
+    "header": "You have been signed out",
+    "paragraph-1": "Your form doesn’t appear to have been worked on for 30 minutes so we closed it for security.",
+    "paragraph-2": "Any answers you saved have not been affected.",
+    "paragraph-3": "You can sign back in to your application at any time by returning to the"
   }
 }