DEV: Refactor modal 'flash' to avoid direct DOM manipulation

app/assets/javascripts/discourse/app/components/d-modal-body.js

@@ -23,10 +23,7 @@ export default class DModalBody extends Component {
 
   @action
   didInsert(element) {
-    this._modalAlertElement = document.getElementById("modal-alert");
-    if (this._modalAlertElement) {
-      this._clearFlash();
-    }
+    this.appEvents.trigger("modal-body:clearFlash");
 
     const fixedParent = element.closest(".d-modal.fixed-modal");
     if (fixedParent) {
@@ -39,8 +36,6 @@ export default class DModalBody extends Component {
 
   @action
   willDestroy() {
-    this.appEvents.off("modal-body:flash", this, "_flash");
-    this.appEvents.off("modal-body:clearFlash", this, "_clearFlash");
     this.appEvents.trigger("modal:body-dismissed");
   }
 
@@ -69,30 +64,4 @@ export default class DModalBody extends Component {
       ])
     );
   }
-
-  _clearFlash() {
-    if (this._modalAlertElement) {
-      this._modalAlertElement.innerHTML = "";
-      this._modalAlertElement.classList.remove(
-        "alert",
-        "alert-error",
-        "alert-info",
-        "alert-success",
-        "alert-warning"
-      );
-    }
-  }
-
-  _flash(msg) {
-    this._clearFlash();
-    if (!this._modalAlertElement) {
-      return;
-    }
-
-    this._modalAlertElement.classList.add(
-      "alert",
-      `alert-${msg.messageClass || "success"}`
-    );
-    this._modalAlertElement.innerHTML = msg.text || "";
-  }
 }

app/assets/javascripts/discourse/app/components/d-modal.hbs

@@ -57,7 +57,18 @@
           {{/if}}
         </div>
 
-        <div id="modal-alert" role="alert"></div>
+        <div
+          id="modal-alert"
+          role="alert"
+          class={{if
+            this.flash
+            (concat-class
+              "alert" (concat "alert-" (or this.flash.messageClass "success"))
+            )
+          }}
+        >
+          {{this.flash.text}}
+        </div>
 
         {{yield}}
 

app/assets/javascripts/discourse/app/components/d-modal.js

@@ -13,6 +13,7 @@ export default class DModal extends Component {
 
   @tracked wrapperElement;
   @tracked modalBodyData = {};
+  @tracked flash;
 
   get modalStyle() {
     if (this.args.modalStyle === "inline-modal") {
@@ -71,6 +72,8 @@ export default class DModal extends Component {
   @action
   setupListeners(element) {
     this.appEvents.on("modal:body-shown", this._modalBodyShown);
+    this.appEvents.on("modal-body:flash", this._flash);
+    this.appEvents.on("modal-body:clearFlash", this._clearFlash);
     document.documentElement.addEventListener(
       "keydown",
       this._handleModalEvents
@@ -81,6 +84,8 @@ export default class DModal extends Component {
   @action
   cleanupListeners() {
     this.appEvents.off("modal:body-shown", this._modalBodyShown);
+    this.appEvents.off("modal-body:flash", this._flash);
+    this.appEvents.off("modal-body:clearFlash", this._clearFlash);
     document.documentElement.removeEventListener(
       "keydown",
       this._handleModalEvents
@@ -226,4 +231,14 @@ export default class DModal extends Component {
       }
     }
   }
+
+  @bind
+  _clearFlash() {
+    this.flash = null;
+  }
+
+  @bind
+  _flash(msg) {
+    this.flash = msg;
+  }
 }

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

@@ -8,6 +8,7 @@ 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,
@@ -70,10 +71,12 @@ export default Controller.extend(ModalFunctionality, {
             key += "_not_found";
 
             this.flash(
-              I18n.t(key, {
-                email: accountEmailOrUsername,
-                username: accountEmailOrUsername,
-              }),
+              htmlSafe(
+                I18n.t(key, {
+                  email: accountEmailOrUsername,
+                  username: accountEmailOrUsername,
+                })
+              ),
               "error"
             );
           } else {

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

@@ -19,6 +19,7 @@ import { setting } from "discourse/lib/computed";
 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";
 
 // This is happening outside of the app via popup
 const AuthErrors = [
@@ -157,22 +158,28 @@ export default Controller.extend(ModalFunctionality, {
       .then((data) => {
         const loginName = escapeExpression(this.loginName);
         const isEmail = loginName.match(/@/);
-        let key = `email_login.complete_${isEmail ? "email" : "username"}`;
+        let key = isEmail
+          ? "email_login.complete_email"
+          : "email_login.complete_username";
         if (data.user_found === false) {
           this.flash(
-            I18n.t(`${key}_not_found`, {
-              email: loginName,
-              username: loginName,
-            }),
+            htmlSafe(
+              I18n.t(`${key}_not_found`, {
+                email: loginName,
+                username: loginName,
+              })
+            ),
             "error"
           );
         } else {
           let postfix = data.hide_taken ? "" : "_found";
           this.flash(
-            I18n.t(`${key}${postfix}`, {
-              email: loginName,
-              username: loginName,
-            })
+            htmlSafe(
+              I18n.t(`${key}${postfix}`, {
+                email: loginName,
+                username: loginName,
+              })
+            )
           );
         }
       })

app/assets/javascripts/discourse/tests/acceptance/login-with-email-test.js

@@ -56,7 +56,7 @@ acceptance("Login with email", function (needs) {
     await click("#email-login-link");
 
     assert.strictEqual(
-      query(".alert-error").innerHTML,
+      query(".alert-error").innerHTML.trim(),
       I18n.t("email_login.complete_username_not_found", {
         username: "someuser",
       }),
@@ -67,7 +67,7 @@ acceptance("Login with email", function (needs) {
     await click("#email-login-link");
 
     assert.strictEqual(
-      query(".alert-error").innerHTML,
+      query(".alert-error").innerHTML.trim(),
       I18n.t("email_login.complete_email_not_found", {
         email: "someuser@gmail.com",
       }),