hof 22.0.0-timeout-warning-beta.4 → 22.0.0-timeout-warning-beta.6

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2024, Version 22.0.0, @Rhodine-orleans-lindsay
+* Adds session timeout warning
+* 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

package/config/hof-defaults.js

@@ -38,7 +38,7 @@ const defaults = {
     host: process.env.REDIS_HOST || '127.0.0.1'
   },
   session: {
-    ttl: process.env.SESSION_TTL || 1800,
+    ttl: process.env.SESSION_TTL || 61,
     secret: process.env.SESSION_SECRET || 'changethis',
     name: process.env.SESSION_NAME || 'hod.sid',
     sanitiseInputs: false
@@ -47,7 +47,7 @@ const defaults = {
     pdfConverter: process.env.PDF_CONVERTER_URL
   },
   serveStatic: process.env.SERVE_STATIC_FILES !== 'false',
-  sessionTimeOutWarning: process.env.SESSION_TIMEOUT_WARNING || 300
+  sessionTimeOutWarning: process.env.SESSION_TIMEOUT_WARNING || 60
 };
 
 module.exports = Object.assign({}, defaults, rateLimits);

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

@@ -13,5 +13,6 @@ data-url-redirect="/session-timeout" class="modal-dialog dialog" role="dialog"
     <div class="modal-dialog__inner__block">
       <button class="govuk-button dialog-button modal-dialog__inner__button js-dialog-close" id="timeout-continue-button">Stay on this page</button>
     </div>
+    <a href="/" class="govuk-link dialog-exit-link" role="button">Leave this form</a>
   </div>
 </dialog>

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

@@ -115,7 +115,6 @@ window.GOVUK.sessionDialog = {
     let chunk;
     let ints;
     let i;
-    let word;
     let words = 'and';
 
     if (parseInt(string, 10) === 0) {
@@ -159,24 +158,24 @@ window.GOVUK.sessionDialog = {
           ints[0] += 10;
         }
 
-        /* Add scale word if chunk is not zero and array item exists */
-        if ((word === scales[i])) {
-          words.push(word);
+        /* Add scale word if chunk array item exists */
+        if (scales[i]) {
+          words.push(scales[i]);
         }
 
         /* Add unit word if array item exists */
-        if ((word === units[ints[0]])) {
-          words.push(word);
+        if (units[ints[0]]) {
+          words.push(units[ints[0]]);
         }
 
         /* Add tens word if array item exists */
-        if ((word === tens[ints[1]])) {
-          words.push(word);
+        if (tens[ints[1]]) {
+          words.push(tens[ints[1]]);
         }
 
         /* Add hundreds word if array item exists */
-        if ((word === units[ints[2]])) {
-          words.push(word + ' hundred');
+        if (units[ints[2]]) {
+          words.push(units[ints[2]] + ' hundred');
         }
       }
     }
@@ -238,8 +237,6 @@ window.GOVUK.sessionDialog = {
       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.
@@ -247,8 +244,8 @@ window.GOVUK.sessionDialog = {
         // 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 countdownAtText = window.GOVUK.sessionDialog.countdownAtText(minutesLeft, secondsLeft);
+        const atText = window.GOVUK.sessionDialog.warningTextPrefix + countdownAtText + window.GOVUK.sessionDialog.warningTextSuffix + ' ' + window.GOVUK.sessionDialog.warningText;
         const extraText = '\n' + window.GOVUK.sessionDialog.warningTextExtra;
 
         $timer.html(text + ' ' + extraText);

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

@@ -193,7 +193,7 @@ dialog {
   font-family: "ntatabularnumbers", "nta", Arial, sans-serif;
 }
 
-.dialog-sign-out-link {
+.dialog-exit-link {
   @include govuk-font($size: 24);
   display: inline-block;
   margin: 5px;

package/package.json

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

package/sandbox/public/css/app.css

@@ -9351,7 +9351,7 @@ dialog[open] + .backdrop, dialog[open]::backdrop {
   font-family: "ntatabularnumbers", "nta", Arial, sans-serif;
 }
 
-.dialog-sign-out-link {
+.dialog-exit-link {
   font-family: "GDS Transport", arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -9363,25 +9363,25 @@ dialog[open] + .backdrop, dialog[open]::backdrop {
   margin: 5px;
 }
 @media print {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-family: sans-serif;
   }
 }
 @media (min-width: 40.0625em) {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-size: 24px;
     font-size: 1.5rem;
     line-height: 1.25;
   }
 }
 @media print {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-size: 18pt;
     line-height: 1.15;
   }
 }
 @media (min-width: 40.0625em) {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-family: "GDS Transport", arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -9396,19 +9396,19 @@ dialog[open] + .backdrop, dialog[open]::backdrop {
   }
 }
 @media print and (min-width: 40.0625em) {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-family: sans-serif;
   }
 }
 @media (min-width: 40.0625em) and (min-width: 40.0625em) {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-size: 19px;
     font-size: 1.1875rem;
     line-height: 1.3157894737;
   }
 }
 @media print and (min-width: 40.0625em) {
-  .dialog-sign-out-link {
+  .dialog-exit-link {
     font-size: 14pt;
     line-height: 1.15;
   }

package/sandbox/public/js/bundle.js

@@ -459,24 +459,24 @@ window.GOVUK.sessionDialog = {
           ints[0] += 10;
         }
 
-        /* Add scale word if chunk is not zero and array item exists */
-        if ((word === scales[i])) {
-          words.push(word);
+        /* Add scale word if chunk array item exists */
+        if (scales[i]) {
+          words.push(scales[i]);
         }
 
         /* Add unit word if array item exists */
-        if ((word === units[ints[0]])) {
-          words.push(word);
+        if (units[ints[0]]) {
+          words.push(units[ints[0]]);
         }
 
         /* Add tens word if array item exists */
-        if ((word === tens[ints[1]])) {
-          words.push(word);
+        if (word = tens[ints[1]]) {
+          words.push(tens[ints[1]]);
         }
 
         /* Add hundreds word if array item exists */
-        if ((word === units[ints[2]])) {
-          words.push(word + ' hundred');
+        if (units[ints[2]]) {
+          words.push(units[ints[2]] + ' hundred');
         }
       }
     }
@@ -538,8 +538,6 @@ window.GOVUK.sessionDialog = {
       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.
@@ -547,8 +545,8 @@ window.GOVUK.sessionDialog = {
         // 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 countdownAtText = window.GOVUK.sessionDialog.countdownAtText(minutesLeft, secondsLeft);
+        const atText = window.GOVUK.sessionDialog.warningTextPrefix + countdownAtText + window.GOVUK.sessionDialog.warningTextSuffix + ' ' + window.GOVUK.sessionDialog.warningText;
         const extraText = '\n' + window.GOVUK.sessionDialog.warningTextExtra;
 
         $timer.html(text + ' ' + extraText);