From 876591fdabbf085c5f7937a419f6aa08a2eeb893 Mon Sep 17 00:00:00 2001
From: Jan Cernik <66427541+jancernik@users.noreply.github.com>
Date: Fri, 15 Nov 2024 18:17:55 -0300
Subject: [PATCH] FIX: Signup fields tab order and descriptions (#29772)

---
 .../app/components/fullname-input.gjs         | 33 +++++++++++++
 .../app/components/modal/create-account.hbs   | 48 ++++++++-----------
 .../app/components/modal/create-account.js    |  9 ++--
 .../discourse/app/controllers/invites-show.js | 17 +++++--
 .../discourse/app/controllers/signup.js       |  9 ++--
 .../discourse/app/templates/invites/show.hbs  | 47 +++++++++---------
 .../discourse/app/templates/signup.hbs        | 48 ++++++++-----------
 .../common/base/login-signup-page.scss        | 17 -------
 .../stylesheets/common/modal/login-modal.scss | 16 -------
 9 files changed, 125 insertions(+), 119 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/fullname-input.gjs

diff --git a/app/assets/javascripts/discourse/app/components/fullname-input.gjs b/app/assets/javascripts/discourse/app/components/fullname-input.gjs
new file mode 100644
index 00000000000..471c1e14294
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/fullname-input.gjs
@@ -0,0 +1,33 @@
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import InputTip from "discourse/components/input-tip";
+import TextField from "discourse/components/text-field";
+import valueEntered from "discourse/helpers/value-entered";
+
+export default class SidebarEditNavigationMenuTagsModal extends Component {
+  get showFullname() {
+    return (
+      this.siteSettings.full_name_required || this.siteSettings.enable_names
+    );
+  }
+
+  <template>
+    <div ...attributes>
+      <TextField
+        {{on "focusin" @onFocusIn}}
+        @disabled={{@nameDisabled}}
+        @value={{@accountName}}
+        @id="new-account-name"
+        aria-describedby="fullname-validation fullname-validation-more-info"
+        aria-invalid={{@nameValidation.failed}}
+        class={{valueEntered @accountName}}
+        name="name"
+      />
+      <label class="alt-placeholder" for="new-account-name">
+        {{@nameTitle}}
+      </label>
+
+      <InputTip @validation={{@nameValidation}} id="fullname-validation" />
+    </div>
+  </template>
+}
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 8a9593045bf..1e45eb1bf86 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
@@ -95,6 +95,17 @@
             />
           </div>
 
+          {{#if this.fullnameRequired}}
+            <FullnameInput
+              @nameValidation={{this.nameValidation}}
+              @nameTitle={{this.nameTitle}}
+              @accountName={{this.accountName}}
+              @nameDisabled={{this.nameDisabled}}
+              @onFocusIn={{this.scrollInputIntoView}}
+              class="input-group create-account__fullname required"
+            />
+          {{/if}}
+
           <PluginOutlet
             @name="create-account-before-password"
             @outletArgs={{hash
@@ -200,33 +211,16 @@
             }}
           />
 
-          <div
-            class={{concat-class
-              "input-group"
-              "create-account__fullname"
-              (if this.siteSettings.full_name_required "required")
-            }}
-          >
-            {{#if this.fullnameRequired}}
-              <TextField
-                {{on "focusin" this.scrollInputIntoView}}
-                @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">
-                {{this.nameTitle}}
-              </label>
-
-              <InputTip
-                @validation={{this.nameValidation}}
-                id="fullname-validation"
-              />
-            {{/if}}
-          </div>
+          {{#if (and this.showFullname (not this.fullnameRequired))}}
+            <FullnameInput
+              @nameValidation={{this.nameValidation}}
+              @nameTitle={{this.nameTitle}}
+              @accountName={{this.accountName}}
+              @nameDisabled={{this.nameDisabled}}
+              @onFocusIn={{this.scrollInputIntoView}}
+              class="input-group create-account__fullname"
+            />
+          {{/if}}
 
           {{#if this.userFields}}
             <div class="user-fields">
diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.js b/app/assets/javascripts/discourse/app/components/modal/create-account.js
index 23c2390b49e..5b5dca2cd06 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.js
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.js
@@ -132,11 +132,14 @@ export default class CreateAccount extends Component.extend(
     return authOptions && !canEditName;
   }
 
+  @discourseComputed
+  showFullname() {
+    return this.siteSettings.enable_names;
+  }
+
   @discourseComputed
   fullnameRequired() {
-    return (
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
+    return this.siteSettings.full_name_required;
   }
 
   @discourseComputed("model.authOptions.auth_provider")
diff --git a/app/assets/javascripts/discourse/app/controllers/invites-show.js b/app/assets/javascripts/discourse/app/controllers/invites-show.js
index cff44bfc9a6..58e4144c03b 100644
--- a/app/assets/javascripts/discourse/app/controllers/invites-show.js
+++ b/app/assets/javascripts/discourse/app/controllers/invites-show.js
@@ -155,11 +155,14 @@ export default class InvitesShowController extends Controller.extend(
     );
   }
 
+  @discourseComputed
+  showFullname() {
+    return this.siteSettings.enable_names;
+  }
+
   @discourseComputed
   fullnameRequired() {
-    return (
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
+    return this.siteSettings.full_name_required;
   }
 
   @discourseComputed(
@@ -281,6 +284,14 @@ export default class InvitesShowController extends Controller.extend(
     this.toggleProperty("maskPassword");
   }
 
+  @action
+  scrollInputIntoView(event) {
+    event.target.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+  }
+
   @action
   submit() {
     const userFields = this.userFields;
diff --git a/app/assets/javascripts/discourse/app/controllers/signup.js b/app/assets/javascripts/discourse/app/controllers/signup.js
index ac4b2d40db1..ff3a453b3e4 100644
--- a/app/assets/javascripts/discourse/app/controllers/signup.js
+++ b/app/assets/javascripts/discourse/app/controllers/signup.js
@@ -121,11 +121,14 @@ export default class SignupPageController extends Controller.extend(
     return authOptions && !canEditName;
   }
 
+  @discourseComputed
+  showFullname() {
+    return this.siteSettings.enable_names;
+  }
+
   @discourseComputed
   fullnameRequired() {
-    return (
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
+    return this.siteSettings.full_name_required;
   }
 
   @discourseComputed("authOptions.auth_provider")
diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index 60d2f00c0df..90a056474d1 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -66,6 +66,7 @@
               {{#if this.isInviteLink}}
                 <div class="input email-input input-group">
                   <Input
+                    {{on "focusin" this.scrollInputIntoView}}
                     @type="email"
                     @value={{this.email}}
                     id="new-account-email"
@@ -91,6 +92,7 @@
 
               <div class="input username-input input-group">
                 <Input
+                  {{on "focusin" this.scrollInputIntoView}}
                   @value={{this.accountUsername}}
                   class={{value-entered this.accountUsername}}
                   id="new-account-username"
@@ -107,9 +109,21 @@
                 />
               </div>
 
+              {{#if this.fullnameRequired}}
+                <FullnameInput
+                  @nameValidation={{this.nameValidation}}
+                  @nameTitle={{this.nameTitle}}
+                  @accountName={{this.accountName}}
+                  @nameDisabled={{this.nameDisabled}}
+                  @onFocusIn={{this.scrollInputIntoView}}
+                  class="input name-input input-group name-required"
+                />
+              {{/if}}
+
               {{#unless this.externalAuthsOnly}}
                 <div class="input password-input input-group">
                   <PasswordField
+                    {{on "focusin" this.scrollInputIntoView}}
                     @value={{this.accountPassword}}
                     @capsLockOn={{this.capsLockOn}}
                     type={{if this.maskPassword "password" "text"}}
@@ -143,29 +157,15 @@
                 </div>
               {{/unless}}
 
-              {{#if this.fullnameRequired}}
-                <div
-                  class={{concat-class
-                    "input"
-                    "name-input"
-                    "input-group"
-                    (if this.siteSettings.full_name_required "name-required")
-                  }}
-                >
-                  <Input
-                    @value={{this.accountName}}
-                    class={{value-entered this.accountName}}
-                    id="new-account-name"
-                    name="name"
-                  />
-                  <label class="alt-placeholder" for="new-account-name">
-                    {{i18n "invites.name_label"}}
-                  </label>
-                  <InputTip
-                    @validation={{this.nameValidation}}
-                    id="fullname-validation"
-                  />
-                </div>
+              {{#if (and this.showFullname (not this.fullnameRequired))}}
+                <FullnameInput
+                  @nameValidation={{this.nameValidation}}
+                  @nameTitle={{this.nameTitle}}
+                  @accountName={{this.accountName}}
+                  @nameDisabled={{this.nameDisabled}}
+                  @onFocusIn={{this.scrollInputIntoView}}
+                  class="input name-input input-group"
+                />
               {{/if}}
 
               {{#if this.userFields}}
@@ -173,6 +173,7 @@
                   {{#each this.userFields as |f|}}
                     <div class="input-group">
                       <UserField
+                        {{on "focusin" this.scrollInputIntoView}}
                         @field={{f.field}}
                         @value={{f.value}}
                         class={{value-entered f.value}}
diff --git a/app/assets/javascripts/discourse/app/templates/signup.hbs b/app/assets/javascripts/discourse/app/templates/signup.hbs
index 2bd6d197e13..7700fcb9a48 100644
--- a/app/assets/javascripts/discourse/app/templates/signup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/signup.hbs
@@ -91,6 +91,17 @@
             />
           </div>
 
+          {{#if this.fullnameRequired}}
+            <FullnameInput
+              @nameValidation={{this.nameValidation}}
+              @nameTitle={{this.nameTitle}}
+              @accountName={{this.accountName}}
+              @nameDisabled={{this.nameDisabled}}
+              @onFocusIn={{this.scrollInputIntoView}}
+              class="input-group create-account__fullname required"
+            />
+          {{/if}}
+
           <PluginOutlet
             @name="create-account-before-password"
             @outletArgs={{hash
@@ -196,33 +207,16 @@
             }}
           />
 
-          <div
-            class={{concat-class
-              "input-group"
-              "create-account__fullname"
-              (if this.siteSettings.full_name_required "required")
-            }}
-          >
-            {{#if this.fullnameRequired}}
-              <TextField
-                {{on "focusin" this.scrollInputIntoView}}
-                @disabled={{this.nameDisabled}}
-                @value={{this.accountName}}
-                @id="new-account-name"
-                aria-describedby="fullname-validation fullname-validation-more-info"
-                aria-invalid={{this.nameValidation.failed}}
-                class={{value-entered this.accountName}}
-              />
-              <label class="alt-placeholder" for="new-account-name">
-                {{this.nameTitle}}
-              </label>
-
-              <InputTip
-                @validation={{this.nameValidation}}
-                id="fullname-validation"
-              />
-            {{/if}}
-          </div>
+          {{#if (and this.showFullname (not this.fullnameRequired))}}
+            <FullnameInput
+              @nameValidation={{this.nameValidation}}
+              @nameTitle={{this.nameTitle}}
+              @accountName={{this.accountName}}
+              @nameDisabled={{this.nameDisabled}}
+              @onFocusIn={{this.scrollInputIntoView}}
+              class="input-group create-account__fullname"
+            />
+          {{/if}}
 
           {{#if this.userFields}}
             <div class="user-fields">
diff --git a/app/assets/stylesheets/common/base/login-signup-page.scss b/app/assets/stylesheets/common/base/login-signup-page.scss
index e8e38ebf406..177f5dcaa10 100644
--- a/app/assets/stylesheets/common/base/login-signup-page.scss
+++ b/app/assets/stylesheets/common/base/login-signup-page.scss
@@ -193,14 +193,6 @@ body.signup-page {
     display: flex;
     flex-direction: column;
 
-    .input-group {
-      &.create-account-email,
-      &.create-account__username,
-      &.create-account__fullname.required {
-        order: -1;
-      }
-    }
-
     .create-account-associate-link {
       order: 1;
     }
@@ -244,15 +236,6 @@ body.signup-page {
     font-size: var(--font-down-1);
     color: var(--primary-medium);
     overflow-wrap: anywhere;
-    transition: opacity 0.2s ease;
-    opacity: 0;
-  }
-
-  .input-group input:focus {
-    & ~ .more-info,
-    & ~ .instructions {
-      opacity: 1;
-    }
   }
 
   .caps-lock-warning {
diff --git a/app/assets/stylesheets/common/modal/login-modal.scss b/app/assets/stylesheets/common/modal/login-modal.scss
index afa35f3272e..6351dc98bdc 100644
--- a/app/assets/stylesheets/common/modal/login-modal.scss
+++ b/app/assets/stylesheets/common/modal/login-modal.scss
@@ -68,13 +68,6 @@
     display: flex;
     flex-direction: column;
 
-    .input-group {
-      &.create-account-email,
-      &.create-account__username,
-      &.create-account__fullname.required {
-        order: -1;
-      }
-    }
     .create-account-associate-link {
       order: 1;
     }
@@ -98,15 +91,6 @@
     font-size: var(--font-down-1);
     color: var(--primary-medium);
     overflow-wrap: anywhere;
-    transition: opacity 0.2s ease;
-    opacity: 0;
-  }
-
-  .input-group input:focus {
-    & ~ .more-info,
-    & ~ .instructions {
-      opacity: 1;
-    }
   }
 
   .caps-lock-warning {