Your name page

index.js

@@ -9,6 +9,8 @@ import bodyParser from 'body-parser'
 import config from './config/index.js'
 import xGovFilters from '@x-govuk/govuk-prototype-filters'
 import formWizard from './src/routes/form-wizard/index.js'
+import validationMessageLookup from './src/filters/validationMessageLookup.js'
+import toErrorList from './src/filters/toErrorList.js'
 
 const { govukMarkdown } = xGovFilters
 
@@ -52,6 +54,8 @@ Object.keys(globalValues).forEach((key) => {
   nunjucksEnv.addGlobal(key, globalValues[key])
 })
 nunjucksEnv.addFilter('govukMarkdown', govukMarkdown)
+nunjucksEnv.addFilter('validationMessageLookup', validationMessageLookup)
+nunjucksEnv.addFilter('toErrorList', toErrorList)
 
 // body parser
 app.use(bodyParser.urlencoded({ extended: true }))

src/filters/toErrorList.js

@@ -0,0 +1,14 @@
+import validationMessageLookup from './validationMessageLookup.js'
+
+function toErrorList (errors) {
+  const errorList = []
+  for (const [key, value] of Object.entries(errors)) {
+    errorList.push({
+      text: validationMessageLookup(key, value.type),
+      href: `#${key}`
+    })
+  }
+  return errorList
+}
+
+export default toErrorList

src/filters/validationMessageLookup.js

@@ -0,0 +1,21 @@
+const validationMessages = {
+  'email-address': {
+    required: 'Enter an email address',
+    format: 'Enter an email address in the correct format'
+  },
+  'first-name': {
+    required: 'Enter your first name'
+  },
+  'last-name': {
+    required: 'Enter your last name'
+  }
+}
+
+function validationMessageLookup (field, type) {
+  if (!validationMessages[field] || !validationMessages[field][type]) {
+    throw new Error('No validation message found for field ' + field + ' and type ' + type)
+  }
+  return validationMessages[field][type]
+}
+
+export default validationMessageLookup

src/routes/form-wizard/fields.js

@@ -1,3 +1,5 @@
+import { validate } from 'email-validator'
+
 export default {
   'data-subject': {
     validate: 'required'
@@ -10,5 +12,17 @@ export default {
   },
   validationResult: {
     validate: 'required'
+  },
+  'email-address': {
+    validate: [
+      'required',
+      { type: 'format', fn: email => validate(email) }
+    ]
+  },
+  'first-name': {
+    validate: 'required'
+  },
+  'last-name': {
+    validate: 'required'
   }
 }

src/routes/form-wizard/steps.js

@@ -1,9 +1,7 @@
-import dataSubjectController from '../../controllers/dataSubjectController.js'
+import MyController from '../../controllers/MyController.js'
 import datasetController from '../../controllers/datasetController.js'
 import uploadController from '../../controllers/uploadController.js'
 import errorsController from '../../controllers/errorsController.js'
-import MyController from '../../controllers/MyController.js'
-import emailAddressController from '../../controllers/emailAddressController.js'
 
 export default {
   '/': {
@@ -13,7 +11,7 @@ export default {
     template: '../views/start.html'
   },
   '/data-subject': {
-    controller: dataSubjectController,
+    controller: MyController,
     fields: ['data-subject'],
     next: 'dataset'
   },
@@ -39,8 +37,13 @@ export default {
     next: 'email-address'
   },
   '/email-address': {
-    controller: emailAddressController,
+    controller: MyController,
     fields: ['email-address'],
     next: 'name'
+  },
+  '/name': {
+    controller: MyController,
+    fields: ['first-name', 'last-name'],
+    next: 'lpa'
   }
 }

src/views/email-address.html

@@ -28,12 +28,7 @@
       {% if datasetError %}
         {{ govukErrorSummary({
           titleText: "There is a problem",
-          errorList: [
-            {
-              text: errorMessage,
-              href: "#email-address"
-            }
-          ]
+          errorList: errors | toErrorList
         }) }}
       {% endif %}
 
@@ -52,7 +47,7 @@
           spellcheck: false,
           value: data.check.emailAddress,
           errorMessage: {
-            text: errorMessage 
+            text: 'email-address' | validationMessageLookup(errors['email-address'].type)
           } if datasetError else undefined
         }) }}
 

src/views/name.html

@@ -0,0 +1,71 @@
+{% extends "layouts/main.html" %}
+
+{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% from 'govuk/components/input/macro.njk' import govukInput %}
+{% from 'govuk/components/error-message/macro.njk' import govukErrorMessage %}
+{% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
+
+{% set pageName = "Your name" %}
+
+{% block pageTitle %}
+  {% if errors | length %}
+    Error: {{super()}}
+  {% else %}
+    {{super()}}
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">
+        {{pageName}}
+      </h1>
+
+      {% if errors | length %}
+        {{ govukErrorSummary({
+          titleText: "There is a problem",
+          errorList: errors | toErrorList
+        }) }}
+      {% endif %}
+
+      <form method="post" novalidate>
+        {{ govukInput({
+          id: "first-name",
+          name: "first-name",
+          label: {
+            text: "First name",
+            classes: "govuk-label--m"
+          },
+          hint: {
+            text: "Or given name"
+          },
+          value: data.check.firstName,
+          errorMessage: {
+            text: 'first-name' | validationMessageLookup(errors['first-name'].type) 
+          } if 'first-name' in errors
+        }) }}
+
+        {{ govukInput({
+          id: "last-name",
+          name: "last-name",
+          label: {
+            text: "Last name",
+            classes: "govuk-label--m"
+          },
+          hint: {
+            text: "Or family name"
+          },
+          value: data.check.lastName,
+          errorMessage: {
+            text: 'last-name' | validationMessageLookup(errors['last-name'].type)
+          } if 'last-name' in errors
+        }) }}
+
+        {{ govukButton({
+          text: "Continue"
+        }) }}
+      </form>
+    </div>
+  </div>
+{% endblock %}

test/acceptance/upload_data.test.js

@@ -67,4 +67,9 @@ test('Enter form information and upload a file with errors and without errors',
   await page.getByRole('button', { name: 'Continue' }).click()
 
   await page.waitForURL('**/name')
+  await page.getByLabel('First name').fill('Bob')
+  await page.getByLabel('Last name').fill('Marley')
+  await page.getByRole('button', { name: 'Continue' }).click()
+
+  await page.waitForURL('**/lpa')
 })