From e8dac9cecf823a9866b5dc7c0a6c02fe13d427ef Mon Sep 17 00:00:00 2001 From: Daniel Moore Date: Fri, 8 Jun 2018 13:37:58 +0100 Subject: [PATCH 01/25] New post office journey prototype --- .idea/codeStyles/Project.xml | 11 + app/assets/sass/_check-your-answers.scss | 97 +++ app/assets/sass/_confirm-verify-details.scss | 9 + app/assets/sass/_phase-banner.scss | 4 + app/assets/sass/_questions.scss | 36 + app/assets/sass/_verify-start.scss | 31 + app/assets/sass/application.scss | 103 ++- app/assets/sass/examples.scss | 22 - .../sass/patterns/_check-your-answers.scss | 14 - app/assets/sass/patterns/_unbranded.scss | 21 - app/routes.js | 61 +- app/views/exceptionChosenDocs.html | 77 +++ app/views/exceptionDocsErrorNoAddress.html | 135 ++++ app/views/exceptionDocsErrorNoDob.html | 132 ++++ app/views/exceptionDocsErrorNotEnough.html | 118 ++++ app/views/exceptionRouteDocDetails1.html | 2 +- app/views/exceptionRouteDocs1.html | 164 +++-- app/views/exceptionRouteDocs2.html | 4 +- app/views/exceptionRouteStart.html | 14 +- app/views/formAddName.html | 175 +++++ app/views/formAddNames.html | 358 ++-------- app/views/formAddressAddNew.html | 21 +- app/views/formAddressAddUnusual.html | 2 +- ...dressGaps.html => formAddressCurrent.html} | 84 +-- app/views/formAddressCurrentManual.html | 267 ++++++++ app/views/formAddressDates.html | 162 ----- app/views/formAddressEdit.html | 274 +++----- app/views/formAddressHistory.html | 367 +++-------- app/views/formAddressManual.html | 296 +++------ app/views/formAddressUnusualDates.html | 2 +- app/views/formCompleteExp.html | 72 +- app/views/formContactNumber.html | 8 +- app/views/formDeclaration.html | 2 +- app/views/formDeclarationExc.html | 86 +-- app/views/formEditName.html | 175 +++++ app/views/formEmail.html | 2 +- app/views/formEnterDob.html | 4 +- app/views/formEnterName.html | 4 +- app/views/formFirstPage.html | 2 +- app/views/formGender.html | 8 +- app/views/formIdentity.html | 7 +- app/views/formIdentityBankStatement.html | 149 +++++ app/views/formIdentityDriving.html | 362 ++++++++-- app/views/formIdentityPassport.html | 622 +++++++++--------- app/views/formOtherAddresses.html | 2 +- app/views/formPlaceBirth.html | 4 +- app/views/formPostcodeResults.html | 2 +- app/views/formSendAddress.html | 8 +- app/views/formSummary.html | 621 ++++++++--------- package.json | 4 +- public/stylesheets/application.css | 185 +++++- 51 files changed, 3258 insertions(+), 2134 deletions(-) create mode 100644 .idea/codeStyles/Project.xml create mode 100644 app/assets/sass/_check-your-answers.scss create mode 100644 app/assets/sass/_confirm-verify-details.scss create mode 100644 app/assets/sass/_phase-banner.scss create mode 100644 app/assets/sass/_questions.scss create mode 100644 app/assets/sass/_verify-start.scss mode change 100755 => 100644 app/assets/sass/application.scss delete mode 100755 app/assets/sass/examples.scss delete mode 100755 app/assets/sass/patterns/_check-your-answers.scss delete mode 100755 app/assets/sass/patterns/_unbranded.scss create mode 100644 app/views/exceptionChosenDocs.html create mode 100644 app/views/exceptionDocsErrorNoAddress.html create mode 100644 app/views/exceptionDocsErrorNoDob.html create mode 100644 app/views/exceptionDocsErrorNotEnough.html create mode 100644 app/views/formAddName.html rename app/views/{formAddressGaps.html => formAddressCurrent.html} (68%) create mode 100644 app/views/formAddressCurrentManual.html delete mode 100644 app/views/formAddressDates.html create mode 100644 app/views/formEditName.html create mode 100755 app/views/formIdentityBankStatement.html diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..aac5413 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/app/assets/sass/_check-your-answers.scss b/app/assets/sass/_check-your-answers.scss new file mode 100644 index 0000000..80ae220 --- /dev/null +++ b/app/assets/sass/_check-your-answers.scss @@ -0,0 +1,97 @@ +// https://github.com/alphagov/govuk_prototype_kit/blob/89d2218532a4323b4d49e2c5c58e9db9b498d3e9/app/assets/sass/patterns/_check-your-answers.scss +// Taken from the gov prototype kit +// Recommended - Use these styles for the check your answers pattern +.govuk-check-your-answers { + + @include media(desktop) { + display: table; + } + + > * { + position: relative; + border-bottom: 1px solid $border-colour; + + @include media(desktop) { + display: table-row; + border-bottom-width: 0; + } + + > * { + display: block; + + @include media(desktop) { + display: table-cell; + border-bottom: 1px solid $border-colour; + padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding + margin: 0; + } + } + + @include media(desktop) { + &:first-child > * { + padding-top: 0; + } + } + } + + .cya-question { + font-weight: bold; + margin: em(12, 19) 4em em(4,19) 0; + // top: from Elements' td + // right: due to length of "change" link (adjust if you change the link to be much longer) + // bottom: by eye + // using margin instead of padding because of easier absolutely positioning of .change + } + + > *:first-child .cya-question { + margin-top: 0; + } + + @include media(desktop) { + // to make group of q&a line up horizontally (unless there is just one group) + &.cya-questions-short, + &.cya-questions-long { + width: 100%; + } + + // recommended for mostly short questions + &.cya-questions-short .cya-question { + width: 30%; + } + + // recommended for mostly long questions + &.cya-questions-long .cya-question { + width: 50%; + } + } + + .cya-answer { + padding-bottom: em(9, 19); // from Elements' td + } + + .cya-change { + text-align: right; + position: absolute; + top: 0; + right: 0; + + @include media(desktop) { + position: static; + padding-right: 0; + } + } + +} + +// Deprecated - these styles will be removed in a later release +.check-your-answers { + td { + @include core-19; + vertical-align: top; + } + .change-answer { + text-align: right; + font-weight: bold; + padding-right: 0; + } +} diff --git a/app/assets/sass/_confirm-verify-details.scss b/app/assets/sass/_confirm-verify-details.scss new file mode 100644 index 0000000..42d1653 --- /dev/null +++ b/app/assets/sass/_confirm-verify-details.scss @@ -0,0 +1,9 @@ +#confirm-verify-details { + input { + margin-top: 0.35em; + } + + .form-group .form-group { + margin-bottom: 0.5em; + } +} \ No newline at end of file diff --git a/app/assets/sass/_phase-banner.scss b/app/assets/sass/_phase-banner.scss new file mode 100644 index 0000000..6900cf6 --- /dev/null +++ b/app/assets/sass/_phase-banner.scss @@ -0,0 +1,4 @@ +.phase-banner { + @extend %site-width-container; + @extend %contain-floats; +} diff --git a/app/assets/sass/_questions.scss b/app/assets/sass/_questions.scss new file mode 100644 index 0000000..d704fde --- /dev/null +++ b/app/assets/sass/_questions.scss @@ -0,0 +1,36 @@ +legend h1, legend h2 { + display: inline-block; +} + +.back-link { + display: inline-block; + margin-top: 15px; + margin-right: 15px; + padding-left: 14px; + border-bottom: #0b0c0c 1px solid; + color: #0b0c0c; + text-decoration: none; + background: url(images/icon-caret-left.png) no-repeat 0 4px; + font-family: "nta",Arial,sans-serif; + font-weight: 400; + text-transform: none; + font-size: 14px; + line-height: 1.14286; + + &:link, &:visited { + color: #0b0c0c; + } +} + +/* Hack to stop margins collapsing into each other. Place between the two elements */ +.margin-collapser { + height: 1px; + margin-top: -1px; +} + +@media (min-width: 641px) { + .back-link { + font-size: 16px; + line-height: 1.25; + } +} diff --git a/app/assets/sass/_verify-start.scss b/app/assets/sass/_verify-start.scss new file mode 100644 index 0000000..c3e4e32 --- /dev/null +++ b/app/assets/sass/_verify-start.scss @@ -0,0 +1,31 @@ +#start-declaration { + .block-label { + background: $panel-colour; + border: 5px solid $panel-colour; + padding: 14px 26px 11px 41px; + cursor: pointer; + margin: 0 0 25px 0; + + &.error { + border-color: $error-colour; + } + + label { + cursor: pointer; + } + + input { + position: absolute; + top: 16px; + left: 15px; + cursor: pointer; + width: auto; + height: auto; + opacity: 1; + } + } +} + +ul#document-list { + margin-bottom: 1em; +} \ No newline at end of file diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss old mode 100755 new mode 100644 index b3792c8..09c8d4f --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -1,10 +1,11 @@ +// Path to assets for use with the file-url function +// in the govuk frontend toolkit's url-helpers partial +$path: "/public/images/"; + // Import GOV.UK elements from /govuk-modules/, this will import the frontend toolkit and some base styles. // Take a look in /govuk-modules/_govuk-elements.scss to see which files are imported. @import 'govuk-elements'; - -// Take a look at in app/assets/sass/patterns/ to see which files are imported. -@import 'patterns/check-your-answers'; -@import 'patterns/unbranded'; +@import 'check-your-answers'; // Related items // (These styles will be moved to GOV.UK elements, duplicating here for now.) @@ -51,3 +52,97 @@ .reduceMargin { margin-top: -20px; } + +label.block-label { + background: transparent; + border: 0; +} + +label.block-label input { + opacity: 0; +} + +label.block-label.focused { + outline: none; +} + +label.block-label.selection-button-checkbox { + padding-top: 8px; + padding-bottom: 8px; +} + +label.block-label.selection-button-checkbox::before { + content: ""; + border: 2px solid; + background: 0 0; + width: 34px; + height: 34px; + position: absolute; + top: 0; + left: 0; +} + +label.block-label.selection-button-radio::before { + content: ""; + border: 2px solid; + background: 0 0; + width: 34px; + height: 34px; + position: absolute; + top: 0; + left: 0; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} + +label.block-label.selection-button-checkbox.focused::before, +label.block-label.selection-button-radio.focused::before { + -webkit-box-shadow: 0 0 0 5px #ffbf47; + -moz-box-shadow: 0 0 0 5px #ffbf47; + box-shadow: 0 0 0 5px #ffbf47; +} + +label.block-label.selection-button-radio::after { + content: ""; + border: 10px solid; + width: 0; + height: 0; + position: absolute; + top: 9px; + left: 9px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + zoom: 1; + opacity: 0; +} + +label.block-label.selection-button-checkbox::after { + content: ""; + border: solid; + border-width: 0 0 5px 5px; + background: 0 0; + width: 17px; + height: 7px; + position: absolute; + top: 10px; + left: 8px; + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + zoom: 1; + opacity: 0; +} + +label.block-label.selection-button-checkbox.selected::after, +label.block-label.selection-button-radio.selected::after { + zoom: 1; + opacity: 1; +} + +p#showMore { + clear: both; +} diff --git a/app/assets/sass/examples.scss b/app/assets/sass/examples.scss deleted file mode 100755 index 7d73537..0000000 --- a/app/assets/sass/examples.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "_colours"; - -.area { - font-family: 'nta', Sans-serif; - font-size: 16px; - font-weight: 700; - clear: both; - background: $fuschia; - color: white; - border: dashed $white 1px; - padding: 1em; - box-sizing: border-box; -} - -/* area styles specific to certain ones */ -main.area { - min-height: 16em; -} -.header-proposition { - clear: none; - min-height: 6em; -} diff --git a/app/assets/sass/patterns/_check-your-answers.scss b/app/assets/sass/patterns/_check-your-answers.scss deleted file mode 100755 index 1f36e7a..0000000 --- a/app/assets/sass/patterns/_check-your-answers.scss +++ /dev/null @@ -1,14 +0,0 @@ -.check-your-answers { - - td { - @include core-19; - vertical-align: top; - } - - .change-answer { - text-align: right; - font-weight: bold; - padding-right: 0; - } - -} diff --git a/app/assets/sass/patterns/_unbranded.scss b/app/assets/sass/patterns/_unbranded.scss deleted file mode 100755 index 8e83299..0000000 --- a/app/assets/sass/patterns/_unbranded.scss +++ /dev/null @@ -1,21 +0,0 @@ -// If you need to create a page as part of your journey, but without GOV.UK branding -// See localhost:3000/examples/unbranded/ - -// Override the govuk_frontend_toolkit's font stack -// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_font_stack.scss#L13 -$toolkit-font-stack: $Helvetica-Regular; - -.unbranded { - background: $white; - - // Use the universal selector and !important to *ALWAYS OVERRIDE* GDS Transport - * { - font-family: $toolkit-font-stack !important; - } - - // Remove GOV.UK footer styles - #footer { - border: 0; - background: $white; - } -} diff --git a/app/routes.js b/app/routes.js index 30d6530..18fdfb5 100755 --- a/app/routes.js +++ b/app/routes.js @@ -204,7 +204,11 @@ router.all('/formPostcodeResults', function (req, res) { //Address results router.all('/formAddressManual', function (req, res) { - res.render('formAddressManual', { 'form_action' : '/address-manual-store' }); + res.render('formAddressManual', { 'form_action' : '/address-manual-store' }); + }); + + router.all('/formAddressCurrentManual', function (req, res) { + res.render('formAddressCurrentManual'); }); //Stores manual address Details @@ -250,7 +254,7 @@ res.redirect('/formAddressHistory'); // Section 8 - Identity Details -router.post('/formIdentity', function(req, res) { +router.post('/formIdentity', function (req, res) { res.render('formIdentity', req.session) }) // Section 8 - Identity Details Driving Licence @@ -259,12 +263,11 @@ router.post('/formIdentityDriving', function(req, res) { }) // Section 8 - Identity Details - Passport router.post('/formIdentityPassport', function(req, res) { - var exception = req.session.formdata['exception']; - if (typeof exception == 'undefined') { - res.render('formIdentityPassport', req.session) - } else { - res.redirect('formSendAddress'); - } + res.render('formIdentityPassport', req.session) +}) +// Section 8 - Identity Details - Bank statement +router.post('/formIdentityBankStatement', function(req, res) { + res.render('formIdentityBankStatement', req.session) }) // Section 9 - Convictions router.post('/formConvictions', function(req, res) { @@ -296,33 +299,37 @@ router.post('/paymentScreens', function(req, res) { // EXCEPTION ROUTE routes - -router.post('/exceptionRouteDocs1', function(req, res) { +router.post('/exceptionRouteDocs1', function (req, res) { res.render('exceptionRouteDocs1', req.session) }) -router.post('/exceptionRouteDocs2', function(req, res) { - var docs = req.body['documents-group']; - console.log(docs); - if (typeof docs != 'undefined') { - if (Array.isArray(docs)) { - var docsLength = docs.length; - } else { - var docsLength = 1; - } +router.post('/exceptionRouteCheckDocs', function (req, res) { + console.log('post body', req.body); + + if (!req.body['documents-group'] || // none selected + typeof req.body['documents-group'] === 'string' || // only one selected + req.body['documents-group'].length < 3) { + // not enough docs + res.redirect('/exceptionDocsErrorNotEnough') + } else if (req.body['documents-group'].indexOf('both') !== -1) { + // there are enough docs and one of them has both attributes - happy path + res.redirect('/exceptionChosenDocs') + } else if (req.body['documents-group'].indexOf('addr') === -1) { + // no address docs + res.redirect('/exceptionDocsErrorNoAddress') + } else if (req.body['documents-group'].indexOf('dob') === -1) { + // no dob docs + res.redirect('/exceptionDocsErrorNoDob') } else { - var docsLength = 0; - } - console.log(docsLength); - req.session.docsLength = docsLength; - if (docsLength < 3) { - res.render('exceptionRouteDocs2', req.session); - } else { - res.redirect('exceptionRouteDocDetails1'); + // there are enough docs, at least one has address and at least one has dob - happy path + res.redirect('/exceptionChosenDocs') } }) router.post('/exceptionRouteDocDetails1', function(req, res) { res.render('exceptionRouteDocDetails1', req.session) }) +router.post('/exceptionChosenDocs', function(req, res) { + res.render('exceptionChosenDocs', req.session) +}) router.post('/formEnterName', function(req, res) { res.render('formEnterName', req.session) }) diff --git a/app/views/exceptionChosenDocs.html b/app/views/exceptionChosenDocs.html new file mode 100644 index 0000000..1562fcc --- /dev/null +++ b/app/views/exceptionChosenDocs.html @@ -0,0 +1,77 @@ +{% extends "layout.html" %} + +{% block page_title %} + DBS Prototype +{% endblock %} +{% block content %} + +
+ {% include 'includes/phase_banner_alpha.html' %} + Back +
+
+ +

Post Office identity documents

+ + +

You must take these 3 documents (originals, not photocopies) to the Post Office:

+ +
+ + + + + + + + + + + + + +
Driving Licence
Passport
Bank Statement
+ + +

By continuing with your application you confirm that:

+ +

+ + +

+ +

+ + +

+ + + + + + +
+ +
+ +
+ + +
+
+ +
+ + + + + + + +{% endblock %} diff --git a/app/views/exceptionDocsErrorNoAddress.html b/app/views/exceptionDocsErrorNoAddress.html new file mode 100644 index 0000000..5c9633e --- /dev/null +++ b/app/views/exceptionDocsErrorNoAddress.html @@ -0,0 +1,135 @@ +{% extends "layout.html" %} + +{% block page_title %} + DBS Prototype +{% endblock %} +{% set main_question = "Please print this screen" %} +{% block content %} + +
+ {% include 'includes/phase_banner_alpha.html' %} + Back +
+
+

We are unable to validate your identity

+ +
+

This is because you said you do not have any documents from our list that show your address.

+

You cannot continue applying for a basic DBS check until you validate your identity.

+ +

Documents that show your address include:

+ +
    +
  • Current driving licence
    • +
  • Bank or building society statement
    • +
  • Credit card statement
    • +
  • Utility bill
    • +
  • Council tax statement
    • +
  • Financial statement
    • +
  • P45 / P60
    • +
  • Mortgage statement
    • +
  • Central or local government entitlement document
    • +
  • Benefit statement
    • +
  • Firearms licence
    • +
  • Bank or building society account opening letter
    • +
+ +

What to do next

+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + +{% endblock %} diff --git a/app/views/exceptionDocsErrorNoDob.html b/app/views/exceptionDocsErrorNoDob.html new file mode 100644 index 0000000..ae64da3 --- /dev/null +++ b/app/views/exceptionDocsErrorNoDob.html @@ -0,0 +1,132 @@ +{% extends "layout.html" %} + +{% block page_title %} + DBS Prototype +{% endblock %} +{% set main_question = "Please print this screen" %} +{% block content %} + +
+ {% include 'includes/phase_banner_alpha.html' %} + Back +
+
+

We are unable to validate your identity

+ +
+

This is because you said you do not have 3 documents from our list that show your date of birth.

+

You cannot continue applying for a basic DBS check until you validate your identity.

+ +

Documents that show your date of birth include:

+ +
    +
  • Passport
    • +
  • Current driving licence
    • +
  • Birth certificate
    • +
  • Adoption certificate
    • +
  • UK biometric residence permit
    • +
  • HM Forces ID card
    • +
  • EU national ID card
    • +
  • Firearms licence
    • +
  • Cards carrying the PASS accreditation logo
    • +
+ +

What to do next

+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + +{% endblock %} diff --git a/app/views/exceptionDocsErrorNotEnough.html b/app/views/exceptionDocsErrorNotEnough.html new file mode 100644 index 0000000..ea9a4d8 --- /dev/null +++ b/app/views/exceptionDocsErrorNotEnough.html @@ -0,0 +1,118 @@ +{% extends "layout.html" %} + +{% block page_title %} + DBS Prototype +{% endblock %} +{% set main_question = "Please print this screen" %} +{% block content %} + +
+ {% include 'includes/phase_banner_alpha.html' %} + Back +
+
+

We are unable to validate your identity

+ +
+

This is because you said you do not have 3 documents from our list that show your name, date of birth and address.

+

You cannot continue applying for a basic DBS check until you validate your identity.

+ +

What to do next

+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + +{% endblock %} diff --git a/app/views/exceptionRouteDocDetails1.html b/app/views/exceptionRouteDocDetails1.html index b7d0173..3639365 100644 --- a/app/views/exceptionRouteDocDetails1.html +++ b/app/views/exceptionRouteDocDetails1.html @@ -282,7 +282,7 @@

What are your Passport details?

- +
diff --git a/app/views/exceptionRouteDocs1.html b/app/views/exceptionRouteDocs1.html index 30ddcea..d038ca7 100644 --- a/app/views/exceptionRouteDocs1.html +++ b/app/views/exceptionRouteDocs1.html @@ -7,107 +7,118 @@ {% block content %}
- + +Back
{% include 'includes/error_summary.html' %}{# include if this page has validation requirements #} -

Select your identity documents

+

Select your identity documents

+ +

Select all of the following documents you would be able to take to the Post Office within the next 14 days.

+ +

The documents must be:

-

Select 3 documents you can take to the Post Office.

- -

At least one of the documents must show your current address.

- -

You must be able to take the original documents – you can't use photocopies or statements you've printed from online accounts.

+
    +
  • in your current name (except your birth certificate, which is also acceptable in a different name)
    • +
  • in your current address (where an address is included)
    • +
  • original documents (you cannot use photocopies)
    • +

-
+
- -
- +
@@ -117,4 +128,17 @@

Select your identity documents

+ + + + + + {% endblock %} \ No newline at end of file diff --git a/app/views/exceptionRouteDocs2.html b/app/views/exceptionRouteDocs2.html index 0130e20..ebb4747 100644 --- a/app/views/exceptionRouteDocs2.html +++ b/app/views/exceptionRouteDocs2.html @@ -15,7 +15,7 @@

Do you have any of these documents?

Select {{ 3 - docsLength }} {%if docsLength == 2%}document{%else%}documents{%endif%} from this list:

-
+