From d37ddf13a42dee2e7b545dde0c02bebfeeef8608 Mon Sep 17 00:00:00 2001
From: sahil839 <sahilbatra839@gmail.com>
Date: Thu, 27 May 2021 18:24:42 +0530
Subject: [PATCH] registration: Show spinner and disable button while
 processing.

This commit disables the button and shows a loading spinner on
the button when signup request is being processed to avoid race
conditions caused by user clicking on the button multiple times.

The fix is done observing that for the case when form is invalid
the whole page is rerendered and thus we do not need to remove
the spinner and enable the button again and for other errors
we redirect to some other page.

And for the validation taking place in client-side, the button
is disabled and spinner is shown, only is form is valid, by
using "$('#registration').valid()".
---
 static/js/portico/signup.js              | 8 ++++++++
 static/styles/portico/portico_signin.css | 9 +++++++++
 templates/zerver/register.html           | 5 ++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/static/js/portico/signup.js b/static/js/portico/signup.js
index 9a85d26892..e88fcc2256 100644
--- a/static/js/portico/signup.js
+++ b/static/js/portico/signup.js
@@ -103,6 +103,14 @@ $(() => {
         $("#timezone").val(new Intl.DateTimeFormat().resolvedOptions().timeZone);
     }
 
+    $("#registration").on("submit", () => {
+        if ($("#registration").valid()) {
+            $(".register-button .loader").css("display", "inline-block");
+            $(".register-button").prop("disabled", true);
+            $(".register-button span").hide();
+        }
+    });
+
     // Code in this block will be executed when the /accounts/send_confirm
     // endpoint is visited i.e. accounts_send_confirm.html is rendered.
     if ($("[data-page-id='accounts-send-confirm']").length > 0) {
diff --git a/static/styles/portico/portico_signin.css b/static/styles/portico/portico_signin.css
index a5d0ba114b..c0b8ab2e75 100644
--- a/static/styles/portico/portico_signin.css
+++ b/static/styles/portico/portico_signin.css
@@ -804,6 +804,15 @@ button#register_auth_button_gitlab {
         border-radius: 4px;
     }
 
+    .register-button .loader {
+        display: none;
+        vertical-align: top;
+        position: relative;
+        height: 30px;
+        margin-top: -10px;
+        top: 5px;
+    }
+
     #id_team_subdomain.subdomain {
         margin-top: 0;
         text-align: right;
diff --git a/templates/zerver/register.html b/templates/zerver/register.html
index 44dc0470c2..bcb3b6ad04 100644
--- a/templates/zerver/register.html
+++ b/templates/zerver/register.html
@@ -236,7 +236,10 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
                 </div>
                 {% endif %}
                 <div class="register-button-box">
-                    <button class="register-button" type="submit">{{ _('Sign up') }}</button>
+                    <button class="register-button" type="submit">
+                        <span>{{ _('Sign up') }}</span>
+                        <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
+                    </button>
                     <input type="hidden" name="next" value="{{ next }}" />
                 </div>
             </div>