73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { FormEvent, useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { toast } from "sonner";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
|
||
import { Button } from "../components/ui/button";
|
||
import { Input } from "../components/ui/input";
|
||
import { Label } from "../components/ui/label";
|
||
import { useAuth } from "../providers/auth-provider";
|
||
import { ThemeToggle } from "../components/ThemeToggle";
|
||
|
||
export function LoginPage() {
|
||
const { login } = useAuth();
|
||
const navigate = useNavigate();
|
||
const [username, setUsername] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleSubmit = async (e: FormEvent) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
try {
|
||
await login(username, password);
|
||
navigate("/admin", { replace: true });
|
||
} catch (err) {
|
||
toast.error("Giriş başarısız. Bilgileri kontrol edin.");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-background px-4">
|
||
<div className="absolute right-6 top-6">
|
||
<ThemeToggle />
|
||
</div>
|
||
<Card className="w-full max-w-md border-border card-shadow">
|
||
<CardHeader>
|
||
<CardTitle>Yönetici Girişi</CardTitle>
|
||
<CardDescription>Panel erişimi için bilgilerinizi girin.</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form className="space-y-4" onSubmit={handleSubmit}>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="username">Kullanıcı adı</Label>
|
||
<Input
|
||
id="username"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
placeholder="admin"
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password">Şifre</Label>
|
||
<Input
|
||
id="password"
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="••••••••"
|
||
required
|
||
/>
|
||
</div>
|
||
<Button type="submit" className="w-full" disabled={loading}>
|
||
{loading ? "Giriş yapılıyor..." : "Giriş Yap"}
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|