From 49e67d32fb0b9db0163fbe05515444fede4e3bbe Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 29 Feb 2024 12:27:12 +0100
Subject: [PATCH] DEV: Convert second-factor-input to gjs (#25946)

---
 .../modal/login/local-login-form.hbs          |  8 +--
 .../modal/second-factor-add-totp.hbs          | 29 ++++++-----
 .../modal/second-factor-add-totp.js           |  6 ++-
 .../app/components/second-factor-input.gjs    | 50 +++++++++++++++++++
 .../app/components/second-factor-input.hbs    | 15 ------
 .../app/components/second-factor-input.js     | 43 ----------------
 .../app/controllers/second-factor-auth.js     |  5 --
 .../discourse/app/templates/email-login.hbs   |  7 ++-
 .../app/templates/password-reset.hbs          |  9 ++--
 .../app/templates/second-factor-auth.hbs      |  4 +-
 10 files changed, 86 insertions(+), 90 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/second-factor-input.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/second-factor-input.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/second-factor-input.js

diff --git a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs b/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs
index 6d515d2fdf7..c14179d071a 100644
--- a/app/assets/javascripts/discourse/app/components/modal/login/local-login-form.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.hbs b/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.hbs
index e13d19e938a..20564edd1a5 100644
--- a/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.js b/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.js
index 3d86c5c8149..c1a3f196631 100644
--- a/app/assets/javascripts/discourse/app/components/modal/second-factor-add-totp.js
+++ b/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() {
diff --git a/app/assets/javascripts/discourse/app/components/second-factor-input.gjs b/app/assets/javascripts/discourse/app/components/second-factor-input.gjs
new file mode 100644
index 00000000000..4dcd5002972
--- /dev/null
+++ b/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>
+}
diff --git a/app/assets/javascripts/discourse/app/components/second-factor-input.hbs b/app/assets/javascripts/discourse/app/components/second-factor-input.hbs
deleted file mode 100644
index 5fe396418a6..00000000000
--- a/app/assets/javascripts/discourse/app/components/second-factor-input.hbs
+++ /dev/null
@@ -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
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/second-factor-input.js b/app/assets/javascripts/discourse/app/components/second-factor-input.js
deleted file mode 100644
index b9170500f8d..00000000000
--- a/app/assets/javascripts/discourse/app/components/second-factor-input.js
+++ /dev/null
@@ -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);
-    }
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/controllers/second-factor-auth.js b/app/assets/javascripts/discourse/app/controllers/second-factor-auth.js
index 0d69bbfb904..66813005552 100644
--- a/app/assets/javascripts/discourse/app/controllers/second-factor-auth.js
+++ b/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();
diff --git a/app/assets/javascripts/discourse/app/templates/email-login.hbs b/app/assets/javascripts/discourse/app/templates/email-login.hbs
index 8498fba16e4..32da1654654 100644
--- a/app/assets/javascripts/discourse/app/templates/email-login.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/templates/password-reset.hbs b/app/assets/javascripts/discourse/app/templates/password-reset.hbs
index 50c2e334b66..7caca1c3183 100644
--- a/app/assets/javascripts/discourse/app/templates/password-reset.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs b/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs
index bb75baaf22d..3ce37f5a898 100644
--- a/app/assets/javascripts/discourse/app/templates/second-factor-auth.hbs
+++ b/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}}