Make a separate login page and protect assets.

assets/login.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap HTML Example</title>
+    <link href="server_assets/bootstrap.css" rel="stylesheet">
+    <style>
+      .vert-padded {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div>
+      <div class="container vert-padded">
+        <form id="loginForm">
+          <div class="mb-3">
+            <label for="passwordForm" class="form-label">Password</label>
+            <input name="password" type="password" class="form-control" id="passwordForm" />
+          </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+      </div>
+    </div>
+
+    <script>
+      console.log("Hello");
+      document.getElementById('loginForm').addEventListener('submit', async (event) => {
+        console.log("submit");
+        event.preventDefault();
+
+        console.log(event.target);
+        const formEntries = new FormData(event.target);
+        const formData = Object.fromEntries(formEntries);
+        console.log(formData);
+
+        const resp = await fetch("/api/login", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        if (resp.redirected) {
+            window.location.assign("/");
+        }
+      });
+    </script>
+    <script src="server_assets/bootstrap.bundle.js"</script>
+  </body>
+</html>