From baabe97eb9ae00b5932135e31e28e70b2dd3033c Mon Sep 17 00:00:00 2001
From: James Person <james.person@gsa.gov>
Date: Wed, 18 Sep 2024 11:27:21 -0400
Subject: [PATCH] Disable Submit Button to Prevent Duplicate Submissions
 (#4275)

* A JS util to disable a submit button after click

* Add a spinny boi, change button text while loading
---
 backend/audit/templates/audit/submission.html |  6 +++-
 backend/static/js/util.js                     | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 backend/static/js/util.js

diff --git a/backend/audit/templates/audit/submission.html b/backend/audit/templates/audit/submission.html
index 0ba23c94d0..1825f4621e 100644
--- a/backend/audit/templates/audit/submission.html
+++ b/backend/audit/templates/audit/submission.html
@@ -14,11 +14,15 @@ <h1 class="font-sans-2xl" id="submission">Single Audit Submission</h1>
                         Please save copies of all submitted documents to your local drive. The FAC doesn't maintain these files, and can't return them for future review.
                     </p>
                     <div class="margin-top-6">
-                        <button class="usa-button margin-right-2" id="continue">Submit Single Audit</button>
+                        <div hidden id="loader" class="cross-validation-loader margin-top-6">
+                            <img src="{% static 'img/loader.svg' %}" alt="spinner for processing upload" />
+                        </div>
+                        <button class="usa-button margin-right-2" id="continue" disable-submit-after-click>Submit Single Audit</button>
                         <a href="{% url 'audit:SubmissionProgress' report_id %}">Cancel</a>
                     </div>
                 </fieldset>
             </form>
         </div>
     </div>
+    <script src="{% static 'compiled/js/util.js' %}"></script>
 {% endblock content %}
diff --git a/backend/static/js/util.js b/backend/static/js/util.js
new file mode 100644
index 0000000000..d55910622d
--- /dev/null
+++ b/backend/static/js/util.js
@@ -0,0 +1,30 @@
+/**
+ * Attach an event handler to every button with attribute "disable-submit-after-click".
+ * This will disable the button after clicking it, enable the sibling spinning icon
+ * (if it exists), and submit the form.
+ */
+function disableSubmitAfterClick() {
+  const matching_buttons = document.querySelectorAll(
+    'button[disable-submit-after-click]'
+  );
+
+  matching_buttons.forEach((button) => {
+    const form = button.closest('form'); // Parent form
+    const loader = button.parentElement.querySelector(`div[id='loader']`); // Sibling loader
+
+    button.addEventListener('click', () => {
+      button.disabled = true;
+      button.textContent = 'Submitting...';
+      if (loader) {
+        loader.hidden = false;
+      }
+      form.submit();
+    });
+  });
+}
+
+function init() {
+  disableSubmitAfterClick();
+}
+
+window.onload = init;