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

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 &&

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

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 &&

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(

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) => {

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"

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"