711fbdc92c
- /login route did not exist, so /admin redirected to /api/login -> /login -> 404 - /api/auth/user still ran the Replit-era deterministic UUID hash on the session id, so it never found the user; now reads the session directly - admin logout posts to /api/auth/logout and returns to /login
90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
import { useLocation } from "wouter";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Loader2, LogIn } from "lucide-react";
|
|
|
|
export default function LoginPage() {
|
|
const [, navigate] = useLocation();
|
|
const queryClient = useQueryClient();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
async function submit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError("");
|
|
setBusy(true);
|
|
try {
|
|
const res = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify({ email: email.trim(), password }),
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body.error || "Anmeldung fehlgeschlagen");
|
|
}
|
|
await queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
|
|
await queryClient.refetchQueries({ queryKey: ["/api/auth/user"] });
|
|
navigate("/admin");
|
|
} catch (err: any) {
|
|
setError(err?.message || "Anmeldung fehlgeschlagen");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#2D1B69] to-[#6366f1] flex items-center justify-center px-4">
|
|
<Card className="w-full max-w-sm bg-white/10 border-white/20 text-white">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<LogIn className="w-5 h-5" />
|
|
<span>Anmeldung</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={submit} className="space-y-4">
|
|
<div>
|
|
<Label className="text-white/90">E-Mail</Label>
|
|
<Input
|
|
type="email"
|
|
autoComplete="username"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
className="bg-white/10 border-white/20 text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-white/90">Passwort</Label>
|
|
<Input
|
|
type="password"
|
|
autoComplete="current-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
className="bg-white/10 border-white/20 text-white"
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-300">{error}</p>}
|
|
|
|
<Button type="submit" disabled={busy} className="w-full">
|
|
{busy ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <LogIn className="w-4 h-4 mr-2" />}
|
|
{busy ? "Anmeldung läuft…" : "Anmelden"}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|