diff --git a/.env.example b/.env.example index 4a2fa4f..00f35de 100644 --- a/.env.example +++ b/.env.example @@ -19,3 +19,9 @@ APP_URL=http://localhost:3000 # Titel im Browser-Tab und Überschrift, solange kein Logo hochgeladen ist. SITE_TITLE=Canteen Menu + +# Optional: DeepL-API-Key für automatische Übersetzung von Gerichten nach +# Englisch/Polnisch (kostenloser Free-Tier unter deepl.com/de/pro-api, +# Free-Keys enden auf ":fx"). Ohne Key bleibt "Automatisch übersetzen" +# inaktiv; Englisch/Polnisch lassen sich weiterhin manuell eintragen. +DEEPL_API_KEY= diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ea42bb..37c9f6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,36 @@ Alle nennenswerten Änderungen an diesem Projekt werden hier dokumentiert. Format angelehnt an [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), Versionierung nach [Semantic Versioning](https://semver.org/lang/de/). +## [1.3.0] – 2026-07-18 + +### Hinzugefügt +- Mehrsprachigkeit für die komplette Anwendung (Deutsch, Englisch, + Polnisch): Sprachumschalter (Cookie-basiert, kein Neuladen der + Seite nötig), sämtliche Oberflächentexte übersetzt +- Gerichte, Bereiche, Allergene und Zusatzstoffe zusätzlich mit + englischem/polnischem Namen; öffentliche Speisekarte zeigt je nach + gewählter Sprache automatisch den passenden Namen (Fallback: + Deutsch, falls keine Übersetzung hinterlegt ist) +- Automatische Übersetzung per DeepL: Button „Automatisch übersetzen“ + beim Anlegen/Bearbeiten von Gerichten, Allergenen und Zusatzstoffen; + Ergebnis bleibt danach manuell korrigierbar. Aktivierung über die + neue Docker-Variable `DEEPL_API_KEY` – ohne Key bleibt der Button + inaktiv, die Felder lassen sich weiterhin von Hand ausfüllen +- Rezeptvorschläge im öffentlichen Bereich: nicht angemeldete + Besucher können über „Rezept vorschlagen“ ein fehlendes Gericht + vorschlagen (Name + optionale Beschreibung), inkl. Dublettenprüfung + gegen bestehende Gerichte und einfachem Honeypot-Spamschutz +- Neue Seite „Vorschläge“ im Kantinen-Bereich: eingereichte Vorschläge + sichten, als Gericht übernehmen oder ablehnen + +### Behoben +- Passwort-wiederholen-Feld beim Bearbeiten eines Benutzers erschien + erst, nachdem im ersten Passwortfeld schon getippt wurde – wirkte + wie ein einzelnes Pflichtfeld +- Anmelden-Button überlappte auf Mobilgeräten mit breiten Logos + (Banner-Format) das Logo, da er absolut in der oberen Ecke + positioniert war + ## [1.2.0] – 2026-07-18 ### Hinzugefügt diff --git a/README.md b/README.md index 01f5d73..c34d483 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,8 @@ markieren die jeweiligen Versionsstände (`git tag`). | Bereich | Funktionen | | --- | --- | -| Öffentlich (ohne Login) | Wochenplan Mo–Fr mit den Bereichen Brotzeit (09:00–10:00), Mittagessen, Mittagessen vegetarisch und Suppe (je 11:30–13:30); Navigation vorherige/nächste Woche/Heute; auf schmalen Bildschirmen umschaltbare Tages-/Wochenansicht (Tag ist Standard); Logo zentriert über der Karte; Allergen-/Zusatzstoff-Kürzel je Gericht, Legende unterhalb der Karte | -| Kantinen-Team (`/intern`) | Gerichte anlegen/bearbeiten/löschen (inkl. Live-Suche und Mehrfachauswahl zum Batch-Löschen) mit Allergenen/Zusatzstoffen je Gericht; Gerichte Tagen/Bereichen zuweisen (mehrere pro Zelle) und wieder entfernen; globale Allergen-/Zusatzstofflisten pflegen; eigenes Konto verwalten (Name, E-Mail, Passwort, Passkeys, Passwort-Anmeldung an/aus) | +| Öffentlich (ohne Login) | Wochenplan Mo–Fr mit den Bereichen Brotzeit (09:00–10:00), Mittagessen, Mittagessen vegetarisch und Suppe (je 11:30–13:30); Navigation vorherige/nächste Woche/Heute; auf schmalen Bildschirmen umschaltbare Tages-/Wochenansicht (Tag ist Standard); Logo zentriert über der Karte; Allergen-/Zusatzstoff-Kürzel je Gericht, Legende unterhalb der Karte; Sprachumschalter Deutsch/Englisch/Polnisch; Rezeptvorschläge einreichen | +| Kantinen-Team (`/intern`) | Gerichte anlegen/bearbeiten/löschen (inkl. Live-Suche, Mehrfachauswahl zum Batch-Löschen, englischem/polnischem Namen mit automatischer DeepL-Übersetzung) mit Allergenen/Zusatzstoffen je Gericht; Gerichte Tagen/Bereichen zuweisen (mehrere pro Zelle) und wieder entfernen; globale Allergen-/Zusatzstofflisten pflegen (ebenfalls mehrsprachig); eingereichte Rezeptvorschläge sichten, übernehmen oder ablehnen; eigenes Konto verwalten (Name, E-Mail, Passwort, Passkeys, Passwort-Anmeldung an/aus) | | Admin (`/admin`) | Kantinenmitarbeiter anlegen/bearbeiten/löschen (inkl. Passwort-Reset mit Wiederholung und Rollenvergabe); Farbgebung der Speisekarte anpassen; Logo und Favicon hochladen/entfernen | Anmeldung mit E-Mail + Passwort oder alternativ per **Passkey** @@ -23,16 +23,28 @@ Anmeldung mit E-Mail + Passwort oder alternativ per **Passkey** Passwort-Anmeldung kann pro Konto deaktiviert werden, sobald mindestens ein Passkey registriert ist. +Die gesamte Oberfläche ist auf Deutsch, Englisch und Polnisch verfügbar +(Sprachumschalter, Cookie-basiert). Gerichte, Bereiche, Allergene und +Zusatzstoffe lassen sich zusätzlich auf Englisch/Polnisch benennen – +mit optionaler automatischer Übersetzung über DeepL (siehe +`DEEPL_API_KEY` unten) und jederzeit manuell korrigierbar. + ## Projektstruktur ``` app/ Next.js-Routen page.tsx Öffentliche Speisekarte login/ Login (Passwort + Passkey) + vorschlag/ Öffentliches Rezeptvorschlag-Formular intern/ Kantinen-Bereich (Rolle: staff oder admin) + vorschlaege/ Rezeptvorschläge sichten/übernehmen admin/ Verwaltung (Rolle: admin) api/admin/users/ Benutzerverwaltung (serverseitig, Service-Role-Key) + api/translate/ DeepL-Anbindung (serverseitig) + api/locale/ Sprach-Cookie setzen components/ Client-Komponenten (WeekEditor, DishManager, …) +components/i18n/ Sprachkontext, Sprachumschalter +lib/i18n/ Wörterbücher (de/en/pl), Locale-Helfer lib/supabase/ Supabase-Clients (Browser / Server / Admin) lib/ Typen, Datums-/Formatierungshelfer proxy.ts Session-Refresh + Schutz von /intern und /admin @@ -73,6 +85,7 @@ Beim Webserver/Hoster müssen genau diese drei Variablen hinterlegt werden | `SUPABASE_SERVICE_ROLE_KEY` | Service-Role-Key für die Benutzerverwaltung | **ja – niemals im Browser/Repo!** | | `APP_URL` | Öffentliche URL der App, z. B. `https://menu.example.de` (Origin-Check hinter Reverse-Proxy; zugleich Passkey-Domain) | nein | | `SITE_TITLE` | Titel im Browser-Tab und Überschrift ohne Logo, Default `Canteen Menu` | nein | +| `DEEPL_API_KEY` | Optional: aktiviert „Automatisch übersetzen“ für Gerichte/Allergene/Zusatzstoffe (DeepL, kostenloser Free-Tier). Ohne Key funktioniert alles weiter, nur automatisch übersetzen ist deaktiviert | **ja – niemals im Browser/Repo!** | Build & Start auf dem Server – **mit Docker** (empfohlen, Node.js und PostgreSQL müssen nicht installiert sein): diff --git a/app/api/locale/route.ts b/app/api/locale/route.ts new file mode 100644 index 0000000..3d87df3 --- /dev/null +++ b/app/api/locale/route.ts @@ -0,0 +1,23 @@ +import { NextResponse } from "next/server"; +import { isLocale, LOCALE_COOKIE } from "@/lib/i18n"; +import { isSameOrigin } from "@/lib/origin"; + +// Setzt das Sprach-Cookie. Kein Login nötig (auch anonyme Besucher +// der öffentlichen Speisekarte sollen die Sprache wechseln können). +export async function POST(request: Request) { + if (!isSameOrigin(request)) { + return NextResponse.json({ error: "Nicht erlaubt." }, { status: 403 }); + } + const body = await request.json().catch(() => null); + const locale = body?.locale; + if (!isLocale(locale)) { + return NextResponse.json({ error: "Ungültige Sprache." }, { status: 400 }); + } + const response = NextResponse.json({ ok: true }); + response.cookies.set(LOCALE_COOKIE, locale, { + path: "/", + maxAge: 60 * 60 * 24 * 365, + sameSite: "lax", + }); + return response; +} diff --git a/app/api/translate/route.ts b/app/api/translate/route.ts new file mode 100644 index 0000000..f0c916c --- /dev/null +++ b/app/api/translate/route.ts @@ -0,0 +1,100 @@ +import { NextResponse } from "next/server"; +import { createClient } from "@/lib/supabase/server"; +import { createAdminClient } from "@/lib/supabase/admin"; +import { isSameOrigin } from "@/lib/origin"; + +// Übersetzt einen deutschen Text nach Englisch/Polnisch via DeepL und +// schreibt das Ergebnis in die _en/_pl-Spalte der angegebenen Zeile. +// Ohne DEEPL_API_KEY läuft die Route kontrolliert ins Leere (configured: +// false), damit das UI die manuelle Eingabe anbieten kann. + +const ALLOWED_TABLES: Record = { + dishes: { idColumn: "id", textColumn: "name" }, + sections: { idColumn: "key", textColumn: "label" }, + allergens: { idColumn: "code", textColumn: "name" }, + additives: { idColumn: "code", textColumn: "name" }, +}; + +async function translateWithDeepL(text: string, targetLang: "EN" | "PL", apiKey: string) { + const host = apiKey.endsWith(":fx") + ? "https://api-free.deepl.com" + : "https://api.deepl.com"; + const res = await fetch(`${host}/v2/translate`, { + method: "POST", + headers: { + Authorization: `DeepL-Auth-Key ${apiKey}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ + text: [text], + target_lang: targetLang, + source_lang: "DE", + }), + }); + if (!res.ok) { + throw new Error(`DeepL antwortete mit ${res.status}: ${await res.text()}`); + } + const data = await res.json(); + return data.translations?.[0]?.text as string | undefined; +} + +export async function POST(request: Request) { + if (!isSameOrigin(request)) { + return NextResponse.json({ error: "Nicht erlaubt." }, { status: 403 }); + } + + const supabase = await createClient(); + const { + data: { user }, + } = await supabase.auth.getUser(); + if (!user) return NextResponse.json({ error: "Nicht angemeldet." }, { status: 401 }); + + const admin = createAdminClient(); + const { data: profile } = await admin + .from("profiles") + .select("role") + .eq("id", user.id) + .single(); + if (!profile || !["staff", "admin"].includes(profile.role)) { + return NextResponse.json({ error: "Nicht berechtigt." }, { status: 403 }); + } + + const body = await request.json().catch(() => null); + const { table, id, text } = body ?? {}; + const config = ALLOWED_TABLES[table]; + if (!config || typeof text !== "string" || !text.trim()) { + return NextResponse.json({ error: "Ungültige Eingaben." }, { status: 400 }); + } + // Bei einem noch nicht gespeicherten (neuen) Eintrag gibt es keine + // Zeile zum Aktualisieren – nur übersetzen, das Speichern übernimmt + // anschließend das reguläre Formular. + const persist = typeof id === "string" && id.length > 0; + + const apiKey = process.env.DEEPL_API_KEY; + if (!apiKey) { + return NextResponse.json({ configured: false }); + } + + try { + const [en, pl] = await Promise.all([ + translateWithDeepL(text, "EN", apiKey), + translateWithDeepL(text, "PL", apiKey), + ]); + if (!en || !pl) throw new Error("Keine Übersetzung erhalten."); + + if (persist) { + const { error } = await admin + .from(table) + .update({ [`${config.textColumn}_en`]: en, [`${config.textColumn}_pl`]: pl }) + .eq(config.idColumn, id); + if (error) throw new Error(error.message); + } + + return NextResponse.json({ configured: true, en, pl }); + } catch (err) { + return NextResponse.json( + { error: err instanceof Error ? err.message : "Übersetzung fehlgeschlagen." }, + { status: 502 } + ); + } +} diff --git a/app/intern/kennzeichnung/page.tsx b/app/intern/kennzeichnung/page.tsx index 69971f6..d965d2a 100644 --- a/app/intern/kennzeichnung/page.tsx +++ b/app/intern/kennzeichnung/page.tsx @@ -3,16 +3,8 @@ import CodeListManager from "@/components/CodeListManager"; export default function KennzeichnungPage() { return (
- - + +
); } diff --git a/app/intern/vorschlaege/page.tsx b/app/intern/vorschlaege/page.tsx new file mode 100644 index 0000000..d07475e --- /dev/null +++ b/app/intern/vorschlaege/page.tsx @@ -0,0 +1,5 @@ +import SuggestionReview from "@/components/SuggestionReview"; + +export default function VorschlaegePage() { + return ; +} diff --git a/app/layout.tsx b/app/layout.tsx index 968a65d..868f023 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,8 @@ import { Geist } from "next/font/google"; import "./globals.css"; import { createClient } from "@/lib/supabase/server"; import { COLOR_VARS, DEFAULT_COLORS, faviconUrl, SITE_TITLE } from "@/lib/types"; +import { getDictionary, getLocale } from "@/lib/i18n"; +import { LocaleProvider } from "@/components/i18n/LocaleProvider"; import packageJson from "@/package.json"; // Farben/Logo/Favicon sollen Änderungen sofort widerspiegeln. @@ -37,11 +39,11 @@ export default async function RootLayout({ children: React.ReactNode; }>) { const supabase = await createClient(); - const { data: settings } = await supabase - .from("settings") - .select("colors") - .eq("id", 1) - .maybeSingle(); + const [{ data: settings }, locale] = await Promise.all([ + supabase.from("settings").select("colors").eq("id", 1).maybeSingle(), + getLocale(), + ]); + const dict = getDictionary(locale); const colors: Record = { ...DEFAULT_COLORS, @@ -52,9 +54,11 @@ export default async function RootLayout({ ) as React.CSSProperties; return ( - + - {children} + + {children} +
Version {packageJson.version}
diff --git a/app/login/page.tsx b/app/login/page.tsx index 2cb341f..f84e75e 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -4,20 +4,25 @@ import { useState } from "react"; import { useRouter } from "next/navigation"; import Link from "next/link"; import { createClient } from "@/lib/supabase/client"; +import { formatMessage } from "@/lib/i18n/shared"; +import { useDict } from "@/components/i18n/LocaleProvider"; +import LanguageSwitcher from "@/components/i18n/LanguageSwitcher"; +import type { Dict } from "@/lib/i18n/shared"; -function germanAuthError(message: string): string { +function authErrorMessage(dict: Dict, message: string): string { if (/invalid login credentials/i.test(message)) - return "E-Mail-Adresse oder Passwort ist falsch."; + return dict.login.errorInvalidCredentials; if (/email not confirmed/i.test(message)) - return "Die E-Mail-Adresse wurde noch nicht bestätigt."; + return dict.login.errorEmailNotConfirmed; if (/cancelled|aborted|NotAllowedError/i.test(message)) - return "Passkey-Anmeldung wurde abgebrochen."; - return `Anmeldung fehlgeschlagen: ${message}`; + return dict.login.errorPasskeyCancelled; + return formatMessage(dict.login.errorGeneric, { message }); } export default function LoginPage() { const router = useRouter(); const supabase = createClient(); + const dict = useDict(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); @@ -42,7 +47,7 @@ export default function LoginPage() { password, }); if (error || !data.user) { - setError(germanAuthError(error?.message ?? "Unbekannter Fehler")); + setError(authErrorMessage(dict, error?.message ?? "Unbekannter Fehler")); setBusy(false); return; } @@ -54,9 +59,7 @@ export default function LoginPage() { .single(); if (profile?.password_auth_enabled === false) { await supabase.auth.signOut(); - setError( - "Die Anmeldung mit Passwort ist für dieses Konto deaktiviert. Bitte mit Passkey anmelden." - ); + setError(dict.login.errorPasswordDisabled); setBusy(false); return; } @@ -71,14 +74,14 @@ export default function LoginPage() { const { data, error } = await supabase.auth.signInWithPasskey(); if (error || !data?.user) { setError( - germanAuthError(error?.message ?? "Passkey-Anmeldung fehlgeschlagen") + authErrorMessage(dict, error?.message ?? "Passkey-Anmeldung fehlgeschlagen") ); setBusy(false); return; } await redirectByRole(data.user.id); } catch (err) { - setError(germanAuthError(err instanceof Error ? err.message : String(err))); + setError(authErrorMessage(dict, err instanceof Error ? err.message : String(err))); setBusy(false); } } @@ -86,13 +89,16 @@ export default function LoginPage() { return (
-

- Anmeldung -

+
+

+ {dict.login.title} +

+ +
{error &&

{error}

}
- oder + {dict.login.or}
@@ -136,12 +142,12 @@ export default function LoginPage() { className="btn btn-neutral w-full" disabled={busy} > - Mit Passkey anmelden + {dict.login.passkeyButton}

- ← Zur Speisekarte + {dict.login.backToMenu}

diff --git a/app/page.tsx b/app/page.tsx index a3fd595..c6eb51a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,11 +8,12 @@ import { formatPrice, mondayOf, todayISO, - WEEKDAYS, } from "@/lib/menu"; -import { logoUrl, SITE_TITLE } from "@/lib/types"; +import { getDictionary, getLocale } from "@/lib/i18n"; +import { localized, logoUrl, SITE_TITLE } from "@/lib/types"; import type { CodeItem, MenuEntry, Section } from "@/lib/types"; import PublicMobileMenu from "@/components/PublicMobileMenu"; +import LanguageSwitcher from "@/components/i18n/LanguageSwitcher"; export default async function Home({ searchParams, @@ -23,7 +24,9 @@ export default async function Home({ const monday = mondayOf(woche); const friday = addDays(monday, 4); const currentWeek = mondayOf(todayISO()); - const days = WEEKDAYS.map((weekday, i) => ({ + const locale = await getLocale(); + const dict = getDictionary(locale); + const days = dict.weekdays.long.map((weekday, i) => ({ weekday, iso: addDays(monday, i), })); @@ -35,7 +38,7 @@ export default async function Home({ supabase .from("menu_entries") .select( - "id, menu_date, section_key, position, dish:dishes(id, name, price, allergens, additives)" + "id, menu_date, section_key, position, dish:dishes(id, name, name_en, name_pl, price, allergens, additives)" ) .gte("menu_date", monday) .lte("menu_date", friday) @@ -54,24 +57,34 @@ export default async function Home({ return (
- {/* Kopfbereich: Logo zentriert, Login-Link rechts */} -
+ {/* Kopfbereich: Sprache + Login-Link eigene Zeile, Logo zentriert + darunter. Kein absolutes Positionieren mehr – ein breites Logo + (z. B. ein Banner-Format) konnte sonst mit dem Login-Link + kollidieren. */} +
+
+ + + {dict.common.login} + +
{logo ? ( // eslint-disable-next-line @next/next/no-img-element - Logo + Logo ) : (

{SITE_TITLE}

)}
- - Anmelden -
{/* Mobil: Tag (Standard) oder Woche umschaltbar */} @@ -79,15 +92,18 @@ export default async function Home({ {/* Ab "sm": klassische Wochentabelle */}
-
+
- ← Vorherige Woche + {dict.publicMenu.prevWeek} - Heute + {dict.publicMenu.today} - Nächste Woche → + {dict.publicMenu.nextWeek} + + + {dict.publicMenu.suggestDish}
@@ -100,7 +116,7 @@ export default async function Home({ {d.weekday}
- {formatDateLong(d.iso)} + {formatDateLong(d.iso, dict.dateLocale)} ))} @@ -109,7 +125,7 @@ export default async function Home({ {sections.map((s) => ( -
{s.label}
+
{localized(s, locale)}
{s.time_range}
{days.map((d) => ( @@ -118,7 +134,9 @@ export default async function Home({ const codes = dishCodes(e.dish); return (
- {e.dish.name} + + {localized(e.dish, locale)} + {codes && {codes}} {" – "} {formatPrice(e.dish.price)} @@ -137,23 +155,27 @@ export default async function Home({ {/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
-

Allergene

+

+ {dict.publicMenu.allergens} +

    {allergens.map((a) => (
  • - {a.code} – {a.name} + {a.code} –{" "} + {localized(a, locale)}
    • ))}

- Zusatzstoffe + {dict.publicMenu.additives}

    {additives.map((a) => (
  • - {a.code} – {a.name} + {a.code} –{" "} + {localized(a, locale)}
    • ))}
diff --git a/app/vorschlag/page.tsx b/app/vorschlag/page.tsx new file mode 100644 index 0000000..91c4d6e --- /dev/null +++ b/app/vorschlag/page.tsx @@ -0,0 +1,5 @@ +import SuggestionForm from "@/components/SuggestionForm"; + +export default function VorschlagPage() { + return ; +} diff --git a/components/AccountManager.tsx b/components/AccountManager.tsx index 3a7dfb7..752d500 100644 --- a/components/AccountManager.tsx +++ b/components/AccountManager.tsx @@ -3,20 +3,17 @@ import { useEffect, useMemo, useState } from "react"; import { useRouter } from "next/navigation"; import { createClient } from "@/lib/supabase/client"; +import { formatMessage } from "@/lib/i18n/shared"; +import type { Dict } from "@/lib/i18n/shared"; import PasskeyManager from "@/components/PasskeyManager"; +import { useDict } from "@/components/i18n/LocaleProvider"; -const ROLE_LABELS: Record = { - admin: "Administrator", - staff: "Kantinenmitarbeiter", -}; - -function germanAuthError(message: string): string { +function authErrorMessage(dict: Dict, message: string): string { if (/invalid login credentials/i.test(message)) - return "Das aktuelle Passwort ist falsch."; - if (/should be at least/i.test(message)) - return "Das neue Passwort ist zu kurz (mindestens 8 Zeichen)."; + return dict.account.wrongCurrentPassword; + if (/should be at least/i.test(message)) return dict.account.passwordTooShort; if (/email.*already|already.*registered/i.test(message)) - return "Diese E-Mail-Adresse wird bereits verwendet."; + return dict.account.emailAlreadyUsed; return message; } @@ -33,6 +30,8 @@ export default function AccountManager({ }) { const supabase = useMemo(() => createClient(), []); const router = useRouter(); + const dict = useDict(); + const roleLabel = role === "admin" ? dict.common.roleAdmin : dict.common.roleStaff; // Persönliche Daten const [fullName, setFullName] = useState(initialFullName); @@ -75,7 +74,7 @@ export default function AccountManager({ setNameInfo(null); const name = fullName.trim(); if (!name) { - setNameError("Bitte einen Namen angeben."); + setNameError(dict.account.nameRequired); return; } setNameBusy(true); @@ -83,9 +82,10 @@ export default function AccountManager({ .from("profiles") .update({ full_name: name }) .eq("id", (await supabase.auth.getUser()).data.user?.id ?? ""); - if (error) setNameError(`Speichern fehlgeschlagen: ${error.message}`); + if (error) + setNameError(formatMessage(dict.account.saveError, { message: error.message })); else { - setNameInfo("Name gespeichert."); + setNameInfo(dict.account.nameSaved); router.refresh(); } setNameBusy(false); @@ -100,11 +100,13 @@ export default function AccountManager({ setEmailBusy(true); const { error } = await supabase.auth.updateUser({ email: next }); if (error) { - setEmailError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`); - } else { - setEmailInfo( - "Bestätigungs-E-Mails wurden verschickt. Die neue Adresse wird erst nach Bestätigung des Links aktiv." + setEmailError( + formatMessage(dict.account.changeError, { + message: authErrorMessage(dict, error.message), + }) ); + } else { + setEmailInfo(dict.account.emailSent); } setEmailBusy(false); } @@ -114,11 +116,11 @@ export default function AccountManager({ setPwError(null); setPwInfo(null); if (newPassword.length < 8) { - setPwError("Das neue Passwort muss mindestens 8 Zeichen lang sein."); + setPwError(dict.account.passwordTooShort); return; } if (newPassword !== newPasswordRepeat) { - setPwError("Die Passwörter stimmen nicht überein."); + setPwError(dict.account.passwordMismatch); return; } setPwBusy(true); @@ -129,16 +131,20 @@ export default function AccountManager({ password: currentPassword, }); if (verifyError) { - setPwError(germanAuthError(verifyError.message)); + setPwError(authErrorMessage(dict, verifyError.message)); setPwBusy(false); return; } const { error } = await supabase.auth.updateUser({ password: newPassword }); if (error) { - setPwError(`Ändern fehlgeschlagen: ${germanAuthError(error.message)}`); + setPwError( + formatMessage(dict.account.changeError, { + message: authErrorMessage(dict, error.message), + }) + ); } else { - setPwInfo("Passwort geändert."); + setPwInfo(dict.account.passwordChanged); setCurrentPassword(""); setNewPassword(""); setNewPasswordRepeat(""); @@ -151,18 +157,10 @@ export default function AccountManager({ setAuthInfo(null); const next = !passwordAuthEnabled; if (!next && (passkeyCount ?? 0) === 0) { - setAuthError( - "Ohne registrierten Passkey kannst du die Passwort-Anmeldung nicht deaktivieren – sonst wärst du ausgesperrt. Registriere zuerst einen Passkey weiter unten." - ); + setAuthError(dict.account.passwordAuthNeedsPasskey); return; } - if ( - !next && - !window.confirm( - "Anmeldung mit E-Mail und Passwort wirklich deaktivieren? Du kannst dich danach nur noch per Passkey anmelden." - ) - ) - return; + if (!next && !window.confirm(dict.account.confirmDisablePasswordAuth)) return; setAuthBusy(true); const { error } = await supabase @@ -170,11 +168,11 @@ export default function AccountManager({ .update({ password_auth_enabled: next }) .eq("id", (await supabase.auth.getUser()).data.user?.id ?? ""); if (error) { - setAuthError(`Speichern fehlgeschlagen: ${error.message}`); + setAuthError(formatMessage(dict.account.saveError, { message: error.message })); } else { setPasswordAuthEnabled(next); setAuthInfo( - next ? "Passwort-Anmeldung aktiviert." : "Passwort-Anmeldung deaktiviert." + next ? dict.account.passwordAuthEnabled : dict.account.passwordAuthDisabled ); } setAuthBusy(false); @@ -183,18 +181,20 @@ export default function AccountManager({ return (
-

Mein Konto

+

+ {dict.account.title} +

- {initialEmail} – {ROLE_LABELS[role] ?? role} + {initialEmail} – {roleLabel}

-

Persönliche Daten

+

{dict.account.personalTitle}

{nameInfo}

}
-

E-Mail-Adresse

+

{dict.account.emailTitle}

- E-Mail-Adresse ändern + {dict.account.changeEmail}
-

Passwort ändern

+

{dict.account.passwordTitle}

{pwInfo}

}
-

Anmeldung mit Passwort

-

- Du kannst die Anmeldung mit E-Mail und Passwort für dein Konto - deaktivieren und dich künftig ausschließlich per Passkey anmelden. - Dafür muss mindestens ein Passkey registriert sein. -

+

{dict.account.passwordAuthTitle}

+

{dict.account.passwordAuthHint}

{authError && (

{authError} @@ -327,7 +323,7 @@ export default function AccountManager({ onChange={togglePasswordAuth} disabled={authBusy || passkeyCount === null} /> - Anmeldung mit E-Mail und Passwort erlaubt + {dict.account.passwordAuthCheckbox}

diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx index 5577bee..4a651d1 100644 --- a/components/AppHeader.tsx +++ b/components/AppHeader.tsx @@ -8,17 +8,8 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import type { Role } from "@/lib/types"; - -const MENU_LINKS = [ - { href: "/intern", label: "Wochenplan" }, - { href: "/intern/gerichte", label: "Gerichte" }, - { href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" }, -]; - -const ADMIN_LINKS = [ - { href: "/admin", label: "Benutzer" }, - { href: "/admin/design", label: "Design" }, -]; +import { useDict } from "@/components/i18n/LocaleProvider"; +import LanguageSwitcher from "@/components/i18n/LanguageSwitcher"; export default function AppHeader({ role, @@ -28,6 +19,18 @@ export default function AppHeader({ displayName: string; }) { const pathname = usePathname(); + const dict = useDict(); + + const menuLinks = [ + { href: "/intern", label: dict.header.weekPlan }, + { href: "/intern/gerichte", label: dict.header.dishes }, + { href: "/intern/kennzeichnung", label: dict.header.labels }, + { href: "/intern/vorschlaege", label: dict.header.suggestions }, + ]; + const adminLinks = [ + { href: "/admin", label: dict.header.users }, + { href: "/admin/design", label: dict.header.design }, + ]; const linkClass = (href: string) => `rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${ @@ -37,16 +40,16 @@ export default function AppHeader({ return (
- Kantine + {dict.header.canteen}
diff --git a/components/DesignEditor.tsx b/components/DesignEditor.tsx index 3afdf7b..11b83c5 100644 --- a/components/DesignEditor.tsx +++ b/components/DesignEditor.tsx @@ -3,7 +3,9 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { useRouter } from "next/navigation"; import { createClient } from "@/lib/supabase/client"; -import { COLOR_LABELS, DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types"; +import { formatMessage } from "@/lib/i18n/shared"; +import { DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types"; +import { useDict } from "@/components/i18n/LocaleProvider"; type AssetKind = "logo" | "favicon"; @@ -15,6 +17,17 @@ const ASSET_COLUMN: Record = { export default function DesignEditor() { const supabase = useMemo(() => createClient(), []); const router = useRouter(); + const dict = useDict(); + const colorLabels: Record = { + primary: dict.designEditor.colorPrimary, + primaryDark: dict.designEditor.colorPrimaryDark, + accent: dict.designEditor.colorAccent, + headerText: dict.designEditor.colorHeaderText, + rowBg: dict.designEditor.colorRowBg, + rowBgAlt: dict.designEditor.colorRowBgAlt, + addBtn: dict.designEditor.colorAddBtn, + deleteBtn: dict.designEditor.colorDeleteBtn, + }; const [colors, setColors] = useState>(DEFAULT_COLORS); const [logoPath, setLogoPath] = useState(null); const [faviconPath, setFaviconPath] = useState(null); @@ -29,13 +42,13 @@ export default function DesignEditor() { .eq("id", 1) .maybeSingle(); if (error) { - setError(`Laden fehlgeschlagen: ${error.message}`); + setError(formatMessage(dict.designEditor.loadError, { message: error.message })); return; } setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) }); setLogoPath(data?.logo_path ?? null); setFaviconPath(data?.favicon_path ?? null); - }, [supabase]); + }, [supabase, dict]); useEffect(() => { load(); @@ -49,9 +62,10 @@ export default function DesignEditor() { .from("settings") .update({ colors }) .eq("id", 1); - if (error) setError(`Speichern fehlgeschlagen: ${error.message}`); + if (error) + setError(formatMessage(dict.designEditor.saveError, { message: error.message })); else { - setInfo("Farben gespeichert."); + setInfo(dict.designEditor.colorsSaved); router.refresh(); } setBusy(false); @@ -66,7 +80,7 @@ export default function DesignEditor() { e.target.value = ""; if (!file) return; if (!/^image\//.test(file.type)) { - setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP, ICO)."); + setError(dict.designEditor.invalidImage); return; } setBusy(true); @@ -80,7 +94,7 @@ export default function DesignEditor() { .from("branding") .upload(path, file, { contentType: file.type }); if (uploadError) { - setError(`Upload fehlgeschlagen: ${uploadError.message}`); + setError(formatMessage(dict.designEditor.uploadError, { message: uploadError.message })); setBusy(false); return; } @@ -90,7 +104,7 @@ export default function DesignEditor() { .update({ [ASSET_COLUMN[kind]]: path }) .eq("id", 1); if (settingsError) { - setError(`Speichern fehlgeschlagen: ${settingsError.message}`); + setError(formatMessage(dict.designEditor.saveError, { message: settingsError.message })); setBusy(false); return; } @@ -98,7 +112,7 @@ export default function DesignEditor() { if (kind === "logo") setLogoPath(path); else setFaviconPath(path); - setInfo(kind === "logo" ? "Logo aktualisiert." : "Favicon aktualisiert."); + setInfo(kind === "logo" ? dict.designEditor.logoUpdated : dict.designEditor.faviconUpdated); router.refresh(); setBusy(false); } @@ -108,7 +122,9 @@ export default function DesignEditor() { if (!path) return; if ( !window.confirm( - `${kind === "logo" ? "Logo" : "Favicon"} wirklich entfernen?` + kind === "logo" + ? dict.designEditor.confirmRemoveLogo + : dict.designEditor.confirmRemoveFavicon ) ) return; @@ -119,12 +135,12 @@ export default function DesignEditor() { .update({ [ASSET_COLUMN[kind]]: null }) .eq("id", 1); if (error) { - setError(`Speichern fehlgeschlagen: ${error.message}`); + setError(formatMessage(dict.designEditor.saveError, { message: error.message })); } else { await supabase.storage.from("branding").remove([path]); if (kind === "logo") setLogoPath(null); else setFaviconPath(null); - setInfo(kind === "logo" ? "Logo entfernt." : "Favicon entfernt."); + setInfo(kind === "logo" ? dict.designEditor.logoRemoved : dict.designEditor.faviconRemoved); router.refresh(); } setBusy(false); @@ -135,7 +151,9 @@ export default function DesignEditor() { return (
-

Design

+

+ {dict.designEditor.title} +

{error && (

@@ -145,23 +163,21 @@ export default function DesignEditor() { {info &&

{info}

}
-

Logo

-

- Das Logo wird zentriert über der Speisekarte angezeigt. -

+

{dict.designEditor.logoTitle}

+

{dict.designEditor.logoHint}

{currentLogo ? ( // eslint-disable-next-line @next/next/no-img-element Aktuelles Logo ) : ( -

Kein Logo hinterlegt.

+

{dict.designEditor.logoNone}

)}
-

Favicon

-

- Wird als Icon im Browser-Tab angezeigt. Ohne eigenes Favicon gilt - das Standard-Icon der Anwendung. -

+

{dict.designEditor.faviconTitle}

+

{dict.designEditor.faviconHint}

{currentFavicon ? ( // eslint-disable-next-line @next/next/no-img-element Aktuelles Favicon ) : ( -

- Kein eigenes Favicon hinterlegt. -

+

{dict.designEditor.faviconNone}

)}
-

Farbgebung

+

{dict.designEditor.colorsTitle}

- {Object.entries(COLOR_LABELS).map(([key, label]) => ( + {Object.entries(colorLabels).map(([key, label]) => (
diff --git a/components/DishManager.tsx b/components/DishManager.tsx index 1851f3c..edf3c28 100644 --- a/components/DishManager.tsx +++ b/components/DishManager.tsx @@ -3,12 +3,17 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { createClient } from "@/lib/supabase/client"; import { dishCodes, formatPrice } from "@/lib/menu"; +import { formatMessage } from "@/lib/i18n/shared"; +import { localized } from "@/lib/types"; import type { CodeItem, Dish } from "@/lib/types"; import ChipPicker from "@/components/ChipPicker"; +import { useDict, useLocale } from "@/components/i18n/LocaleProvider"; interface DishForm { id: string | null; // null = neues Gericht name: string; + nameEn: string; + namePl: string; price: string; allergens: string[]; additives: string[]; @@ -17,6 +22,8 @@ interface DishForm { const EMPTY_FORM: DishForm = { id: null, name: "", + nameEn: "", + namePl: "", price: "", allergens: [], additives: [], @@ -24,6 +31,8 @@ const EMPTY_FORM: DishForm = { export default function DishManager() { const supabase = useMemo(() => createClient(), []); + const dict = useDict(); + const locale = useLocale(); const [dishes, setDishes] = useState([]); const [allergens, setAllergens] = useState([]); const [additives, setAdditives] = useState([]); @@ -33,6 +42,9 @@ export default function DishManager() { const [selected, setSelected] = useState>(new Set()); const [bulkBusy, setBulkBusy] = useState(false); const [search, setSearch] = useState(""); + const [translateState, setTranslateState] = useState< + "idle" | "busy" | "done" | "unavailable" + >("idle"); // Live-Suche: filtert die Liste bereits während des Tippens const visible = useMemo(() => { @@ -47,14 +59,15 @@ export default function DishManager() { supabase.from("additives").select("*").order("sort"), ]); const problem = dishesRes.error ?? allergensRes.error ?? additivesRes.error; - if (problem) setError(`Laden fehlgeschlagen: ${problem.message}`); + if (problem) + setError(formatMessage(dict.dishManager.loadError, { message: problem.message })); else { setDishes(dishesRes.data as Dish[]); setAllergens(allergensRes.data as CodeItem[]); setAdditives(additivesRes.data as CodeItem[]); } setLoading(false); - }, [supabase]); + }, [supabase, dict]); useEffect(() => { load(); @@ -66,11 +79,13 @@ export default function DishManager() { setError(null); const price = Number.parseFloat(form.price.replace(",", ".")); if (Number.isNaN(price) || price < 0) { - setError("Bitte einen gültigen Preis angeben, z. B. 3,50"); + setError(dict.dishManager.invalidPrice); return; } const payload = { name: form.name.trim(), + name_en: form.nameEn.trim() || null, + name_pl: form.namePl.trim() || null, price, allergens: form.allergens, additives: form.additives, @@ -79,7 +94,7 @@ export default function DishManager() { ? await supabase.from("dishes").update(payload).eq("id", form.id) : await supabase.from("dishes").insert(payload); if (error) { - setError(`Speichern fehlgeschlagen: ${error.message}`); + setError(formatMessage(dict.dishManager.saveError, { message: error.message })); return; } setForm(null); @@ -89,12 +104,13 @@ export default function DishManager() { async function remove(dish: Dish) { if ( !window.confirm( - `„${dish.name}“ wirklich löschen? Das Gericht wird auch aus allen Wochenplänen entfernt.` + formatMessage(dict.dishManager.confirmDelete, { name: dish.name }) ) ) return; const { error } = await supabase.from("dishes").delete().eq("id", dish.id); - if (error) setError(`Löschen fehlgeschlagen: ${error.message}`); + if (error) + setError(formatMessage(dict.dishManager.deleteError, { message: error.message })); setSelected((prev) => { const next = new Set(prev); next.delete(dish.id); @@ -128,7 +144,9 @@ export default function DishManager() { if (selected.size === 0) return; if ( !window.confirm( - `${selected.size} Gericht(e) wirklich löschen? Sie werden auch aus allen Wochenplänen entfernt.` + formatMessage(dict.dishManager.confirmDeleteSelected, { + count: selected.size, + }) ) ) return; @@ -138,7 +156,8 @@ export default function DishManager() { .from("dishes") .delete() .in("id", Array.from(selected)); - if (error) setError(`Löschen fehlgeschlagen: ${error.message}`); + if (error) + setError(formatMessage(dict.dishManager.deleteError, { message: error.message })); setSelected(new Set()); setBulkBusy(false); await load(); @@ -164,6 +183,36 @@ export default function DishManager() { }); } + async function autoTranslate() { + if (!form || !form.name.trim()) return; + setTranslateState("busy"); + setError(null); + try { + const res = await fetch("/api/translate", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + table: "dishes", + id: form.id, + text: form.name.trim(), + }), + }); + const data = await res.json(); + if (!res.ok) throw new Error(data?.error ?? `Fehler (${res.status})`); + if (data.configured === false) { + setTranslateState("unavailable"); + return; + } + setForm((prev) => + prev ? { ...prev, nameEn: data.en ?? prev.nameEn, namePl: data.pl ?? prev.namePl } : prev + ); + setTranslateState("done"); + } catch (err) { + setError(err instanceof Error ? err.message : String(err)); + setTranslateState("idle"); + } + } + const allSelected = visible.length > 0 && visible.every((d) => selected.has(d.id)); @@ -171,14 +220,17 @@ export default function DishManager() {

- Gerichte + {dict.dishManager.title}

@@ -191,11 +243,11 @@ export default function DishManager() { {form && (

- {form.id ? "Gericht bearbeiten" : "Neues Gericht"} + {form.id ? dict.dishManager.editDish : dict.dishManager.newDish}

setForm({ ...form, price: e.target.value })} required />
+ +
+
+ + setForm({ ...form, nameEn: e.target.value })} + /> +
+
+ + setForm({ ...form, namePl: e.target.value })} + /> +
+
+
+ + {translateState === "done" && ( + + {dict.dishManager.translated} + + )} + {translateState === "unavailable" && ( + + {dict.dishManager.translateUnavailable} + + )} +
+
)} {loading ? ( -

Lade Gerichte…

+

{dict.common.loading}

) : ( <> {dishes.length > 0 && ( setSearch(e.target.value)} - aria-label="Gerichte durchsuchen" + aria-label={dict.dishManager.searchPlaceholder} /> )} {dishes.length > 0 && ( @@ -268,10 +368,10 @@ export default function DishManager() { checked={allSelected} onChange={toggleAll} /> - Alle auswählen + {dict.dishManager.selectAll} - {selected.size} ausgewählt + {formatMessage(dict.dishManager.selectedCount, { count: selected.size })}
)} @@ -292,10 +396,10 @@ export default function DishManager() { type="checkbox" checked={selected.has(dish.id)} onChange={() => toggleOne(dish.id)} - aria-label={`${dish.name} auswählen`} + aria-label={dish.name} /> - {dish.name} + {localized(dish, locale)} {codes && {codes}}{" "} – {formatPrice(dish.price)} @@ -304,36 +408,37 @@ export default function DishManager() { ); })} {dishes.length === 0 && ( -
  • - Noch keine Gerichte angelegt. -
    • +
  • {dict.dishManager.empty}
    • )} {dishes.length > 0 && visible.length === 0 && (
  • - Keine Treffer für „{search}“. + {formatMessage(dict.dishManager.noResults, { query: search })}
    • )} diff --git a/components/PasskeyManager.tsx b/components/PasskeyManager.tsx index 103c7b7..f745de8 100644 --- a/components/PasskeyManager.tsx +++ b/components/PasskeyManager.tsx @@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { createClient } from "@/lib/supabase/client"; +import { formatMessage } from "@/lib/i18n/shared"; +import { useDict } from "@/components/i18n/LocaleProvider"; interface PasskeyItem { id: string; @@ -12,6 +14,7 @@ interface PasskeyItem { export default function PasskeyManager() { const supabase = useMemo(() => createClient(), []); + const dict = useDict(); const [passkeys, setPasskeys] = useState([]); const [error, setError] = useState(null); const [info, setInfo] = useState(null); @@ -19,9 +22,10 @@ export default function PasskeyManager() { const load = useCallback(async () => { const { data, error } = await supabase.auth.passkey.list(); - if (error) setError(`Passkeys konnten nicht geladen werden: ${error.message}`); + if (error) + setError(formatMessage(dict.passkeys.loadError, { message: error.message })); else setPasskeys((data ?? []) as PasskeyItem[]); - }, [supabase]); + }, [supabase, dict]); useEffect(() => { load(); @@ -34,37 +38,35 @@ export default function PasskeyManager() { try { const { error } = await supabase.auth.registerPasskey(); if (error) { - setError(`Registrierung fehlgeschlagen: ${error.message}`); + setError(formatMessage(dict.passkeys.registerError, { message: error.message })); } else { - setInfo("Passkey wurde erfolgreich registriert."); + setInfo(dict.passkeys.registered); await load(); } } catch (err) { setError( /NotAllowedError|abort/i.test(String(err)) - ? "Die Passkey-Registrierung wurde abgebrochen." - : `Registrierung fehlgeschlagen: ${err instanceof Error ? err.message : String(err)}` + ? dict.passkeys.registerCancelled + : formatMessage(dict.passkeys.registerError, { + message: err instanceof Error ? err.message : String(err), + }) ); } setBusy(false); } async function remove(pk: PasskeyItem) { - if (!window.confirm("Diesen Passkey wirklich löschen?")) return; + if (!window.confirm(dict.passkeys.confirmDelete)) return; const { error } = await supabase.auth.passkey.delete({ passkeyId: pk.id }); - if (error) setError(`Löschen fehlgeschlagen: ${error.message}`); + if (error) + setError(formatMessage(dict.passkeys.deleteError, { message: error.message })); await load(); } return (
    -

    Passkeys

    -

    - Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder - Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden. - Passkeys gelten pro Domain – für den Live-Betrieb muss die Domain in - der Supabase-Konfiguration hinterlegt sein. -

    +

    {dict.passkeys.title}

    +

    {dict.passkeys.hint}

    {error && (

    @@ -79,7 +81,7 @@ export default function PasskeyManager() { onClick={register} disabled={busy} > - Neuen Passkey registrieren + {dict.passkeys.register}

      @@ -90,8 +92,9 @@ export default function PasskeyManager() { {pk.friendly_name || "Passkey"} {" "} - – angelegt am{" "} - {new Date(pk.created_at).toLocaleDateString("de-DE")} + {formatMessage(dict.passkeys.createdOn, { + date: new Date(pk.created_at).toLocaleDateString(dict.dateLocale), + })} ))} {passkeys.length === 0 && ( -
    • - Noch keine Passkeys registriert. -
      • +
    • {dict.passkeys.empty}
      • )}
    diff --git a/components/PublicMobileMenu.tsx b/components/PublicMobileMenu.tsx index 6161c88..18a21b4 100644 --- a/components/PublicMobileMenu.tsx +++ b/components/PublicMobileMenu.tsx @@ -17,10 +17,11 @@ import { mondayOf, todayISO, weekdayIndex, - WEEKDAYS, - WEEKDAYS_SHORT, } from "@/lib/menu"; +import { localized } from "@/lib/types"; import type { MenuEntry, Section } from "@/lib/types"; +import { useDict, useLocale } from "@/components/i18n/LocaleProvider"; +import LanguageSwitcher from "@/components/i18n/LanguageSwitcher"; export default function PublicMobileMenu({ monday, @@ -32,9 +33,11 @@ export default function PublicMobileMenu({ entries: MenuEntry[]; }) { const router = useRouter(); - const days = WEEKDAYS.map((weekday, i) => ({ + const dict = useDict(); + const locale = useLocale(); + const days = dict.weekdays.long.map((weekday, i) => ({ weekday, - short: WEEKDAYS_SHORT[i], + short: dict.weekdays.short[i], iso: addDays(monday, i), })); const isCurrentWeek = monday === mondayOf(todayISO()); @@ -58,7 +61,7 @@ export default function PublicMobileMenu({ return (

    - {day.weekday} · {formatDateLong(day.iso)} + {day.weekday} · {formatDateLong(day.iso, dict.dateLocale)}

    {sections.map((s) => { @@ -69,18 +72,20 @@ export default function PublicMobileMenu({ className="rounded-md border border-gray-200 overflow-hidden" >
    - {s.label}{" "} + {localized(s, locale)}{" "} · {s.time_range}
    {items.length === 0 ? ( -

    –

    +

    {dict.publicMenu.noEntry}

    ) : ( items.map((e) => { const codes = dishCodes(e.dish); return (

    - {e.dish.name} + + {localized(e.dish, locale)} + {codes && {codes}}{" "} – {formatPrice(e.dish.price)}

    @@ -98,25 +103,29 @@ export default function PublicMobileMenu({ return (
    +
    + +
    +
    - ← Woche + {dict.publicMenu.prevWeekShort} - Woche → + {dict.publicMenu.nextWeekShort}
    @@ -128,7 +137,7 @@ export default function PublicMobileMenu({ onClick={() => setTab("tag")} className={`btn flex-1 ${tab === "tag" ? "btn-primary" : "btn-neutral"}`} > - Tag + {dict.publicMenu.dayTab}
    @@ -164,6 +173,10 @@ export default function PublicMobileMenu({ ) : (
    {days.map((d) => renderDay(d))}
    )} + + + {dict.publicMenu.suggestDish} +
    ); } diff --git a/components/SuggestionForm.tsx b/components/SuggestionForm.tsx new file mode 100644 index 0000000..390f0b3 --- /dev/null +++ b/components/SuggestionForm.tsx @@ -0,0 +1,132 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { createClient } from "@/lib/supabase/client"; +import { formatMessage } from "@/lib/i18n/shared"; +import { useDict } from "@/components/i18n/LocaleProvider"; +import LanguageSwitcher from "@/components/i18n/LanguageSwitcher"; + +export default function SuggestionForm() { + const supabase = createClient(); + const dict = useDict(); + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + // Honeypot: für echte Nutzer unsichtbares Feld. Füllt ein Bot es aus, + // tun wir so, als sei alles gut gegangen, ohne wirklich zu speichern. + const [website, setWebsite] = useState(""); + const [error, setError] = useState(null); + const [success, setSuccess] = useState(false); + const [busy, setBusy] = useState(false); + + async function submit(e: React.FormEvent) { + e.preventDefault(); + setError(null); + const trimmedName = name.trim(); + if (!trimmedName) { + setError(dict.suggestions.nameRequired); + return; + } + if (website.trim()) { + // Bot-Falle ausgelöst: keine echte Anfrage, aber Erfolg vortäuschen. + setSuccess(true); + return; + } + setBusy(true); + + const { data: existing } = await supabase + .from("dishes") + .select("id") + .ilike("name", trimmedName) + .limit(1); + if (existing && existing.length > 0) { + setError(dict.suggestions.duplicate); + setBusy(false); + return; + } + + const { error: insertError } = await supabase.from("dish_suggestions").insert({ + name: trimmedName, + description: description.trim() || null, + }); + if (insertError) { + setError(formatMessage(dict.suggestions.genericError, { message: insertError.message })); + setBusy(false); + return; + } + setSuccess(true); + setBusy(false); + } + + return ( +
    +
    +
    +

    + {dict.suggestions.formTitle} +

    + +
    +

    {dict.suggestions.formHint}

    + + {success ? ( +

    {dict.suggestions.success}

    + ) : ( +
    +
    + + setName(e.target.value)} + required + /> +
    +
    + +