DEV: Convert activation-email-form to gjs (#25343)

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

@@ -0,0 +1,21 @@
+import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class ActivationEmailForm extends Component {
+  @action
+  newEmailChanged(event) {
+    this.args.updateNewEmail(event.target.value);
+  }
+
+  <template>
+    <p>{{i18n "login.provide_new_email"}}</p>
+    <input
+      {{on "input" this.newEmailChanged}}
+      value={{@email}}
+      type="text"
+      class="activate-new-email"
+    />
+  </template>
+}

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

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

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

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

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

@@ -23,11 +23,11 @@ export default class ActivationEdit extends Component {
       await changeEmail({
         username: this.login?.loginName,
         password: this.login?.loginPassword,
-        email: this.args.model.newEmail,
+        email: this.newEmail,
       });
 
       this.modal.show(ActivationResent, {
-        model: { currentEmail: this.args.model.newEmail },
+        model: { currentEmail: this.newEmail },
       });
     } catch (e) {
       this.flash = extractError(e);
@@ -35,7 +35,7 @@ export default class ActivationEdit extends Component {
   }
 
   @action
-  updateNewEmail(e) {
-    this.newEmail = e.target.value;
+  updateNewEmail(email) {
+    this.newEmail = email;
   }
 }

app/assets/javascripts/discourse/app/controllers/account-created-edit-email.js

@@ -1,4 +1,5 @@
 import Controller from "@ember/controller";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { changeEmail } from "discourse/lib/user-activation";
@@ -6,6 +7,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 
 export default Controller.extend({
   router: service(),
+
   accountCreated: null,
   newEmail: null,
 
@@ -14,19 +16,25 @@ export default Controller.extend({
     return newEmail === currentEmail;
   },
 
-  actions: {
-    changeEmail() {
-      const email = this.newEmail;
-      changeEmail({ email })
-        .then(() => {
-          this.set("accountCreated.email", email);
-          this.router.transitionTo("account-created.resent");
-        })
-        .catch(popupAjaxError);
-    },
+  @action
+  updateNewEmail(email) {
+    this.set("newEmail", email);
+  },
 
-    cancel() {
-      this.router.transitionTo("account-created.index");
-    },
+  @action
+  async changeEmail() {
+    try {
+      await changeEmail({ email: this.newEmail });
+
+      this.set("accountCreated.email", this.newEmail);
+      this.router.transitionTo("account-created.resent");
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  },
+
+  @action
+  cancel() {
+    this.router.transitionTo("account-created.index");
   },
 });

app/assets/javascripts/discourse/app/templates/account-created/edit-email.hbs

@@ -1,13 +1,16 @@
 <div class="ac-message">
-  <ActivationEmailForm @email={{this.newEmail}} />
+  <ActivationEmailForm
+    @email={{this.newEmail}}
+    @updateNewEmail={{this.updateNewEmail}}
+  />
 </div>
 
 <div class="activation-controls">
   <DButton
-    @action={{action "changeEmail"}}
+    @action={{this.changeEmail}}
     @label="login.submit_new_email"
     @disabled={{this.submitDisabled}}
     class="btn-primary"
   />
-  <DButton @action={{action "cancel"}} @label="cancel" class="edit-cancel" />
+  <DButton @action={{this.cancel}} @label="cancel" class="edit-cancel" />
 </div>

app/assets/javascripts/discourse/tests/acceptance/account-created-test.js

@@ -76,19 +76,14 @@ acceptance("Account Created", function () {
     });
 
     await visit("/u/account-created");
-
     await click(".activation-controls .edit-email");
-
-    assert.ok(exists(".activation-controls .btn-primary:disabled"));
+    assert.dom(".activation-controls .btn-primary").isDisabled();
 
     await fillIn(".activate-new-email", "newemail@example.com");
-
-    assert.notOk(exists(".activation-controls .btn-primary:disabled"));
+    assert.dom(".activation-controls .btn-primary").isNotDisabled();
 
     await click(".activation-controls .btn-primary");
-
     assert.strictEqual(currentRouteName(), "account-created.resent");
-    const email = query(".account-created b").innerText;
-    assert.strictEqual(email, "newemail@example.com");
+    assert.dom(".account-created b").hasText("newemail@example.com");
   });
 });

app/assets/javascripts/discourse/tests/acceptance/sign-in-test.js

@@ -2,7 +2,6 @@ import { click, fillIn, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import {
   acceptance,
-  count,
   exists,
   query,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -68,28 +67,20 @@ acceptance("Signing In", function () {
   test("sign in - not activated - edit email", async function (assert) {
     await visit("/");
     await click("header .login-button");
-    assert.ok(exists(".login-modal"), "it shows the login modal");
+    assert.dom(".login-modal").exists("it shows the login modal");
 
     await fillIn("#login-account-name", "eviltrout");
     await fillIn("#login-account-password", "not-activated-edit");
     await click(".d-modal__footer .btn-primary");
     await click(".d-modal__footer button.edit-email");
-    assert.strictEqual(
-      query(".activate-new-email").value,
-      "current@example.com"
-    );
-    assert.strictEqual(
-      count(".d-modal__footer .btn-primary:disabled"),
-      1,
-      "must change email"
-    );
+    assert.dom(".activate-new-email").hasValue("current@example.com");
+    assert.dom(".d-modal__footer .btn-primary").isDisabled("must change email");
+
     await fillIn(".activate-new-email", "different@example.com");
-    assert.ok(!exists(".d-modal__footer .btn-primary:disabled"));
+    assert.dom(".d-modal__footer .btn-primary").isNotDisabled();
+
     await click(".d-modal__footer .btn-primary");
-    assert.strictEqual(
-      query(".d-modal__body b").innerText,
-      "different@example.com"
-    );
+    assert.dom(".d-modal__body b").hasText("different@example.com");
   });
 
   test("second factor", async function (assert) {