DEV: Convert second-factor-input to gjs (#25946)

app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs

@@ -87,11 +87,11 @@
       />
     {{else}}
       <SecondFactorInput
-        @value={{@secondFactorToken}}
-        @inputId="login-second-factor"
-        @secondFactorMethod={{@secondFactorMethod}}
-        @backupEnabled={{@backupEnabled}}
         {{on "keydown" this.loginOnEnter}}
+        {{on "input" (with-event-value (fn (mut @secondFactorToken)))}}
+        @secondFactorMethod={{@secondFactorMethod}}
+        value={{@secondFactorToken}}
+        id="login-second-factor"
       />
     {{/if}}
   </SecondFactorForm>

app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.hbs

@@ -45,27 +45,26 @@
             "user.second_factor.name"
           }}</label>
         <div class="controls">
-          <SecondFactorInput
+          <input
+            {{on "input" (with-event-value (fn (mut this.secondFactorName)))}}
+            value={{this.secondFactorName}}
+            type="text"
+            placeholder={{i18n "user.second_factor.totp.default_name"}}
             maxlength={{this.maxSecondFactorNameLength}}
-            @value={{this.secondFactorName}}
-            @inputId="second-factor-name"
-            @placeholder={{i18n "user.second_factor.totp.default_name"}}
+            id="second-factor-name"
           />
         </div>
 
-        <label class="control-label input-prepend">{{i18n
-            "user.second_factor.label"
-          }}</label>
+        <label class="control-label input-prepend">
+          {{i18n "user.second_factor.label"}}
+        </label>
         <div class="controls">
-          <TextField
-            class="second-factor-token-input"
-            maxlength={{6}}
-            @value={{this.secondFactorToken}}
-            @inputId="second-factor-token"
+          <SecondFactorInput
+            {{on "input" (with-event-value (fn (mut this.secondFactorToken)))}}
+            @secondFactorMethod={{this.totpType}}
+            value={{this.secondFactorToken}}
             placeholder="123456"
-            autocorrect="off"
-            autocapitalize="off"
-            autofocus="autofocus"
+            id="second-factor-token"
           />
         </div>
       </div>

app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.js

@@ -1,7 +1,10 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import { MAX_SECOND_FACTOR_NAME_LENGTH } from "discourse/models/user";
+import {
+  MAX_SECOND_FACTOR_NAME_LENGTH,
+  SECOND_FACTOR_METHODS,
+} from "discourse/models/user";
 import I18n from "discourse-i18n";
 
 export default class SecondFactorAddTotp extends Component {
@@ -13,6 +16,7 @@ export default class SecondFactorAddTotp extends Component {
   @tracked secondFactorToken;
 
   maxSecondFactorNameLength = MAX_SECOND_FACTOR_NAME_LENGTH;
+  totpType = SECOND_FACTOR_METHODS.TOTP;
 
   @action
   totpRequested() {

app/assets/javascripts/discourse/app/components/second-factor-input.gjs

@@ -0,0 +1,50 @@
+import Component from "@glimmer/component";
+import { SECOND_FACTOR_METHODS } from "discourse/models/user";
+
+export default class SecondFactorInput extends Component {
+  get isTotp() {
+    return this.args.secondFactorMethod === SECOND_FACTOR_METHODS.TOTP;
+  }
+
+  get isBackupCode() {
+    return this.args.secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE;
+  }
+
+  get type() {
+    if (this.isTotp) {
+      return "tel";
+    } else if (this.isBackupCode) {
+      return "text";
+    }
+  }
+
+  get pattern() {
+    if (this.isTotp) {
+      return "[0-9]{6}";
+    } else if (this.isBackupCode) {
+      return "[a-z0-9]{16}";
+    }
+  }
+
+  get maxlength() {
+    if (this.isTotp) {
+      return "6";
+    } else if (this.isBackupCode) {
+      return "32";
+    }
+  }
+
+  <template>
+    <input
+      type={{this.type}}
+      pattern={{this.pattern}}
+      maxlength={{this.maxlength}}
+      autocomplete="one-time-code"
+      autocapitalize="off"
+      autocorrect="off"
+      autofocus="autofocus"
+      class="second-factor-token-input"
+      ...attributes
+    />
+  </template>
+}

app/assets/javascripts/discourse/app/components/second-factor-input.hbs

@@ -1,15 +0,0 @@
-<TextField
-  @value={{this.value}}
-  @type={{this.type}}
-  @input={{action "onInput"}}
-  @placeholder={{this.placeholder}}
-  @autocomplete="one-time-code"
-  pattern={{this.pattern}}
-  maxlength={{this.maxlength}}
-  class="second-factor-token-input"
-  id={{this.inputId}}
-  autocapitalize="off"
-  autocorrect="off"
-  autofocus="autofocus"
-  ...attributes
-/>

app/assets/javascripts/discourse/app/components/second-factor-input.js

@@ -1,43 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { SECOND_FACTOR_METHODS } from "discourse/models/user";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
-  @discourseComputed("secondFactorMethod")
-  type(secondFactorMethod) {
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.TOTP) {
-      return "tel";
-    }
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE) {
-      return "text";
-    }
-  },
-
-  @discourseComputed("secondFactorMethod")
-  pattern(secondFactorMethod) {
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.TOTP) {
-      return "[0-9]{6}";
-    }
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE) {
-      return "[a-z0-9]{16}";
-    }
-  },
-
-  @discourseComputed("secondFactorMethod")
-  maxlength(secondFactorMethod) {
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.TOTP) {
-      return "6";
-    }
-    if (secondFactorMethod === SECOND_FACTOR_METHODS.BACKUP_CODE) {
-      return "32";
-    }
-  },
-
-  @action
-  onInput() {
-    if (this.onTokenInput) {
-      this.onTokenInput(...arguments);
-    }
-  },
-});

app/assets/javascripts/discourse/app/controllers/second-factor-auth.js

@@ -209,11 +209,6 @@ export default Controller.extend({
       });
   },
 
-  @action
-  onTokenInput(event) {
-    this.set("secondFactorToken", event.target.value);
-  },
-
   @action
   useAnotherMethod(newMethod, event) {
     event?.preventDefault();

app/assets/javascripts/discourse/app/templates/email-login.hbs

@@ -32,9 +32,12 @@
                 @isLogin={{true}}
               >
                 <SecondFactorInput
-                  @value={{this.secondFactorToken}}
+                  {{on
+                    "input"
+                    (with-event-value (fn (mut this.secondFactorToken)))
+                  }}
                   @secondFactorMethod={{this.secondFactorMethod}}
-                  @backupEnabled={{this.backupEnabled}}
+                  value={{this.secondFactorToken}}
                 />
               </SecondFactorForm>
             {{/if}}

app/assets/javascripts/discourse/app/templates/password-reset.hbs

@@ -43,10 +43,13 @@
               @isLogin={{false}}
             >
               <SecondFactorInput
-                @value={{this.secondFactorToken}}
-                @inputId="second-factor"
+                {{on
+                  "input"
+                  (with-event-value (fn (mut this.secondFactorToken)))
+                }}
                 @secondFactorMethod={{this.secondFactorMethod}}
-                @backupEnabled={{this.backupEnabled}}
+                value={{this.secondFactorToken}}
+                id="second-factor"
               />
             </SecondFactorForm>
           {{/if}}

app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs

@@ -20,9 +20,9 @@
   {{else if (or this.showTotpForm this.showBackupCodesForm)}}
     <form class={{this.inputFormClass}}>
       <SecondFactorInput
-        @value={{this.secondFactorToken}}
+        {{on "input" (with-event-value (fn (mut this.secondFactorToken)))}}
         @secondFactorMethod={{this.shownSecondFactorMethod}}
-        @onTokenInput={{action "onTokenInput"}}
+        value={{this.secondFactorToken}}
       />
       <DButton
         @action={{this.authenticateToken}}