Heb er een PWA van gemaakt en layout gecorrigeerd

2026-08-19 16:46:29 +02:00
parent d3cab99d86
commit 686339325e
21 changed files with 1629 additions and 103 deletions
@@ -0,0 +1,113 @@
+"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>
+    );
+}