hof 22.11.1 → 22.11.6-unit-of-measure-beta.3

package/components/amount-with-unit-select/validation.js

@@ -0,0 +1,175 @@
+'use strict';
+
+const _ = require('lodash');
+const controller = require('../../controller/controller').prototype;
+const utils = require('./utils');
+
+/**
+ * Validates the value is a string consisting of two hyphen-separated values.
+ * Can be passed to the list of field validators to run as a custom validator.
+ * @param {string} value - The amountWithUnitSelect value to validate (E.G. '1-Litre').
+ * @returns {boolean} Returns true if the value is in the expected format, false otherwise.
+ */
+const isTwoHyphenSeparatedValues = value => {
+  if (typeof value !== 'string' || value.indexOf('-') === -1) {
+    return false;
+  }
+  const selectValue = [value.split('-').pop()];
+  return Array.isArray(selectValue) && selectValue.length;
+};
+
+/**
+ * Creates a custom 'equal' validator for a select component.
+ * @param {Object[]} options - The select component options.
+ * @returns {Object[]} Returns a custom 'equal' validator object for the select component.
+ */
+const createCustomEqualValidator = options => [{
+  type: 'equal',
+  arguments: _.map(options, opt =>
+    typeof opt === 'string' ? opt : opt.value)
+}];
+
+/**
+ * Adds a validator to a field's validate array, ensuring no duplicates.
+ * @param {Object} field - The field to add the validator to.
+ * @param {Object|Object[]|string|string[]|function(string): boolean|(function(string): boolean)[]} newValidator -
+ * The validator to add.
+ */
+const addValidator = (field, newValidator) => {
+  field.validate = _.uniq(field.validate.concat(newValidator));
+};
+
+/**
+ * Adds the 'groupedFieldsWithOptions' property to the specified field.
+ * This property prevents the 'equal' validator being applied to the parent component by default,
+ * and enables it to separately be added to the unit child component instead.
+ * @param {Object} field - The field to add the property to.
+ */
+const addGroupedFieldsWithOptionsProperty = field => {
+  field.groupedFieldsWithOptions = true;
+};
+
+/**
+ * Resolves configurations related to making the amount and/or unit fields optional (E.G. amountOptional, unitOptional).
+ * @param {Object[]} parentField - The parent component's field definition and configuration.
+ * @param {Object[]} childFields - The child component's field definitions and configurations.
+ * @param {Array} validators - The list of validators assigned to the parent component.
+ * @param {string} key - The parent component's key.
+ */
+const resolveOptionalFields = (parentField, childFields, validators, key) => {
+  // adds existing required validators from parent component to the child components
+  // and resolves configurations that determine if the child components should be optional
+  (validators?.indexOf('required') !== -1 || parentField[key]?.amountOptional !== 'true') &&
+    addValidator(childFields[`${key}-amount`], 'required');
+  (validators?.indexOf('required') !== -1 || parentField[key]?.unitOptional !== 'true') &&
+    addValidator(childFields[`${key}-unit`], 'required');
+};
+
+/**
+ * Propagates the child component's (amount and unit) field data and values into the form request to enable validation.
+ * @param {Object} formReq - The form's request object.
+ * @param {Object[]} fields - The child components' definitions and configurations.
+ * @param {string} key - The parent component's key.
+ */
+const propagateChildFieldValidation = (formReq, fields, key) => {
+  // adds child component field definitions to the form request
+  Object.assign(formReq.options.fields,
+    { [`${key}-amount`]: fields[`${key}-amount`] },
+    { [`${key}-unit`]: fields[`${key}-unit`] }
+  );
+  // splits and assigns the component's values to the form request
+  const amountWithUnitSelectValues = utils.getAmountWithUnitSelectValues(formReq.values[key]);
+  Object.assign(formReq.values,
+    { [`${key}-amount`]: amountWithUnitSelectValues[0] },
+    { [`${key}-unit`]: amountWithUnitSelectValues[1] }
+  );
+};
+
+/**
+ * Moves validators, that are not the 'required' or 'equal' type, from the parent component to
+ * the 'amount' child component,
+ * ensuring all other validators are applied to the amount field only.
+ * @param {Object} formReqFields - The fields in the form's request object (req.form.options.fields).
+ * @param {Object[]} fields - The child components' definitions and configurations.
+ * @param {string} key - The parent component's key.
+ */
+const moveExcessValidatorToChildComponent = (formReqFields, fields, key) => {
+  _.remove(formReqFields[key]?.validate, validator => {
+    if (!((typeof validator === 'object' &&
+      (validator.type === 'equal' ||
+        validator.type === 'required')) ||
+      (typeof validator === 'string' &&
+        (validator === 'equal' ||
+          validator === 'required')))) {
+      if (formReqFields[`${key}-amount`] === null) {
+        Object.assign(formReqFields, {
+          [`${key}-amount`]: fields[`${key}-amount`]
+        });
+      }
+      if (!formReqFields[`${key}-amount`]?.validate?.includes(validator)) {
+        formReqFields[`${key}-amount`].validate.push(validator);
+      }
+      return true;
+    }
+    return false;
+  });
+};
+
+/**
+ * Creates and adds a validation error for a child component into the form request's errors list.
+ * @param {Object} req - The request object given to the component.
+ * @param {Object} res - The response object given to the component.
+ * @param {Object[]} errors - The validation errors recorded in the session model.
+ * @param {string} pKey - The parent component's key.
+ * @param {string} key - The child component's key.
+ */
+const addValidationError = (req, res, errors, pKey, key) => {
+  // manually creates and adds an error object
+  req.form.errors[`${pKey}-${key}`] = {
+    errorLinkId: `${pKey}-${key}`,
+    key: errors[`${pKey}-${key}`]?.key || `${key}-${key}`,
+    type: errors[`${pKey}-${key}`]?.type || null
+  };
+  // ensure the error message is processed and translated by the controller
+  req.form.errors[`${pKey}-${key}`].message =
+    controller.getErrorMessage(req.form.errors[`${pKey}-${key}`], req, res) ||
+    controller.getErrorMessage({
+      errorLinkId: `${pKey}-${key}`,
+      key: `${pKey}`,
+      type: errors[`${pKey}-${key}`]?.type || null
+    }, req, res);
+};
+
+/**
+ * Inserts child component validation errors into the form request if there is no parent component error.
+ * Only one error from the component is added to the request's error list in the order of the parent, amount,
+ * and then unit component.
+ * @param {Object} req - The request object given to the component.
+ * @param {Object} res - The response object given to the component.
+ * @param {string} pKey - The parent component's key.
+ * @param {Object[]} errors - The validation errors recorded in the session model.
+ */
+const insertChildValidationErrors = (req, res, pKey, errors) => {
+  let key;
+  if (errors && !errors[pKey] && req?.form?.errors) {
+    if (errors[`${pKey}-amount`] && req.form.errors[`${pKey}-amount`]) {
+      key = 'amount';
+    } else if (errors[`${pKey}-unit`] && req.form.errors[`${pKey}-unit`]) {
+      key = 'unit';
+    }
+  }
+  // if there are not parent or child errors, no errors are added
+  key && addValidationError(req, res, errors, pKey, key);
+};
+
+module.exports = {
+  isTwoHyphenSeparatedValues,
+  createCustomEqualValidator,
+  addValidator,
+  addGroupedFieldsWithOptionsProperty,
+  resolveOptionalFields,
+  propagateChildFieldValidation,
+  moveExcessValidatorToChildComponent,
+  addValidationError,
+  insertChildValidationErrors
+};

package/components/index.js

@@ -5,6 +5,7 @@ module.exports = {
   clearSession: require('./clear-session'),
   combineAndLoopFields: require('./combine-and-loop-fields'),
   date: require('./date'),
+  amountWithUnitSelect: require('./amount-with-unit-select/amount-with-unit-select'),
   emailer: require('./emailer'),
   homeOfficeCountries: require('./homeoffice-countries'),
   notify: require('./notify'),

package/config/hof-defaults.js

@@ -51,7 +51,7 @@ const defaults = {
   },
   session: {
     ttl: process.env.SESSION_TTL || 1800,
-    secret: process.env.SESSION_SECRET || 'changethis',
+    secret: process.env.SESSION_SECRET,
     name: process.env.SESSION_NAME || 'hod.sid',
     sanitiseInputs: false
   },

package/controller/controller.js

@@ -200,10 +200,12 @@ module.exports = class Controller extends BaseController {
               req.form.errors[key].errorLinkId = key + '-' + field.options[0];
             }
             // eslint-disable-next-line brace-style
-          }
-          // get first field for date input control
-          else if (field && field.mixin === 'input-date') {
+          } else if (field && field.mixin === 'input-date') {
+            // get first field for date input control
             req.form.errors[key].errorLinkId = key + '-day';
+          } else if (field && field.mixin === 'input-amount-with-unit-select') {
+            // get first field for amount-unit input control
+            req.form.errors[key].errorLinkId = key + '-amount';
           } else {
             req.form.errors[key].errorLinkId = key;
           }

package/controller/validation/index.js

@@ -47,7 +47,7 @@ function validate(fields) {
       fields[key].validate = [fields[key].validate];
     }
 
-    if (fields[key].options) {
+    if (fields[key].options && !fields[key].groupedFieldsWithOptions) {
       fields[key].validate = fields[key].validate || [];
       fields[key].validate.push({
         type: 'equal',

package/controller/validation/validators.js

@@ -177,5 +177,4 @@ module.exports = Validators = {
     // eslint-disable-next-line max-len
     return value === '' || Validators.regex(value, /^(([GIR] ?0[A]{2})|((([A-Z][0-9]{1,2})|(([A-Z][A-HJ-Y][0-9]{1,2})|(([A-Z][0-9][A-Z])|([A-Z][A-HJ-Y][0-9]?[A-Z])))) ?[0-9][A-Z]{2}))$/i);
   }
-
 };

package/frontend/govuk-template/govuk_template_generated.html

@@ -0,0 +1,102 @@
+
+<!DOCTYPE html>
+<!--[if lt IE 9]><html class="lte-ie8" lang="{{htmlLang}}"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{htmlLang}}" class="govuk-template"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
+    <title>{{$pageTitle}}{{/pageTitle}}</title>
+    {{$head}}{{/head}}
+
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{govukAssetPath}}images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{govukAssetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{govukAssetPath}}images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{govukAssetPath}}images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{govukAssetPath}}images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{govukAssetPath}}images/govuk-apple-touch-icon.png">
+
+
+    <meta name="theme-color" content="#0b0c0c" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+    <meta property="og:image" content="{{govukAssetPath}}images/opengraph-image.png">
+  </head>
+
+  <body class="{{$bodyClasses}}{{/bodyClasses}} govuk-template__body  js-enabled" >
+    <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+
+
+
+    <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
+       {{$cookieMessage}}{{/cookieMessage}}
+    </div>
+
+	{{$bodyStart}}{{/bodyStart}}
+
+    <header role="banner" id="govuk-header" class="{{$headerClass}}{{/headerClass}}">
+      <div class="govuk-header__container govuk-width-container">
+
+          <div class="govuk-header__logo">
+            <a href="{{$homepageUrl}}https://www.gov.uk{{/homepageUrl}}" title="{{$logoLinkTitle}}Go to the GOV.UK homepage{{/logoLinkTitle}}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
+			<span class="govuk-header__logotype">
+				<!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg\" viewBox="0 0 32 30" height="30" width="32">
+            <path fill="currentColor" fill-rule="evenodd"    d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8"></path>
+          </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="{{govukAssetPath}}images/govuk-logotype-tudor-crown.png" class="govuk-header__logotype-crown-fallback-image" width="32" height="30" alt="">
+          <![endif]-->
+			</span>
+				<span class="govuk-header__logotype-text">
+				  {{$globalHeaderText}}GOV.UK{{/globalHeaderText}}
+				</span>
+            </a>
+          </div>
+          {{$insideHeader}}{{/insideHeader}}
+
+        {{$propositionHeader}}{{/propositionHeader}}
+      </div>
+    </header>
+
+
+    {{$afterHeader}}{{/afterHeader}}
+
+
+    {{$main}}{{/main}}
+
+    <footer class="govuk-footer" id="footer" role="contentinfo">
+
+      <div class="govuk-width-container">
+        {{$footerTop}}{{/footerTop}}
+
+        <div class="govuk-footer__meta">
+          <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+		        <h2 class="govuk-visually-hidden">Support links</h2>
+            {{$footerSupportLinks}}{{/footerSupportLinks}}
+
+			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+            </svg>
+
+			      <span class="govuk-footer__licence-description">{{$licenceMessage}}All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" id="open-government-licence" class="govuk-footer__link" target="_blank" rel="license">Open Government Licence v3.0</a>, except where otherwise stated{{/licenceMessage}}</span>
+          </div>
+
+          <div class="govuk-footer__meta-item">
+            <a class="govuk-footer__link govuk-footer__copyright-logo" id="copyright-logo" target="_blank" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">{{$crownCopyrightMessage}}© Crown copyright{{/crownCopyrightMessage}}</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <div id="global-app-error" class="app-error hidden"></div>
+
+
+    {{$bodyEnd}}{{/bodyEnd}}
+
+
+    <script  {{#nonce}}nonce="{{nonce}}"{{/nonce}}>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
+
+  </body>
+</html>

package/frontend/template-mixins/mixins/template-mixins.js

@@ -14,6 +14,8 @@ const PARTIALS = [
   'partials/forms/input-text-group',
   'partials/forms/input-text-date',
   'partials/forms/input-submit',
+  'partials/forms/grouped-inputs-select',
+  'partials/forms/grouped-inputs-text',
   'partials/forms/select',
   'partials/forms/checkbox',
   'partials/forms/textarea-group',
@@ -214,6 +216,7 @@ module.exports = function (options) {
         labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
         formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
         hint: hint,
+        amountWithUnitSelectItemClassName: 'grouped-inputs__item',
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
         maxlengthAttribute: field.maxlengthAttribute === true,
@@ -222,6 +225,7 @@ module.exports = function (options) {
         required: required,
         pattern: extension.pattern,
         date: extension.date,
+        amountWithUnitSelect: extension.amountWithUnitSelect,
         autocomplete: autocomplete,
         child: field.child,
         isPageHeading: field.isPageHeading,
@@ -232,7 +236,7 @@ module.exports = function (options) {
       });
     }
 
-    function optionGroup(key, opts) {
+    function optionGroup(key, opts, pKey = key) {
       opts = opts || {};
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
@@ -248,6 +252,7 @@ module.exports = function (options) {
           legendValue = legend.value;
         }
       }
+
       return {
         key: key,
         error: this.errors && this.errors[key],
@@ -270,15 +275,16 @@ module.exports = function (options) {
 
           if (typeof obj === 'string') {
             value = obj;
-            label = 'fields.' + key + '.options.' + obj + '.label';
-            optionHint = 'fields.' + key + '.options.' + obj + '.hint';
+            // pKey - optional param that demotes parent key for group components - set to key param val by default
+            label = 'fields.' + pKey + '.options.' + obj + '.label';
+            optionHint = 'fields.' + pKey + '.options.' + obj + '.hint';
           } else {
             value = obj.value;
-            label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
+            label = obj.label || 'fields.' + pKey + '.options.' + obj.value + '.label';
             toggle = obj.toggle;
             child = obj.child;
             useHintText = obj.useHintText;
-            optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
+            optionHint = obj.hint || 'fields.' + pKey + '.options.' + obj.value + '.hint';
           }
 
           if (this.values && this.values[key] !== undefined) {
@@ -469,6 +475,50 @@ module.exports = function (options) {
             return parts.concat(monthPart, yearPart).join('\n');
           };
         }
+      },
+      'input-amount-with-unit-select': {
+        handler: function () {
+          return function (key) {
+            key = (key === '{{key}}' || key === '' || key === undefined) ? hoganRender(key, this) : key;
+            const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+
+            let autocomplete = field.autocomplete || 'off';
+            if (autocomplete === 'off') {
+              autocomplete = { amount: 'off'};
+            } else if (typeof autocomplete === 'string') {
+              autocomplete = { amount: autocomplete + '-amount' };
+            }
+
+            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
+            const classNameAmount = (field.controlsClass && field.controlsClass.amount) ? field.controlsClass.amount : 'govuk-input--width-3';
+            const classNameUnit = (field.controlsClass && field.controlsClass.unit) ? field.controlsClass.unit : 'govuk-input--width-5';
+
+            const parts = [];
+
+            // basically does the '_.each(mixins, function (mixin, name)' part manually (which renders the HTML
+            // for both child components and looks for a 'renderWith' and optional 'Options' method to use)
+            const amountPart = compiled['partials/forms/grouped-inputs-text']
+              .render(inputText.call(this,
+                key + '-amount', {
+                  formGroupClassName,
+                  autocomplete: autocomplete.amount,
+                  className: classNameAmount,
+                  amountWithUnitSelect: true }
+              ));
+
+            const unitPart = compiled['partials/forms/grouped-inputs-select']
+              .render(inputText.call(this, key + '-unit',
+                optionGroup.call(this,
+                  key + '-unit', {
+                    formGroupClassName,
+                    className: classNameUnit,
+                    amountWithUnitSelect: true },
+                  key
+                )));
+
+            return parts.concat(amountPart, unitPart).join('\n');
+          };
+        }
       }
     };
 

package/frontend/template-mixins/partials/forms/grouped-inputs-select.html

@@ -0,0 +1,13 @@
+<div class="{{amountWithUnitSelectItemClassName}}">
+  <div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+        <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+      <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} govuk-select--error{{/error}}" name="{{id}}" aria-required="{{required}}">
+      {{#options}}
+          <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
+      {{/options}}
+      </select>
+  </div>
+</div>

package/frontend/template-mixins/partials/forms/grouped-inputs-text.html

@@ -0,0 +1,37 @@
+<div class="{{amountWithUnitSelectItemClassName}}"> 
+    <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+          <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+      {{#renderChild}}{{/renderChild}}
+          {{#attributes}}
+              {{#prefix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+              {{/prefix}}
+          {{/attributes}}
+          <input
+              type="{{type}}"
+              name="{{id}}"
+              id="{{id}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+              aria-required="{{required}}"
+              {{#value}} value="{{value}}"{{/value}}
+              {{#min}} min="{{min}}"{{/min}}
+              {{#max}} max="{{max}}"{{/max}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+              {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+              {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+              {{#error}} aria-invalid="true"{{/error}}
+              {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+              {{#attributes}}
+                  {{attribute}}="{{value}}"
+              {{/attributes}}
+          >
+          {{#attributes}}
+              {{#suffix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+              {{/suffix}}
+          {{/attributes}}
+    </div>
+</div>

package/frontend/themes/gov-uk/styles/_grouped-input.scss

@@ -0,0 +1,5 @@
+.grouped-inputs__item {
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 0;
+}

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

@@ -27,6 +27,7 @@ $path: "/public/images/" !default;
 @import "check_your_answers";
 @import "pdf";
 @import "session-timeout-dialog";
+@import "grouped-input";
 
 // Modules
 @import "modules/validation";

package/frontend/toolkit/assets/javascript/form-focus.js

@@ -85,6 +85,10 @@ function formFocus() {
     document.getElementById(getElementFromSummaryLink + '-day').focus();
   }
 
+  if (document.getElementById(getElementFromSummaryLink + '-amount') && forms.length === 1 && editMode) {
+    document.getElementById(getElementFromSummaryLink + '-amount').focus();
+  }
+
   if (forms.length > 0) {
     labels = document.getElementsByTagName('label');
     if (labels) {

package/lib/encryption.js

@@ -1,23 +1,49 @@
-/* eslint-disable */ 
 'use strict';
 
-const crypto = require('crypto');
+const crypto = require('node:crypto');
 const algorithm = 'aes-256-cbc';
+const ivLength = 16;
 
-module.exports = password => ({
-
-  encrypt: text => {
-    const cipher = crypto.createCipher(algorithm, password);
-    let crypted = cipher.update(text, 'utf8', 'hex');
-    crypted += cipher.final('hex');
-    return crypted;
-  },
-
-  decrypt: text => {
-    const decipher = crypto.createDecipher(algorithm, password);
-    let dec = decipher.update(text, 'hex', 'utf8');
-    dec += decipher.final('utf8');
-    return dec;
+/**
+ * Creates an encryption utility with AES-256-CBC algorithm.
+ * Provides encrypt and decrypt methods that use a random IV for each encryption operation.
+ *
+ * @module encryption
+ * @param {string|Buffer} secret - Must be exactly 32 bytes
+ * @returns {Object} Encryption utility object
+ * @throws {Error} If secret is not exactly 32 bytes
+ */
+module.exports = secret => {
+  const encryptionKey = Buffer.from(secret, 'utf8');
+  if (encryptionKey.byteLength !== 32) {
+    throw new Error(`Encryption secret must be exactly 32 bytes. Provided: ${encryptionKey.byteLength} bytes.`);
   }
 
-});
+  return {
+    encrypt: text => {
+      try {
+        const iv = crypto.randomBytes(ivLength);
+        const cipher = crypto.createCipheriv(algorithm, encryptionKey, iv);
+        let encrypted = cipher.update(text, 'utf8');
+        encrypted = Buffer.concat([encrypted, cipher.final()]);
+        return iv.toString('hex') + ':' + encrypted.toString('hex');
+      } catch (error) {
+        throw new Error(`Encryption failed: ${error.message}`);
+      }
+    },
+
+    decrypt: text => {
+      try {
+        const textParts = text.split(':');
+        const iv = Buffer.from(textParts.shift(), 'hex');
+        const encryptedText = Buffer.from(textParts.join(':'), 'hex');
+        const decipher = crypto.createDecipheriv(algorithm, encryptionKey, iv);
+        let decrypted = decipher.update(encryptedText);
+        decrypted = Buffer.concat([decrypted, decipher.final()]);
+        return decrypted.toString('utf8');
+      } catch (error) {
+        throw new Error(`Decryption failed: ${error.message}`);
+      }
+    }
+  };
+};

package/lib/sessions.js

@@ -10,8 +10,11 @@ const secureHttps = config => config.protocol === 'https' || config.env === 'pro
 module.exports = (app, config) => {
   const logger = config.logger || console;
 
-  if (config.env === 'production' && config.session.secret === 'changethis') {
-    throw new Error('Session secret must be set to a unique random string for production environments');
+  const secretBuffer = Buffer.from(config.session.secret, 'utf8');
+  if (secretBuffer.byteLength !== 32) {
+    throw new Error(
+      `Session secret must be exactly 32 bytes. Current: ${secretBuffer.byteLength} bytes.`
+    );
   }
 
   app.use(cookieParser(config.session.secret, {

package/lib/settings.js

@@ -42,7 +42,7 @@ module.exports = async (app, config) => {
     viewsArray.slice().reverse().forEach(view => {
       const customViewPath = path.resolve(config.root, view);
       try {
-        fs.accessSync(customViewPath, fs.F_OK);
+        fs.accessSync(customViewPath, fs.constants.F_OK);
       } catch (err) {
         throw new Error(`Cannot find views at ${customViewPath}`);
       }

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "22.11.1",
+  "version": "22.11.6-unit-of-measure-beta.3",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
   "engines": {
-    "node": ">=10.22.1",
-    "npm": ">=6.14.0"
+    "node": ">=14.0.0"
   },
   "bin": {
     "hof-build": "./bin/hof-build",