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

2024-11-15 18:17:55 -03:00 · 2024-11-15 18:17:55 -03:00 · 876591fdab
parent 276bc8a565
commit 876591fdab
9 changed files with 125 additions and 119 deletions
--- a/app/assets/javascripts/discourse/app/components/fullname-input.gjs
+++ 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>
+}
--- 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 (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}}
-          </div>

          {{#if this.userFields}}
            <div class="user-fields">
--- 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")
--- 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;
--- 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")
--- 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"
+              {{#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"
                />
-                  <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}}
--- 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 (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}}
-          </div>

          {{#if this.userFields}}
            <div class="user-fields">
--- 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 {
--- 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 {