From 084ed7a457004be524159a89b1ad37c3b5ac3a54 Mon Sep 17 00:00:00 2001
From: Kelv <kelv@discourse.org>
Date: Fri, 24 Jan 2025 13:57:16 +0800
Subject: [PATCH] DEV: refactor components dependent on UsernameValidation to
 use related tracked properties and native inputs (#30946)

This will update properties that are used by the UsernameValidation
mixin to autotracking and also updates the use of Input component in
these templates to native inputs. This will help the refactor of the
mixin to a helper class that uses the modern Ember reactivity system.
---
 .../app/components/modal/create-account.hbs   | 14 ++++++----
 .../app/components/modal/create-account.js    | 28 +++++++++++--------
 .../discourse/app/controllers/invites-show.js | 15 ++++++----
 .../discourse/app/controllers/signup.js       | 15 +++++++---
 .../app/mixins/username-validation.js         |  2 +-
 .../discourse/app/routes/invites-show.js      |  1 +
 .../discourse/app/templates/invites/show.hbs  |  6 ++--
 .../discourse/app/templates/signup.hbs        |  6 ++--
 8 files changed, 55 insertions(+), 32 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 4d52dfeea30..6f9c782195b 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
@@ -70,9 +70,11 @@
           </div>
 
           <div class="input-group create-account__username">
-            <Input
+            <input
               {{on "focusin" this.scrollInputIntoView}}
-              @value={{this.model.accountUsername}}
+              {{on "input" this.setAccountUsername}}
+              type="text"
+              value={{this.accountUsername}}
               disabled={{this.usernameDisabled}}
               maxlength={{this.maxUsernameLength}}
               aria-describedby="username-validation username-validation-more-info"
@@ -80,7 +82,7 @@
               autocomplete="off"
               name="username"
               id="new-account-username"
-              class={{value-entered this.model.accountUsername}}
+              class={{value-entered this.accountUsername}}
             />
             <label class="alt-placeholder" for="new-account-username">
               {{i18n "user.username.title"}}
@@ -114,7 +116,7 @@
             @name="create-account-before-password"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
               authOptions=this.model.authOptions
@@ -206,7 +208,7 @@
             @name="create-account-after-password"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
             }}
@@ -243,7 +245,7 @@
             @name="create-account-after-user-fields"
             @outletArgs={{hash
               accountName=this.model.accountName
-              accountUsername=this.model.accountUsername
+              accountUsername=this.accountUsername
               accountPassword=this.accountPassword
               userFields=this.userFields
             }}
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 effbea9e405..698a12716d5 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.js
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import { A } from "@ember/array";
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
@@ -31,13 +32,14 @@ export default class CreateAccount extends Component.extend(
   @service siteSettings;
   @service login;
 
+  @tracked isDeveloper = false;
+  @tracked accountUsername = this.model.accountUsername;
   accountChallenge = 0;
   accountHoneypot = 0;
   formSubmitted = false;
   rejectedEmails = A();
   prefilledUsername = null;
   userFields = null;
-  isDeveloper = false;
   maskPassword = true;
   passwordValidationVisible = false;
   emailValidationVisible = false;
@@ -46,13 +48,11 @@ export default class CreateAccount extends Component.extend(
   @notEmpty("model.authOptions") hasAuthOptions;
   @setting("enable_local_logins") canCreateLocal;
   @setting("require_invite_code") requireInviteCode;
-
+  // For NameValidation mixin
+  @alias("model.accountName") accountName;
   // For UsernameValidation mixin
   @alias("model.authOptions") authOptions;
   @alias("model.accountEmail") accountEmail;
-  @alias("model.accountUsername") accountUsername;
-  // For NameValidation mixin
-  @alias("model.accountName") accountName;
 
   init() {
     super.init(...arguments);
@@ -70,6 +70,11 @@ export default class CreateAccount extends Component.extend(
     }
   }
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   get nameTitle() {
     return this.nameValidationHelper.nameTitle;
   }
@@ -349,15 +354,14 @@ export default class CreateAccount extends Component.extend(
     if (this.prefilledUsername) {
       // If username field has been filled automatically, and email field just changed,
       // then remove the username.
-      if (this.model.accountUsername === this.prefilledUsername) {
-        this.set("model.accountUsername", "");
+      if (this.accountUsername === this.prefilledUsername) {
+        this.accountUsername = "";
       }
       this.set("prefilledUsername", null);
     }
     if (
       this.get("emailValidation.ok") &&
-      (isEmpty(this.model.accountUsername) ||
-        this.get("model.authOptions.email"))
+      (isEmpty(this.accountUsername) || this.get("model.authOptions.email"))
     ) {
       // If email is valid and username has not been entered yet,
       // or email and username were filled automatically by 3rd party auth,
@@ -416,7 +420,7 @@ export default class CreateAccount extends Component.extend(
       accountName: this.model.accountName,
       accountEmail: this.model.accountEmail,
       accountPassword: this.accountPassword,
-      accountUsername: this.model.accountUsername,
+      accountUsername: this.accountUsername,
       accountChallenge: this.accountChallenge,
       inviteCode: this.inviteCode,
       accountPasswordConfirm: this.accountHoneypot,
@@ -443,7 +447,7 @@ export default class CreateAccount extends Component.extend(
           return;
         }
 
-        this.set("isDeveloper", false);
+        this.isDeveloper = false;
         if (result.success) {
           // invalidate honeypot
           this._challengeExpiry = 1;
@@ -463,7 +467,7 @@ export default class CreateAccount extends Component.extend(
         } else {
           this.set("flash", result.message || i18n("create_account.failed"));
           if (result.is_developer) {
-            this.set("isDeveloper", true);
+            this.isDeveloper = true;
           }
           if (
             result.errors &&
diff --git a/app/assets/javascripts/discourse/app/controllers/invites-show.js b/app/assets/javascripts/discourse/app/controllers/invites-show.js
index 7fecf0a8a99..73a00c0f63c 100644
--- a/app/assets/javascripts/discourse/app/controllers/invites-show.js
+++ b/app/assets/javascripts/discourse/app/controllers/invites-show.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
 import { dependentKeyCompat } from "@ember/object/compat";
@@ -21,9 +22,12 @@ export default class InvitesShowController extends Controller.extend(
   UsernameValidation,
   UserFieldsValidation
 ) {
+  @tracked accountUsername;
+  @tracked isDeveloper;
   queryParams = ["t"];
   nameValidationHelper = new NameValidationHelper(this);
-
+  successMessage = null;
+  @readOnly("model.is_invite_link") isInviteLink;
   @readOnly("model.invited_by") invitedBy;
   @alias("model.email") email;
   @alias("email") accountEmail;
@@ -34,17 +38,18 @@ export default class InvitesShowController extends Controller.extend(
   @alias("model.hidden_email") hiddenEmail;
   @alias("model.email_verified_by_link") emailVerifiedByLink;
   @alias("model.different_external_email") differentExternalEmail;
-  @alias("model.username") accountUsername;
   @not("externalAuthsOnly") passwordRequired;
-  @readOnly("model.is_invite_link") isInviteLink;
-
-  successMessage = null;
   errorMessage = null;
   userFields = null;
   authOptions = null;
   rejectedEmails = [];
   maskPassword = true;
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   get nameTitle() {
     return this.nameValidationHelper.nameTitle;
   }
diff --git a/app/assets/javascripts/discourse/app/controllers/signup.js b/app/assets/javascripts/discourse/app/controllers/signup.js
index 42e37b37563..6a98f5f1c6f 100644
--- a/app/assets/javascripts/discourse/app/controllers/signup.js
+++ b/app/assets/javascripts/discourse/app/controllers/signup.js
@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import { A } from "@ember/array";
 import Controller from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
@@ -31,13 +32,14 @@ export default class SignupPageController extends Controller.extend(
   @service siteSettings;
   @service login;
 
+  @tracked accountUsername;
+  @tracked isDeveloper = false;
   accountChallenge = 0;
   accountHoneypot = 0;
   formSubmitted = false;
   rejectedEmails = A();
   prefilledUsername = null;
   userFields = null;
-  isDeveloper = false;
   maskPassword = true;
   passwordValidationVisible = false;
   emailValidationVisible = false;
@@ -256,6 +258,11 @@ export default class SignupPageController extends Controller.extend(
     });
   }
 
+  @action
+  setAccountUsername(event) {
+    this.accountUsername = event.target.value;
+  }
+
   @action
   togglePasswordValidation() {
     if (this.passwordValidation.reason) {
@@ -338,7 +345,7 @@ export default class SignupPageController extends Controller.extend(
       // If username field has been filled automatically, and email field just changed,
       // then remove the username.
       if (this.accountUsername === this.prefilledUsername) {
-        this.set("accountUsername", "");
+        this.accountUsername = "";
       }
       this.set("prefilledUsername", null);
     }
@@ -438,7 +445,7 @@ export default class SignupPageController extends Controller.extend(
           return;
         }
 
-        this.set("isDeveloper", false);
+        this.isDeveloper = false;
         if (result.success) {
           // invalidate honeypot
           this._challengeExpiry = 1;
@@ -458,7 +465,7 @@ export default class SignupPageController extends Controller.extend(
         } else {
           this.set("flash", result.message || i18n("create_account.failed"));
           if (result.is_developer) {
-            this.set("isDeveloper", true);
+            this.isDeveloper = true;
           }
           if (
             result.errors &&
diff --git a/app/assets/javascripts/discourse/app/mixins/username-validation.js b/app/assets/javascripts/discourse/app/mixins/username-validation.js
index ed2a87e44be..21d12770d7c 100644
--- a/app/assets/javascripts/discourse/app/mixins/username-validation.js
+++ b/app/assets/javascripts/discourse/app/mixins/username-validation.js
@@ -103,7 +103,7 @@ export default Mixin.create({
     }
 
     this.set("checkedUsername", this.accountUsername);
-    this.set("isDeveloper", !!result.is_developer);
+    this.isDeveloper = !!result.is_developer;
 
     if (result.available) {
       this.set(
diff --git a/app/assets/javascripts/discourse/app/routes/invites-show.js b/app/assets/javascripts/discourse/app/routes/invites-show.js
index 8743e8042e0..398195202d7 100644
--- a/app/assets/javascripts/discourse/app/routes/invites-show.js
+++ b/app/assets/javascripts/discourse/app/routes/invites-show.js
@@ -46,6 +46,7 @@ export default class InvitesShow extends DiscourseRoute {
 
   setupController(controller, model) {
     super.setupController(...arguments);
+    controller.accountUsername = model.username;
 
     if (model.user_fields) {
       controller.userFields.forEach((userField) => {
diff --git a/app/assets/javascripts/discourse/app/templates/invites/show.hbs b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
index 49010cc7658..205c931f714 100644
--- a/app/assets/javascripts/discourse/app/templates/invites/show.hbs
+++ b/app/assets/javascripts/discourse/app/templates/invites/show.hbs
@@ -93,9 +93,11 @@
               {{/if}}
 
               <div class="input username-input input-group">
-                <Input
+                <input
                   {{on "focusin" this.scrollInputIntoView}}
-                  @value={{this.accountUsername}}
+                  {{on "input" this.setAccountUsername}}
+                  type="text"
+                  value={{this.accountUsername}}
                   class={{value-entered this.accountUsername}}
                   id="new-account-username"
                   name="username"
diff --git a/app/assets/javascripts/discourse/app/templates/signup.hbs b/app/assets/javascripts/discourse/app/templates/signup.hbs
index e68ddd160b7..ec54782d593 100644
--- a/app/assets/javascripts/discourse/app/templates/signup.hbs
+++ b/app/assets/javascripts/discourse/app/templates/signup.hbs
@@ -66,9 +66,11 @@
           </div>
 
           <div class="input-group create-account__username">
-            <Input
+            <input
               {{on "focusin" this.scrollInputIntoView}}
-              @value={{this.accountUsername}}
+              {{on "input" this.setAccountUsername}}
+              type="text"
+              value={{this.accountUsername}}
               disabled={{this.usernameDisabled}}
               maxlength={{this.maxUsernameLength}}
               aria-describedby="username-validation username-validation-more-info"