65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
import { Link, Navigate } from "react-router-dom";
|
|
import { useAuth } from "../state/AuthContext";
|
|
|
|
export default function Login() {
|
|
const { login, user, loading } = useAuth();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
if (!loading && user) return <Navigate to="/game" replace />;
|
|
|
|
async function onSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setError("");
|
|
setBusy(true);
|
|
try {
|
|
await login(email, password);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Login failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="auth-page">
|
|
<div className="auth-mist" aria-hidden />
|
|
<form className="auth-panel" onSubmit={onSubmit}>
|
|
<p className="brand">Soulless Necromancer</p>
|
|
<h1>Return to the wake</h1>
|
|
<p className="lede">Sign in to reclaim your army.</p>
|
|
{error && <p className="error">{error}</p>}
|
|
<label>
|
|
Email
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
autoComplete="email"
|
|
/>
|
|
</label>
|
|
<label>
|
|
Password
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
autoComplete="current-password"
|
|
/>
|
|
</label>
|
|
<button type="submit" disabled={busy}>
|
|
{busy ? "Binding..." : "Enter"}
|
|
</button>
|
|
<p className="auth-switch">
|
|
No vessel yet? <Link to="/register">Register</Link>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|