feat: setup for setting first password

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