Fix invite accept in UI

frontend/package.json

@@ -20,6 +20,7 @@
     "lit": "^2.4.1",
     "lodash": "^4.17.21",
     "pretty-ms": "^7.0.1",
+    "query-string": "^8.1.0",
     "regex-colorize": "^0.0.3",
     "tailwindcss": "^3.1.8",
     "url-pattern": "^1.0.3",
@@ -42,13 +43,15 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@lit/localize-tools": "^0.6.5",
     "@open-wc/testing": "^3.1.7",
+    "@rollup/plugin-commonjs": "^18.0.0",
     "@types/color": "^3.0.2",
     "@types/lodash": "^4.14.178",
     "@types/sinon": "^10.0.6",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@web/dev-server-esbuild": "^0.2.16",
     "@web/dev-server-import-maps": "^0.0.6",
+    "@web/dev-server-rollup": "^0.3.21",
     "@web/test-runner": "^0.13.22",
     "@web/test-runner-playwright": "^0.8.8",
     "autoprefixer": "^10.4.2",

frontend/src/utils/APIRouter.test.ts

@@ -0,0 +1,59 @@
+import { spy } from "sinon";
+import { expect } from "@esm-bundle/chai";
+
+import APIRouter from "./APIRouter";
+import { ROUTES } from "../routes";
+
+describe("APIRouter", () => {
+  describe("match", () => {
+    it("matches org", () => {
+      const apiRouter = new APIRouter(ROUTES);
+      const viewState = apiRouter.match("/orgs/_fake_org_id_/_fake_tab_");
+
+      expect(viewState.route).to.equal("org");
+      expect(viewState.params).to.deep.equal({
+        orgId: "_fake_org_id_",
+        orgTab: "_fake_tab_",
+      });
+    });
+
+    it("matches join", () => {
+      const apiRouter = new APIRouter(ROUTES);
+      const viewState = apiRouter.match(
+        "/join/_fake_token_?email=_fake_email_"
+      );
+
+      expect(viewState.route).to.equal("join");
+      expect(viewState.params).to.deep.equal({
+        token: "_fake_token_",
+        email: "_fake_email_",
+      });
+    });
+
+    it("matches join with email comment", () => {
+      const apiRouter = new APIRouter(ROUTES);
+      const viewState = apiRouter.match(
+        "/join/_fake_token_?email=fake+comment@email.com"
+      );
+
+      expect(viewState.route).to.equal("join");
+      expect(viewState.params).to.deep.equal({
+        token: "_fake_token_",
+        email: "fake+comment@email.com",
+      });
+    });
+
+    it("matches join with encoded email", () => {
+      const apiRouter = new APIRouter(ROUTES);
+      const viewState = apiRouter.match(
+        "/join/_fake_token_?email=fake%2Bcomment%40email.com"
+      );
+
+      expect(viewState.route).to.equal("join");
+      expect(viewState.params).to.deep.equal({
+        token: "_fake_token_",
+        email: "fake+comment@email.com",
+      });
+    });
+  });
+});

frontend/src/utils/APIRouter.ts

@@ -1,4 +1,5 @@
 import UrlPattern from "url-pattern";
+import queryString from "query-string";
 
 type Routes = { [key: string]: UrlPattern };
 type Paths = { [key: string]: string };
@@ -29,20 +30,25 @@ export default class APIRouter {
     }
   }
 
-  match(url: string): ViewState {
+  match(relativePath: string): ViewState {
     for (const [name, pattern] of Object.entries(this.routes)) {
-      const [path, qs] = url.split("?");
-      const urlParams = pattern.match(path);
-
-      if (urlParams) {
+      const [path, qs = ""] = relativePath.split("?");
+      const match = pattern.match(path);
+
+      if (match) {
+        const queryParams = queryString.parse(qs, {
+          // Only decode if needed, or else `+` in invite emails
+          // may be incorrectly decoded
+          decode: qs.includes("%"),
+        });
         const params = {
-          ...urlParams,
-          ...Object.fromEntries(new URLSearchParams(qs).entries()),
+          ...match,
+          ...queryParams,
         };
-        return { route: name, pathname: url, params };
+        return { route: name, pathname: relativePath, params };
       }
     }
 
-    return { route: null, pathname: url, params: {} };
+    return { route: null, pathname: relativePath, params: {} };
   }
 }

frontend/src/utils/auth.test.ts

@@ -18,7 +18,7 @@ describe("auth", () => {
       );
 
       const element = new Element();
-      element.connectedCallback();
+      element.update();
 
       expect(dispatchEventSpy.getCall(0).firstArg.type).to.equal("need-login");
     });

frontend/web-test-runner.config.mjs

@@ -1,9 +1,25 @@
 import { esbuildPlugin } from "@web/dev-server-esbuild";
 import { importMapsPlugin } from "@web/dev-server-import-maps";
+import commonjsPlugin from "@rollup/plugin-commonjs";
+import { fromRollup } from "@web/dev-server-rollup";
+import { fileURLToPath } from "url";
+
+const commonjs = fromRollup(commonjsPlugin);
 
 export default {
   plugins: [
-    esbuildPlugin({ ts: true }),
+    esbuildPlugin({
+      ts: true,
+      // tsconfig: fileURLToPath(new URL("./tsconfig.json", import.meta.url)),
+      target: "auto",
+    }),
+    commonjs({
+      include: [
+        // web-test-runner expects es modules,
+        // include umd/commonjs modules here:
+        "node_modules/url-pattern/**/*",
+      ],
+    }),
     importMapsPlugin({
       inject: {
         importMap: {