feat(15-03): rewrite login page and auth hooks for OIDC

- Login page redirects to Logto instead of showing credential form
- AuthState uses string id (Logto sub claim) instead of number
- Remove useLogin, useSetup, useChangePassword hooks
- useLogout redirects to /logout (server-side OIDC logout)
- Remove ChangePasswordSection from settings page
- Update UserMenu to use new useLogout API
- Settings page shows API keys section when authenticated

src/client/routes/login.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
-import { useAuth, useLogin, useSetup } from "../hooks/useAuth";
+import { useEffect } from "react";
+import { useAuth } from "../hooks/useAuth";
 
 export const Route = createFileRoute("/login")({
 	component: LoginPage,
@@ -8,96 +8,42 @@ export const Route = createFileRoute("/login")({
 
 function LoginPage() {
 	const navigate = useNavigate();
-	const { data: auth } = useAuth();
-	const login = useLogin();
-	const setup = useSetup();
+	const { data: auth, isLoading } = useAuth();
 
-	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 });
-			}
+	useEffect(() => {
+		if (auth?.authenticated) {
 			navigate({ to: "/" });
-		} catch (err) {
-			setError((err as Error).message);
 		}
-	}
+	}, [auth, navigate]);
 
-	const isPending = login.isPending || setup.isPending;
+	if (isLoading) {
+		return (
+			<div className="min-h-screen bg-gray-50 flex items-center justify-center">
+				<p className="text-gray-500 text-sm">Loading...</p>
+			</div>
+		);
+	}
 
 	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"}
+					Sign in to GearBox
 				</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>}
-
+				<div className="bg-white rounded-xl border border-gray-100 p-6 space-y-4">
+					<p className="text-sm text-gray-500 text-center">
+						You will be redirected to sign in with your account.
+					</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"
+						type="button"
+						onClick={() => {
+							window.location.href = "/login";
+						}}
+						className="w-full py-2 px-4 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
 					>
-						{isPending ? "..." : isSetup ? "Create Account" : "Sign In"}
+						Sign In
 					</button>
-				</form>
+				</div>
 			</div>
 		</div>
 	);