105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
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>
|
|
);
|
|
}
|