From 8f21d2cf4031f2b7b8a4a759507d34c0ff11800e Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 4 Jul 2023 12:13:54 -0500
Subject: [PATCH] DEV: Convert second-factor-edit modals to component-based API
 (#22367)

This PR converts the following modals:
- `second-factor-edit-security-key`
- `second-factor-edit`

to make use of the new component-based API
---
 .../modal/second-factor-edit-security-key.hbs | 26 ++++++++++++
 .../modal/second-factor-edit-security-key.js  | 31 ++++++++++++++
 .../components/modal/second-factor-edit.hbs   | 24 +++++++++++
 .../components/modal/second-factor-edit.js    | 33 +++++++++++++++
 .../controllers/preferences/second-factor.js  | 40 +++++++++----------
 .../second-factor-edit-security-key.js        | 24 -----------
 .../app/controllers/second-factor-edit.js     | 30 --------------
 .../modal/second-factor-edit-security-key.hbs | 18 ---------
 .../templates/modal/second-factor-edit.hbs    | 16 --------
 9 files changed, 134 insertions(+), 108 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.js
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/second-factor-edit.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/second-factor-edit.js
 delete mode 100644 app/assets/javascripts/discourse/app/controllers/second-factor-edit-security-key.js
 delete mode 100644 app/assets/javascripts/discourse/app/controllers/second-factor-edit.js
 delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs

diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.hbs b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.hbs
new file mode 100644
index 00000000000..09bef461f1c
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.hbs
@@ -0,0 +1,26 @@
+<DModal
+  @title={{i18n "user.second_factor.security_key.edit"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <form class="form-horizontal">
+      <div class="input-group">
+        <label for="security-key-name">{{i18n
+            "user.second_factor.security_key.edit_description"
+          }}</label>
+        <Input
+          name="security-key-name"
+          @type="text"
+          @value={{@model.securityKey.name}}
+        />
+      </div>
+    </form>
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.editSecurityKey}}
+      class="btn-primary"
+      @label="user.second_factor.security_key.save"
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.js b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.js
new file mode 100644
index 00000000000..441b72ed4a4
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit-security-key.js
@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class SecondFactorEditSecurityKey extends Component {
+  @tracked loading = false;
+
+  @action
+  editSecurityKey() {
+    this.loading = true;
+    this.args.model.user
+      .updateSecurityKey(
+        this.args.model.securityKey.id,
+        this.args.model.securityKey.name,
+        false
+      )
+      .then((response) => {
+        if (response.error) {
+          return;
+        }
+        this.args.model.markDirty();
+      })
+      .catch((error) => {
+        this.args.model.onError(error);
+      })
+      .finally(() => {
+        this.loading = false;
+        this.args.closeModal();
+      });
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.hbs b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.hbs
new file mode 100644
index 00000000000..c3d9f5ad6f1
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.hbs
@@ -0,0 +1,24 @@
+<DModal
+  @title={{i18n "user.second_factor.edit_title"}}
+  @closeModal={{@closeModal}}
+>
+  <:body>
+    <div class="input-group">
+      <label for="authenticator-name">{{i18n
+          "user.second_factor.edit_description"
+        }}</label>
+      <Input
+        name="authenticator-name"
+        @type="text"
+        @value={{@model.secondFactor.name}}
+      />
+    </div>
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.editSecondFactor}}
+      class="btn-primary"
+      @label="user.second_factor.save"
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.js b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.js
new file mode 100644
index 00000000000..be3ec5c5cce
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/second-factor-edit.js
@@ -0,0 +1,33 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class SecondFactorEdit extends Component {
+  @tracked loading = false;
+
+  @action
+  editSecondFactor() {
+    this.loading = true;
+    this.args.model.user
+      .updateSecondFactor(
+        this.args.model.secondFactor.id,
+        this.args.model.secondFactor.name,
+        false,
+        this.args.model.secondFactor.method
+      )
+      .then((response) => {
+        if (response.error) {
+          return;
+        }
+        this.args.model.markDirty();
+      })
+      .catch((error) => {
+        this.args.closeModal();
+        this.args.model.onError(error);
+      })
+      .finally(() => {
+        this.loading = false;
+        this.args.closeModal();
+      });
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/preferences/second-factor.js b/app/assets/javascripts/discourse/app/controllers/preferences/second-factor.js
index e6907e57941..cd441155297 100644
--- a/app/assets/javascripts/discourse/app/controllers/preferences/second-factor.js
+++ b/app/assets/javascripts/discourse/app/controllers/preferences/second-factor.js
@@ -12,6 +12,8 @@ import showModal from "discourse/lib/show-modal";
 import { inject as service } from "@ember/service";
 import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase";
 import SecondFactorAddSecurityKey from "discourse/components/modal/second-factor-add-security-key";
+import SecondFactorEditSecurityKey from "discourse/components/modal/second-factor-edit-security-key";
+import SecondFactorEdit from "discourse/components/modal/second-factor-edit";
 
 export default Controller.extend(CanCheckEmails, {
   dialog: service(),
@@ -284,30 +286,28 @@ export default Controller.extend(CanCheckEmails, {
       this.loadSecondFactors();
     },
 
-    editSecurityKey(security_key) {
-      const controller = showModal("second-factor-edit-security-key", {
-        model: security_key,
-        title: "user.second_factor.security_key.edit",
-      });
-      controller.setProperties({
-        user: this.model,
-        onClose: () => this.loadSecondFactors(),
-        markDirty: () => this.markDirty(),
-        onError: (e) => this.handleError(e),
+    async editSecurityKey(security_key) {
+      await this.modal.show(SecondFactorEditSecurityKey, {
+        model: {
+          securityKey: security_key,
+          user: this.model,
+          markDirty: () => this.markDirty(),
+          onError: (e) => this.handleError(e),
+        },
       });
+      this.loadSecondFactors();
     },
 
-    editSecondFactor(second_factor) {
-      const controller = showModal("second-factor-edit", {
-        model: second_factor,
-        title: "user.second_factor.edit_title",
-      });
-      controller.setProperties({
-        user: this.model,
-        onClose: () => this.loadSecondFactors(),
-        markDirty: () => this.markDirty(),
-        onError: (e) => this.handleError(e),
+    async editSecondFactor(second_factor) {
+      await this.modal.show(SecondFactorEdit, {
+        model: {
+          secondFactor: second_factor,
+          user: this.model,
+          markDirty: () => this.markDirty(),
+          onError: (e) => this.handleError(e),
+        },
       });
+      this.loadSecondFactors();
     },
 
     editSecondFactorBackup() {
diff --git a/app/assets/javascripts/discourse/app/controllers/second-factor-edit-security-key.js b/app/assets/javascripts/discourse/app/controllers/second-factor-edit-security-key.js
deleted file mode 100644
index 5660441c412..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/second-factor-edit-security-key.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default Controller.extend(ModalFunctionality, {
-  actions: {
-    editSecurityKey() {
-      this.user
-        .updateSecurityKey(this.model.id, this.model.name, false)
-        .then((response) => {
-          if (response.error) {
-            return;
-          }
-          this.markDirty();
-        })
-        .catch((error) => {
-          this.onError(error);
-        })
-        .finally(() => {
-          this.set("loading", false);
-          this.send("closeModal");
-        });
-    },
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/controllers/second-factor-edit.js b/app/assets/javascripts/discourse/app/controllers/second-factor-edit.js
deleted file mode 100644
index 88eaedd6459..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/second-factor-edit.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default Controller.extend(ModalFunctionality, {
-  actions: {
-    editSecondFactor() {
-      this.user
-        .updateSecondFactor(
-          this.model.id,
-          this.model.name,
-          false,
-          this.model.method
-        )
-        .then((response) => {
-          if (response.error) {
-            return;
-          }
-          this.markDirty();
-        })
-        .catch((error) => {
-          this.send("closeModal");
-          this.onError(error);
-        })
-        .finally(() => {
-          this.set("loading", false);
-          this.send("closeModal");
-        });
-    },
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
deleted file mode 100644
index 0dd55115418..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-<DModalBody>
-  <form class="form-horizontal">
-    <div class="input-group">
-      <label for="security-key-name">{{i18n
-          "user.second_factor.security_key.edit_description"
-        }}</label>
-      <Input name="security-key-name" @type="text" @value={{this.model.name}} />
-    </div>
-  </form>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "editSecurityKey"}}
-    @class="btn-primary"
-    @label="user.second_factor.security_key.save"
-  />
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
deleted file mode 100644
index 1b53501d6e2..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<DModalBody>
-  <div class="input-group">
-    <label for="authenticator-name">{{i18n
-        "user.second_factor.edit_description"
-      }}</label>
-    <Input name="authenticator-name" @type="text" @value={{this.model.name}} />
-  </div>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "editSecondFactor"}}
-    @class="btn-primary"
-    @label="user.second_factor.save"
-  />
-</div>
\ No newline at end of file