feat: set first password page

src/App.tsx

@@ -7,21 +7,29 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
-import Avatar from "./Avatar";
+import { SetPassword } from "./SetPassword";
 
 function App() {
   return (
     <BrowserRouter>
-      <SessionProvider>
-        <Header />
-        <Routes>
-          <Route index element={<Rankings />} />
-          <Route path="/network" element={<GraphComponent />} />
-          <Route path="/analysis" element={<Analysis />} />
-          <Route path="/mvp" element={<MVPChart />} />
-        </Routes>
-        <Footer />
-      </SessionProvider>
+      <Routes>
+        <Route path="/password" element={<SetPassword />} />
+        <Route
+          index
+          element={
+            <SessionProvider>
+              <Header />
+              <Routes>
+                <Route index element={<Rankings />} />
+                <Route path="/network" element={<GraphComponent />} />
+                <Route path="/analysis" element={<Analysis />} />
+                <Route path="/mvp" element={<MVPChart />} />
+              </Routes>
+              <Footer />
+            </SessionProvider>
+          }
+        />
+      </Routes>
     </BrowserRouter>
   );
 }

src/SetPassword.tsx

@@ -0,0 +1,96 @@
+import { jwtDecode } from "jwt-decode";
+import { useEffect, useState } from "react";
+import { baseUrl } from "./api";
+import { Navigate, useNavigate } from "react-router";
+
+export const SetPassword = () => {
+  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);
+    }
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password === passwordr) {
+      setLoading(true);
+      const req = new Request(`${baseUrl}api/set_password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ token: token, password: password }),
+      });
+      let resp: Response;
+      try {
+        resp = await fetch(req);
+      } catch (e) {
+        throw new Error(`request failed: ${e}`);
+      }
+
+      if (!resp.ok) {
+        if (resp.status === 401) {
+          setError("unauthorized");
+          setLoading(false);
+          throw new Error("Unauthorized");
+        }
+      } else navigate("/");
+    } else setError("passwords are not the same");
+  }
+
+  return (
+    <>
+      <h2>set your password, {username}</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="password"
+            minLength={8}
+            value={password}
+            required
+            onChange={(evt) => {
+              setError("");
+              setPassword(evt.target.value);
+            }}
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            id="password-repeat"
+            name="password-repeat"
+            placeholder="repeat password"
+            minLength={8}
+            value={passwordr}
+            required
+            onChange={(evt) => {
+              setError("");
+              setPasswordr(evt.target.value);
+            }}
+          />
+        </div>
+        <div>{error && <span style={{ color: "red" }}>{error}</span>}</div>
+        <button type="submit" value="login" style={{ fontSize: "small" }}>
+          login
+        </button>
+        {loading && <span className="loader" />}
+      </form>
+    </>
+  );
+};