From 0d608ceff84ec59affd18db1059e5815b7580031 Mon Sep 17 00:00:00 2001
From: Jan Cernik <66427541+jancernik@users.noreply.github.com>
Date: Thu, 4 Jul 2024 09:17:07 -0300
Subject: [PATCH] UX: Registration design and validation improvements (#27666)

---
 .../app/components/modal/create-account.hbs   | 103 ++++++++++--------
 .../app/components/user-fields/confirm.hbs    |   2 +-
 .../app/components/user-fields/dropdown.hbs   |   4 +-
 .../components/user-fields/multiselect.hbs    |   4 +-
 .../app/components/user-fields/text.hbs       |   6 +-
 .../stylesheets/common/modal/login-modal.scss |  27 ++++-
 config/locales/client.en.yml                  |   4 +-
 spec/system/create_account_spec.rb            |   2 +-
 8 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
index 5085280e62d..1fc3d985eb8 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/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">
-              {{i18n "user.email.instructions"}}
-            </span>
+            {{#unless this.emailValidation.reason}}
+              <span class="more-info" id="account-email-validation-more-info">
+                {{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">
-              {{i18n "user.username.instructions"}}
-            </span>
-          </div>
+            {{#unless this.usernameValidation.reason}}
 
-          <div class="input-group create-account__fullname">
-            {{#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"}}
-                {{#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 class="more-info" id="username-validation-more-info">
+                {{i18n "user.username.instructions"}}
               </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">
-                    {{this.passwordInstructions}}
-                  </span>
+                  {{#unless this.passwordValidation.reason}}
+                    <span class="more-info" id="password-validation-more-info">
+                      {{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">
-              {{html-safe this.disclaimerHtml}}
-            </div>
+            {{#if this.disclaimerHtml}}
+              <div class="disclaimer">
+                {{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}}
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs b/app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs
index 27694b06f56..2640fa7840d 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/confirm.hbs
+++ b/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}}
 
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs b/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
index dd6d3ad493a..51c7bd6d277 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/dropdown.hbs
+++ b/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}}
-    <span class="required">*</span>
-  {{/if}}
+  {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
 </label>
 
 <div class="controls">
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs b/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
index 41cf8a8f581..1f0074b9844 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/multiselect.hbs
+++ b/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}}
-    <span class="required">*</span>
-  {{/if}}
+  {{~#unless this.field.required}} {{i18n "user_fields.optional"}}{{/unless~}}
 </label>
 
 <div class="controls">
diff --git a/app/assets/javascripts/discourse/app/components/user-fields/text.hbs b/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
index 64b5bb1d289..ff5fb9d8759 100644
--- a/app/assets/javascripts/discourse/app/components/user-fields/text.hbs
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss
index 00de9e731b6..fd66c58c627 100644
--- a/app/assets/stylesheets/common/modal/login-modal.scss
+++ b/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%;
+      }
     }
   }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 47432d4a54a..7f6f71b3329 100644
--- a/config/locales/client.en.yml
+++ b/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"
diff --git a/spec/system/create_account_spec.rb b/spec/system/create_account_spec.rb
index 212dfde0770..76a4c815a28 100644
--- a/spec/system/create_account_spec.rb
+++ b/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