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

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>

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();
+      });
+  }
+}

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>

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();
+      });
+  }
+}

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) {
+    async editSecurityKey(security_key) {
-      const controller = showModal("second-factor-edit-security-key", {
+      await this.modal.show(SecondFactorEditSecurityKey, {
-        model: security_key,
+        model: {
-        title: "user.second_factor.security_key.edit",
+          securityKey: security_key,
-      });
-      controller.setProperties({
           user: this.model,
-        onClose: () => this.loadSecondFactors(),
           markDirty: () => this.markDirty(),
           onError: (e) => this.handleError(e),
+        },
       });
+      this.loadSecondFactors();
     },
 
-    editSecondFactor(second_factor) {
+    async editSecondFactor(second_factor) {
-      const controller = showModal("second-factor-edit", {
+      await this.modal.show(SecondFactorEdit, {
-        model: second_factor,
+        model: {
-        title: "user.second_factor.edit_title",
+          secondFactor: second_factor,
-      });
-      controller.setProperties({
           user: this.model,
-        onClose: () => this.loadSecondFactors(),
           markDirty: () => this.markDirty(),
           onError: (e) => this.handleError(e),
+        },
       });
+      this.loadSecondFactors();
     },
 
     editSecondFactorBackup() {

app/assets/javascripts/discourse/app/controllers/second-factor-edit-security-key.js

@@ -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");
-        });
-    },
-  },
-});

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

@@ -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");
-        });
-    },
-  },
-});

app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs

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

app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs

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