test
' + componentCode: `{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %} + +{% set html %} + +{% endset %} + +{{ govukNotificationBanner({ + html: html +}) }}` }, '/your-details': { fullName: 'test test', @@ -70,8 +80,219 @@ module.exports = { figmaLinkAdditionalInformation: 'only link' }, '/component-code-details/1': { + componentCodeLanguage: 'html', + componentCodeUsage: 'Some HTML', + componentCode: `` + }, + '/component-code-details/2': { componentCodeLanguage: 'css', componentCodeUsage: 'Some CSS', - componentCode: 'style' + componentCode: `.govuk-notification-banner { + font-family: GDS Transport,arial,sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 1rem; + line-height: 1.25; + margin-bottom: 30px; + border: 5px solid #1d70b8; + background-color: #1d70b8 +} + +@media print { + .govuk-notification-banner { + font-family: sans-serif + } +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner { + font-size:1.1875rem; + line-height: 1.3157894737 + } +} + +@media print { + .govuk-notification-banner { + font-size: 14pt; + line-height: 1.15 + } +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner { + margin-bottom:50px + } +} + +.govuk-notification-banner:focus { + outline: 3px solid #fd0 +} + +.govuk-notification-banner__header { + padding: 2px 15px 5px; + border-bottom: 1px solid transparent +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner__header { + padding:2px 20px 5px + } +} + +.govuk-notification-banner__title { + font-size: 1rem; + line-height: 1.25; + font-weight: 700; + margin: 0; + padding: 0; + color: #fff +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner__title { + font-size:1.1875rem; + line-height: 1.3157894737 + } +} + +@media print { + .govuk-notification-banner__title { + font-size: 14pt; + line-height: 1.15 + } +} + +.govuk-notification-banner__content { + color: #0b0c0c; + padding: 15px; + background-color: #fff +} + +@media print { + .govuk-notification-banner__content { + color: #000 + } +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner__content { + padding:20px + } +} + +.govuk-notification-banner__content>* { + box-sizing: border-box; + max-width: 605px +} + +.govuk-notification-banner__content>:last-child { + margin-bottom: 0 +} + +.govuk-notification-banner__heading { + font-size: 1.125rem; + line-height: 1.1111111111; + font-weight: 700; + margin: 0 0 15px; + padding: 0 +} + +@media (min-width: 40.0625em) { + .govuk-notification-banner__heading { + font-size:1.5rem; + line-height: 1.25 + } +} + +@media print { + .govuk-notification-banner__heading { + font-size: 18pt; + line-height: 1.15 + } +} + +.govuk-notification-banner__link { + font-family: GDS Transport,arial,sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: underline; + text-decoration-thickness: max(1px,.0625rem); + text-underline-offset: .1578em +} + +@media print { + .govuk-notification-banner__link { + font-family: sans-serif + } +} + +.govuk-notification-banner__link:hover { + text-decoration-thickness: max(3px,.1875rem,.12em); + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; + -webkit-text-decoration-skip: none; + text-decoration-skip: none +} + +.govuk-notification-banner__link:focus { + outline: 3px solid transparent; + background-color: #fd0; + box-shadow: 0 -2px #fd0,0 4px #0b0c0c; + text-decoration: none +} + +@supports not (text-wrap: balance) { + .govuk-notification-banner__link:focus { + -webkit-box-decoration-break:clone; + box-decoration-break: clone + } +} + +.govuk-notification-banner__link:link,.govuk-notification-banner__link:visited { + color: #1d70b8 +} + +.govuk-notification-banner__link:hover { + color: #003078 +} + +.govuk-notification-banner__link:active,.govuk-notification-banner__link:focus { + color: #0b0c0c +} + +.govuk-notification-banner--success { + border-color: #00703c; + background-color: #00703c +} + +.govuk-notification-banner--success .govuk-notification-banner__link:link,.govuk-notification-banner--success .govuk-notification-banner__link:visited { + color: #00703c +} + +.govuk-notification-banner--success .govuk-notification-banner__link:hover { + color: #004e2a +} + +.govuk-notification-banner--success .govuk-notification-banner__link:active { + color: #00703c +} + +.govuk-notification-banner--success .govuk-notification-banner__link:focus { + color: #0b0c0c +}` } + } diff --git a/kubernetes-deploy-preview.tpl b/kubernetes-deploy-preview.tpl index df0a8637f..11df5a9fd 100644 --- a/kubernetes-deploy-preview.tpl +++ b/kubernetes-deploy-preview.tpl @@ -63,6 +63,11 @@ spec: secretKeyRef: name: notify-submission-template key: notify-submission-template + - name: NOTIFY_VERIFICATION_TEMPLATE + valueFrom: + secretKeyRef: + name: notify-verification-template + key: notify-verification-template - name: NOTIFY_EMAIL valueFrom: secretKeyRef: @@ -83,8 +88,15 @@ spec: secretKeyRef: name: notify-email-max-retries key: notify-email-max-retries + - name: SENTRY_DSN + valueFrom: + secretKeyRef: + name: sentry-dsn + key: sentry-dsn - name: BRANCH value: ${BRANCH} + - name: APP_URL + value: https://moj-frontend-${BRANCH}.apps.live.cloud-platform.service.justice.gov.uk - name: REDIS_URL valueFrom: secretKeyRef: @@ -150,4 +162,4 @@ spec: service: name: moj-frontend-service-${BRANCH} port: - number: 3000 \ No newline at end of file + number: 3000 diff --git a/kubernetes-deploy-production.tpl b/kubernetes-deploy-production.tpl index 153f475b4..1ae24ee3b 100644 --- a/kubernetes-deploy-production.tpl +++ b/kubernetes-deploy-production.tpl @@ -50,6 +50,11 @@ spec: secretKeyRef: name: notify-submission-template key: notify-submission-template + - name: NOTIFY_VERIFICATION_TEMPLATE + valueFrom: + secretKeyRef: + name: notify-verification-template + key: notify-verification-template - name: NOTIFY_EMAIL valueFrom: secretKeyRef: @@ -70,9 +75,15 @@ spec: secretKeyRef: name: notify-email-max-retries key: notify-email-max-retries + - name: SENTRY_DSN + valueFrom: + secretKeyRef: + name: sentry-dsn + key: sentry-dsn - name: BRANCH value: ${BRANCH} - - name: REDIS_URL + - name: APP_URL + value: https://design-patterns.service.justice.gov.uk - name: REDIS_URL valueFrom: secretKeyRef: name: moj-frontend-ec-cluster-output diff --git a/middleware/component-session.js b/middleware/component-session.js index 8ba125a2d..a4225dad9 100644 --- a/middleware/component-session.js +++ b/middleware/component-session.js @@ -5,7 +5,9 @@ const sanitize = require('sanitize-filename') const { MAX_ADD_ANOTHER: maxAddAnother, ADD_NEW_COMPONENT_ROUTE, - COMPONENT_FORM_PAGES: formPages + ALLOWED_EMAIL_DOMAINS: allowedDomains, + COMPONENT_FORM_PAGES: formPages, + MESSAGES } = require('../config') const { getAnswersForSection } = require('../helpers/check-your-answers') const ApplicationError = require('../helpers/application-error') @@ -38,6 +40,22 @@ const getPageData = (req) => { return formPages[pageData] } +const checkEmailDomain = (req, res, next) => { + let allowed = false + const email = req?.body?.emailAddress + console.log({ email }) + if (email) { + const domain = email.split('@').at(-1) + console.log({ domain }) + if (allowedDomains.includes(domain)) { + allowed = true + } + } + console.log({ allowed }) + req.emailDomainAllowed = allowed + next() +} + const transformErrorsToErrorList = (errors) => { return errors.map((error) => ({ text: error.message, @@ -45,6 +63,12 @@ const transformErrorsToErrorList = (errors) => { })) } +const setCurrentFormPages = (req, res, next) => { + const { url, session } = req + req.formPages = getCurrentFormPages(url, session) + next() +} + const setNextPage = (req, res, next) => { console.log('setting nextPage') const amendingAnswers = req?.session?.checkYourAnswers @@ -80,9 +104,15 @@ const clearSkippedPageData = (req, res, next) => { // Delete page and subpage data for (const sessionPage of Object.keys(req.session)) { if ( - !['started', 'cookie', 'csrfToken', 'checkYourAnswers'].includes( - sessionPage - ) + ![ + 'started', + 'cookie', + 'csrfToken', + 'checkYourAnswers', + 'emailToken', + 'emailDomainAllowed', + 'verified' + ].includes(sessionPage) ) { console.log(sessionPage) const parentPage = `/${sessionPage.split('/')[1]}` @@ -138,7 +168,7 @@ const validateFormDataFileUpload = (err, req, res, next) => { const validateFormData = (req, res, next) => { console.log('validate form data') - const schemaName = req.url.split('/')[1] + const schemaName = req.url.split('/').at(1).split('?').at(0) const schema = require(`../schema/${schemaName}.schema`) const body = extractBody(req?.url, { ...req.body }) delete body._csrf @@ -190,6 +220,7 @@ const validateFormData = (req, res, next) => { } const saveSession = (req, res, next) => { + console.log('saving session') if (!req.session) req.session = {} const { _csrf, ...body } = req.body @@ -298,10 +329,7 @@ const removeFromSession = (req, res, next) => { const filename = req.session[url]?.componentImage?.originalname console.log(filename) if (filename) { - req.session.sessionFlash = { - type: 'success', - message: `File ‘${filename}’ has been removed.` - } + req.session.sessionFlash = MESSAGES.componentImageRemoved(filename) } } @@ -335,6 +363,14 @@ const sessionStarted = (req, res, next) => { next() } +const sessionVerified = (req, res, next) => { + if (!req?.session?.verified) { + console.error('No verified email for session') + return res.redirect(`${ADD_NEW_COMPONENT_ROUTE}/start`) + } + next() +} + const validateComponentImagePage = (req, res, next) => { if (req.params.page !== 'component-image') { const error = new ApplicationError('Invalid page', 400) @@ -376,8 +412,40 @@ const saveFileToRedis = async (req, res, next) => { next() } +const validatePageParams = (req, res, next) => { + const validPages = Object.keys(formPages) + let valid = true + + if (req.params.page) { + // if page is present it must be in allowlist of configured pages + valid = validPages.includes(req.params.page) + } + + if (req.params.subpage) { + // if subpage is present it must always be a number + valid = /^\d+$/.test(req.params.subpage) + } + + if (valid) { + next() + } else { + const error = new ApplicationError('Page not found', 404) + next(error) + } +} + +const setCsrfToken = (req, res, next) => { + if (req?.session) { + if (!req?.session?.csrfToken) { + req.session.csrfToken = crypto.randomBytes(32).toString('hex') + } + } + next() +} + module.exports = { setNextPage, + setCurrentFormPages, validateFormData, saveSession, getFormDataFromSession, @@ -387,8 +455,12 @@ module.exports = { getFormSummaryListForRemove, removeFromSession, sessionStarted, + sessionVerified, validateFormDataFileUpload, validateComponentImagePage, saveFileToRedis, - clearSkippedPageData + clearSkippedPageData, + checkEmailDomain, + validatePageParams, + setCsrfToken } diff --git a/middleware/generate-documentation.js b/middleware/generate-documentation.js index 1fc62a78b..697267210 100644 --- a/middleware/generate-documentation.js +++ b/middleware/generate-documentation.js @@ -1,110 +1,100 @@ /* eslint-disable prefer-template */ const moment = require('moment') +const { MAX_ADD_ANOTHER } = require('../config.js') +const { ucFirst } = require('../helpers/text-helper.js') const generateMarkdown = (data, files) => { + console.log(data) const { '/component-details': details } = data - const documentationDirectory = 'docs/components' const componentName = details?.componentName || 'unknown-component' - const sanitizedComponentName = componentName - .toLowerCase() - .replace(/[^a-z0-9-]/g, '-') - .replace(/-+/g, '-') - const filename = `${documentationDirectory}/${sanitizedComponentName}.md` - const generateLinksSection = (data) => { - const noLinks = - 'No prototypes or design files have been added for this component. If you have used this component in your service and you have a prototype you can share it here.\n' + const sanitizedComponentName = ucFirst( + componentName + .toLowerCase() + .replace(/[^a-z0-9-]/g, '-') + .replace(/-+/g, '-') + ) + const filename = `${sanitizedComponentName}.md` + + const githubDiscussionLink = (componentName = '') => { + return `[${componentName ? `${componentName} ` : ''}Github discussion]({{ githuburl }})` + } + + const generateDesignsTabContent = (data) => { let content = '' - let prototypeContent = '' - let figmaContent = '' - let n = 0 - // Process prototype data - while (data[`/prototype-url${n > 0 ? `/${n}` : ''}`]) { - const prototype = data[`/prototype-url${n > 0 ? `/${n}` : ''}`] - prototypeContent += ` -${prototype?.prototypeUrlAdditionalInformation || ''} + if (data['/figma-link']) { + content += `A Figma link has been added for this component. There may be more links and resources in the ${githubDiscussionLink(sanitizedComponentName)}.\r\n -Prototype link (opens in a new tab) -` - n++ - } +### Figma link - // Process figma data - n = 0 - while (data[`/figma-link${n > 0 ? `/${n}` : ''}`]) { - const figma = data[`/figma-link${n > 0 ? `/${n}` : ''}`] - figmaContent += ` -${figma?.figmaLinkAdditionalInformation || ''} + [View the ${sanitizedComponentName} in Figma (opens in a new tab)](${data['/figma-link']?.figmaUrl || ''})\r\n\r\n` -Figma link (opens in a new tab) -` - n++ - } + content += `${data['/figma-link']?.figmaLinkAdditionalInformation || ''}\r\n` - if (prototypeContent.length) { - content += '### Prototype\n' + prototypeContent - } - if (figmaContent.length) { - content += '\n### Figma\n' + figmaContent + content += `### Contribute prototypes and Figma links + + If you have design files that are relevant to this component you can add them to the ${githubDiscussionLink()}. This helps other people to use it in their service.` + } else { + content = `A Figma link was not included when this component was added. + + There may be more information in the ${githubDiscussionLink(sanitizedComponentName)}. You can also view the component image in the overview. + +## Contribute a Figma link + + If you have a Figma link for this component (or a component like it) you can add it to ${githubDiscussionLink()}. This helps other people to use it in their service.` } - return content.length ? content : noLinks + return content } - const generateAccessibilityReportSection = (data, files) => { - const contentHeading = - 'If you have had an accessibility audit or tested with users with access needs then you could contribute to this component.\n' - const noContent = - 'No accessibility findings have been added for this component.\n' - let content = '' - const externalAudit = data['/add-external-audit'] - const externalAuditFile = files?.['/add-external-audit'] - const internalAudit = data['/add-internal-audit'] - const internalAuditFile = files?.['/add-internal-audit'] - const assistiveTech = data['/add-assistive-tech'] - const assistiveTechReport = files?.['/add-assistive-tech'] - + const generateAccessibilityTabContent = (data) => { const formatDate = (day, month, year) => { if (day && month && year) { - return moment(`${year}-${month}-${day}`, 'YYYY-M-D').format('MMMM YYYY') + return moment(`${year}-${month}-${day}`, 'YYYY-M-D').format( + 'D MMMM YYYY' + ) } return null } - if (externalAudit && externalAudit.externalOrganisation) { - const auditDate = formatDate( + let content = '' + const externalAudit = data['/add-external-audit'] + const internalAudit = data['/add-internal-audit'] + const assistiveTech = data['/add-assistive-tech'] + + if (externalAudit) { + const externalAuditDate = formatDate( externalAudit['auditDate-day'], externalAudit['auditDate-month'], externalAudit['auditDate-year'] ) - if (auditDate) { - content += `### External audit (${externalAudit.externalOrganisation}) - ${auditDate}\n` - if (externalAudit.issuesDiscovered) { - content += externalAudit.issuesDiscovered + '\n\n' - } - if (externalAudit.accessibilityReport && externalAuditFile) { - content += `[Download the accessibility report](/${externalAuditFile.path})\n` - } - } + + content += `### External audit + +* Conducted by: ${externalAudit.externalOrganisation} +* Date: ${externalAuditDate} + +#### Audit findings + +${externalAudit.issuesDiscovered}\r\n` } - if (internalAudit && internalAudit.internalOrganisation) { - const auditDate = formatDate( + if (internalAudit) { + const internalAuditDate = formatDate( internalAudit['auditDate-day'], internalAudit['auditDate-month'], internalAudit['auditDate-year'] ) - if (auditDate) { - content += `### Internal audit (${internalAudit.internalOrganisation}) - ${auditDate}\n` - if (internalAudit.issuesDiscovered) { - content += internalAudit.issuesDiscovered + '\n\n' - } - if (internalAudit.accessibilityReport && internalAuditFile) { - content += `[Download the accessibility report](/${internalAuditFile.path})\n` - } - } + content += `### Internal review + +* By: ${internalAudit.internalOrganisation} +* Date: ${internalAuditDate} + +#### Review findings + +${internalAudit.issuesDiscovered}\r\n` } if (assistiveTech) { @@ -113,94 +103,130 @@ ${figma?.figmaLinkAdditionalInformation || ''} assistiveTech['testingDate-month'], assistiveTech['testingDate-year'] ) - if (testingDate) { - content += `### Assistive Technology audit - ${testingDate}\n` - if (assistiveTech.issuesDiscovered) { - content += assistiveTech.issuesDiscovered + '\n\n' - } - if (assistiveTech.accessibilityReport && assistiveTechReport) { - content += `[Download the accessibility report](/${assistiveTechReport.path})\n` - } - } + content += `### Assistive Technology testing + +Date: ${testingDate} + +#### Testing details + +${assistiveTech.issuesDiscovered}\r\n` } - return content ? contentHeading + content : noContent - } + if (externalAudit || internalAudit || assistiveTech) { + content = `Accessibility findings have been added for this component. There may be more findings in the ${githubDiscussionLink(sanitizedComponentName)}.\r\n + +${content}\r\n` + } else { + content = `No accessibility findings were included when this component was added. There may be more information in the ${githubDiscussionLink(sanitizedComponentName)}.\r\n` + } + + content += `## Contribute accessibility findings - const generateComponentCodeSection = (data) => { - const noCode = - 'No code has been added for this component. If you have examples of how you have used this component in your service then you could help the community. Most users are looking for HTML, Nunjucks, Javascript and CSS or SASS.\n' + If you have accessibility findings that are relevant to this component you can add them to the ${githubDiscussionLink()}. This helps other people to use it in their service.` + return content + } + + const generateCodeTabContent = (data) => { + const hljsLang = (lang) => { + switch(lang.toLowerCase()) { + case 'html': + case 'css': + case 'scss': + case 'javascript': + case 'typescript': + return lang + case 'nunjucks': + return 'njk' + case 'sass': + return 'scss' + case 'react': + return 'javascript' + default: + return '' + } + } let content = '' - let n = 1 - while (data[`/component-code${n > 1 ? `-${n}` : ''}`]) { - const componentCodeDetails = - data[`/component-code-details${n > 1 ? `-${n}` : ''}`] + for(let i=0;i<=MAX_ADD_ANOTHER;i++) { + const code = data[`/component-code-details${i === 0 ? '' : `/${i}`}`] + if(!code) { + break + } + const language = + code?.componentCodeLanguage === 'other' + ? code?.componentCodeLanguageOther + : code?.componentCodeLanguage + + content += ` +### Example ${i + 1}: ${language} -### ${componentCodeDetails?.componentCodeLanguage || ''} +\`\`\`${hljsLang(language)} +{% raw %} +${code?.componentCode || ''} +{% endraw %} +\`\`\` -### ${componentCodeDetails?.componentCodeLanguageOther || ''} +${code?.componentCodeUsage || ''}\r\n\r\n` + } -