register: Update the user-registration form for realm creation.

In previous commits, we updated the realm creation flow to show
the realm name, type and subdomain fields in the first form
when asking for the email of the user. This commit updates the
user registration form to show the already filled realm details
as non-editable text and there is also a button to edit the
realm details before registration.

We also update the sub-heading for user registration form as
mentioned in the issue.

Fixes part of #24307.

templates/zerver/realm_creation_form.html

@@ -1,66 +1,70 @@
-<div class="input-box">
-    <div class="inline-block relative">
-        <input id="id_team_name" class="required" type="text"
-          placeholder="Acme or Ακμή"
-          value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}"
-          name="realm_name" maxlength="{{ MAX_REALM_NAME_LENGTH }}" required {% if not user_registration_form %}autofocus{% endif %} />
-    </div>
-    <label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
-    {% if form.realm_name.errors %}
-        {% for error in form.realm_name.errors %}
-        <p class="help-inline text-error">{{ error }}</p>
-        {% endfor %}
-    {% endif %}
-
-    <div class="help-text">
-        {{ _('Shorter is better than longer.') }}
-    </div>
-</div>
-
-<div class="input-box">
-    <div class="inline-block relative">
-        <select name="realm_type" id="realm_type">
-            {% for realm_type in sorted_realm_types %}
-                {% if not realm_type.hidden %}
-                <option value="{{ realm_type.id }}">{{ _(realm_type.name) }}</option>
-                {% endif %}
-            {% endfor %}
-        </select>
-    </div>
-
-    <label for="realm_type" class="inline-block label-title">{{ _('Organization type') }}</label>
-</div>
-
-<div class="input-box">
-    <label class="static org-url">
-        {{ _('Organization URL') }}
-    </label>
-    {% if root_domain_available %}
-    <label class="checkbox static" for="realm_in_root_domain">
-        <input type="checkbox" name="realm_in_root_domain" id="realm_in_root_domain"
-          {% if not form.realm_subdomain.value() and not form.realm_subdomain.errors %}checked="checked"{% endif %}/>
-        <span></span>
-        {% trans %}Use {{ external_host }}{% endtrans %}
-    </label>
-    {% endif %}
-
-    <div id="subdomain_section" {% if root_domain_available and
-      not form.realm_subdomain.errors and not form.realm_subdomain.value() %}style="display: none;"{% endif %}>
-        <div class="or"><span>{{ _('OR') }}</span></div>
+<div class="realm-creation-editable-inputs {% if user_registration_form and not form.realm_subdomain.errors %}hide{% endif %}">
+    <div class="input-box">
         <div class="inline-block relative">
-            <input id="id_team_subdomain"
-              class="{% if root_domain_landing_page %}required{% endif %} subdomain" type="text"
-              placeholder="acme"
-              value="{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}{% endif %}"
-              name="realm_subdomain" maxlength="{{ MAX_REALM_SUBDOMAIN_LENGTH }}"
-              {% if root_domain_landing_page %}required{% endif %} />
-            <label for="id_team_subdomain" class="realm_subdomain_label">.{{ external_host }}</label>
-            <p id="id_team_subdomain_error_client" class="error help-inline text-error"></p>
+            <input id="id_team_name" class="required" type="text"
+              placeholder="Acme or Ακμή"
+              value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}"
+              name="realm_name" maxlength="{{ MAX_REALM_NAME_LENGTH }}" required {% if not user_registration_form %}autofocus{% endif %} />
         </div>
-        {% if form.realm_subdomain.errors %}
-            {% for error in form.realm_subdomain.errors %}
-            <p class="error help-inline text-error team_subdomain_error_server">{{ error }}</p>
+        <label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
+        {% if form.realm_name.errors %}
+            {% for error in form.realm_name.errors %}
+            <p class="help-inline text-error">{{ error }}</p>
             {% endfor %}
         {% endif %}
+
+        {% if not user_registration_form %}
+        <div class="help-text">
+            {{ _('Shorter is better than longer.') }}
+        </div>
+        {% endif %}
+    </div>
+
+    <div class="input-box">
+        <div class="inline-block relative">
+            <select name="realm_type" id="realm_type">
+                {% for realm_type in sorted_realm_types %}
+                    {% if not realm_type.hidden %}
+                    <option value="{{ realm_type.id }}" {% if form.realm_type.value() == realm_type.id %}selected{% endif %} >{{ _(realm_type.name) }}</option>
+                    {% endif %}
+                {% endfor %}
+            </select>
+        </div>
+
+        <label for="realm_type" class="inline-block label-title">{{ _('Organization type') }}</label>
+    </div>
+
+    <div class="input-box">
+        <label class="static org-url">
+            {{ _('Organization URL') }}
+        </label>
+        {% if root_domain_available %}
+        <label class="checkbox static" for="realm_in_root_domain">
+            <input type="checkbox" name="realm_in_root_domain" id="realm_in_root_domain"
+              {% if not form.realm_subdomain.value() and not form.realm_subdomain.errors %}checked="checked"{% endif %}/>
+            <span></span>
+            {% trans %}Use {{ external_host }}{% endtrans %}
+        </label>
+        {% endif %}
+
+        <div id="subdomain_section" {% if root_domain_available and
+          not form.realm_subdomain.errors and not form.realm_subdomain.value() %}style="display: none;"{% endif %}>
+            <div class="or"><span>{{ _('OR') }}</span></div>
+            <div class="inline-block relative">
+                <input id="id_team_subdomain"
+                  class="{% if root_domain_landing_page %}required{% endif %} subdomain" type="text"
+                  placeholder="acme"
+                  value="{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}{% endif %}"
+                  name="realm_subdomain" maxlength="{{ MAX_REALM_SUBDOMAIN_LENGTH }}"
+                  {% if root_domain_landing_page %}required{% endif %} />
+                <label for="id_team_subdomain" class="realm_subdomain_label">.{{ external_host }}</label>
+                <p id="id_team_subdomain_error_client" class="error help-inline text-error"></p>
+            </div>
+            {% if form.realm_subdomain.errors %}
+                {% for error in form.realm_subdomain.errors %}
+                <p class="error help-inline text-error team_subdomain_error_server">{{ error }}</p>
+                {% endfor %}
+            {% endif %}
+        </div>
     </div>
 </div>

templates/zerver/register.html

@@ -24,7 +24,7 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
             {% endif %}
 
             {% trans %}
-            <p>You&rsquo;re almost there! We just need you to do one last thing.</p>
+            <p>Enter your account details to complete registration.</p>
             {% endtrans %}
         </div>
 
@@ -33,11 +33,31 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
 
             <fieldset class="org-registration">
                 {% if creating_new_realm %}
-                <legend>{{ _('Your organization') }}</legend>
+                <legend>{{ _('Your organization') }}
+                    {% if not form.realm_subdomain.errors %}
+                    <span class="edit-realm-details" role="button" tabindex="0"><i class="fa fa-pencil"></i></span>
+                    {% endif %}
+                </legend>
                 {% with %}
                     {% set user_registration_form = "true" %}
                     {% include 'zerver/realm_creation_form.html' %}
                 {% endwith %}
+                {% if not form.realm_subdomain.errors %}
+                <div class="not-editable-realm-details">
+                    <div class="input-box">
+                        <label for="id_realm_name" class="inline-block label-title">{{ _('Organization name') }}</label>
+                        <div id="id_realm_name" class="not-editable-realm-field">{{ form.realm_name.value() }}</div>
+                    </div>
+                    <div class="input-box">
+                        <label for="id_realm_type" class="inline-block label-title">{{ _('Organization type') }}</label>
+                        <div id="id_realm_type" class="not-editable-realm-field">{{ selected_realm_type_name }}</div>
+                    </div>
+                    <div class="input-box">
+                        <label for="id_realm_subdomain" class="inline-block label-title">{{ _('Organization URL') }}</label>
+                        <div id="id_realm_subdomain" class="not-editable-realm-field">{% if form.realm_subdomain.value() %}{{ form.realm_subdomain.value() }}.{% endif %}{{external_host}}</div>
+                    </div>
+                </div>
+                {% endif %}
                 {% endif %}
             </fieldset>
 

web/e2e-tests/realm-creation.test.ts

@@ -48,7 +48,7 @@ async function realm_creation_tests(page: Page): Promise<void> {
     const text_in_pitch = await page.evaluate(
         () => document.querySelector(".pitch p")!.textContent,
     );
-    assert.equal(text_in_pitch, "You’re almost there! We just need you to do one last thing.");
+    assert.equal(text_in_pitch, "Enter your account details to complete registration.");
 
     // fill the form.
     const params = {

web/src/portico/signup.js

@@ -284,4 +284,19 @@ $(() => {
         }
         $("#new-user-email-address-visibility .current-selected-option").text(selected_option_text);
     });
+
+    $("#registration").on("click keypress", ".edit-realm-details", (e) => {
+        if (e.type === "keypress" && e.key !== "Enter") {
+            return;
+        }
+
+        $("#registration .not-editable-realm-details").addClass("hide");
+        $("#registration .realm-creation-editable-inputs").removeClass("hide");
+        $("#id_team_name").trigger("focus");
+        // This is a hack to have cursor at end after focussing the input.
+        const name_val = $("#id_team_name").val();
+        $("#id_team_name").val("").val(name_val);
+
+        $(e.target).hide();
+    });
 });

web/styles/portico/portico_signin.css

@@ -1010,7 +1010,8 @@ button#register_auth_button_gitlab {
 
     #id_email,
     #support_from,
-    #support_realm {
+    #support_realm,
+    .not-editable-realm-field {
         font-weight: normal;
         margin: 2px;
         padding-top: 25px;
@@ -1047,6 +1048,11 @@ button#register_auth_button_gitlab {
         + .input-box {
             margin-top: 20px;
         }
+
+        .edit-realm-details {
+            float: right;
+            cursor: pointer;
+        }
     }
 
     .center-block .pitch {

zerver/tests/test_auth_backends.py

@@ -1409,7 +1409,7 @@ class SocialAuthBase(DesktopFlowTestingLib, ZulipTestCase, ABC):
         confirmation_data = {"from_confirmation": "1", "key": confirmation_key}
         result = self.client_post("/accounts/register/", confirmation_data)
         if not skip_registration_form:
-            self.assert_in_response("We just need you to do one last thing", result)
+            self.assert_in_response("Enter your account details to complete registration.", result)
 
             # Verify that the user is asked for name but not password
             self.assert_not_in_success_response(["id_password"], result)
@@ -4282,7 +4282,7 @@ class GoogleAuthBackendTest(SocialAuthBase):
             "key": confirmation_key,
         }
         result = self.client_post("/accounts/register/", confirmation_data, subdomain="zulip")
-        self.assert_in_response("We just need you to do one last thing", result)
+        self.assert_in_response("Enter your account details to complete registration.", result)
 
         # Verify that the user is asked for name but not password
         self.assert_not_in_success_response(["id_password"], result)
@@ -4318,7 +4318,7 @@ class GoogleAuthBackendTest(SocialAuthBase):
             "key": confirmation_key,
         }
         result = self.client_post("/accounts/register/", confirmation_data, subdomain="zulip")
-        self.assert_in_response("We just need you to do one last thing", result)
+        self.assert_in_response("Enter your account details to complete registration.", result)
 
         # Verify that the user is asked for name but not password
         self.assert_not_in_success_response(["id_password"], result)
@@ -4372,7 +4372,7 @@ class GoogleAuthBackendTest(SocialAuthBase):
         self.assert_in_response('action="/accounts/register/"', result)
         data2 = {"from_confirmation": "1", "full_name": data["full_name"], "key": confirmation_key}
         result = self.client_post("/accounts/register/", data2, subdomain="zulip")
-        self.assert_in_response("We just need you to do one last thing", result)
+        self.assert_in_response("Enter your account details to complete registration.", result)
 
         # Verify that the user is asked for name but not password
         self.assert_not_in_success_response(["id_password"], result)

zerver/tests/test_invite.py

@@ -1436,7 +1436,9 @@ so we didn't send them an invitation. We did send invitations to everyone else!"
         response = self.client_post(
             url, {"key": registration_key, "from_confirmation": 1, "full_name": "alice"}
         )
-        self.assert_in_success_response(["We just need you to do one last thing."], response)
+        self.assert_in_success_response(
+            ["Enter your account details to complete registration."], response
+        )
         response = self.submit_reg_form_for_user(email, password, key=registration_key)
         self.assertEqual(response.status_code, 302)
 

zerver/tests/test_signup.py

@@ -2431,7 +2431,9 @@ class UserSignUpTest(ZulipTestCase):
         result = self.verify_signup(email=email, password=password, full_name="")
         # _WSGIPatchedWSGIResponse does not exist in Django, thus the inverted isinstance check.
         assert not isinstance(result, UserProfile)
-        self.assert_in_success_response(["We just need you to do one last thing."], result)
+        self.assert_in_success_response(
+            ["Enter your account details to complete registration."], result
+        )
 
         # Verify that the user is asked for name and password
         self.assert_in_success_response(["id_password", "id_full_name"], result)
@@ -2486,7 +2488,9 @@ class UserSignUpTest(ZulipTestCase):
                 "from_confirmation": "1",
             },
         )
-        self.assert_in_success_response(["We just need you to do one last thing."], result)
+        self.assert_in_success_response(
+            ["Enter your account details to complete registration."], result
+        )
 
     def test_signup_with_weak_password(self) -> None:
         """
@@ -2521,7 +2525,9 @@ class UserSignUpTest(ZulipTestCase):
                     "from_confirmation": "1",
                 },
             )
-            self.assert_in_success_response(["We just need you to do one last thing."], result)
+            self.assert_in_success_response(
+                ["Enter your account details to complete registration."], result
+            )
 
             result = self.submit_reg_form_for_user(email, "easy", full_name="New Guy")
             self.assert_in_success_response(["The password is too weak."], result)
@@ -2588,7 +2594,7 @@ class UserSignUpTest(ZulipTestCase):
             email, password, full_name="New Guy", from_confirmation="1"
         )
         self.assert_in_success_response(
-            ["We just need you to do one last thing.", "New Guy", email], result
+            ["Enter your account details to complete registration.", "New Guy", email], result
         )
         result = self.submit_reg_form_for_user(email, password, full_name="New Guy")
         user_profile = UserProfile.objects.get(delivery_email=email)
@@ -2733,7 +2739,7 @@ class UserSignUpTest(ZulipTestCase):
             [
                 "Import settings from existing Zulip account",
                 "selected >\n                                Zulip Dev",
-                "We just need you to do one last thing.",
+                "Enter your account details to complete registration.",
             ],
             result,
         )
@@ -3007,7 +3013,7 @@ class UserSignUpTest(ZulipTestCase):
 
             self.assert_in_success_response(
                 [
-                    "We just need you to do one last thing.",
+                    "Enter your account details to complete registration.",
                     "New LDAP fullname",
                     "newuser@zulip.com",
                 ],
@@ -3034,7 +3040,8 @@ class UserSignUpTest(ZulipTestCase):
                     HTTP_HOST=subdomain + ".testserver",
                 )
             self.assert_in_success_response(
-                ["We just need you to do one last thing.", "newuser@zulip.com"], result
+                ["Enter your account details to complete registration.", "newuser@zulip.com"],
+                result,
             )
 
     @override_settings(
@@ -3096,7 +3103,7 @@ class UserSignUpTest(ZulipTestCase):
 
             self.assert_in_success_response(
                 [
-                    "We just need you to do one last thing.",
+                    "Enter your account details to complete registration.",
                     "New LDAP fullname",
                     "newuser@zulip.com",
                 ],
@@ -3159,7 +3166,12 @@ class UserSignUpTest(ZulipTestCase):
 
             # Full name should be set from LDAP
             self.assert_in_success_response(
-                ["We just need you to do one last thing.", full_name, "newuser@zulip.com"], result
+                [
+                    "Enter your account details to complete registration.",
+                    full_name,
+                    "newuser@zulip.com",
+                ],
+                result,
             )
 
             # Submit the final form with the wrong password.
@@ -3821,7 +3833,8 @@ class UserSignUpTest(ZulipTestCase):
                 HTTP_HOST=subdomain + ".testserver",
             )
             self.assert_in_success_response(
-                ["We just need you to do one last thing.", "newuser@zulip.com"], result
+                ["Enter your account details to complete registration.", "newuser@zulip.com"],
+                result,
             )
 
     @patch(

zerver/views/registration.py

@@ -72,6 +72,7 @@ from zerver.models import (
     Stream,
     UserProfile,
     get_default_stream_groups,
+    get_org_type_display_name,
     get_realm,
     get_source_profile,
     get_user_by_delivery_email,
@@ -177,6 +178,14 @@ def check_prereg_key(
     return prereg_object, realm_creation
 
 
+def get_selected_realm_type_name(prereg_realm: Optional[PreregistrationRealm]) -> Optional[str]:
+    if prereg_realm is None:
+        # We show the selected realm type only when creating new realm.
+        return None
+
+    return get_org_type_display_name(prereg_realm.org_type)
+
+
 @add_google_analytics
 @require_post
 def realm_register(*args: Any, **kwargs: Any) -> HttpResponse:
@@ -597,6 +606,7 @@ def registration_helper(
                 Realm.ORG_TYPES.values(), key=lambda d: d["display_order"]
             ),
             "default_email_address_visibility": default_email_address_visibility,
+            "selected_realm_type_name": get_selected_realm_type_name(prereg_realm),
             "email_address_visibility_admins_only": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_ADMINS,
             "email_address_visibility_moderators": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_MODERATORS,
             "email_address_visibility_nobody": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_NOBODY,