feat: setup for setting first password

src/Login.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { currentUser, login, User } from "./api";
 import Header from "./Header";
 
@@ -9,12 +9,12 @@ export interface LoginProps {
 export const Login = ({ onLogin }: LoginProps) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState<unknown>(null);
+  const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
   async function doLogin() {
     setLoading(true);
-    setError(null);
+    setError("");
     const timeout = new Promise((r) => setTimeout(r, 1000));
     let user: User;
     try {
@@ -22,7 +22,7 @@ export const Login = ({ onLogin }: LoginProps) => {
       user = await currentUser();
     } catch (e) {
       await timeout;
-      setError(e);
+      setError("failed");
       setLoading(false);
       return;
     }
@@ -35,6 +35,14 @@ export const Login = ({ onLogin }: LoginProps) => {
     doLogin();
   }
 
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const queryUsername = params.get("username");
+    const queryPassword = params.get("password");
+    if (queryUsername) setUsername(queryUsername);
+    if (queryPassword) setPassword(queryPassword);
+  }, []);
+
   return (
     <>
       <Header />
@@ -47,7 +55,10 @@ export const Login = ({ onLogin }: LoginProps) => {
             placeholder="username"
             required
             value={username}
-            onChange={(evt) => setUsername(evt.target.value)}
+            onChange={(evt) => {
+              setError("");
+              setUsername(evt.target.value);
+            }}
           />
         </div>
         <div>
@@ -59,9 +70,13 @@ export const Login = ({ onLogin }: LoginProps) => {
             minLength={8}
             value={password}
             required
-            onChange={(evt) => setPassword(evt.target.value)}
+            onChange={(evt) => {
+              setError("");
+              setPassword(evt.target.value);
+            }}
           />
         </div>
+        <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
         <button type="submit" value="login" style={{ fontSize: "small" }}>
           login
         </button>