From 8bf28a4f33a72ef74062154239a9aabe5e2d1443 Mon Sep 17 00:00:00 2001
From: catborise <catborise@gmail.com>
Date: Fri, 12 May 2023 12:01:54 +0300
Subject: [PATCH] add loading spinner after submit to login pages

---
 accounts/templates/accounts/otp_login.html | 25 +++++++++++++++++++---
 accounts/templates/login.html              | 25 +++++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/accounts/templates/accounts/otp_login.html b/accounts/templates/accounts/otp_login.html
index bd7ce61..9d0803c 100644
--- a/accounts/templates/accounts/otp_login.html
+++ b/accounts/templates/accounts/otp_login.html
@@ -21,7 +21,7 @@
                 {% bootstrap_form_errors form %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             {% bootstrap_field form.username layout='inline' %}
             {% bootstrap_field form.password layout='inline' %}
@@ -29,9 +29,28 @@
             <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
             <br>
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}
diff --git a/accounts/templates/login.html b/accounts/templates/login.html
index 1a7da2d..28e6769 100644
--- a/accounts/templates/login.html
+++ b/accounts/templates/login.html
@@ -22,15 +22,34 @@
                 {% trans "Incorrect username or password." %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             <input type="text" class="form-control" name="username" placeholder="{% trans 'User' %}" autocapitalize="none" autocorrect="off" autofocus required>
             <input type="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
             <input type="hidden" name="next" value="{{ next }}">
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}