Block multiple form submits on application form. (#4452)

Fixes #4348

Before this js snippet it was possible on a slow network to post a
application form multiple times by rapidly clicking the submit button
multiple times.

Would be neat to use aplinejs for this everywhere but it interfere with
the current "unlockApplicationForm" feature that we use to block some
spam.

Author: frjo

hypha/apply/funds/templates/funds/application_preview.html

@@ -38,12 +38,12 @@
             </div>
         </form>
 
-        <form id="preview-form-edit" class="form application-form" action="{% url 'funds:submissions:edit' object.id %}">
+        <form id="preview-form-edit" class="form application-form" action="{% url 'funds:submissions:edit' object.id %}" x-data="{ isFormSubmitting: false }" x-on:submit="isFormSubmitting = true">
             {% csrf_token %}
         </form>
 
         <div class="form__group">
-            <button class="button button--primary" form="preview-form-submit" name="submit" type="submit">{% trans "Submit for review" %}</button>
+            <button class="button button--primary" form="preview-form-submit" name="submit" type="submit" :disabled="isFormSubmitting">{% trans "Submit for review" %}</button>
             <button class="button button--secondary" form="preview-form-edit">{% trans "Edit" %}</button>
         </div>
 

hypha/static_src/javascript/application-form.js

@@ -49,6 +49,11 @@
   // Remove the "no javascript" messages
   document.querySelector(".message-no-js").remove();
 
+  // Block multiple form submits.
+  form.addEventListener("submit", function () {
+    button.setAttribute("disabled", "disabled");
+  });
+
   const unlockApplicationForm = function () {
     form.setAttribute("action", "");
     button.removeAttribute("disabled");