55 lines
2 KiB
TypeScript
55 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState, type FormEvent } from "react";
|
|
|
|
export default function AdminLoginForm({ nextPath = "/admin", adminConfigured = true }: { nextPath?: string; adminConfigured?: boolean }) {
|
|
const router = useRouter();
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setError("");
|
|
setPending(true);
|
|
try {
|
|
const response = await fetch("/api/admin/login", {
|
|
method: "POST",
|
|
body: new FormData(event.currentTarget),
|
|
});
|
|
const result = await response.json() as { message?: string };
|
|
if (!response.ok) throw new Error(result.message ?? "Anmeldung fehlgeschlagen.");
|
|
router.push(nextPath);
|
|
router.refresh();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Anmeldung fehlgeschlagen.");
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="admin-login-page">
|
|
<form className="admin-login-card" onSubmit={submit}>
|
|
<Image src="/funktechnik_schubert_logo.jpg" alt="Funktechnik Schubert" width={1672} height={941} priority />
|
|
<h1>Administration Login</h1>
|
|
{!adminConfigured && (
|
|
<p className="error">
|
|
Admin-Zugang ist nicht konfiguriert. Bitte ADMIN_EMAIL, ADMIN_PASSWORD und ADMIN_SESSION_SECRET in der Umgebung setzen.
|
|
</p>
|
|
)}
|
|
<label>
|
|
E-Mail
|
|
<input name="email" type="email" autoComplete="username" required />
|
|
</label>
|
|
<label>
|
|
Passwort
|
|
<input name="password" type="password" autoComplete="current-password" required />
|
|
</label>
|
|
{error && <p className="error">{error}</p>}
|
|
<button className="button" type="submit" disabled={pending || !adminConfigured}>{pending ? "Anmeldung..." : "Anmelden"}</button>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|