FIX: Signup fields tab order and descriptions (#29772)

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>
+}

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
+          {{#if (and this.showFullname (not this.fullnameRequired))}}
-            class={{concat-class
+            <FullnameInput
-              "input-group"
+              @nameValidation={{this.nameValidation}}
-              "create-account__fullname"
+              @nameTitle={{this.nameTitle}}
-              (if this.siteSettings.full_name_required "required")
+              @accountName={{this.accountName}}
-            }}
+              @nameDisabled={{this.nameDisabled}}
-          >
+              @onFocusIn={{this.scrollInputIntoView}}
-            {{#if this.fullnameRequired}}
+              class="input-group create-account__fullname"
-              <TextField
+            />
-                {{on "focusin" this.scrollInputIntoView}}
+          {{/if}}
-                @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 this.userFields}}
             <div class="user-fields">

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 (
+    return this.siteSettings.full_name_required;
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
   }
 
   @discourseComputed("model.authOptions.auth_provider")

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 (
+    return this.siteSettings.full_name_required;
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
   }
 
   @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;

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 (
+    return this.siteSettings.full_name_required;
-      this.siteSettings.full_name_required || this.siteSettings.enable_names
-    );
   }
 
   @discourseComputed("authOptions.auth_provider")

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}}
+              {{#if (and this.showFullname (not this.fullnameRequired))}}
-                <div
+                <FullnameInput
-                  class={{concat-class
+                  @nameValidation={{this.nameValidation}}
-                    "input"
+                  @nameTitle={{this.nameTitle}}
-                    "name-input"
+                  @accountName={{this.accountName}}
-                    "input-group"
+                  @nameDisabled={{this.nameDisabled}}
-                    (if this.siteSettings.full_name_required "name-required")
+                  @onFocusIn={{this.scrollInputIntoView}}
-                  }}
+                  class="input name-input input-group"
-                >
+                />
-                  <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}}
 
               {{#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}}

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
+          {{#if (and this.showFullname (not this.fullnameRequired))}}
-            class={{concat-class
+            <FullnameInput
-              "input-group"
+              @nameValidation={{this.nameValidation}}
-              "create-account__fullname"
+              @nameTitle={{this.nameTitle}}
-              (if this.siteSettings.full_name_required "required")
+              @accountName={{this.accountName}}
-            }}
+              @nameDisabled={{this.nameDisabled}}
-          >
+              @onFocusIn={{this.scrollInputIntoView}}
-            {{#if this.fullnameRequired}}
+              class="input-group create-account__fullname"
-              <TextField
+            />
-                {{on "focusin" this.scrollInputIntoView}}
+          {{/if}}
-                @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 this.userFields}}
             <div class="user-fields">

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 {

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 {