[ADD] QuerySelector function to prevent forms from double submitting

This is to prevent forms from submitting multiple times when users double-click or even more …

allianceauth/framework/static/allianceauth/framework/css/auth-framework.css

@@ -15,6 +15,10 @@
     ul#nav-right:has(li) + ul#nav-right-character-control > li:first-child {
         display: list-item !important;
     }
+
+    form.is-submitting button[type="submit"] {
+        cursor: not-allowed;
+    }
 }
 
 @media all and (max-width: 991px) {

allianceauth/framework/static/allianceauth/framework/js/auth-framework.js

@@ -1,3 +1,7 @@
+/**
+ * Functions and utilities for the Alliance Auth framework.
+ */
+
 /* jshint -W097 */
 'use strict';
 
@@ -267,3 +271,30 @@ function objectDeepMerge (target, ...sources) {
 
     return target;
 }
+
+/**
+ * When the document is ready …
+ */
+$(document).ready(() => {
+    /**
+     * Prevent double form submits by adding a class to the form
+     * when it is submitted.
+     *
+     * This class can be used to show a visual indicator that the form is being
+     * submitted, such as a spinner.
+     *
+     * This is useful to prevent users from double-clicking the submit button
+     * and submitting the form multiple times.
+     */
+    document.querySelectorAll('form').forEach((form) => {
+        form.addEventListener('submit', (e) => {
+            // Prevent if already submitting
+            if (form.classList.contains('is-submitting')) {
+                e.preventDefault();
+            }
+
+            // Add class to hook our visual indicator on
+            form.classList.add('is-submitting');
+        });
+    });
+});

allianceauth/templates/allianceauth/base-bs5.html

@@ -21,9 +21,11 @@
         {% theme_css %}
 
         {% include 'bundles/fontawesome.html' %}
-        {% include 'bundles/auth-framework-js.html' %}
         {% include 'bundles/auth-framework-css.html' %}
 
+        {% include 'bundles/jquery-js.html' %}
+        {% include 'bundles/auth-framework-js.html' %}
+
         <style>
             @media all {
                 .nav-padding {
@@ -138,8 +140,6 @@
             })();
         </script>
 
-        {% include 'bundles/jquery-js.html' %}
-
         {% theme_js %}
 
         {% if user.is_authenticated %}