new_registration: Move human verification from popup to inline style.

Placed text just below the "Create organization" button.
Used styling to match "Learn how to import..." above.
Hidden the checkbox after the verification is done.
The verification text is hidden after 2s with a fadeout after 1s delay.

Fixes #36086

templates/zerver/create_realm.html

@@ -34,7 +34,7 @@
                         {% endfor %}
                         {% endif %}
                     </div>
-                    <div class="input-box">
+                    <div class="input-box" id="altcha-submit-button-container">
                         <button type="submit" class="new-organization-button register-button">{{ _("Create organization") }}</button>
                         {% if has_captcha %}
                             {% if form.captcha.errors %}

web/src/portico/signup.ts

@@ -392,6 +392,15 @@ $(() => {
         altcha.addEventListener("statechange", ((ev: AltchaStateChangeEvent) => {
             if (ev.detail.state === "verified") {
                 $submit.prop("disabled", false);
+                // Hide checkbox on successful verification.
+                altcha.querySelector(".altcha")!.classList.add("altcha-checkbox-hidden");
+                altcha.style.opacity = "1";
+                // Animate hiding the altcha after a delay.
+                setTimeout(() => {
+                    altcha.style.transition = "opacity 1s ease-in-out";
+                    altcha.style.opacity = "0";
+                    altcha.style.pointerEvents = "none";
+                }, 1000);
             }
         }) as EventListener);
     }

web/styles/portico/portico_signin.css

@@ -1596,3 +1596,58 @@ button#register_auth_button_gitlab {
 #email-address-visibility-help-text {
     font-weight: normal;
 }
+
+.altcha .altcha-main {
+    /* Use `inline` instead of `flex` to get
+       desired effect of loading indicator and
+       status text next to each other.
+    */
+    display: inline;
+}
+
+.altcha .altcha-main .altcha-label {
+    /* Style similar to `registration-form-hint` */
+    font-weight: 300;
+    font-size: 0.8em;
+    color: inherit;
+    text-align: center;
+    padding-left: 5px;
+    display: inline;
+}
+
+.altcha .altcha-checkbox {
+    /* Loading indicator is displayed
+       using these properties. */
+    display: inline;
+    margin-right: 5px;
+}
+
+.altcha {
+    width: 100%;
+    margin: auto;
+    border: none !important;
+    /* Negate the space applied by altcha-widget to
+       avoid too much empty space below submit button.
+    */
+    margin-bottom: -48px;
+}
+
+.altcha.altcha-checkbox-hidden {
+    /* We only want to show the loading
+       indicator and not the checkbox. */
+    .altcha-checkbox {
+        display: none;
+    }
+
+    .altcha-main .altcha-label {
+        padding-left: 0;
+    }
+}
+
+#new-realm-creation .new-organization-button {
+    margin-bottom: 0;
+}
+
+#new-realm-creation #altcha-submit-button-container {
+    margin-bottom: 30px;
+}

zerver/forms.py

@@ -358,7 +358,6 @@ class AltchaWidget(forms.TextInput):
                 '  challengeurl="/json/antispam_challenge"'
                 "  hidelogo"
                 "  hidefooter"
-                '  floating="bottom"'
                 "  refetchonexpire"
                 '  style="{}"'
                 '  strings="{}"'