feat: add useAuth hook and login page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 13:27:23 +02:00
parent 66dc8ec8ee
commit 87a367d41b
3 changed files with 222 additions and 0 deletions
--- a/src/client/routes/login.tsx
+++ b/src/client/routes/login.tsx
@@ -0,0 +1,104 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useAuth, useLogin, useSetup } from "../hooks/useAuth";
+
+export const Route = createFileRoute("/login")({
+	component: LoginPage,
+});
+
+function LoginPage() {
+	const navigate = useNavigate();
+	const { data: auth } = useAuth();
+	const login = useLogin();
+	const setup = useSetup();
+
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
+
+	const isSetup = auth?.setupRequired ?? false;
+
+	async function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setError("");
+
+		try {
+			if (isSetup) {
+				await setup.mutateAsync({ username, password });
+			} else {
+				await login.mutateAsync({ username, password });
+			}
+			navigate({ to: "/" });
+		} catch (err) {
+			setError((err as Error).message);
+		}
+	}
+
+	const isPending = login.isPending || setup.isPending;
+
+	return (
+		<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+			<div className="w-full max-w-sm">
+				<h1 className="text-xl font-semibold text-gray-900 text-center mb-6">
+					{isSetup ? "Create Account" : "Sign In"}
+				</h1>
+
+				<form
+					onSubmit={handleSubmit}
+					className="bg-white rounded-xl border border-gray-100 p-6 space-y-4"
+				>
+					{isSetup && (
+						<p className="text-sm text-gray-500">
+							Create your admin account to manage your gear collection.
+						</p>
+					)}
+
+					<div>
+						<label
+							htmlFor="username"
+							className="block text-sm font-medium text-gray-700 mb-1"
+						>
+							Username
+						</label>
+						<input
+							id="username"
+							type="text"
+							value={username}
+							onChange={(e) => setUsername(e.target.value)}
+							required
+							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+						/>
+					</div>
+
+					<div>
+						<label
+							htmlFor="password"
+							className="block text-sm font-medium text-gray-700 mb-1"
+						>
+							Password
+						</label>
+						<input
+							id="password"
+							type="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							required
+							minLength={isSetup ? 6 : undefined}
+							className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
+						/>
+					</div>
+
+					{error && <p className="text-sm text-red-600">{error}</p>}
+
+					<button
+						type="submit"
+						disabled={isPending}
+						className="w-full py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 disabled:opacity-50 rounded-lg transition-colors"
+					>
+						{isPending ? "..." : isSetup ? "Create Account" : "Sign In"}
+					</button>
+				</form>
+			</div>
+		</div>
+	);
+}