login flow through ui

roc_fnb/website/templates/login.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %} {% block content %}
+
+<script>
+  document.addEventListener("readystatechange", () => {
+    if (document.readyState === "complete") {
+      /**
+       * @type {HTMLInputElement}
+       */
+      const nameInput = document.getElementById("input-name");
+      /**
+       * @type {HTMLInputElement}
+       */
+      const passwordInput = document.getElementById("input-password");
+      /**
+       * @type {HTMLButtonElement}
+       */
+      const button = document.getElementById("submit-button");
+      button.addEventListener("click", async (event) => {
+        const name = nameInput.value;
+        const password = passwordInput.value;
+        const result = await fetch("/login", {
+          method: "POST",
+          body: JSON.stringify({ name, password }),
+          headers: {'Content-Type': 'application/json'}
+        });
+        if (result.ok) {
+          window.location = '/me'
+        } else {
+          console.dir(result)
+          // TODO handle error!
+        }
+      });
+    }
+  });
+</script>
+
+<img
+  id="biglogo"
+  class="spinny"
+  onclick="start_animation()"
+  src="logo.png"
+  alt="logo"
+/>
+<h1>Rochester Food Not Bombs!</h1>
+
+<h3>Login:</h3>
+
+<div>
+  <label for="name">Your name</label>
+  <input type="text" id="input-name" />
+</div>
+<div>
+  <label for="password">Your password</label>
+  <input type="password" id="input-password" />
+</div>
+<div>
+  <button id="submit-button" type="submit">Log in</button>
+</div>
+
+{% endblock %}