113 lines
4.9 KiB
TypeScript
113 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { SubmitEvent } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import LanguageSwitcher from "@/app/language-switcher";
|
|
import { getLocale, LOCALE_COOKIE, t, type Locale } from "@/lib/i18n";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const [locale, setLocale] = useState<Locale>(() => {
|
|
if (typeof document === "undefined") return "nl";
|
|
const value = document.cookie
|
|
.split("; ")
|
|
.find((cookie) => cookie.startsWith(`${LOCALE_COOKIE}=`))
|
|
?.split("=")[1];
|
|
return getLocale(value);
|
|
});
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
setError("");
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
setError(
|
|
data.error === "invalid_credentials"
|
|
? t(locale, "login.invalidCredentials")
|
|
: t(locale, "login.unexpectedError"),
|
|
);
|
|
return;
|
|
}
|
|
|
|
router.replace("/");
|
|
router.refresh();
|
|
} catch {
|
|
setError(t(locale, "login.unexpectedError"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-slate-100 px-6">
|
|
<div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl ring-1 ring-slate-200">
|
|
<div className="mb-8">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-cyan-700">
|
|
{t(locale, "appName")}
|
|
</p>
|
|
<h1 className="mt-2 text-3xl font-bold text-slate-900">{t(locale, "login.title")}</h1>
|
|
</div>
|
|
<LanguageSwitcher
|
|
locale={locale}
|
|
label={t(locale, "language.label")}
|
|
onChange={setLocale}
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-slate-500">{t(locale, "login.description")}</p>
|
|
<p className="mt-2 text-slate-500">{t(locale, "login.demoCredentials")}</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<label className="block">
|
|
<span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.username")}</span>
|
|
<input
|
|
required
|
|
value={username}
|
|
onChange={(event) => setUsername(event.target.value)}
|
|
className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
|
autoComplete="username"
|
|
/>
|
|
</label>
|
|
|
|
<label className="block">
|
|
<span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.password")}</span>
|
|
<input
|
|
required
|
|
type="password"
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
|
autoComplete="current-password"
|
|
/>
|
|
</label>
|
|
|
|
{error && <p className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{error}</p>}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full rounded-lg bg-cyan-700 px-4 py-3 font-semibold text-white transition hover:bg-cyan-800 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{loading ? t(locale, "login.submitting") : t(locale, "login.submit")}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |