fix(EMS-1345): Disable submit buttons when a form is submitting (#557)

* fix(EMS-1345): UI application creation requests - revert previous changes and immediately wipe eligibility answers from the session * fix(EMS-1345): disable submit buttons on form submission * fix(EMS-1345): submit button nunjucks component * fix(EMS-1345): remove unused function * fix(EMS-1345): align create application instances in UI controllers * fix(EMS-1345) use const instead of var in form-submission script * chore(tech): fix/update E2E test * fix(EMS-1345): fix typos * fix(EMS-1345): fix/update failing E2E test * chore(tech): temporarily disable failing E2E test due to newly found bug * fix(EMS-1345): revert previous commit disabling test, fix company details submit button issue * fix(EMS-1345): revert E2E test changes
UK-Export-Finance · Jun 23, 2023 · 54f38a3 · 54f38a3
1 parent 12e263d
commit 54f38a3
Show file tree

Hide file tree

Showing 63 changed files with 273 additions and 353 deletions.
diff --git a/src/ui/public/js/formSubmission.js b/src/ui/public/js/formSubmission.js
diff --git a/src/ui/public/js/formSubmission.js.map b/src/ui/public/js/formSubmission.js.map
diff --git a/src/ui/public/js/submitButton.js b/src/ui/public/js/submitButton.js
diff --git a/src/ui/public/js/submitButton.js.map b/src/ui/public/js/submitButton.js.map
diff --git a/src/ui/scripts/form-submission.js b/src/ui/scripts/form-submission.js
@@ -0,0 +1,23 @@
+const form = document.getElementById('form');
+const submitButton = document.getElementById('submit-button');
+
+/**
+ * Disable the submit button.
+ * This prevents a user from spamming the button.
+ */
+const disableButton = () => {
+  submitButton.setAttribute('disabled', 'true');
+  submitButton.setAttribute('aria-disabled', 'true');
+  submitButton.classList.add('govuk-button--disabled');
+};
+
+/**
+ * If a form exists,
+ * Add a submit event listener.
+ * When submitted, disable the submit button
+ */
+if (form) {
+  form.addEventListener('submit', () => {
+    disableButton();
+  });
+}
diff --git a/src/ui/server/controllers/insurance/account/create/your-details/index.ts b/src/ui/server/controllers/insurance/account/create/your-details/index.ts
@@ -143,11 +143,10 @@ export const post = async (req: Request, res: Response) => {
 
     /**
      * If there are eligibility answers in the session:
-     * 1) Add requestedApplicationCreation to the session
-     * 2) Create an application
-     * 3) Remove requestedApplicationCreation from the session
-     * 4) Remove eligibility answers in the session.
-     * 5) Redirect to the next part of the flow - "confirm email"
+     * 1) Sanitise and store eligibility answers.
+     * 2) Remove eligibility answers from the session.
+     * 3) Create an application
+     * 4) Redirect to the next part of the flow - "confirm email"
      */
     if (canCreateAnApplication(req.session)) {
       const eligibilityAnswers = sanitiseData(req.session.submittedData.insuranceEligibility);

diff --git a/src/ui/server/controllers/insurance/account/sign-in/enter-code/index.ts b/src/ui/server/controllers/insurance/account/sign-in/enter-code/index.ts
@@ -127,10 +127,10 @@ export const post = async (req: Request, res: Response) => {
 
       /**
        * If there are eligibility answers in the session:
-       * 1) Add requestedApplicationCreation to the session
-       * 2) Create an application
-       * 3) Remove requestedApplicationCreation from the session
-       * 4) Remove eligibility answers in the session.
+       * 1) Sanitise and store eligibility answers.
+       * 2) Remove eligibility answers from the session.
+       * 3) Create an application
+       * 4) Redirect to the next part of the flow - "dashboard"
        */
       if (canCreateAnApplication(req.session)) {
         const eligibilityAnswers = sanitiseData(req.session.submittedData.insuranceEligibility);
@@ -143,8 +143,6 @@ export const post = async (req: Request, res: Response) => {
           console.error('Error creating application');
           return res.redirect(PROBLEM_WITH_SERVICE);
         }
-
-        req.session.submittedData.insuranceEligibility = {};
       }
 
       // otherwise, redirect to the next part of the flow - dashboard

diff --git a/src/ui/server/controllers/insurance/eligibility/eligible-to-apply-online/index.ts b/src/ui/server/controllers/insurance/eligibility/eligible-to-apply-online/index.ts
@@ -28,12 +28,11 @@ export const get = (req: Request, res: Response) =>
 export const post = async (req: Request, res: Response) => {
   try {
     /**
-     * If the user is signed in and there are eligibility answers in the session:
-     * 1) Add requestedApplicationCreation to the session
-     * 2) Create an application
-     * 3) Remove requestedApplicationCreation from the session
-     * 4) Wipe the eligibility answers in the session.
-     * 5) Redirect to the application
+     * If there are eligibility answers in the session:
+     * 1) Sanitise and store eligibility answers.
+     * 2) Remove eligibility answers from the session.
+     * 3) Create an application
+     * 4) Redirect to the application
      */
     if (req.session.user && canCreateAnApplication(req.session)) {
       const eligibilityAnswers = sanitiseData(req.session.submittedData.insuranceEligibility);

diff --git a/src/ui/server/middleware/headers/security.ts b/src/ui/server/middleware/headers/security.ts
@@ -30,7 +30,7 @@ export const security = (req: Request, res: Response, next: () => void) => {
     'Content-Security-Policy',
     "default-src 'none';connect-src https://region1.google-analytics.com 'self';base-uri 'self';block-all-mixed-content;font-src 'self' data:;form-action 'self';frame-ancestors 'self';img-src 'self';object-src 'none';script-src https://www.googletagmanager.com 'self' 'unsafe-inline';script-src-attr 'self' 'unsafe-inline';style-src 'self';upgrade-insecure-requests",
   );
-  res.setHeader('Cache-Control', 'no-cache, must-revalidate, max-age=604800');
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate, max-age=604800');
   res.setHeader('Referrer-Policy', 'same-origin');
   res.setHeader('X-Download-Options', 'noopen');
   res.setHeader('X-DNS-Prefetch-Control', 'on');

diff --git a/src/ui/templates/components/submit-button.njk b/src/ui/templates/components/submit-button.njk
@@ -0,0 +1,23 @@
+{% from 'govuk/components/button/macro.njk' import govukButton %}
+
+{% macro render(params) %}
+
+  {% set text = params.text %}
+  {% set isStartButton = params.isStartButton %}
+  {% set classes = params.classes %}
+  {% set href = params.href %}
+  {% set formaction = params.formaction %}
+
+  {{ govukButton({
+    text: text,
+    isStartButton: isStartButton,
+    classes: classes,
+    href: href,
+    attributes: {
+      'data-cy': 'submit-button',
+      id: 'submit-button',
+      formaction: formaction
+    }
+  }) }}
+
+{% endmacro %}
diff --git a/src/ui/templates/cookies.njk b/src/ui/templates/cookies.njk
@@ -3,7 +3,7 @@
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/table/macro.njk" import govukTable %}
 {% from 'govuk/components/radios/macro.njk' import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
+{% import './components/submit-button.njk' as submitButton %}
 {% import './components/text-list.njk' as textList %}
 
 {% block pageTitle %}
@@ -116,7 +116,7 @@
     dataCy: 'analytics-info-list'
   }) }}
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -161,12 +161,9 @@
       }
     }) }}
 
-    {{ govukButton({
+    {{ submitButton.render({
       text: CONTENT_STRINGS.BUTTONS.SAVE_CHANGES,
-      classes: "change-cookies-submit-button",
-      attributes: {
-        'data-cy': 'submit-button'
-      }
+      classes: "change-cookies-submit-button"
     }) }}
 
   </form>

diff --git a/src/ui/templates/index.njk b/src/ui/templates/index.njk
@@ -47,6 +47,7 @@
 
     <script src="/assets/js/govukFrontend.js" type="text/javascript"></script>
     <script src="/assets/js/cookies.js" type="text/javascript"></script>
+    <script src="/assets/js/formSubmission.js" type="text/javascript"></script>
 
     {% if cookieConsent %}
       <script async src="https://www.googletagmanager.com/gtag/js?id={{ googleAnalyticsId }}"></script>

diff --git a/src/ui/templates/insurance/account/create/your-details.njk b/src/ui/templates/insurance/account/create/your-details.njk
@@ -2,7 +2,7 @@
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -29,7 +29,7 @@
 
   <p data-cy="intro">{{ CONTENT_STRINGS.INTRO }}</p>
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -164,11 +164,8 @@
     </div>
 
     <div class="govuk-button-group govuk-!-margin-top-5">
-      {{ govukButton({
-        text: CONTENT_STRINGS.BUTTONS.CONTINUE,
-        attributes: {
-          'data-cy': 'submit-button'
-        }
+      {{ submitButton.render({
+        text: CONTENT_STRINGS.BUTTONS.CONTINUE
       }) }}
     </div>
 

diff --git a/src/ui/templates/insurance/account/password-reset/link-expired.njk b/src/ui/templates/insurance/account/password-reset/link-expired.njk
@@ -1,5 +1,5 @@
 {% extends 'index.njk' %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -16,16 +16,13 @@
 
       <p class="govuk-body" data-cy="if-you-would-like">{{ CONTENT_STRINGS.IF_YOU_WOULD_LIKE }}</p>
 
-      <form method="POST" novalidate>
+      <form method="POST" id="form" novalidate>
 
         <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
         <div class="govuk-button-group">
-          {{ govukButton({
-            text: CONTENT_STRINGS.BUTTONS.SEND_NEW_LINK,
-            attributes: {
-              'data-cy': 'submit-button'
-            }
+          {{ submitButton.render({
+            text: CONTENT_STRINGS.BUTTONS.SEND_NEW_LINK
           }) }}
         </div>
 

diff --git a/src/ui/templates/insurance/account/password-reset/new-password.njk b/src/ui/templates/insurance/account/password-reset/new-password.njk
@@ -2,7 +2,7 @@
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -31,7 +31,7 @@
     </div>
   </div>
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -81,11 +81,8 @@
     }) }}
 
     <div class="govuk-button-group">
-      {{ govukButton({
-        text: CONTENT_STRINGS.BUTTONS.SUBMIT,
-        attributes: {
-          'data-cy': 'submit-button'
-        }
+      {{ submitButton.render({
+        text: CONTENT_STRINGS.BUTTONS.SUBMIT
       }) }}
     </div>
 

diff --git a/src/ui/templates/insurance/account/password-reset/password-reset.njk b/src/ui/templates/insurance/account/password-reset/password-reset.njk
@@ -2,7 +2,7 @@
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -31,7 +31,7 @@
     </div>
   </div>
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -65,11 +65,8 @@
         }) }}
 
         <div class="govuk-button-group">
-          {{ govukButton({
-            text: CONTENT_STRINGS.BUTTONS.SUBMIT,
-            attributes: {
-              'data-cy': 'submit-button'
-            }
+          {{ submitButton.render({
+            text: CONTENT_STRINGS.BUTTONS.SUBMIT
           }) }}
         </div>
 

diff --git a/src/ui/templates/insurance/account/sign-in/enter-code.njk b/src/ui/templates/insurance/account/sign-in/enter-code.njk
@@ -3,7 +3,7 @@
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -49,7 +49,7 @@
 
   <p data-cy="intro">{{ CONTENT_STRINGS.INTRO }}</p>
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -82,11 +82,8 @@
         }) }}
 
         <div class="govuk-button-group">
-          {{ govukButton({
-            text: CONTENT_STRINGS.BUTTONS.CONTINUE,
-            attributes: {
-              'data-cy': 'submit-button'
-            }
+          {{ submitButton.render({
+            text: CONTENT_STRINGS.BUTTONS.CONTINUE
           }) }}
         </div>
 

diff --git a/src/ui/templates/insurance/account/sign-in/request-new-code.njk b/src/ui/templates/insurance/account/sign-in/request-new-code.njk
@@ -1,7 +1,7 @@
 {% extends 'index.njk' %}
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
 {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -24,16 +24,13 @@
 
       <p data-cy="intro">{{ CONTENT_STRINGS.INTRO }}</p>
 
-      <form method="POST" novalidate>
+      <form method="POST" id="form" novalidate>
 
         <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
         <div class="govuk-button-group">
-          {{ govukButton({
-            text: CONTENT_STRINGS.BUTTONS.SEND_NEW_SECURITY_CODE,
-            attributes: {
-              'data-cy': 'submit-button'
-            }
+          {{ submitButton.render({
+            text: CONTENT_STRINGS.BUTTONS.SEND_NEW_SECURITY_CODE
           }) }}
         </div>
 

diff --git a/src/ui/templates/insurance/account/sign-in/sign-in.njk b/src/ui/templates/insurance/account/sign-in/sign-in.njk
@@ -3,7 +3,7 @@
 {% from 'govuk/components/error-summary/macro.njk' import govukErrorSummary %}
 {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from 'govuk/components/button/macro.njk' import govukButton %}
+{% import '../../../components/submit-button.njk' as submitButton %}
 
 {% block pageTitle %}
   {{ CONTENT_STRINGS.PAGE_TITLE }}
@@ -73,7 +73,7 @@
 
   <p data-cy="intro">{{ CONTENT_STRINGS.INTRO }}</p>
 
-  <form method="POST" novalidate>
+  <form method="POST" id="form" novalidate>
 
     <input type="hidden" name="_csrf" value="{{ csrfToken }}">
 
@@ -132,11 +132,8 @@
         }) }}
 
         <div class="govuk-button-group">
-          {{ govukButton({
-            text: CONTENT_STRINGS.BUTTONS.CONTINUE,
-            attributes: {
-              'data-cy': 'submit-button'
-            }
+          {{ submitButton.render({
+            text: CONTENT_STRINGS.BUTTONS.CONTINUE
           }) }}
         </div>