🐛 Display error message on register form (#6797)

CHANGES.md

@@ -18,6 +18,7 @@
 ### :bug: Bugs fixed
 - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143)
 - Fix text-decoration line-through that displays a wrong property value [Taiga #11145](https://tree.taiga.io/project/penpot/issue/11145)
+- Fix display error message on register form [Taiga #11444](https://tree.taiga.io/project/penpot/issue/11444)
 
 ## 2.8.0 (Next / Unreleased)
 
@@ -2549,4 +2550,4 @@ time being.
 
 ## 1.0.0-alpha
 
-Initial release
+Initial release

frontend/playwright/data/register/prepare-register-profile-email-mismatch.json

@@ -0,0 +1,5 @@
+{
+  "~:type": "~:restriction",
+  "~:code": "~:email-does-not-match-invitation",
+  "~:hint": "email should match the invitation"
+}

frontend/playwright/ui/pages/RegisterPage.js

@@ -0,0 +1,35 @@
+import { BasePage } from "./BasePage";
+
+export class RegisterPage extends BasePage {
+  constructor(page) {
+    super(page);
+    this.registerButton = page.getByRole("button", { name: "Create an account" });
+    this.password = page.getByLabel("Password");
+    this.email = page.getByLabel("Work email");
+    this.fullName = page.getByLabel("Full name");
+  }
+
+  async fillRegisterFormInputs(name, email, password) {
+    await this.fullName.fill(name);
+    await this.email.fill(email);
+    await this.password.fill(password);
+  }
+
+  async clickRegisterButton() {
+    await this.registerButton.click();
+  }
+
+  async setupMismatchedEmailError() {
+    await this.mockRPC(
+      "prepare-register-profile",
+      "register/prepare-register-profile-email-mismatch.json",
+      { status: 400 },
+    );
+  }
+
+  static async initWithLoggedOutUser(page) {
+    await this.mockRPC(page, "get-profile", "get-profile-anonymous.json");
+  }
+}
+
+export default RegisterPage;

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

@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+import { RegisterPage } from "../pages/RegisterPage";
+
+test.beforeEach(async ({ page }) => {
+  await RegisterPage.initWithLoggedOutUser(page);
+  await page.goto("/#/auth/register");
+});
+
+test.describe("Register form errors", () => {
+  test("User gets error message when email does not match invitation", async ({ page }) => {
+    const registerPage = new RegisterPage(page);
+    await registerPage.setupMismatchedEmailError();
+
+    await registerPage.fillRegisterFormInputs("John Doe", "john.doe@example.com", "password123");
+    await registerPage.clickRegisterButton();
+
+    await expect(page.getByText(
+      "Email does not match the invitation.",
+    )).toBeVisible();
+  });
+});

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

@@ -85,6 +85,9 @@
          (fn [cause]
            (let [{:keys [type code] :as edata} (ex-data cause)]
              (condp = [type code]
+               [:restriction :email-does-not-match-invitation]
+               (st/emit! (ntf/error (tr "errors.email-does-not-match-invitation")))
+
                [:restriction :registration-disabled]
                (st/emit! (ntf/error (tr "errors.registration-disabled")))
 
@@ -148,7 +151,7 @@
 
              (->> (rp/cmd! :prepare-register-profile cdata)
                   (rx/finalize #(reset! submitted? false))
-                  (rx/subs! on-register-profile)))))]
+                  (rx/subs! on-register-profile on-error)))))]
 
     [:& fm/form {:on-submit on-submit :form form}
      [:div {:class (stl/css :fields-row)}

frontend/translations/en.po

@@ -1248,6 +1248,9 @@ msgstr "The email «%s» has many permanent bounce reports."
 msgid "errors.email-spam-or-permanent-bounces"
 msgstr "The email «%s» has been reported as spam or permanently bounce."
 
+msgid "errors.email-does-not-match-invitation"
+msgstr "Email does not match the invitation."
+
 #: src/app/main/errors.cljs:241
 msgid "errors.feature-mismatch"
 msgstr ""