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

@@ -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) {

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;

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>