DEV: Update confirm-email flows to use central 2fa and ember rendering (

discourse#25404)

These routes were previously rendered using Rails, and had a fairly fragile 2fa implementation in vanilla-js. This commit refactors the routes to be handled in the Ember app, removes the custom vanilla-js bundles, and leans on our centralized 2fa implementation. It also introduces a set of system specs for the behavior.

app/assets/javascripts/discourse/app/controllers/confirm-new-email.js

@@ -0,0 +1,46 @@
+import { tracked } from "@glimmer/tracking";
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import I18n from "discourse-i18n";
+
+export default class ConfirmNewEmailController extends Controller {
+  @service dialog;
+  @service router;
+
+  @tracked loading;
+
+  @action
+  async confirm() {
+    this.loading = true;
+    try {
+      await ajax(`/u/confirm-new-email/${this.model.token}.json`, {
+        type: "PUT",
+      });
+    } catch (error) {
+      const nonce = error.jqXHR?.responseJSON?.second_factor_challenge_nonce;
+      if (nonce) {
+        this.router.transitionTo("second-factor-auth", {
+          queryParams: { nonce },
+        });
+      } else {
+        popupAjaxError(error);
+      }
+      return;
+    } finally {
+      this.loading = false;
+    }
+
+    await new Promise((resolve) =>
+      this.dialog.dialog({
+        message: I18n.t("user.change_email.confirm_success"),
+        type: "alert",
+        didConfirm: resolve,
+      })
+    );
+
+    this.router.transitionTo("/my/preferences/account");
+  }
+}

app/assets/javascripts/discourse/app/controllers/confirm-old-email.js

@@ -0,0 +1,39 @@
+import { tracked } from "@glimmer/tracking";
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import I18n from "discourse-i18n";
+
+export default class ConfirmOldEmailController extends Controller {
+  @service dialog;
+  @service router;
+
+  @tracked loading;
+
+  @action
+  async confirm() {
+    this.loading = true;
+    try {
+      await ajax(`/u/confirm-old-email/${this.model.token}.json`, {
+        type: "PUT",
+      });
+    } catch (error) {
+      popupAjaxError(error);
+      return;
+    } finally {
+      this.loading = false;
+    }
+
+    await new Promise((resolve) =>
+      this.dialog.dialog({
+        message: I18n.t("user.change_email.authorizing_old.confirm_success"),
+        type: "alert",
+        didConfirm: resolve,
+      })
+    );
+
+    this.router.transitionTo("/my/preferences/account");
+  }
+}

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

@@ -192,7 +192,10 @@ export default Controller.extend({
         );
         ajax(response.callback_path, {
           type: response.callback_method,
-          data: { second_factor_nonce: this.nonce },
+          data: {
+            second_factor_nonce: this.nonce,
+            ...response.callback_params,
+          },
         })
           .then((callbackResponse) => {
             const redirectUrl =

app/assets/javascripts/discourse/app/routes/app-route-map.js

@@ -105,6 +105,8 @@ export default function () {
     this.route("resent");
     this.route("edit-email");
   });
+  this.route("confirm-new-email", { path: "/u/confirm-new-email/:token" });
+  this.route("confirm-old-email", { path: "/u/confirm-old-email/:token" });
   this.route(
     "user",
     { path: "/u/:username", resetNamespace: true },

app/assets/javascripts/discourse/app/routes/confirm-new-email.js

@@ -0,0 +1,13 @@
+import { ajax } from "discourse/lib/ajax";
+import DiscourseRoute from "discourse/routes/discourse";
+import I18n from "discourse-i18n";
+
+export default class ConfirmNewEmailRoute extends DiscourseRoute {
+  titleToken() {
+    return I18n.t("user.change_email.title");
+  }
+
+  model(params) {
+    return ajax(`/u/confirm-new-email/${params.token}.json`);
+  }
+}

app/assets/javascripts/discourse/app/routes/confirm-old-email.js

@@ -0,0 +1,13 @@
+import { ajax } from "discourse/lib/ajax";
+import DiscourseRoute from "discourse/routes/discourse";
+import I18n from "discourse-i18n";
+
+export default class ConfirmOldEmailRoute extends DiscourseRoute {
+  titleToken() {
+    return I18n.t("user.change_email.title");
+  }
+
+  model(params) {
+    return ajax(`/u/confirm-old-email/${params.token}.json`);
+  }
+}

app/assets/javascripts/discourse/app/templates/confirm-new-email.hbs

@@ -0,0 +1,18 @@
+<div id="simple-container">
+  <div class="confirm-new-email">
+    <h2>{{i18n "user.change_email.title"}}</h2>
+    <p>
+      {{#if this.model.old_email}}
+        {{i18n "user.change_email.authorizing_new.description"}}
+      {{else}}
+        {{i18n "user.change_email.authorizing_new.description_add"}}
+      {{/if}}
+    </p>
+    <p>{{this.model.new_email}}</p>
+    <DButton
+      @translatedLabel={{i18n "user.change_email.confirm"}}
+      class="btn-primary"
+      @action={{this.confirm}}
+    />
+  </div>
+</div>

app/assets/javascripts/discourse/app/templates/confirm-old-email.hbs

@@ -0,0 +1,31 @@
+<div id="simple-container">
+  <div class="confirm-old-email">
+    <h2>{{i18n "user.change_email.authorizing_old.title"}}</h2>
+    <p>
+      {{#if this.model.old_email}}
+        {{i18n "user.change_email.authorizing_old.description"}}
+      {{else}}
+        {{i18n "user.change_email.authorizing_old.description_add"}}
+      {{/if}}
+    </p>
+    {{#if this.model.old_email}}
+      <p>
+        {{i18n
+          "user.change_email.authorizing_old.old_email"
+          email=this.model.old_email
+        }}
+      </p>
+    {{/if}}
+    <p>
+      {{i18n
+        "user.change_email.authorizing_old.new_email"
+        email=this.model.new_email
+      }}
+    </p>
+    <DButton
+      @translatedLabel={{i18n "user.change_email.confirm"}}
+      class="btn-primary"
+      @action={{this.confirm}}
+    />
+  </div>
+</div>