cutt/src/SetPassword.tsx

import { InvalidTokenError, jwtDecode, JwtPayload } from "jwt-decode";
import { useEffect, useState } from "react";
import { baseUrl } from "./api";
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);
      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");
      }
    }
  }, []);

  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}`);
      }
      setLoading(false);

      if (resp.ok) {
        console.log(resp);
        navigate("/", {
          replace: true,
          state: { username: username, password: password },
        });
      }

      if (!resp.ok) {
        if (resp.status === 401) {
          const { detail } = await resp.json();
          if (detail) setError(detail);
          else setError("unauthorized");
          throw new Error("Unauthorized");
        }
      }
    } else setError("passwords are not the same");
  }

  return (
    <>
      <h2>
        set your password,
        <br />
        {name}
      </h2>
      {username && (
        <span>
          your username is: <i>{username}</i>
        </span>
      )}
      <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>
    </>
  );
};