Simplify registration with email validation

cypress/e2e/register/email.spec.ts

@@ -0,0 +1,93 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { HomeserverInstance } from "../../plugins/utils/homeserver";
+import { Mailhog } from "../../support/mailhog";
+
+describe("Email Registration", () => {
+    let homeserver: HomeserverInstance;
+    let mailhog: Mailhog;
+
+    beforeEach(() => {
+        cy.startMailhog().then((_mailhog) => {
+            mailhog = _mailhog;
+            cy.startHomeserver({
+                template: "email",
+                variables: {
+                    SMTP_HOST: "host.docker.internal",
+                    SMTP_PORT: _mailhog.instance.smtpPort,
+                },
+            }).then((_homeserver) => {
+                homeserver = _homeserver;
+
+                cy.intercept(
+                    { method: "GET", pathname: "/config.json" },
+                    {
+                        body: {
+                            default_server_config: {
+                                "m.homeserver": {
+                                    base_url: homeserver.baseUrl,
+                                },
+                                "m.identity_server": {
+                                    base_url: "https://server.invalid",
+                                },
+                            },
+                        },
+                    },
+                );
+                cy.visit("/#/register");
+                cy.injectAxe();
+            });
+        });
+    });
+
+    afterEach(() => {
+        cy.stopHomeserver(homeserver);
+        cy.stopMailhog(mailhog);
+    });
+
+    it("registers an account and lands on the use case selection screen", () => {
+        cy.findByRole("textbox", { name: "Username" }).should("be.visible");
+        // Hide the server text as it contains the randomly allocated Homeserver port
+        const percyCSS = ".mx_ServerPicker_server { visibility: hidden !important; }";
+
+        cy.findByRole("textbox", { name: "Username" }).type("alice");
+        cy.findByPlaceholderText("Password").type("totally a great password");
+        cy.findByPlaceholderText("Confirm password").type("totally a great password");
+        cy.findByPlaceholderText("Email").type("alice@email.com");
+        cy.findByRole("button", { name: "Register" }).click();
+
+        cy.findByText("Check your email to continue").should("be.visible");
+        cy.percySnapshot("Registration check your email", { percyCSS });
+        cy.checkA11y();
+
+        cy.findByText("An error was encountered when sending the email").should("not.exist");
+
+        cy.waitForPromise(async () => {
+            const messages = await mailhog.api.messages();
+            expect(messages.items).to.have.length(1);
+            expect(messages.items[0].to).to.eq("alice@email.com");
+            const [link] = messages.items[0].text.match(/http.+/);
+            return link;
+        }).as("emailLink");
+
+        cy.get<string>("@emailLink").then((link) => cy.request(link));
+
+        cy.get(".mx_UseCaseSelection_skip", { timeout: 30000 }).should("exist");
+    });
+});

cypress/plugins/index.ts

@@ -26,6 +26,7 @@ import { webserver } from "./webserver";
 import { docker } from "./docker";
 import { log } from "./log";
 import { oAuthServer } from "./oauth_server";
+import { mailhogDocker } from "./mailhog";
 
 /**
  * @type {Cypress.PluginConfig}
@@ -41,4 +42,5 @@ export default function (on: PluginEvents, config: PluginConfigOptions) {
     installLogsPrinter(on, {
         // printLogsToConsole: "always",
     });
+    mailhogDocker(on, config);
 }

cypress/plugins/mailhog/index.ts

@@ -0,0 +1,91 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import PluginEvents = Cypress.PluginEvents;
+import PluginConfigOptions = Cypress.PluginConfigOptions;
+import { getFreePort } from "../utils/port";
+import { dockerIp, dockerRun, dockerStop } from "../docker";
+
+// A cypress plugins to add command to manage an instance of Mailhog in Docker
+
+export interface Instance {
+    host: string;
+    smtpPort: number;
+    httpPort: number;
+    containerId: string;
+}
+
+const instances = new Map<string, Instance>();
+
+// Start a synapse instance: the template must be the name of
+// one of the templates in the cypress/plugins/synapsedocker/templates
+// directory
+async function mailhogStart(): Promise<Instance> {
+    const smtpPort = await getFreePort();
+    const httpPort = await getFreePort();
+
+    console.log(`Starting mailhog...`);
+
+    const containerId = await dockerRun({
+        image: "mailhog/mailhog:latest",
+        containerName: `react-sdk-cypress-mailhog`,
+        params: ["--rm", "-p", `${smtpPort}:1025/tcp`, "-p", `${httpPort}:8025/tcp`],
+    });
+
+    console.log(`Started mailhog on ports smtp=${smtpPort} http=${httpPort}.`);
+
+    const host = await dockerIp({ containerId });
+    const instance: Instance = { smtpPort, httpPort, containerId, host };
+    instances.set(containerId, instance);
+    return instance;
+}
+
+async function mailhogStop(id: string): Promise<void> {
+    const synCfg = instances.get(id);
+
+    if (!synCfg) throw new Error("Unknown mailhog ID");
+
+    await dockerStop({
+        containerId: id,
+    });
+
+    instances.delete(id);
+
+    console.log(`Stopped mailhog id ${id}.`);
+    // cypress deliberately fails if you return 'undefined', so
+    // return null to signal all is well, and we've handled the task.
+    return null;
+}
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+export function mailhogDocker(on: PluginEvents, config: PluginConfigOptions) {
+    on("task", {
+        mailhogStart,
+        mailhogStop,
+    });
+
+    on("after:spec", async (spec) => {
+        // Cleans up any remaining instances after a spec run
+        for (const synId of instances.keys()) {
+            console.warn(`Cleaning up synapse ID ${synId} after ${spec.name}`);
+            await mailhogStop(synId);
+        }
+    });
+}

cypress/plugins/synapsedocker/index.ts

@@ -65,6 +65,12 @@ async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Homeserver
     hsYaml = hsYaml.replace(/{{FORM_SECRET}}/g, formSecret);
     hsYaml = hsYaml.replace(/{{PUBLIC_BASEURL}}/g, baseUrl);
     hsYaml = hsYaml.replace(/{{OAUTH_SERVER_PORT}}/g, opts.oAuthServerPort?.toString());
+    if (opts.variables) {
+        for (const key in opts.variables) {
+            hsYaml = hsYaml.replace(new RegExp("%" + key + "%", "g"), String(opts.variables[key]));
+        }
+    }
+
     await fse.writeFile(path.join(tempDir, "homeserver.yaml"), hsYaml);
 
     // now generate a signing key (we could use synapse's config generation for

cypress/plugins/synapsedocker/templates/email/README.md

@@ -0,0 +1 @@
+A synapse configured to require an email for registration

cypress/plugins/synapsedocker/templates/email/homeserver.yaml

@@ -0,0 +1,44 @@
+server_name: "localhost"
+pid_file: /data/homeserver.pid
+public_baseurl: "{{PUBLIC_BASEURL}}"
+listeners:
+    - port: 8008
+      tls: false
+      bind_addresses: ["::"]
+      type: http
+      x_forwarded: true
+
+      resources:
+          - names: [client]
+            compress: false
+
+database:
+    name: "sqlite3"
+    args:
+        database: ":memory:"
+
+log_config: "/data/log.config"
+
+media_store_path: "/data/media_store"
+uploads_path: "/data/uploads"
+enable_registration: true
+registrations_require_3pid:
+    - email
+registration_shared_secret: "{{REGISTRATION_SECRET}}"
+report_stats: false
+macaroon_secret_key: "{{MACAROON_SECRET_KEY}}"
+form_secret: "{{FORM_SECRET}}"
+signing_key_path: "/data/localhost.signing.key"
+
+trusted_key_servers:
+    - server_name: "matrix.org"
+suppress_key_server_warning: true
+
+ui_auth:
+    session_timeout: "300s"
+
+email:
+    smtp_host: "%SMTP_HOST%"
+    smtp_port: %SMTP_PORT%
+    notif_from: "Your Friendly %(app)s homeserver <noreply@example.com>"
+    app_name: my_branded_matrix_server

cypress/plugins/synapsedocker/templates/email/log.config

@@ -0,0 +1,50 @@
+# Log configuration for Synapse.
+#
+# This is a YAML file containing a standard Python logging configuration
+# dictionary. See [1] for details on the valid settings.
+#
+# Synapse also supports structured logging for machine readable logs which can
+# be ingested by ELK stacks. See [2] for details.
+#
+# [1]: https://docs.python.org/3.7/library/logging.config.html#configuration-dictionary-schema
+# [2]: https://matrix-org.github.io/synapse/latest/structured_logging.html
+
+version: 1
+
+formatters:
+    precise:
+        format: '%(asctime)s - %(name)s - %(lineno)d - %(levelname)s - %(request)s - %(message)s'
+
+handlers:
+    # A handler that writes logs to stderr. Unused by default, but can be used
+    # instead of "buffer" and "file" in the logger handlers.
+    console:
+        class: logging.StreamHandler
+        formatter: precise
+
+loggers:
+    synapse.storage.SQL:
+        # beware: increasing this to DEBUG will make synapse log sensitive
+        # information such as access tokens.
+        level: INFO
+
+    twisted:
+        # We send the twisted logging directly to the file handler,
+        # to work around https://github.com/matrix-org/synapse/issues/3471
+        # when using "buffer" logger. Use "console" to log to stderr instead.
+        handlers: [console]
+        propagate: false
+
+root:
+    level: INFO
+
+    # Write logs to the `buffer` handler, which will buffer them together in memory,
+    # then write them to a file.
+    #
+    # Replace "buffer" with "console" to log to stderr instead. (Note that you'll
+    # also need to update the configuration for the `twisted` logger above, in
+    # this case.)
+    #
+    handlers: [console]
+
+disable_existing_loggers: false

cypress/support/e2e.ts

@@ -40,6 +40,8 @@ import "./network";
 import "./composer";
 import "./proxy";
 import "./axe";
+import "./mailhog";
+import "./promise";
 
 installLogsCollector({
     // specify the types of logs to collect (and report to the node console at the end of the test)

cypress/support/homeserver.ts

@@ -28,6 +28,9 @@ export interface StartHomeserverOpts {
 
     /** Port of an OAuth server to configure the homeserver to use */
     oAuthServerPort?: number;
+
+    /** Additional variables to inject into the configuration template **/
+    variables?: Record<string, string | number>;
 }
 
 declare global {

cypress/support/mailhog.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import mailhog from "mailhog";
+
+import Chainable = Cypress.Chainable;
+import { Instance } from "../plugins/mailhog";
+
+export interface Mailhog {
+    api: mailhog.API;
+    instance: Instance;
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            startMailhog(): Chainable<Mailhog>;
+            stopMailhog(instance: Mailhog): Chainable<void>;
+        }
+    }
+}
+
+Cypress.Commands.add("startMailhog", (): Chainable<Mailhog> => {
+    return cy.task<Instance>("mailhogStart", { log: false }).then((x) => {
+        Cypress.log({ name: "startHomeserver", message: `Started mailhog instance ${x.containerId}` });
+        return {
+            api: mailhog({
+                host: "localhost",
+                port: x.httpPort,
+            }),
+            instance: x,
+        };
+    });
+});
+
+Cypress.Commands.add("stopMailhog", (mailhog: Mailhog): Chainable<void> => {
+    return cy.task("mailhogStop", mailhog.instance.containerId);
+});