initial commit, boilerplate stuff

src/pages/UserRegister.tsx

@@ -0,0 +1,88 @@
+import { SubmitEvent, useState } from "react";
+import { useNavigate } from "react-router";
+
+import { API_URL } from "../config/api.ts";
+
+import { useAuth } from "../hooks/useAuth.ts";
+
+type UserRegisterState =
+  | { status: "idle" }
+  | { status: "submitting" }
+  | { status: "error"; error: string };
+
+export function UserRegister() {
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const [state, setState] = useState<UserRegisterState>({ status: "idle" });
+
+  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setState({ status: "submitting" });
+
+    const formData = new FormData(e.currentTarget);
+    const username = formData.get("username");
+    const password = formData.get("password");
+
+    try {
+      const res = await fetch(`${API_URL}/api/users/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+
+      const apiResponse = await res.json();
+
+      if (apiResponse.success) {
+        login(apiResponse.data);
+        navigate("/");
+      } else {
+        setState({
+          status: "error",
+          error: apiResponse.error.message,
+        });
+      }
+    } catch (err) {
+      setState({
+        status: "error",
+        error: err instanceof Error ? err.message : "Registration failed.",
+      });
+    }
+  };
+
+  return (
+    <div className="registration-container">
+      {state.status === "error" && (
+        <div className="error-banner">{state.error}</div>
+      )}
+
+      <form onSubmit={handleSubmit} className="registration-form">
+        <input
+          name="username"
+          type="text"
+          placeholder="Username"
+          required
+          disabled={state.status === "submitting"}
+        />
+        <input
+          name="password"
+          type="password"
+          placeholder="Password"
+          required
+          disabled={state.status === "submitting"}
+        />
+        <button
+          type="submit"
+          disabled={state.status === "submitting"}
+        >
+          {state.status === "submitting" ? "Registering..." : "Register"}
+        </button>
+      </form>
+    </div>
+  );
+}