registration: Improve registration form.

Improved markup of help-text. Showing Email as plain-text instead of disabled input. Changed page heading to 'Create your organization' in realm creation form and 'Create your account' in normal signup form. Grouped org settings and user settings with fieldsets. Reduced space between Password field and Password strength bar. Also, updated the corresponding test cases. Partially Fixes: zulip#15750.
matt- · Jul 29, 2020 · c752f95 · c752f95
1 parent dcc2499
commit c752f95
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 24 deletions.
diff --git a/frontend_tests/casper_tests/00-realm-creation.js b/frontend_tests/casper_tests/00-realm-creation.js
@@ -44,7 +44,7 @@ casper.then(function () {
 
     this.waitUntilVisible("#id_email", function () {
         this.test.assertEvalEquals(function () {
-            return $("#id_email").attr("placeholder");
+            return $("#id_email").html();
         }, email);
     });
 

diff --git a/frontend_tests/puppeteer_tests/00-realm-creation.js b/frontend_tests/puppeteer_tests/00-realm-creation.js
@@ -42,7 +42,7 @@ async function realm_creation_tests(page) {
     // checking the text in <p> tag under pitch class is as expected.
     await page.waitForSelector(".pitch");
     const text_in_pitch = await page.evaluate(() => document.querySelector(".pitch p").innerText);
-    assert(text_in_pitch === "We just need you to do one last thing.");
+    assert(text_in_pitch === "You’re almost there! We just need you to do one last thing.");
 
     // fill the form.
     const params = {

diff --git a/static/styles/portico/portico-signin.scss b/static/styles/portico/portico-signin.scss
@@ -531,7 +531,7 @@ html {
 .portico-page {
     .pitch {
         h1 {
-            margin-bottom: 0px;
+            margin-bottom: 5px;
         }
 
         p {
@@ -743,8 +743,12 @@ button#register_auth_button_gitlab {
     padding: 0;
     margin: 30px;
 
-    section {
+    fieldset {
         margin: 30px;
+
+        .input-box:last-child {
+            margin-bottom: 0;
+        }
     }
 
     .info-box {
@@ -759,7 +763,7 @@ button#register_auth_button_gitlab {
         display: block;
         text-align: center;
         width: 330px;
-        margin: 30px auto 10px;
+        margin: 25px auto 10px;
         position: relative;
 
         &.with-top-space {
@@ -808,7 +812,7 @@ button#register_auth_button_gitlab {
         width: 150px;
 
         + .realm_subdomain_label {
-            margin-top: 12px;
+            top: 15px;
             margin-left: 180px;
             display: inline-block;
 
@@ -832,14 +836,30 @@ button#register_auth_button_gitlab {
         }
     }
 
-    .help-box {
-        width: calc(100% - 25px);
+    #id_email {
+        font-weight: normal;
+        margin: 2px;
+        padding-top: 25px;
+        text-align: left;
+        overflow-wrap: break-word;
+    }
+
+    .help-text {
+        width: 100%;
         max-width: none;
-        margin: 0 auto;
+        margin: 2px 0;
+        text-align: left;
+        color: hsl(0, 0%, 47%);
+        font-size: 0.9rem;
+        font-weight: 400;
+        line-height: 1.2;
+    }
 
-        &.margin-top {
-            margin-top: 21px;
-            text-align: left;
+    legend {
+        margin-bottom: 0;
+
+        + .input-box {
+            margin-top: 20px;
         }
     }
 

diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss
@@ -397,7 +397,7 @@ img.screenshot {
 
 #registration #pw_strength {
     width: 325px;
-    margin-top: 20px;
+    margin: 7px auto 0px;
 }
 
 .def::before {

diff --git a/templates/zerver/register.html b/templates/zerver/register.html
@@ -12,16 +12,21 @@
     <div class="center-block new-style" style="padding: 20px 0px">
 
         <div class="pitch">
+            {% if creating_new_team %}
+            <h1>{{ _('Create your organization') }}</h1>
+            {% else %}
+            <h1>{{ _('Create your account') }}</h1>
+            {% endif %}
+
             {% trans %}
-            <h1>You&rsquo;re almost there.</h1>
-            <p>We just need you to do one last thing.</p>
+            <p>You&rsquo;re almost there! We just need you to do one last thing.</p>
             {% endtrans %}
         </div>
 
         <form method="post" class="form-horizontal white-box" id="registration" action="{{ url('zerver.views.registration.accounts_register') }}">
             {{ csrf_input }}
 
-            <section class="org-registration">
+            <fieldset class="org-registration">
                 {% if creating_new_team %}
                 <div class="input-box">
                     <div class="inline-block relative">
@@ -37,7 +42,7 @@ <h1>You&rsquo;re almost there.</h1>
                         {% endfor %}
                     {% endif %}
 
-                    <div class="help-box margin-top">
+                    <div class="help-text">
                         {{ _('Shorter is better than longer.') }}
                     </div>
                 </div>
@@ -74,14 +79,17 @@ <h1>You&rsquo;re almost there.</h1>
                             {% endfor %}
                         {% endif %}
                     </div>
-                    <div class="help-box margin-top">
-                        {{ _("The address you'll use to log in to your organization.") }}
+                    <div class="help-text">
+                        {{ _("The URL users will use to access the new organization.") }}
                     </div>
                 </div>
                 {% endif %}
-            </section>
+            </fieldset>
 
-            <section class="user-registration">
+            <fieldset class="user-registration">
+                {% if creating_new_team %}
+                <legend>{{ _('Your account') }}</legend>
+                {% endif %}
                 {% if realm_name and not creating_new_team %}
                 <img class="avatar inline-block" src="{{ realm_icon }}" alt="" />
                 <div class="info-box inline-block">
@@ -93,8 +101,8 @@ <h1>You&rsquo;re almost there.</h1>
                 <div class="input-box no-validation">
                     <input type='hidden' name='key' value='{{ key }}' />
                     <input type='hidden' name='timezone' id='timezone'/>
-                    <input id="id_email" type='text' disabled="true" placeholder="{{ email }}" required />
                     <label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
+                    <div id="id_email">{{ email }}</div>
                 </div>
 
                 {% if accounts %}
@@ -170,8 +178,7 @@ <h1>You&rsquo;re almost there.</h1>
                     </div>
                 </div>
                 {% endif %}
-            </section>
-
+            </fieldset>
             {% if default_stream_groups %}
             <hr>
             <div class="default-stream-groups">