DEV: Migrate forgot-password to the new modal api (#23041)

app/assets/javascripts/discourse/app/components/modal/forgot-password.hbs

@@ -0,0 +1,66 @@
+<DModal
+  @title={{i18n "forgot_password.title"}}
+  @closeModal={{@closeModal}}
+  @flash={{this.flash}}
+  @flashType="error"
+  class="forgot-password-modal"
+>
+  <:body>
+    {{#if this.offerHelp}}
+      {{html-safe this.offerHelp}}
+    {{else if this.siteSettings.hide_email_address_taken}}
+      <label for="username-or-email">
+        {{i18n "forgot_password.invite_no_username"}}
+      </label>
+      <input
+        {{on "input" this.updateEmailOrUsername}}
+        value={{this.emailOrUsername}}
+        placeholder={{i18n "email"}}
+        type="text"
+        id="username-or-email"
+        autocorrect="off"
+        autocapitalize="off"
+      />
+    {{else}}
+      <label for="username-or-email">
+        {{i18n "forgot_password.invite"}}
+      </label>
+      <input
+        {{on "input" this.updateEmailOrUsername}}
+        value={{this.emailOrUsername}}
+        placeholder={{i18n "login.email_placeholder"}}
+        type="text"
+        id="username-or-email"
+        autocorrect="off"
+        autocapitalize="off"
+      />
+    {{/if}}
+  </:body>
+
+  <:footer>
+    {{#if this.offerHelp}}
+      <DButton
+        @action={{@closeModal}}
+        @label="forgot_password.button_ok"
+        type="submit"
+        class="btn-large btn-primary"
+      />
+      {{#unless this.helpSeen}}
+        <DButton
+          @action={{this.help}}
+          @label="forgot_password.button_help"
+          @icon="question-circle"
+          class="btn-large"
+        />
+      {{/unless}}
+    {{else}}
+      <DButton
+        @action={{this.resetPassword}}
+        @disabled={{this.submitDisabled}}
+        @label="forgot_password.reset"
+        type="submit"
+        class="btn-primary forgot-password-reset"
+      />
+    {{/if}}
+  </:footer>
+</DModal>

app/assets/javascripts/discourse/app/components/modal/forgot-password.js

@@ -0,0 +1,90 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import I18n from "I18n";
+import { ajax } from "discourse/lib/ajax";
+import cookie from "discourse/lib/cookie";
+import { escapeExpression } from "discourse/lib/utilities";
+import { extractError } from "discourse/lib/ajax-error";
+import getURL from "discourse-common/lib/get-url";
+import { isEmpty } from "@ember/utils";
+import { htmlSafe } from "@ember/template";
+
+export default class ForgotPassword extends Component {
+  @service siteSettings;
+
+  @tracked emailOrUsername = cookie("email") || this.args.model.emailOrUsername;
+  @tracked disabled = false;
+  @tracked helpSeen = false;
+  @tracked offerHelp;
+  @tracked flash;
+
+  get submitDisabled() {
+    if (this.disabled) {
+      return true;
+    } else if (this.siteSettings.hide_email_address_taken) {
+      return !(this.emailOrUsername || "").includes("@");
+    } else {
+      return isEmpty((this.emailOrUsername || "").trim());
+    }
+  }
+
+  @action
+  updateEmailOrUsername(event) {
+    this.emailOrUsername = event.target.value;
+  }
+
+  @action
+  help() {
+    this.offerHelp = I18n.t("forgot_password.help", { basePath: getURL("") });
+    this.helpSeen = true;
+  }
+
+  @action
+  async resetPassword() {
+    if (this.submitDisabled) {
+      return false;
+    }
+
+    this.disabled = true;
+    this.flash = null;
+
+    try {
+      const data = await ajax("/session/forgot_password", {
+        data: { login: this.emailOrUsername.trim() },
+        type: "POST",
+      });
+
+      const emailOrUsername = escapeExpression(this.emailOrUsername);
+
+      let key = "forgot_password.complete";
+      key += emailOrUsername.match(/@/) ? "_email" : "_username";
+
+      if (data.user_found === false) {
+        key += "_not_found";
+
+        this.flash = htmlSafe(
+          I18n.t(key, {
+            email: emailOrUsername,
+            username: emailOrUsername,
+          })
+        );
+      } else {
+        key += data.user_found ? "_found" : "";
+
+        this.emailOrUsername = "";
+        this.offerHelp = I18n.t(key, {
+          email: emailOrUsername,
+          username: emailOrUsername,
+        });
+
+        this.helpSeen = !data.user_found;
+      }
+    } catch (error) {
+      this.flash = extractError(error);
+    } finally {
+      this.disabled = false;
+    }
+  }
+}

app/assets/javascripts/discourse/app/controllers/forgot-password.js

@@ -1,104 +0,0 @@
-import Controller from "@ember/controller";
-import I18n from "I18n";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { ajax } from "discourse/lib/ajax";
-import cookie from "discourse/lib/cookie";
-import discourseComputed from "discourse-common/utils/decorators";
-import { escapeExpression } from "discourse/lib/utilities";
-import { flashAjaxError } from "discourse/lib/ajax-error";
-import getURL from "discourse-common/lib/get-url";
-import { isEmpty } from "@ember/utils";
-import { htmlSafe } from "@ember/template";
-
-export default Controller.extend(ModalFunctionality, {
-  offerHelp: null,
-  helpSeen: false,
-
-  @discourseComputed("accountEmailOrUsername", "disabled")
-  submitDisabled(accountEmailOrUsername, disabled) {
-    if (disabled) {
-      return true;
-    }
-
-    if (this.siteSettings.hide_email_address_taken) {
-      return !(accountEmailOrUsername || "").includes("@");
-    } else {
-      return isEmpty((accountEmailOrUsername || "").trim());
-    }
-  },
-
-  onShow() {
-    if (cookie("email")) {
-      this.set("accountEmailOrUsername", cookie("email"));
-    }
-  },
-
-  actions: {
-    ok() {
-      this.send("closeModal");
-    },
-
-    help() {
-      this.setProperties({
-        offerHelp: I18n.t("forgot_password.help", {
-          basePath: getURL(""),
-        }),
-        helpSeen: true,
-      });
-    },
-
-    resetPassword() {
-      if (this.submitDisabled) {
-        return false;
-      }
-      this.set("disabled", true);
-
-      this.clearFlash();
-
-      ajax("/session/forgot_password", {
-        data: { login: this.accountEmailOrUsername.trim() },
-        type: "POST",
-      })
-        .then((data) => {
-          const accountEmailOrUsername = escapeExpression(
-            this.accountEmailOrUsername
-          );
-
-          let key = "forgot_password.complete";
-          key += accountEmailOrUsername.match(/@/) ? "_email" : "_username";
-
-          if (data.user_found === false) {
-            key += "_not_found";
-
-            this.flash(
-              htmlSafe(
-                I18n.t(key, {
-                  email: accountEmailOrUsername,
-                  username: accountEmailOrUsername,
-                })
-              ),
-              "error"
-            );
-          } else {
-            key += data.user_found ? "_found" : "";
-
-            this.set("accountEmailOrUsername", "");
-            this.set(
-              "offerHelp",
-              I18n.t(key, {
-                email: accountEmailOrUsername,
-                username: accountEmailOrUsername,
-              })
-            );
-            this.set("helpSeen", !data.user_found);
-          }
-        })
-        .catch(flashAjaxError(this))
-        .finally(() => {
-          this.set("disabled", false);
-        });
-
-      return false;
-    },
-  },
-});

app/assets/javascripts/discourse/app/controllers/login.js

@@ -20,6 +20,7 @@ import showModal from "discourse/lib/show-modal";
 import { wavingHandURL } from "discourse/lib/waving-hand-url";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import ForgotPassword from "discourse/components/modal/forgot-password";
 
 // This is happening outside of the app via popup
 const AuthErrors = [
@@ -32,7 +33,6 @@ const AuthErrors = [
 
 export default Controller.extend(ModalFunctionality, {
   createAccount: controller(),
-  forgotPassword: controller(),
   application: controller(),
   dialog: service(),
 
@@ -190,11 +190,12 @@ export default Controller.extend(ModalFunctionality, {
   @action
   handleForgotPassword(event) {
     event?.preventDefault();
-    const forgotPasswordController = this.forgotPassword;
+
-    if (forgotPasswordController) {
+    this.modal.show(ForgotPassword, {
-      forgotPasswordController.set("accountEmailOrUsername", this.loginName);
+      model: {
-    }
+        emailOrUsername: this.loginName,
-    this.send("showForgotPassword");
+      },
+    });
   },
 
   @action

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

@@ -16,6 +16,7 @@ import showModal from "discourse/lib/show-modal";
 import { action } from "@ember/object";
 import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
 import NotActivatedModal from "../components/modal/not-activated";
+import ForgotPassword from "discourse/components/modal/forgot-password";
 
 function unlessReadOnly(method, message) {
   return function () {
@@ -148,11 +149,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     ),
 
     showForgotPassword() {
-      getOwner(this).lookup("controller:forgot-password").setProperties({
+      this.modal.show(ForgotPassword);
-        offerHelp: null,
-        helpSeen: false,
-      });
-      showModal("forgot-password", { title: "forgot_password.title" });
     },
 
     showNotActivated(props) {

app/assets/javascripts/discourse/app/routes/forgot-password.js

@@ -1,15 +1,19 @@
 import DiscourseRoute from "discourse/routes/discourse";
+import { inject as service } from "@ember/service";
 import { defaultHomepage } from "discourse/lib/utilities";
 import { next } from "@ember/runloop";
+import ForgotPassword from "discourse/components/modal/forgot-password";
 
 export default class ForgotPasswordRoute extends DiscourseRoute {
+  @service modal;
+
   async beforeModel() {
     const { loginRequired } = this.controllerFor("application");
 
-    const e = await this.replaceWith(
+    await this.replaceWith(
       loginRequired ? "login" : `discovery.${defaultHomepage()}`
     );
 
-    next(() => e.send("showForgotPassword"));
+    next(() => this.modal.show(ForgotPassword));
   }
 }

app/assets/javascripts/discourse/app/services/modal.js

@@ -28,7 +28,6 @@ const KNOWN_LEGACY_MODALS = [
   "feature-topic-on-profile",
   "feature-topic",
   "flag",
-  "forgot-password",
   "grant-badge",
   "group-default-notifications",
   "history",

app/assets/javascripts/discourse/app/templates/modal/forgot-password.hbs

@@ -1,55 +0,0 @@
-<form>
-  <DModalBody @class="forgot-password-modal">
-    {{#if this.offerHelp}}
-      {{html-safe this.offerHelp}}
-    {{else}}
-      {{#if this.siteSettings.hide_email_address_taken}}
-        <label for="username-or-email">{{i18n
-            "forgot_password.invite_no_username"
-          }}</label>
-        <TextField
-          @value={{this.accountEmailOrUsername}}
-          @placeholderKey="email"
-          @id="username-or-email"
-          @autocorrect="off"
-          @autocapitalize="off"
-        />
-      {{else}}
-        <label for="username-or-email">{{i18n "forgot_password.invite"}}</label>
-        <TextField
-          @value={{this.accountEmailOrUsername}}
-          @placeholderKey="login.email_placeholder"
-          @id="username-or-email"
-          @autocorrect="off"
-          @autocapitalize="off"
-        />
-      {{/if}}
-    {{/if}}
-  </DModalBody>
-  <div class="modal-footer">
-    {{#if this.offerHelp}}
-      <DButton
-        @class="btn-large btn-primary"
-        @label="forgot_password.button_ok"
-        @type="submit"
-        @action={{action "ok"}}
-      />
-      {{#unless this.helpSeen}}
-        <DButton
-          @class="btn-large"
-          @label="forgot_password.button_help"
-          @icon="question-circle"
-          @action={{action "help"}}
-        />
-      {{/unless}}
-    {{else}}
-      <DButton
-        @action={{action "resetPassword"}}
-        @label="forgot_password.reset"
-        @disabled={{this.submitDisabled}}
-        @class="btn-primary forgot-password-reset"
-        @type="submit"
-      />
-    {{/if}}
-  </div>
-</form>