🐛 Fix email already used showing a toast instead of an input error (#11647)

* 🐛 Fix email already used showing a toast instead of an input error

Registering with an email that already exists reported the problem with a
toast while the email input stayed in its valid state, which reads as if the
form was accepted. The message now lands on the email input itself, the same
way the recovery and change password forms report server side errors.

The error is written to :extra-errors because the form mutator recomputes
:errors from the schema on every change, so a value written there is dropped
on the next render.

Fixes #10890

* 📎 Update CHANGES.md to remove email registration fix

Removed a note about a fix for email registration error display.

Signed-off-by: Andrey Antukh <niwi@niwi.nz>

---------
Co-authored-by: Shreyash Agare <agareshreyash26@gmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

frontend/playwright/data/register/prepare-register-profile-email-already-exists.json

@@ -0,0 +1,5 @@
+{
+  "~:type": "~:validation",
+  "~:code": "~:email-already-exists",
+  "~:hint": "email already exists"
+}

frontend/playwright/ui/pages/RegisterPage.js

@@ -21,6 +21,14 @@ export class RegisterPage extends BasePage {
     await this.registerButton.click();
   }
 
+  async setupEmailAlreadyExistsError() {
+    await this.mockRPC(
+      "prepare-register-profile",
+      "register/prepare-register-profile-email-already-exists.json",
+      { status: 400 },
+    );
+  }
+
   async setupMismatchedEmailError() {
     await this.mockRPC(
       "prepare-register-profile",

frontend/playwright/ui/specs/register.spec.js

@@ -24,4 +24,23 @@ test.describe("Register form errors", () => {
       page.getByText("Email does not match the invitation."),
     ).toBeVisible();
   });
+
+  test("User gets the already used email error on the email input", async ({
+    page,
+  }) => {
+    const registerPage = new RegisterPage(page);
+    await registerPage.setupEmailAlreadyExistsError();
+
+    await registerPage.fillRegisterFormInputs(
+      "John Doe",
+      "john.doe@example.com",
+      "password123",
+    );
+    await registerPage.clickRegisterButton();
+
+    await expect(page.getByTestId("email-input-error")).toHaveText(
+      "Email already used",
+    );
+    await expect(page.getByRole("alert")).toHaveCount(0);
+  });
 });

frontend/src/app/main/ui/auth/register.cljs

@@ -79,6 +79,7 @@
 
         on-error
         (mf/use-fn
+         (mf/deps form)
          (fn [cause]
            (reset! submitted? false)
            (let [{:keys [type code] :as edata} (ex-data cause)]
@@ -98,8 +99,12 @@
                [:restriction :email-has-complaints]
                (st/emit! (ntf/error (tr "errors.email-has-permanent-bounces" (:email edata))))
 
+               ;; Reported on the email input itself, the way the recovery and
+               ;; password forms report server side errors, so the field that
+               ;; needs fixing is the one marked as invalid
                [:validation :email-already-exists]
-               (st/emit! (ntf/error (tr "errors.email-already-exists")))
+               (swap! form assoc-in [:extra-errors :email]
+                      {:message (tr "errors.email-already-exists")})
 
                [:validation :email-as-password]
                (st/emit! (ntf/error (tr "errors.email-as-password")))