🐛 Display error message on register form (#6797)

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();
+  });
+});