diff --git a/app/app.js b/app/app.js index 5c368a7a8a..ead1877186 100644 --- a/app/app.js +++ b/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'))) diff --git a/app/assets/scss/app-legacy.scss b/app/assets/scss/app-legacy.scss index 68ae07c10b..aefa984283 100644 --- a/app/assets/scss/app-legacy.scss +++ b/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"; diff --git a/app/full-page-examples.js b/app/full-page-examples.js index 016217d287..6722421629 100644 --- a/app/full-page-examples.js +++ b/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) diff --git a/app/views/full-page-examples/applicant-details/confirm.njk b/app/views/full-page-examples/applicant-details/confirm.njk new file mode 100644 index 0000000000..000e0d2bed --- /dev/null +++ b/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 %} + + + + +{% endblock %} + +{% block content %} +
+
+
+ {{ govukPanel({ + titleText: pageTitle, + classes: "govuk-!-margin-top-8" + }) }} +
+
+
+{% endblock %} diff --git a/app/views/full-page-examples/applicant-details/index.js b/app/views/full-page-examples/applicant-details/index.js new file mode 100644 index 0000000000..297f23705d --- /dev/null +++ b/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. + }) + } + ) +} diff --git a/app/views/full-page-examples/applicant-details/index.njk b/app/views/full-page-examples/applicant-details/index.njk new file mode 100644 index 0000000000..18983ce41d --- /dev/null +++ b/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 %} + + + + +{% endblock %} + +{% block content %} +
+
+
+ + {{ govukBackLink({ + text: "Back" + }) }} + + {% if errorSummary.length > 0 %} + + {% endif %} + +

+ {{ pageTitle }} +

+ +
+ +
+ + {% if errors["full-name"] %} + + Enter your full name + + {% endif %} + +
+ + {% 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" + }) }} + +
+
+
+
+{% endblock %} + +{% block body_end %} + + +{% endblock %} diff --git a/app/views/full-page-examples/renew-driving-licence/index.njk b/app/views/full-page-examples/renew-driving-licence/index.njk new file mode 100644 index 0000000000..922d16a0e9 --- /dev/null +++ b/app/views/full-page-examples/renew-driving-licence/index.njk @@ -0,0 +1,156 @@ +{# This example is based on the "Renew driving licence" +example: https://www.gov.uk/renew-driving-licence #} +{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %} + +{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %} +{% from "inset-text/macro.njk" import govukInsetText %} +{% from "tabs/macro.njk" import govukTabs %} + +{% set asset_path = "/vendor/govuk_template/" %} +{% set homepage_url = "/" %} +{% set pageTitle = "Renew your driving licence" %} +{% block page_title %}GOV.UK - {{ pageTitle }}{% endblock %} + +{% block head %} + + + + +{% endblock %} + +{% block content %} +
+
+
+ {{ govukBreadcrumbs({ + items: [ + { + text: "Home", + href: "#/" + }, + { + text: "Driving and transport", + href: "#/browse/driving" + }, + { + text: "Driving licences", + href: "#/browse/driving/driving-licences" + } + ] + }) }} + +

+ {{ pageTitle }} +

+ +

Renew your driving licence online with DVLA if you have a valid UK passport.

+ + {{ govukInsetText({ + html: "There’s a different way to renew your licence if you’re 70 or over and renew a 5-year bus or lorry licence." + }) }} + + Start now + + {% set moreInformationHTML %} + +

You must renew a photocard licence every 10 years - you’ll receive a reminder before your current licence ends.

+ +

What you need

+ +

To renew online, you need:

+ +
    +
  • a valid UK passport
    • +
  • to be a resident of Great Britain - there’s a different service in Northern Ireland +
    • +
  • to pay £14 by MasterCard, Visa, Electron or Delta debit or credit card (there’s no fee if you’re over 70 or have a medical short period licence)
    • +
  • addresses of where you’ve lived over the last 3 years
    • +
  • your current driving licence (if you do not have your licence you must say why in your application)
    • +
  • your National Insurance number (if you know it)
    • +
  • to not be disqualified from driving
    • +
+ +

How long it takes

+ +

Your driving licence should arrive within a week if you apply online.

+ + {{ govukInsetText({ + html: "You must send your old photocard licence to DVLA when you get your new licence. You’ll be told the address to use when you finish the application." + }) }} + +

Your new licence will be valid from the date your application is approved, not from the expiry date of your current licence.

+ +

Personal data

+ +

DVLA will send you a confirmation email once you’ve applied. You might be asked to take part in research by email, but you can opt out.

+ {% endset %} + + {% set otherWaysToApplyHTML %} +

Apply at a Post Office

+ +

You’ll get a reminder letter in the post. Take it to a Post Office that deals with DVLA photocard licence renewal.

+ +

You also need to take:

+ +
    +
  • your photocard licence if you have it
    • +
  • the £21.50 fee
    • +
+ +

If you do not have a reminder letter, you’ll need your photocard licence to apply at the Post Office.

+ + {{ govukInsetText({ + html: "You cannot apply at the Post Office if your name has changed. You’ll need to apply by post." + }) }} + +

Apply by post

+ +

Order a ‘D1 pack’ of forms from DVLA or get one from a Post Office that deals with DVLA photocard renewal or vehicle tax.

+ +

You need to include these things with your completed forms:

+ +
    +
  • a recent passport type photo (do not sign the back of the photo)
    • +
  • your current photocard licence, if you have it
    • +
  • a cheque or postal order for £17, payable to DVLA (no fee is needed if you have a medical short period licence or you’re aged 70 or over)
    • +
+ +

You also need to include identity documents if you’ve changed your name.

+ +

After you apply at a Post Office or by post

+

Your driving licence should arrive within 3 weeks. It might take longer if your medical or personal details need to be checked.

+ +

You can continue driving while you wait for your new licence to arrive.

+ + {% endset %} + + {{ govukTabs({ + items: [ + { + label: "More information", + id: "more-information", + panel: { + html: moreInformationHTML + } + }, + { + label: "Other ways to apply", + id: "other-ways-to-apply", + panel: { + html: otherWaysToApplyHTML + } + } + ] + }) }} +
+
+
+ +{% endblock %} + +{% block body_end %} + + +{% endblock %} diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk index 1315580ee2..1bc633bdee 100644 --- a/app/views/layouts/_generic.njk +++ b/app/views/layouts/_generic.njk @@ -4,13 +4,13 @@ {% if legacy %} - + - - + + diff --git a/config/paths.json b/config/paths.json index 84958651dd..9b7700c041 100644 --- a/config/paths.json +++ b/config/paths.json @@ -7,6 +7,7 @@ "layouts": "app/views/layouts/", "config": "config/", "dist": "dist/", + "node_modules": "node_modules/", "package": "package/", "public": "public/", "sassdoc": "sassdoc/",