DEV: Convert activation modals to new component-based API (#22227)

This PR converts the following modals:
- `activation-edit`
- `activation-resent`
- `not-activated`

to make use of the new component-based API

app/assets/javascripts/discourse/app/components/activation-email-form.hbs

@@ -1,2 +1,6 @@
 <p>{{i18n "login.provide_new_email"}}</p>
-<Input @value={{this.email}} class="activate-new-email" />
+<Input
+  @value={{@email}}
+  {{on "input" this.newEmailChanged}}
+  class="activate-new-email"
+/>

app/assets/javascripts/discourse/app/components/activation-email-form.js

@@ -1,3 +1,9 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
 
-export default Component.extend({});
+export default class ActivationEmailForm extends Component {
+  @action
+  newEmailChanged(value) {
+    this.args.updateNewEmail?.(value);
+  }
+}

app/assets/javascripts/discourse/app/components/modal/activation-edit.hbs

@@ -0,0 +1,21 @@
+<DModal
+  @closeModal={{@closeModal}}
+  @title={{i18n "login.change_email"}}
+  @flash={{this.flash}}
+>
+  <:body>
+    <ActivationEmailForm
+      @email={{@model.newEmail}}
+      @updateNewEmail={{this.updateNewEmail}}
+    />
+  </:body>
+  <:footer>
+    <DButton
+      @action={{this.changeEmail}}
+      @label="login.submit_new_email"
+      @disabled={{this.submitDisabled}}
+      class="btn-primary"
+    />
+    <DButton @action={{@closeModal}} @label="close" />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/activation-edit.js

@@ -0,0 +1,38 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { changeEmail } from "discourse/lib/user-activation";
+import ActivationResent from "./activation-resent";
+
+export default class ActivationEdit extends Component {
+  @service login;
+  @service modal;
+
+  @tracked newEmail = this.args.model.newEmail;
+  @tracked flash;
+
+  get submitDisabled() {
+    return this.newEmail === this.args.model.currentEmail;
+  }
+
+  @action
+  changeEmail() {
+    changeEmail({
+      username: this.login?.loginName,
+      password: this.login?.loginPassword,
+      email: this.args.model.newEmail,
+    })
+      .then(() => {
+        this.modal.show(ActivationResent, {
+          model: { currentEmail: this.args.model.newEmail },
+        });
+      })
+      .catch((e) => (this.flash = e));
+  }
+
+  @action
+  updateNewEmail(e) {
+    this.newEmail = e.target.value;
+  }
+}

app/assets/javascripts/discourse/app/components/modal/activation-resent.hbs

@@ -0,0 +1,9 @@
+<DModal @title={{i18n "log_in"}} @closeModal={{@closeModal}}>
+  <:body>
+    {{html-safe
+      (i18n
+        "login.sent_activation_email_again" currentEmail=@model.currentEmail
+      )
+    }}
+  </:body>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/not-activated.hbs

@@ -0,0 +1,11 @@
+<DModal @closeModal={{@closeModal}} @title={{i18n "log_in"}}>
+  <:body>
+    {{html-safe (i18n "login.not_activated" sentTo=@model.sentTo)}}
+  </:body>
+  <:footer>
+    <ActivationControls
+      @sendActivationEmail={{this.sendActivationEmail}}
+      @editActivationEmail={{this.editActivationEmail}}
+    />
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/not-activated.js

@@ -0,0 +1,29 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { resendActivationEmail } from "discourse/lib/user-activation";
+import ActivationResent from "./activation-resent";
+import ActivationEdit from "./activation-edit";
+
+export default class NotActivated extends Component {
+  @service modal;
+
+  @action
+  sendActivationEmail() {
+    resendActivationEmail(this.username).then(() => {
+      this.modal.show(ActivationResent, {
+        model: { currentEmail: this.args.model.currentEmail },
+      });
+    });
+  }
+
+  @action
+  editActivationEmail() {
+    this.modal.show(ActivationEdit, {
+      model: {
+        currentEmail: this.args.model.currentEmail,
+        newEmail: this.args.model.currentEmail,
+      },
+    });
+  }
+}

app/assets/javascripts/discourse/app/controllers/activation-edit.js

@@ -1,37 +0,0 @@
-import Controller, { inject as controller } from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { changeEmail } from "discourse/lib/user-activation";
-import discourseComputed from "discourse-common/utils/decorators";
-import { flashAjaxError } from "discourse/lib/ajax-error";
-
-export default Controller.extend(ModalFunctionality, {
-  login: controller(),
-
-  currentEmail: null,
-  newEmail: null,
-  password: null,
-
-  @discourseComputed("newEmail", "currentEmail")
-  submitDisabled(newEmail, currentEmail) {
-    return newEmail === currentEmail;
-  },
-
-  actions: {
-    changeEmail() {
-      const login = this.login;
-
-      changeEmail({
-        username: login.get("loginName"),
-        password: login.get("loginPassword"),
-        email: this.newEmail,
-      })
-        .then(() => {
-          const modal = this.showModal("activation-resent", {
-            title: "log_in",
-          });
-          modal.set("currentEmail", this.newEmail);
-        })
-        .catch(flashAjaxError(this));
-    },
-  },
-});

app/assets/javascripts/discourse/app/controllers/not-activated.js

@@ -1,24 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { resendActivationEmail } from "discourse/lib/user-activation";
-
-export default Controller.extend(ModalFunctionality, {
-  actions: {
-    sendActivationEmail() {
-      resendActivationEmail(this.username).then(() => {
-        const modal = this.showModal("activation-resent", { title: "log_in" });
-        modal.set("currentEmail", this.currentEmail);
-      });
-    },
-
-    editActivationEmail() {
-      const modal = this.showModal("activation-edit", {
-        title: "login.change_email",
-      });
-
-      const currentEmail = this.currentEmail;
-      modal.set("currentEmail", currentEmail);
-      modal.set("newEmail", currentEmail);
-    },
-  },
-});

app/assets/javascripts/discourse/app/routes/application.js

@@ -13,8 +13,9 @@ import mobile from "discourse/lib/mobile";
 import { inject as service } from "@ember/service";
 import { setting } from "discourse/lib/computed";
 import showModal from "discourse/lib/show-modal";
-import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
 import { action } from "@ember/object";
+import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
+import NotActivatedModal from "../components/modal/not-activated";
 
 function unlessReadOnly(method, message) {
   return function () {
@@ -154,7 +155,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     },
 
     showNotActivated(props) {
-      showModal("not-activated", { title: "log_in" }).setProperties(props);
+      this.modal.show(NotActivatedModal, { model: props });
     },
 
     showUploadSelector() {

app/assets/javascripts/discourse/app/templates/modal/activation-edit.hbs

@@ -1,13 +0,0 @@
-<DModalBody>
-  <ActivationEmailForm @email={{this.newEmail}} />
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @action={{action "changeEmail"}}
-    @label="login.submit_new_email"
-    @disabled={{this.submitDisabled}}
-    @class="btn-primary"
-  />
-  <DButton @action={{route-action "closeModal"}} @label="close" />
-</div>

app/assets/javascripts/discourse/app/templates/modal/activation-resent.hbs

@@ -1,7 +0,0 @@
-<DModalBody>
-  {{html-safe
-    (i18n "login.sent_activation_email_again" currentEmail=this.currentEmail)
-  }}
-</DModalBody>
-
-<ModalFooterClose @closeModal={{route-action "closeModal"}} />

app/assets/javascripts/discourse/app/templates/modal/not-activated.hbs

@@ -1,10 +0,0 @@
-<DModalBody>
-  {{html-safe (i18n "login.not_activated" sentTo=this.sentTo)}}
-</DModalBody>
-
-<div class="modal-footer">
-  <ActivationControls
-    @sendActivationEmail={{action "sendActivationEmail"}}
-    @editActivationEmail={{action "editActivationEmail"}}
-  />
-</div>