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>

src/SetPassword.tsx

@@ -1,25 +1,36 @@
-import { jwtDecode } from "jwt-decode";
+import { InvalidTokenError, jwtDecode, JwtPayload } from "jwt-decode";
 import { useEffect, useState } from "react";
 import { baseUrl } from "./api";
-import { Navigate, useNavigate } from "react-router";
+import { redirect, useNavigate } from "react-router";
+
+interface SetPassToken extends JwtPayload {
+  name: string;
+}
 
 export const SetPassword = () => {
+  const [name, setName] = useState("after getting your token.");
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [passwordr, setPasswordr] = useState("");
   const [token, setToken] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-
   const navigate = useNavigate();
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const token = params.get("token");
     if (token) {
       setToken(token);
-      const payload = jwtDecode(token);
-      payload.sub && setUsername(payload.sub);
-      console.log(payload);
+      try {
+        const payload = jwtDecode<SetPassToken>(token);
+        if (payload.name) setName(payload.name);
+        else if (payload.sub) setName(payload.sub);
+        else setName("Mr. I-have-no Token");
+        payload.sub && setUsername(payload.sub);
+      } catch (InvalidTokenError) {
+        setName("Mr. I-have-no-valid Token");
+      }
     }
   }, []);
 
@@ -40,20 +51,39 @@ export const SetPassword = () => {
       } catch (e) {
         throw new Error(`request failed: ${e}`);
       }
+      setLoading(false);
+
+      if (resp.ok) {
+        console.log(resp);
+        navigate({
+          pathname: "/",
+          search: `?username=${encodeURI(username)}&password=${encodeURI(password)}`,
+        });
+      }
 
       if (!resp.ok) {
         if (resp.status === 401) {
-          setError("unauthorized");
-          setLoading(false);
+          resp.statusText
+            ? setError(resp.statusText)
+            : setError("unauthorized");
           throw new Error("Unauthorized");
         }
-      } else navigate("/");
+      }
     } else setError("passwords are not the same");
   }
 
   return (
     <>
-      <h2>set your password, {username}</h2>
+      <h2>
+        set your password,
+        <br />
+        {name}
+      </h2>
+      {username && (
+        <span>
+          your username is: <i>{username}</i>
+        </span>
+      )}
       <form onSubmit={handleSubmit}>
         <div>
           <input