From 493b7ed57af46c666eef3da46cfc9107dddd83e5 Mon Sep 17 00:00:00 2001
From: Jonah Dahlquist <hi@jonah.name>
Date: Fri, 17 Jun 2022 17:18:56 -0700
Subject: [PATCH 1/3] Created new login-link interface.

Created an awu-login-link component to prompt the user for an interface.
Fixed the login-link worker to run in the worker environment properly
(jsonwebtoken doesn't work).  Wired up and verified to work correctly.
---
 .nvmrc                                      |   1 +
 frontend/config/dev/params.toml             |   1 +
 frontend/content/login.en.md                |  10 +
 frontend/layouts/_default/baseof.html       |   1 +
 frontend/layouts/shortcodes/login-link.html |   3 +
 frontend/src/element/login-link.ts          | 119 ++++++++++++
 frontend/src/element/signup.ts              |   2 +-
 frontend/src/index.ts                       |   1 +
 login-link-token-worker/package-lock.json   | 196 ++------------------
 login-link-token-worker/package.json        |   2 +-
 login-link-token-worker/src/handler.ts      |   2 +-
 login-link-token-worker/wrangler.toml       |  10 +-
 12 files changed, 161 insertions(+), 187 deletions(-)
 create mode 100644 .nvmrc
 create mode 100644 frontend/content/login.en.md
 create mode 100644 frontend/layouts/shortcodes/login-link.html
 create mode 100644 frontend/src/element/login-link.ts

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..5b9720f
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18.4.0
diff --git a/frontend/config/dev/params.toml b/frontend/config/dev/params.toml
index 7326c63..00b241a 100644
--- a/frontend/config/dev/params.toml
+++ b/frontend/config/dev/params.toml
@@ -2,3 +2,4 @@ stripe_key = 'pk_test_51I9k6TE1rwuQcCei5yDImwRkr5S6qIzakaDope6nrnEQcTn9CjqmosnWn
 signup_api = 'http://localhost:8787/'
 plaid_token_api = 'http://localhost:8788/'
 jwt_api = 'http://localhost:8789/'
+login_link_token_api = 'http://localhost:8790'
diff --git a/frontend/content/login.en.md b/frontend/content/login.en.md
new file mode 100644
index 0000000..fc84cb5
--- /dev/null
+++ b/frontend/content/login.en.md
@@ -0,0 +1,10 @@
+---
+title: 'Login to Alphabet Workers Union - Communication Workers of America Local 1400'
+linktitle: 'Login'
+date: 2020-12-13T21:12:44-08:00
+layout: textheavy
+---
+
+{{< header />}}
+
+{{< login-link >}}
diff --git a/frontend/layouts/_default/baseof.html b/frontend/layouts/_default/baseof.html
index 7186383..c350d47 100644
--- a/frontend/layouts/_default/baseof.html
+++ b/frontend/layouts/_default/baseof.html
@@ -20,6 +20,7 @@
       window.STRIPE_KEY = "{{- .Site.Params.stripe_key -}}";
       window.SIGNUP_API = "{{- .Site.Params.signup_api -}}";
       window.PLAID_TOKEN_API = "{{- .Site.Params.plaid_token_api -}}";
+      window.LOGIN_LINK_TOKEN_API = "{{- .Site.Params.login_link_token_api -}}";
     </script>
     <script async src="{{ (resources.Get "main.js" | resources.Fingerprint).Permalink }}"></script>
     <link rel="icon" type="image/png" href="/favicon.ico">
diff --git a/frontend/layouts/shortcodes/login-link.html b/frontend/layouts/shortcodes/login-link.html
new file mode 100644
index 0000000..5d333d8
--- /dev/null
+++ b/frontend/layouts/shortcodes/login-link.html
@@ -0,0 +1,3 @@
+<div class="signup-container">
+  <awu-login-link></awu-login-link>
+</div>
diff --git a/frontend/src/element/login-link.ts b/frontend/src/element/login-link.ts
new file mode 100644
index 0000000..b3a4ff0
--- /dev/null
+++ b/frontend/src/element/login-link.ts
@@ -0,0 +1,119 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  TemplateResult,
+  state,
+} from 'lit-element';
+import { query } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+
+import styles from './signup.scss';
+
+/**
+ * LoginLink element.
+ *
+ * Testing ACH:
+ * https://stripe.com/docs/ach#testing-ach
+ *
+ * Testing card:
+ * https://stripe.com/docs/testing#cards
+ */
+@customElement('awu-login-link')
+export class LoginLink extends LitElement {
+  static styles = styles;
+
+  @query('form')
+  form!: HTMLFormElement;
+
+  @state()
+  isLoading = false;
+  @state()
+  isComplete = false;
+
+  render(): TemplateResult {
+    return html`
+      <div class="completed ${classMap({ 'not-completed': !this.isComplete })}">
+        <h2>Check your inbox</h2>
+        <p>
+          If that email is associated with a membership, we will send you an
+          email with a login link.
+        </p>
+        <p>
+          If you don't get a link, make sure you entered the correct email
+          address. Otherwise, contact the Membership Committee at
+          <a href="mailto:membership@alphabetworkersunion.org"
+            >membership@alphabetworkersunion.org</a
+          >
+        </p>
+      </div>
+      <form
+        @submit=${this.submit}
+        class="form ${classMap({
+          disabled: this.isLoading,
+          complete: this.isComplete,
+        })}"
+      >
+        <h2>What is your email?</h2>
+        <label class="full-width">
+          <span class="hint"
+            >Enter the email address you used when you joined.</span
+          >
+          <input
+            name="email"
+            aria-label="Email"
+            required
+            autocomplete="email"
+          />
+        </label>
+        <div class="actions">
+          <span class="spacer"></span>
+          <button type="submit" class="primary submit">Submit</button>
+        </div>
+      </form>
+    `;
+  }
+
+  async submit(event: Event): Promise<void> {
+    event.preventDefault();
+
+    this.isLoading = true;
+    const body = new FormData(this.form);
+    const uid = crypto.randomUUID();
+    body.set('uid', uid);
+    try {
+      const result = await fetch(window.LOGIN_LINK_TOKEN_API, {
+        method: 'POST',
+        body,
+      });
+
+      if (result.ok) {
+        // TODO: save uid to cookie
+        this.isComplete = true;
+      } else {
+        const { error } = await result.json();
+        console.error(error);
+        throw error;
+      }
+      this.isComplete = true;
+    } catch (e) {
+      if (e) {
+        console.error(e);
+        alert(e);
+      }
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    LOGIN_LINK_TOKEN_API: string;
+  }
+
+  // TODO: update Typescript version to get randomUUID in the type def.
+  interface Crypto {
+    randomUUID(): string;
+  }
+}
diff --git a/frontend/src/element/signup.ts b/frontend/src/element/signup.ts
index fe7b5e8..67869d7 100644
--- a/frontend/src/element/signup.ts
+++ b/frontend/src/element/signup.ts
@@ -686,7 +686,7 @@ export class Signup extends LitElement {
               ${repeat(
                 this.availableRegions,
                 (regionData) => regionData[1],
-                (regionData, index) => html`
+                (regionData) => html`
                   <option value=${regionData[0]}>${regionData[0]}</option>
                 `
               )}
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index 7649e25..1828eba 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -5,6 +5,7 @@
 import './css/baseof.scss';
 import './element/home-slider';
 import './element/signup';
+import './element/login-link';
 
 import './img/logo.svg';
 import './img/logo-no-title.svg';
diff --git a/login-link-token-worker/package-lock.json b/login-link-token-worker/package-lock.json
index 8cb0afc..342009f 100644
--- a/login-link-token-worker/package-lock.json
+++ b/login-link-token-worker/package-lock.json
@@ -9,9 +9,9 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "@tsndr/cloudflare-worker-jwt": "^1.4.2",
         "eslint": "^8.13.0",
         "form-urlencoded": "^4.2.1",
-        "jsonwebtoken": "^8.5.1",
         "npm-run-all": "^4.1.5",
         "plaid": "^9.0.0-beta.13",
         "stripe": "^8.132.0"
@@ -183,6 +183,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tsndr/cloudflare-worker-jwt": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@tsndr/cloudflare-worker-jwt/-/cloudflare-worker-jwt-1.4.2.tgz",
+      "integrity": "sha512-Yn4gZNPa3cTaf1CWm0pjr5KFQPZLPeHxY9OHbV2gjj4bIOiLYryeCQIjGvqaxNDy7OVImLjNZREACpVdIslyFA=="
+    },
     "node_modules/@types/chai": {
       "version": "4.2.14",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.14.tgz",
@@ -1303,11 +1308,6 @@
         "isarray": "^1.0.0"
       }
     },
-    "node_modules/buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
-    },
     "node_modules/buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -2175,14 +2175,6 @@
         "stream-shift": "^1.0.0"
       }
     },
-    "node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -4561,51 +4553,6 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "node_modules/jsonwebtoken": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
-      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
-      "dependencies": {
-        "jws": "^3.2.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=4",
-        "npm": ">=1.4.28"
-      }
-    },
-    "node_modules/jsonwebtoken/node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
-    },
-    "node_modules/jwa": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "dependencies": {
-        "buffer-equal-constant-time": "1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "dependencies": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -4913,11 +4860,6 @@
       "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI=",
       "dev": true
     },
-    "node_modules/lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
-    },
     "node_modules/lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -4930,21 +4872,6 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
-    "node_modules/lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
-    },
-    "node_modules/lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
-    },
-    "node_modules/lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-    },
     "node_modules/lodash.isplainobject": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-3.2.0.tgz",
@@ -4956,11 +4883,6 @@
         "lodash.keysin": "^3.0.0"
       }
     },
-    "node_modules/lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
     "node_modules/lodash.keysin": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/lodash.keysin/-/lodash.keysin-3.0.8.tgz",
@@ -4976,11 +4898,6 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
-    "node_modules/lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
-    },
     "node_modules/log-symbols": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
@@ -6673,7 +6590,8 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "node_modules/safe-regex": {
       "version": "1.1.0",
@@ -6708,6 +6626,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -8786,6 +8705,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tsndr/cloudflare-worker-jwt": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@tsndr/cloudflare-worker-jwt/-/cloudflare-worker-jwt-1.4.2.tgz",
+      "integrity": "sha512-Yn4gZNPa3cTaf1CWm0pjr5KFQPZLPeHxY9OHbV2gjj4bIOiLYryeCQIjGvqaxNDy7OVImLjNZREACpVdIslyFA=="
+    },
     "@types/chai": {
       "version": "4.2.14",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.14.tgz",
@@ -9692,11 +9616,6 @@
         "isarray": "^1.0.0"
       }
     },
-    "buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
-    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -10431,14 +10350,6 @@
         "stream-shift": "^1.0.0"
       }
     },
-    "ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -12253,49 +12164,6 @@
         }
       }
     },
-    "jsonwebtoken": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
-      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
-      "requires": {
-        "jws": "^3.2.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isboolean": "^3.0.3",
-        "lodash.isinteger": "^4.0.4",
-        "lodash.isnumber": "^3.0.3",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.isstring": "^4.0.1",
-        "lodash.once": "^4.0.0",
-        "ms": "^2.1.1",
-        "semver": "^5.6.0"
-      },
-      "dependencies": {
-        "lodash.isplainobject": {
-          "version": "4.0.6",
-          "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-          "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
-        }
-      }
-    },
-    "jwa": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "requires": {
-        "buffer-equal-constant-time": "1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "jws": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "requires": {
-        "jwa": "^1.4.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -12526,11 +12394,6 @@
       "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI=",
       "dev": true
     },
-    "lodash.includes": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
-    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -12543,21 +12406,6 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
-    "lodash.isboolean": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
-    },
-    "lodash.isinteger": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
-    },
-    "lodash.isnumber": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-    },
     "lodash.isplainobject": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-3.2.0.tgz",
@@ -12569,11 +12417,6 @@
         "lodash.keysin": "^3.0.0"
       }
     },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-    },
     "lodash.keysin": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/lodash.keysin/-/lodash.keysin-3.0.8.tgz",
@@ -12589,11 +12432,6 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
-    "lodash.once": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
-    },
     "log-symbols": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
@@ -13935,7 +13773,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -13966,7 +13805,8 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
     },
     "semver-compare": {
       "version": "1.0.0",
diff --git a/login-link-token-worker/package.json b/login-link-token-worker/package.json
index 72a4ff7..50b8756 100644
--- a/login-link-token-worker/package.json
+++ b/login-link-token-worker/package.json
@@ -41,9 +41,9 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
+    "@tsndr/cloudflare-worker-jwt": "^1.4.2",
     "eslint": "^8.13.0",
     "form-urlencoded": "^4.2.1",
-    "jsonwebtoken": "^8.5.1",
     "npm-run-all": "^4.1.5",
     "plaid": "^9.0.0-beta.13",
     "stripe": "^8.132.0"
diff --git a/login-link-token-worker/src/handler.ts b/login-link-token-worker/src/handler.ts
index 6be4f2a..4a6e68d 100644
--- a/login-link-token-worker/src/handler.ts
+++ b/login-link-token-worker/src/handler.ts
@@ -1,6 +1,6 @@
 import { stripeClient } from './stripe';
 import { sendgridClient } from './sendgrid';
-import jwt from 'jsonwebtoken';
+import * as jwt from '@tsndr/cloudflare-worker-jwt';
 import Stripe from 'stripe';
 
 const ONE_HOUR_IN_SECONDS = 60 * 60;
diff --git a/login-link-token-worker/wrangler.toml b/login-link-token-worker/wrangler.toml
index 408d5da..9d3938f 100644
--- a/login-link-token-worker/wrangler.toml
+++ b/login-link-token-worker/wrangler.toml
@@ -1,14 +1,12 @@
 name = "jwt-worker"
-type = "webpack"
 account_id = "394d48aba686b2466fe12e540c5d9466"
 workers_dev = true
-route = ""
-zone_id = "ebdbcc9f178b7b36f9768e6ec55972d6"
-webpack_config = "webpack.config.js"
 vars = { PLAID_ORIGIN = "https://sandbox.plaid.com", SENDGRID_DYNAMIC_TEMPLATE="d-5d9795b1c27e4897b6bca60eb519450b", SIGNING_KEY = "secret" }
+main = "./src/index"
+compatibility_date = "2022-06-18"
 
 [dev]
-port = 8789
+port = 8790
 
 [env.production]
-vars = { PLAID_ORIGIN = "https://production.plaid.com" }
\ No newline at end of file
+vars = { PLAID_ORIGIN = "https://production.plaid.com" }

From eb6ad2a03329f2185b841d123026ff804b87d889 Mon Sep 17 00:00:00 2001
From: Jonah Dahlquist <hi@jonah.name>
Date: Fri, 20 Jan 2023 19:15:38 -0800
Subject: [PATCH 2/3] Temporary Canada bank-not-supported message

Rolled back Node version to one supported by Cloudflare.
---
 .nvmrc                           |  2 +-
 frontend/src/element/signup.scss |  7 +++++++
 frontend/src/element/signup.ts   | 26 +++++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/.nvmrc b/.nvmrc
index 5b9720f..e65243f 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.4.0
+16.19.0
diff --git a/frontend/src/element/signup.scss b/frontend/src/element/signup.scss
index 1840e47..516889a 100644
--- a/frontend/src/element/signup.scss
+++ b/frontend/src/element/signup.scss
@@ -214,6 +214,13 @@ button {
   font-size: 20px;
 }
 
+button[disabled] {
+  border-color: constants.$gray-80;
+  color: constants.$gray-80;
+  opacity: 0.7;
+  cursor: default;
+}
+
 .invalidatable {
   input:invalid,
   select:invalid {
diff --git a/frontend/src/element/signup.ts b/frontend/src/element/signup.ts
index 67869d7..63543ad 100644
--- a/frontend/src/element/signup.ts
+++ b/frontend/src/element/signup.ts
@@ -211,6 +211,10 @@ export class Signup extends LitElement {
 
   cardElement: StripeCardElement;
 
+  // TODO(#208): Temporary until bank accounts are supported for Canada.
+  @state()
+  protected bankSupported = true;
+
   @state()
   protected paymentMethod: 'bank' | 'card' | 'plaid' = 'plaid';
 
@@ -329,15 +333,28 @@ export class Signup extends LitElement {
 
   private paymentTemplate(): TemplateResult {
     return html` <h2>Payment</h2>
-
+      ${this.bankSupported
+        ? ''
+        : html` <div class="field full-width">
+            <div class="title">
+              Currently only card payment is supported in Canada. Please email
+              <a href="mailto:operations@alphabetworkersunion.org">
+                operations@alphabetworkersunion.org</a
+              >
+              after you've completed sign-up and we can manually switch you over
+              to bank payment if you prefer.
+            </div>
+          </div>`}
       <div class="payment-method-toggle full-width">
         <button
+          ?disabled=${!this.bankSupported}
           class=${classMap({ selected: this.isMethod('plaid') })}
           @click=${this.setMethod('plaid')}
         >
           Bank account
         </button>
         <button
+          ?disabled=${!this.bankSupported}
           class=${classMap({ selected: this.isMethod('bank') })}
           @click=${this.setMethod('bank')}
         >
@@ -1163,6 +1180,13 @@ export class Signup extends LitElement {
     if (this.billingCountry != null) {
       this.billingCountry.value = this.mailingCountry.value;
     }
+    // TODO(#208): Temporary until bank accounts are supported for Canada.
+    if (this.mailingCountry.value === 'Canada') {
+      this.paymentMethod = 'card';
+      this.bankSupported = false;
+    } else {
+      this.bankSupported = true;
+    }
     this.requestUpdate();
   }
 

From 8d7aec451ce20c794eab94922f2dc28ecfda900a Mon Sep 17 00:00:00 2001
From: Jonah Dahlquist <hi@jonah.name>
Date: Sun, 22 Jan 2023 13:42:20 -0800
Subject: [PATCH 3/3] Incorporated feedback rewording.  Removed appeal to use a
 bank when no bank is supported.

---
 frontend/src/element/signup.ts | 182 +++++++++++++++++----------------
 1 file changed, 93 insertions(+), 89 deletions(-)

diff --git a/frontend/src/element/signup.ts b/frontend/src/element/signup.ts
index 63543ad..7c2f75e 100644
--- a/frontend/src/element/signup.ts
+++ b/frontend/src/element/signup.ts
@@ -337,12 +337,13 @@ export class Signup extends LitElement {
         ? ''
         : html` <div class="field full-width">
             <div class="title">
-              Currently only card payment is supported in Canada. Please email
+              We cannot register Canadian bank payments from this form yet. If
+              you would like to pay with bank withdrawal, please register with a
+              card and, once you've done so, email
               <a href="mailto:operations@alphabetworkersunion.org">
                 operations@alphabetworkersunion.org</a
               >
-              after you've completed sign-up and we can manually switch you over
-              to bank payment if you prefer.
+              to be sent a secure link to update to bank payments.
             </div>
           </div>`}
       <div class="payment-method-toggle full-width">
@@ -426,92 +427,95 @@ export class Signup extends LitElement {
       </div>
     </label>`;
 
-  private readonly cardTemplate: TemplateResult = html`<div
-      class="field full-width"
-    >
-      <span class="title">Card details</span>
-      <span class="hint">
-        <em>Please consider using a bank account to pay dues.</em> This both
-        saves you the ${FRIENDLY_CARD_PROCESSING_FEE} processing fee charge, and
-        also your union's administrative overhead by saving the work of getting
-        updated payment information when cards expire or are cancelled.
-      </span>
-      <div class="card-container">
-        <slot
-          name="stripe-card-container"
-          @slotchange=${this.rebindStripeElement}
-        ></slot>
+  private cardTemplate(): TemplateResult {
+    return html`<div class="field full-width">
+        <span class="title">Card details</span>
+        <span class="hint">
+          ${this.bankSupported
+            ? html` <em>Please consider using a bank account to pay dues.</em>
+                This both saves you the ${FRIENDLY_CARD_PROCESSING_FEE}
+                processing fee charge, and also your union's administrative
+                overhead by saving the work of getting updated payment
+                information when cards expire or are cancelled.`
+            : ''}
+        </span>
+        <div class="card-container">
+          <slot
+            name="stripe-card-container"
+            @slotchange=${this.rebindStripeElement}
+          ></slot>
+        </div>
       </div>
-    </div>
-    <label>
-      <span class="title">Card holder name</span>
-      <span class="hint"></span>
-      <input
-        name="card-holder-name"
-        aria-label="Card holder name"
-        required
-        autocomplete="cc-name"
-      />
-    </label>
-    <label>
-      <span class="title">Billing street address</span>
-      <span class="hint"></span>
-      <input
-        name="billing-address-1"
-        aria-label="Address line 1"
-        required
-        autocomplete="address-line1"
-      />
-    </label>
-    <label>
-      <span class="title">Billing street line 2</span>
-      <span class="hint"></span>
-      <input
-        name="billing-address-2"
-        aria-label="Address line 2"
-        autocomplete="address-line2"
-      />
-    </label>
-    <label>
-      <span class="title">Billing city</span>
-      <span class="hint"></span>
-      <input
-        name="billing-city"
-        aria-label="Billing City"
-        required
-        autocomplete="address-level2"
-      />
-    </label>
-    <label>
-      <span class="title">Billing state</span>
-      <span class="hint"></span>
-      <input
-        name="billing-state"
-        aria-label="Billing State"
-        required
-        autocomplete="address-level1"
-      />
-    </label>
-    <label>
-      <span class="title">Billing postal code</span>
-      <span class="hint"></span>
-      <input
-        name="billing-zip"
-        aria-label="Billing Postal Code"
-        required
-        autocomplete="postal-code"
-      />
-    </label>
-    <label>
-      <span class="title">Billing country</span>
-      <span class="hint"></span>
-      <input
-        name="billing-country"
-        aria-label="Billing Country"
-        required
-        autocomplete="country"
-      />
-    </label>`;
+      <label>
+        <span class="title">Card holder name</span>
+        <span class="hint"></span>
+        <input
+          name="card-holder-name"
+          aria-label="Card holder name"
+          required
+          autocomplete="cc-name"
+        />
+      </label>
+      <label>
+        <span class="title">Billing street address</span>
+        <span class="hint"></span>
+        <input
+          name="billing-address-1"
+          aria-label="Address line 1"
+          required
+          autocomplete="address-line1"
+        />
+      </label>
+      <label>
+        <span class="title">Billing street line 2</span>
+        <span class="hint"></span>
+        <input
+          name="billing-address-2"
+          aria-label="Address line 2"
+          autocomplete="address-line2"
+        />
+      </label>
+      <label>
+        <span class="title">Billing city</span>
+        <span class="hint"></span>
+        <input
+          name="billing-city"
+          aria-label="Billing City"
+          required
+          autocomplete="address-level2"
+        />
+      </label>
+      <label>
+        <span class="title">Billing state</span>
+        <span class="hint"></span>
+        <input
+          name="billing-state"
+          aria-label="Billing State"
+          required
+          autocomplete="address-level1"
+        />
+      </label>
+      <label>
+        <span class="title">Billing postal code</span>
+        <span class="hint"></span>
+        <input
+          name="billing-zip"
+          aria-label="Billing Postal Code"
+          required
+          autocomplete="postal-code"
+        />
+      </label>
+      <label>
+        <span class="title">Billing country</span>
+        <span class="hint"></span>
+        <input
+          name="billing-country"
+          aria-label="Billing Country"
+          required
+          autocomplete="country"
+        />
+      </label>`;
+  }
 
   private readonly plaidTemplate = html` <div class="field full-width">
     <span class="title">Connect bank</span>
@@ -1271,7 +1275,7 @@ export class Signup extends LitElement {
       case 'bank':
         return this.bankTemplate;
       case 'card':
-        return this.cardTemplate;
+        return this.cardTemplate();
       case 'plaid':
         return this.plaidTemplate;
     }