UX: Registration design and validation improvements (#27666)

app/assets/javascripts/discourse/app/components/modal/create-account.hbs

@@ -53,17 +53,16 @@
             />
             <label class="alt-placeholder" for="new-account-email">
               {{i18n "user.email.title"}}
-              {{~#if this.userFields~}}
-                <span class="required">*</span>
-              {{/if}}
             </label>
             <InputTip
               @validation={{this.emailValidation}}
               id="account-email-validation"
             />
-            <span class="more-info" id="account-email-validation-more-info">
+            {{#unless this.emailValidation.reason}}
-              {{i18n "user.email.instructions"}}
+              <span class="more-info" id="account-email-validation-more-info">
-            </span>
+                {{i18n "user.email.instructions"}}
+              </span>
+            {{/unless}}
           </div>
 
           <div class="input-group create-account__username">
@@ -80,47 +79,18 @@
             />
             <label class="alt-placeholder" for="new-account-username">
               {{i18n "user.username.title"}}
-              {{~#if this.userFields~}}
-                <span class="required">*</span>
-              {{/if}}
             </label>
 
             <InputTip
               @validation={{this.usernameValidation}}
               id="username-validation"
             />
-            <span class="more-info" id="username-validation-more-info">
+            {{#unless this.usernameValidation.reason}}
-              {{i18n "user.username.instructions"}}
-            </span>
-          </div>
 
-          <div class="input-group create-account__fullname">
+              <span class="more-info" id="username-validation-more-info">
-            {{#if this.fullnameRequired}}
+                {{i18n "user.username.instructions"}}
-              <TextField
-                @disabled={{this.nameDisabled}}
-                @value={{this.model.accountName}}
-                @id="new-account-name"
-                aria-describedby="fullname-validation fullname-validation-more-info"
-                aria-invalid={{this.nameValidation.failed}}
-                class={{value-entered this.model.accountName}}
-              />
-              <label class="alt-placeholder" for="new-account-name">
-                {{i18n "user.name.title"}}
-                {{#if this.siteSettings.full_name_required}}
-                  {{~#if this.userFields~}}
-                    <span class="required">*</span>
-                  {{/if}}
-                {{/if}}
-              </label>
-
-              <InputTip
-                @validation={{this.nameValidation}}
-                id="fullname-validation"
-              />
-              <span class="more-info" id="fullname-validation-more-info">
-                {{this.nameInstructions}}
               </span>
-            {{/if}}
+            {{/unless}}
           </div>
 
           <PluginOutlet
@@ -148,9 +118,6 @@
               />
               <label class="alt-placeholder" for="new-account-password">
                 {{i18n "user.password.title"}}
-                {{~#if this.userFields~}}
-                  <span class="required">*</span>
-                {{/if}}
               </label>
 
               <div class="create-account__password-info">
@@ -159,9 +126,11 @@
                     @validation={{this.passwordValidation}}
                     id="password-validation"
                   />
-                  <span class="more-info" id="password-validation-more-info">
+                  {{#unless this.passwordValidation.reason}}
-                    {{this.passwordInstructions}}
+                    <span class="more-info" id="password-validation-more-info">
-                  </span>
+                      {{this.passwordInstructions}}
+                    </span>
+                  {{/unless}}
                   <div
                     class={{concat-class
                       "caps-lock-warning"
@@ -221,6 +190,38 @@
             }}
           />
 
+          <div
+            class={{concat-class
+              "input-group"
+              "create-account__fullname"
+              (if this.siteSettings.full_name_required "required")
+            }}
+          >
+            {{#if this.fullnameRequired}}
+              <TextField
+                @disabled={{this.nameDisabled}}
+                @value={{this.model.accountName}}
+                @id="new-account-name"
+                aria-describedby="fullname-validation fullname-validation-more-info"
+                aria-invalid={{this.nameValidation.failed}}
+                class={{value-entered this.model.accountName}}
+              />
+              <label class="alt-placeholder" for="new-account-name">
+                {{i18n "user.name.title"}}
+              </label>
+
+              <InputTip
+                @validation={{this.nameValidation}}
+                id="fullname-validation"
+              />
+              {{#unless this.nameValidation.reason}}
+                <span class="more-info" id="fullname-validation-more-info">
+                  {{this.nameInstructions}}
+                </span>
+              {{/unless}}
+            {{/if}}
+          </div>
+
           {{#if this.userFields}}
             <div class="user-fields">
               {{#each this.userFields as |f|}}
@@ -249,9 +250,11 @@
 
         {{#if this.site.desktopView}}
           <div class="d-modal__footer">
-            <div class="disclaimer">
+            {{#if this.disclaimerHtml}}
-              {{html-safe this.disclaimerHtml}}
+              <div class="disclaimer">
-            </div>
+                {{html-safe this.disclaimerHtml}}
+              </div>
+            {{/if}}
             <div class="d-modal__footer-buttons">
               <DButton
                 @action={{this.createAccount}}
@@ -262,6 +265,10 @@
               />
 
               {{#unless this.hasAuthOptions}}
+                <hr />
+                <div class="already-have-account">
+                  {{i18n "create_account.already_have_account"}}
+                </div>
                 <DButton
                   @action={{route-action "showLogin"}}
                   @disabled={{this.formSubmitted}}

app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs

@@ -1,7 +1,7 @@
 {{#if this.field.name}}
   <label class="control-label">
     {{this.field.name}}
-    {{#if this.field.required}}<span class="required">*</span>{{/if}}
+    {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
   </label>
 {{/if}}
 

app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs

@@ -3,9 +3,7 @@
   for={{concat "user-" this.elementId}}
 >
   {{this.field.name}}
-  {{#if this.field.required}}
+  {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
-    <span class="required">*</span>
-  {{/if}}
 </label>
 
 <div class="controls">

app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs

@@ -3,9 +3,7 @@
   for={{concat "user-" this.elementId}}
 >
   {{this.field.name}}
-  {{#if this.field.required}}
+  {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
-    <span class="required">*</span>
-  {{/if}}
 </label>
 
 <div class="controls">

app/assets/javascripts/discourse/app/components/user-fields/text.hbs

@@ -9,11 +9,13 @@
     for={{concat "user-" this.elementId}}
   >
     {{this.field.name}}
-    {{#if this.field.required}}<span class="required">*</span>{{/if}}
+    {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
   </label>
   <InputTip
     @validation={{this.validation}}
     class={{unless this.validation "hidden"}}
   />
-  <div class="instructions">{{html-safe this.field.description}}</div>
+  {{#unless this.validation}}
+    <div class="instructions">{{html-safe this.field.description}}</div>
+  {{/unless}}
 </div>

app/assets/stylesheets/common/modal/login-modal.scss

@@ -1,4 +1,4 @@
-/* 
+/*
 * shared styles
 */
 .d-modal.login-modal,
@@ -82,7 +82,17 @@
   }
 
   #login-form {
-    margin: 3em 0 2em 0;
+    margin: 3em 0 1.2em 0;
+    display: flex;
+    flex-direction: column;
+
+    .input-group {
+      &.create-account-email,
+      &.create-account__username,
+      &.create-account__fullname.required {
+        order: -1;
+      }
+    }
   }
 
   .tip {
@@ -164,9 +174,18 @@
     }
     &__footer-buttons {
       display: flex;
-      flex-wrap: wrap;
+      flex-direction: column;
+      width: 100%;
       align-items: center;
-      gap: 0.5rem;
+      .already-have-account {
+        color: var(--primary-medium);
+        margin-bottom: 0.5em;
+      }
+
+      button,
+      hr {
+        width: 100%;
+      }
     }
   }
 

config/locales/client.en.yml

@@ -1142,6 +1142,7 @@ en:
       none: "(select an option)"
       required: 'Please enter a value for "%{name}"'
       same_as_password: "Your password should not be repeated in other fields."
+      optional: (optional)
 
     user:
       said: "%{username}:"
@@ -2233,10 +2234,11 @@ en:
       header_title: "Welcome!"
       subheader_title: "Let's create your account"
       disclaimer: "By registering, you agree to the <a href='%{privacy_link}' target='blank'>privacy policy</a> and <a href='%{tos_link}' target='blank'>terms of service</a>."
-      title: "Create your account"
+      title: "Sign Up"
       failed: "Something went wrong, perhaps this email is already registered, try the forgot password link"
       associate: "Already have an account? <a href='%{associate_link}'>Log In</a> to link your %{provider} account."
       activation_title: "Activate your account"
+      already_have_account: "Already have an account?"
 
     forgot_password:
       title: "Password Reset"

spec/system/create_account_spec.rb

@@ -13,7 +13,7 @@ describe "Create account", type: :system do
 
     find("#new-account-password").fill_in with: "secret-password"
 
-    click_button "Create your account"
+    find(".d-modal.create-account").click_button "Sign Up"
     expect(page).to have_no_css(".d-modal.create-account")
 
     user = User.last