Story: Add loading spinner and disable button on recaptcha function (#697)

Author: jlchilders11

coderedcms/templates/coderedcms/includes/form_button.html

@@ -16,10 +16,15 @@
 <input type="hidden" name="g-recaptcha-response">
 <button
   type="button"
+  id="{{page.get_form_id}}Button"
   class="btn {{page.button_size}} {{page.button_style}} {{page.button_css_class}}"
   onclick="recaptchaSubmit('{{ page.get_form_id }}')"
   >
   {{ button_text|default:page.button_text }}
+  <span class="d-none ps-1" id="{{page.get_form_id}}ButtonSpinner">
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span class="visually-hidden" role="status">Submitting...</span>
+  </span>
 </button>
 {% else %}
 <button type="submit" class="btn {{page.button_size}} {{page.button_style}} {{page.button_css_class}}">

coderedcms/templates/coderedcms/pages/base.html

@@ -193,9 +193,13 @@ <h2 class="text-center my-5">{% trans "Related" %}</h2>
   <script src="https://www.google.com/recaptcha/api.js?render={{ ls.recaptcha_public_key }}"></script>
   <script>
     function recaptchaSubmit(formId) {
-      var form = document.getElementById(formId);
+      let form = document.getElementById(formId);
+      let spinner = document.getElementById(`${formId}ButtonSpinner`);
+      let button = document.getElementById(`${formId}Button`)
       if (form.reportValidity()) {
         grecaptcha.ready(function() {
+          button.disabled = true;
+          spinner.classList.remove("d-none");
           grecaptcha.execute(
             '{{ ls.recaptcha_public_key }}',
             {action: 'submit'}
@@ -205,7 +209,10 @@ <h2 class="text-center my-5">{% trans "Related" %}</h2>
               function(el) {el.value = token}
             );
             document.getElementById(formId).submit();
-          });
+          }).finally(function() {
+            button.disabled = false;
+            spinner.classList.add('d-none')
+          })
         });
       }
     }