Merge pull request #1282 from alphagov/create-legacy-template-view

Add views that use govuk-frontend and legacy elements/template

app/app.js

@@ -19,7 +19,8 @@ const appViews = [
   configPaths.examples,
   configPaths.fullPageExamples,
   configPaths.components,
-  configPaths.src
+  configPaths.src,
+  configPaths.node_modules
 ]
 
 module.exports = (options) => {
@@ -61,7 +62,7 @@ module.exports = (options) => {
   app.use('/vendor/html5-shiv/', express.static('node_modules/html5shiv/dist/'))
 
   // serve legacy code from node node modules
-  app.use('/vendor/govuk_template/', express.static('node_modules/govuk_template_jinja/assets/stylesheets/'))
+  app.use('/vendor/govuk_template/', express.static('node_modules/govuk_template_jinja/assets/'))
 
   app.use('/assets', express.static(path.join(configPaths.src, 'assets')))
 

app/assets/scss/app-legacy.scss

@@ -8,6 +8,9 @@ $govuk-compatibility-govukfrontendtoolkit: true;
 $govuk-compatibility-govuktemplate: true;
 $govuk-compatibility-govukelements: true;
 
+// Set Elements assets path
+$path: "/assets/images/";
+
 // Import GOV.UK frontend toolkit and GOV.UK elements
 @import "govuk-elements-sass/public/sass/govuk-elements";
 

app/full-page-examples.js

@@ -1,4 +1,5 @@
 module.exports = (app) => {
+  require('./views/full-page-examples/applicant-details')(app)
   require('./views/full-page-examples/have-you-changed-your-name')(app)
   require('./views/full-page-examples/feedback')(app)
   require('./views/full-page-examples/how-do-you-want-to-sign-in')(app)

app/views/full-page-examples/applicant-details/confirm.njk

@@ -0,0 +1,30 @@
+{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+
+{% from "panel/macro.njk" import govukPanel %}
+
+{% set asset_path = "/vendor/govuk_template/" %}
+{% set homepage_url = "/" %}
+{% set pageTitle = "Applicant details submitted" %}
+{% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
+
+{% block head %}
+  <!--[if !IE 8]><!-->
+    <link rel="stylesheet" href="/public/app-legacy.css">
+  <!--<![endif]-->
+  <!--[if IE 8]>
+    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
+  <![endif]-->
+{% endblock %}
+
+{% block content %}
+  <main id="content" role="main">
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ govukPanel({
+          titleText: pageTitle,
+          classes: "govuk-!-margin-top-8"
+        }) }}
+      </div>
+    </div>
+</main>
+{% endblock %}

app/views/full-page-examples/applicant-details/index.js

@@ -0,0 +1,61 @@
+const { body, validationResult } = require('express-validator/check')
+const { formatValidationErrors } = require('../../../utils.js')
+
+module.exports = (app) => {
+  app.post(
+    '/full-page-examples/applicant-details',
+    [
+      body('full-name')
+        .exists()
+        .not().isEmpty().withMessage('Enter your full name'),
+      body('dob-day')
+        .exists()
+        .not().isEmpty().withMessage('Enter your date of birth day'),
+      body('dob-month')
+        .exists()
+        .not().isEmpty().withMessage('Enter your date of birth month'),
+      body('dob-year')
+        .exists()
+        .not().isEmpty().withMessage('Enter your date of birth year')
+    ],
+    (request, response) => {
+      const errors = formatValidationErrors(validationResult(request))
+
+      if (!errors) {
+        return response.render('./full-page-examples/applicant-details/confirm')
+      }
+
+      // If any of the date inputs error apply a general error.
+      const dobNamePrefix = 'dob'
+      const dobErrors = Object.values(errors).filter(error => error.id.includes(dobNamePrefix + '-'))
+      if (dobErrors) {
+        const firstdobErrorId = dobErrors[0].id
+        // Get the first error message and merge it into a single error message.
+        errors[dobNamePrefix] = {
+          id: dobNamePrefix,
+          href: '#' + firstdobErrorId
+        }
+
+        // Construct a single error message based on all three error messages.
+        errors[dobNamePrefix].text = 'Enter your date of birth '
+        if (dobErrors.length === 3) {
+          errors[dobNamePrefix].text += 'date'
+        } else {
+          errors[dobNamePrefix].text += dobErrors.map(error => error.text.replace('Enter your date of birth ', '')).join(' and ')
+        }
+      }
+
+      let errorSummary = Object.values(errors)
+      if (dobErrors) {
+        // Remove all other errors from the summary so we only have one message that links to the dob input.
+        errorSummary = errorSummary.filter(error => !error.id.includes(dobNamePrefix + '-'))
+      }
+
+      response.render('./full-page-examples/applicant-details/index', {
+        errors,
+        errorSummary,
+        values: request.body // In production this should sanitized.
+      })
+    }
+  )
+}

app/views/full-page-examples/applicant-details/index.njk

@@ -0,0 +1,130 @@
+{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "button/macro.njk" import govukButton %}
+
+{% set asset_path = "/vendor/govuk_template/" %}
+{% set homepage_url = "/" %}
+{% set pageTitle = "Applicant details" %}
+{% block pageTitle %}{{ "Error: " if errors }}GOV.UK - {{ pageTitle }}{% endblock %}
+
+{% block head %}
+  <!--[if !IE 8]><!-->
+    <link rel="stylesheet" href="/public/app-legacy.css">
+  <!--<![endif]-->
+  <!--[if IE 8]>
+    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
+  <![endif]-->
+{% endblock %}
+
+{% block content %}
+  <main id="content" role="main">
+    <div class="grid-row">
+      <div class="column-two-thirds">
+
+        {{ govukBackLink({
+          text: "Back"
+        }) }}
+
+       {% if errorSummary.length > 0 %}
+          <div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
+            <h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
+              There is a problem
+            </h2>
+
+            <ul class="error-summary-list">
+              {% for item in errorSummary %}
+                <li>
+                  {% if item.href %}
+                    <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+                  {% else %}
+                    {{ item.html | safe if item.html else item.text }}
+                  {% endif %}
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        {% endif %}
+
+        <h1 class="heading-xlarge">
+         {{ pageTitle }}
+        </h1>
+
+        <form method="post" novalidate>
+
+          <div class="form-group {%- if errors["full-name"] %} form-group-error {% endif %}">
+            <label class="form-label" for="full-name">
+              Full name
+              <span class="form-hint">
+                Please enter your name as it’s written on official documents such as a passport or driving licence.
+              </span>
+            </label>
+            {% if errors["full-name"] %}
+              <span class="error-message">
+               Enter your full name
+             </span>
+            {% endif %}
+            <input class="form-control {%- if errors["full-name"] %} form-control-error {% endif %}" id="full-name" type="text" name="full-name" value="{{ values['full-name'] }}">
+          </div>
+
+          {% set dateInputDayClass = "govuk-input--width-2" %}
+          {% set dateInputMonthClass = "govuk-input--width-2" %}
+          {% set dateInputYearClass = "govuk-input--width-4" %}
+
+          {% if errors["dob-day"] %}
+            {% set dateInputDayClass = dateInputDayClass + " govuk-input--error" %}
+          {% endif %}
+          {% if errors["dob-month"] %}
+            {% set dateInputMonthClass = dateInputMonthClass + " govuk-input--error" %}
+          {% endif %}
+          {% if errors["dob-year"] %}
+            {% set dateInputYearClass = dateInputYearClass + " govuk-input--error" %}
+          {% endif %}
+
+          {{ govukDateInput({
+            id: "dob",
+            namePrefix: "dob",
+            fieldset: {
+              legend: {
+                text: "Date of birth",
+                classes: "govuk-fieldset__legend--m"
+              }
+            },
+            hint: {
+              text: "For example, 31 3 1980"
+            },
+            items: [
+              {
+                classes: dateInputDayClass,
+                name: "day",
+                value: values["dob-day"]
+              },
+              {
+                classes: dateInputMonthClass,
+                name: "month",
+                value: values["dob-month"]
+              },
+              {
+                classes: dateInputYearClass,
+                name: "year",
+                value: values["dob-year"]
+              }
+            ],
+            errorMessage: errors["dob"]
+          }) }}
+
+          {{ govukButton({
+            text: "Continue"
+          }) }}
+
+        </form>
+      </div>
+    </div>
+  </main>
+{% endblock %}
+
+{% block body_end %}
+  <script src="/public/all.js"></script>
+  <script>window.GOVUKFrontend.initAll()</script>
+{% endblock %}