kitos
106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuth } from "../context/AuthContext";
|
|
|
|
export default function LoginPage() {
|
|
const { login, isAuthenticated } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// If already logged in, redirect immediately
|
|
if (isAuthenticated) {
|
|
navigate("/dashboard", { replace: true });
|
|
return null;
|
|
}
|
|
|
|
async function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
try {
|
|
await login(username, password);
|
|
navigate("/dashboard", { replace: true });
|
|
} catch {
|
|
setError("Invalid username or password");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-950 px-4">
|
|
<div className="w-full max-w-sm space-y-8">
|
|
{/* Logo */}
|
|
<div className="flex flex-col items-center gap-3">
|
|
<img src="/aegis-logo.png" alt="Aegis" className="h-16 w-16 rounded-full" />
|
|
<h1 className="text-2xl font-bold tracking-wide text-white">
|
|
Aegis
|
|
</h1>
|
|
<p className="text-sm text-gray-400">
|
|
MITRE ATT&CK Coverage Platform
|
|
</p>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div>
|
|
<label
|
|
htmlFor="username"
|
|
className="mb-1.5 block text-sm font-medium text-gray-300"
|
|
>
|
|
Username
|
|
</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
required
|
|
autoFocus
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
|
placeholder="admin"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="mb-1.5 block text-sm font-medium text-gray-300"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-white placeholder-gray-500 outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-400">
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:opacity-50"
|
|
>
|
|
{loading ? "Signing in…" : "Sign in"}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|