93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
|
import {useState, ChangeEvent} from "react";
|
||
|
|
import {useNavigate} from "react-router-dom";
|
||
|
|
import {useAuth} from "@/context/AuthContext";
|
||
|
|
|
||
|
|
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
|
||
|
|
import {Input} from "@/components/ui/input";
|
||
|
|
import {Label} from "@/components/ui/label";
|
||
|
|
import {Button} from "@/components/ui/button";
|
||
|
|
|
||
|
|
export default function Login() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const {login} = useAuth();
|
||
|
|
|
||
|
|
const [username, setUsername] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [error, setError] = useState("");
|
||
|
|
|
||
|
|
async function handleLogin() {
|
||
|
|
try {
|
||
|
|
setLoading(true);
|
||
|
|
setError("");
|
||
|
|
|
||
|
|
await login(username, password);
|
||
|
|
|
||
|
|
navigate("/dashboard");
|
||
|
|
} catch (err) {
|
||
|
|
setError("Invalid credentials");
|
||
|
|
}
|
||
|
|
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex min-h-screen items-center justify-center bg-slate-100">
|
||
|
|
<Card className="w-[420px] shadow-xl border">
|
||
|
|
<CardHeader className="space-y-1 text-center">
|
||
|
|
<CardTitle className="text-2xl font-semibold">Admin Login</CardTitle>
|
||
|
|
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Enter your credentials to access the dashboard
|
||
|
|
</p>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardContent className="space-y-5">
|
||
|
|
{error && (
|
||
|
|
<div className="p-3 text-sm text-red-600 bg-red-100 rounded-md">
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="username">Username</Label>
|
||
|
|
|
||
|
|
<Input
|
||
|
|
id="username"
|
||
|
|
placeholder="Enter username"
|
||
|
|
value={username}
|
||
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||
|
|
setUsername(e.target.value)
|
||
|
|
}
|
||
|
|
disabled={loading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="password">Password</Label>
|
||
|
|
|
||
|
|
<Input
|
||
|
|
id="password"
|
||
|
|
type="password"
|
||
|
|
placeholder="Enter password"
|
||
|
|
value={password}
|
||
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||
|
|
setPassword(e.target.value)
|
||
|
|
}
|
||
|
|
disabled={loading}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
onClick={handleLogin}
|
||
|
|
className="w-full"
|
||
|
|
disabled={loading || !username || !password}
|
||
|
|
>
|
||
|
|
{loading ? "Logging in..." : "Login"}
|
||
|
|
</Button>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|