feat: Update form submission disabled button (#2776)

* Change submission disabled message to be an alert below the submit button * Update end-to-end test
opengovsg · Sep 28, 2021 · 1317177 · 1317177
1 parent 58bbd44
commit 1317177
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css
@@ -688,6 +688,10 @@ i.glyphicon-question-sign {
   margin-right: 0;
 }
 
+.no-bottom-margin {
+  margin-bottom: 0;
+}
+
 .no-margin {
   margin: 0;
 }

diff --git a/src/public/modules/forms/base/directiveViews/submit-form.directive.view.html b/src/public/modules/forms/base/directiveViews/submit-form.directive.view.html
@@ -62,20 +62,37 @@
 
       <!-- Form footer -->
       <div id="form-submit" class="row">
-        <div class="standard-padding">
+        <div
+          ng-class="!uiState.submitPreventedMessage ? 'standard-padding' : 'standard-padding no-bottom-margin'"
+        >
           <!-- Submit button if not in preview mode -->
           <button
             class="btn-custom btn-large form-submit-btn {{ form.startPage.colorTheme }}-bg-dark {{ form.startPage.colorTheme }}-border-dark"
             ng-disabled="disableSubmitButton || isSubmitButtonDisabled()"
             ng-click="checkCaptchaAndSubmit()"
             ng-class="uiState.submitButtonClicked ? 'btn-pressed' : ''"
           >
-            <span ng-if="!uiState.submitButtonClicked">Submit</span>
+            <span
+              ng-if="!uiState.submitButtonClicked && !uiState.submitPrevented"
+              >Submit</span
+            >
+            <span
+              ng-if="!uiState.submitButtonClicked && uiState.submitPrevented"
+              >Submission Disabled</span
+            >
             <span ng-if="uiState.submitButtonClicked"
               ><i class="bx bx-loader bx-spin bx-lg"></i
             ></span>
           </button>
         </div>
+        <div class="standard-padding" ng-if="uiState.submitPreventedMessage">
+          <div class="alert-custom alert-error">
+            <i class="bx bx-exclamation bx-md icon-spacing"></i
+            ><span class="alert-msg" id="submit-prevented-message"
+              >{{ uiState.submitPreventedMessage }}</span
+            >
+          </div>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/public/modules/forms/base/directives/submit-form.directive.js b/src/public/modules/forms/base/directives/submit-form.directive.js
@@ -79,6 +79,7 @@ function submitFormDirective(
         formSubmitted: false,
         progressModal: null,
         submitPrevented: false,
+        submitPreventedMessage: '',
       }
 
       // Also used to store a backup of the form state during submission, the state
@@ -219,8 +220,8 @@ function submitFormDirective(
             scope.uiState.submitButtonClicked = false
             // This check is necessary to prevent clearing of submission error Toast
             if (scope.uiState.submitPrevented) {
-              Toastr.remove()
               scope.uiState.submitPrevented = false
+              scope.uiState.submitPreventedMessage = ''
             }
             break
           case FORM_STATES.SUBMITTING:
@@ -252,7 +253,7 @@ function submitFormDirective(
               preventSubmitMessage =
                 'The form admin has disabled submission for forms with these answers.'
             }
-            Toastr.permanentError(preventSubmitMessage)
+            scope.uiState.submitPreventedMessage = preventSubmitMessage
             scope.uiState.submitPrevented = true
             break
           default:

diff --git a/tests/end-to-end/helpers/selectors.js b/tests/end-to-end/helpers/selectors.js
@@ -191,6 +191,7 @@ const formPage = {
       .nth(col)
   },
   submitBtn: Selector('#form-submit button'),
+  submitPreventedMessage: Selector('#submit-prevented-message'),
   spcpLoginBtn: Selector('#start-page-btn-container button span').withText(
     'LOGIN',
   ),

diff --git a/tests/end-to-end/helpers/util.js b/tests/end-to-end/helpers/util.js
@@ -1,5 +1,5 @@
 const axios = require('axios')
-const { ClientFunction, Selector } = require('testcafe')
+const { ClientFunction } = require('testcafe')
 const _ = require('lodash')
 const mongoose = require('mongoose')
 mongoose.Promise = global.Promise
@@ -1202,11 +1202,13 @@ const getAuthFields = (authType, authData) => {
 /**
  * Expects form submisision to be disabled and toast message to be shown.
  * @param {Object} browser Testcafe browser
- * @param {string} toastMessage message to be shown in toast when form is disabled
+ * @param {string} disabledMessage message to be shown underneath the submit button when form is disabled
  */
-async function expectFormDisabled(browser, toastMessage) {
+async function expectFormDisabled(browser, disabledMessage) {
   await browser.expect(formPage.submitBtn.getAttribute('disabled')).ok()
-  await browser.expect(Selector('.toast-message').textContent).eql(toastMessage)
+  await browser
+    .expect(formPage.submitPreventedMessage.textContent)
+    .eql(disabledMessage)
 }
 
 /**