Disable bank for CAD

.nvmrc

@@ -0,0 +1 @@
+18.4.0

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'

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 >}}

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">

frontend/layouts/shortcodes/login-link.html

@@ -0,0 +1,3 @@
+<div class="signup-container">
+  <awu-login-link></awu-login-link>
+</div>

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:[email protected]"
+            >[email protected]</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;
+  }
+}

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>
                 `
               )}

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';