From 0360184c2d3752a453b370a4757fd5a7da7d5689 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Sat, 9 Aug 2025 16:18:07 +0200
Subject: [PATCH] [ADD] QuerySelector function to prevent forms from double
 submitting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is to prevent forms from submitting multiple times when users double-click or even more …
---
 .../framework/css/auth-framework.css          |  4 +++
 .../framework/js/auth-framework.js            | 31 +++++++++++++++++++
 .../templates/allianceauth/base-bs5.html      |  6 ++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css b/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
index e44739c7..b3756804 100644
--- a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
+++ b/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) {
diff --git a/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js b/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js
index 167d8a52..6e48fc8b 100644
--- a/allianceauth/framework/static/allianceauth/framework/js/auth-framework.js
+++ b/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');
+        });
+    });
+});
diff --git a/allianceauth/templates/allianceauth/base-bs5.html b/allianceauth/templates/allianceauth/base-bs5.html
index ad64120e..eb52e2be 100644
--- a/allianceauth/templates/allianceauth/base-bs5.html
+++ b/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 %}