feat: implement login auth for all

also show the username underneath the logo

src/Login.tsx

@@ -1,6 +1,6 @@
-import { FormEvent, useContext, useState } from "react";
-import { useNavigate } from "react-router";
-import { currentUser, login, LoginRequest, User } from "./api";
+import { useState } from "react";
+import { currentUser, login, User } from "./api";
+import Header from "./Header";
 
 export interface LoginProps {
   onLogin: (user: User) => void;
@@ -15,72 +15,58 @@ export const Login = ({ onLogin }: LoginProps) => {
   async function doLogin() {
     setLoading(true);
     setError(null);
-    const timeout = new Promise((r) => setTimeout(r, 1500));
+    const timeout = new Promise((r) => setTimeout(r, 1000));
     let user: User;
     try {
-      login({ username, password });
+      await login({ username, password });
       user = await currentUser();
     } catch (e) {
       await timeout;
       setError(e);
       setLoading(false);
-      return
+      return;
     }
-
     await timeout;
     onLogin(user);
   }
 
-  function handleClick() {
-    doLogin();
-  }
-
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     doLogin();
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
-      </div>
-      <div>
-        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
-      </div>
-      <button type="submit" value="login" style={{ fontSize: "small" }} onClick={handleClick} >login</button>
-      {loading && <span className="loader" />}
-    </form>
-  )
-}
-
-/*
-export default function Login(props: { onLogin: (user: User) => void }) {
-  const { onLogin } = props;
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  async function handleLogin(e: FormEvent) {
-    e.preventDefault()
-    const timeout = new Promise((r) => setTimeout(r, 1500));
-    let user: User;
-    try {
-      login({ username, password })
-      user = await currentUser()
-    } catch (e) { await timeout; return }
-    await timeout;
-    onLogin(user);
-  }
-
-  return <div>
-    <form onSubmit={handleLogin}>
-      <div>
-        <input type="text" id="username" name="username" placeholder="username" required value={username} onChange={evt => setUsername(evt.target.value)} />
-      </div>
-      <div>
-        <input type="password" id="password" name="password" placeholder="password" minLength={8} value={password} required onChange={evt => setPassword(evt.target.value)} />
-      </div>
-      <input className="button" type="submit" value="login" onSubmit={handleLogin} />
-    </form>
-  </div>
-} */
+    <>
+      <Header />
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="username"
+            required
+            value={username}
+            onChange={(evt) => setUsername(evt.target.value)}
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="password"
+            minLength={8}
+            value={password}
+            required
+            onChange={(evt) => setPassword(evt.target.value)}
+          />
+        </div>
+        <button type="submit" value="login" style={{ fontSize: "small" }}>
+          login
+        </button>
+        {loading && <span className="loader" />}
+      </form>
+    </>
+  );
+};