79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
async function handleLogin(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
|
|
setError("");
|
|
|
|
try {
|
|
const response = await fetch("/api/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
username,
|
|
password,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
window.location.href = "/dashboard";
|
|
return;
|
|
}
|
|
|
|
setError(data.detail ?? "Login fehlgeschlagen");
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError("Technischer Fehler");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-slate-100">
|
|
<form
|
|
onSubmit={handleLogin}
|
|
className="w-full max-w-md rounded-xl bg-white p-8 shadow-xl"
|
|
>
|
|
<h1 className="mb-8 text-center text-3xl font-bold">
|
|
Olympus CRM
|
|
</h1>
|
|
|
|
<input
|
|
className="mb-4 w-full rounded border p-3"
|
|
placeholder="Benutzername"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
|
|
<input
|
|
className="mb-4 w-full rounded border p-3"
|
|
type="password"
|
|
placeholder="Passwort"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
|
|
{error && (
|
|
<p className="mb-4 text-red-600">{error}</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded bg-blue-600 p-3 text-white hover:bg-blue-700"
|
|
>
|
|
Anmelden
|
|
</button>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|