WompSchmiede/FamilienFeierPlaner
SHA256
1
1
Fork 0
Code Issues 18 Pull requests Projects Releases 5 Packages 3 Wiki Activity Actions

MS-FE-6: i18n und Consent UI umsetzen #106

New issue
Closed
opened 2026-06-23 23:03:56 +02:00 by niboer · 1 comment
niboer commented 2026-06-23 23:03:56 +02:00
Owner
Copy link

Aufgaben

Commit 1: i18n-Infrastruktur mit Uebersetzungsdateien und Store

  • Erstellung der Frontend-Uebersetzungsdateien in frontend/src/lib/i18n/de/
  • i18n Store mit getLocale(), setLocale(lang), t(path)
  • API-Integration (listLanguages, getI18n)
  • Tests fuer Store und Dateien

Commit 2: Sprachauswahl in Account-Einstellungen

  • Sprachauswahl-Dropdown in Account-Seite
  • Locale-Cookie (ui_locale) fuer Persistenz
  • Integration in App-Layout
  • Tests fuer Sprachauswahl

Commit 3: DSGVO-Consent-Dialog und Consent-Annahme

  • ConsentDialog-Komponente mit Policy-Text
  • Integration in Dashboard (403-Consent-Error erkennen)
  • Consent-Status in Account-Seite
  • API-Call (updateGuestConsent) bei Zustimmung
  • Tests fuer Consent-Dialog und Dashboard-Integration

Commit 4: Consent-Status in Personenuebersicht und Haushalts-Overlay

  • Consent-Info in Person-Detail-Seite
  • Haushalts-Consent-Overlay (Fremd-Zustimmung via acceptedBy)
  • Personen-Liste: Consent-Badge (optional)
  • Tests fuer Personen-Consent-Elemente

Hinweis: Backend-Endpunkt PUT /api/v1/events/{event_id}/guests/{person_id}/consent erfordert eventId. Invitations-API ist nicht durch requireConsent geschuetzt → dient als Quelle fuer eventId. Siehe docs/design/02-datenmodell.md (i18n + DSGVO-Zustimmung).

## Aufgaben ### Commit 1: i18n-Infrastruktur mit Uebersetzungsdateien und Store - [ ] Erstellung der Frontend-Uebersetzungsdateien in `frontend/src/lib/i18n/de/` - [ ] i18n Store mit `getLocale()`, `setLocale(lang)`, `t(path)` - [ ] API-Integration (listLanguages, getI18n) - [ ] Tests fuer Store und Dateien ### Commit 2: Sprachauswahl in Account-Einstellungen - [ ] Sprachauswahl-Dropdown in Account-Seite - [ ] Locale-Cookie (ui_locale) fuer Persistenz - [ ] Integration in App-Layout - [ ] Tests fuer Sprachauswahl ### Commit 3: DSGVO-Consent-Dialog und Consent-Annahme - [ ] ConsentDialog-Komponente mit Policy-Text - [ ] Integration in Dashboard (403-Consent-Error erkennen) - [ ] Consent-Status in Account-Seite - [ ] API-Call (updateGuestConsent) bei Zustimmung - [ ] Tests fuer Consent-Dialog und Dashboard-Integration ### Commit 4: Consent-Status in Personenuebersicht und Haushalts-Overlay - [ ] Consent-Info in Person-Detail-Seite - [ ] Haushalts-Consent-Overlay (Fremd-Zustimmung via acceptedBy) - [ ] Personen-Liste: Consent-Badge (optional) - [ ] Tests fuer Personen-Consent-Elemente **Hinweis:** Backend-Endpunkt `PUT /api/v1/events/{event_id}/guests/{person_id}/consent` erfordert eventId. Invitations-API ist nicht durch requireConsent geschuetzt → dient als Quelle fuer eventId. Siehe docs/design/02-datenmodell.md (i18n + DSGVO-Zustimmung).
niboer commented 2026-06-28 12:50:29 +02:00
Author
Owner
Copy link

Umsetzungsplan

Nach Analyse des aktuellen Stands (Backend i18n + Consent vollstaendig via MS-BE-API-5, Frontend fehlt komplett) ergibt sich folgende Einteilung in 4 Commits.

Commit 1: feat(frontend): i18n-Infrastruktur mit Uebersetzungsdateien und Store

Scope:

  • Erstellung der Frontend-Uebersetzungsdateien in frontend/src/lib/i18n/de/:
    • common.json — Allgemein (Speichern, Abbrechen, etc.)
    • events.json — Event-bezogene Texte
    • persons.json — Personen-bezogene Texte
    • groups.json — Haushalts-bezogene Texte
    • templates.json — Vorlagen-bezogene Texte
    • account.json — Account-Einstellungen (Sprache, Consent)
    • consent.json — DSGVO-Consent-Texte (Policy, Dialog)
    • errors.json — Fehlermeldungen
  • frontend/src/lib/i18n/en/_placeholder.json fuer EN-Struktur
  • i18n Store frontend/src/lib/stores/i18n.svelte.ts mit:
    • getLocale(), setLocale(lang) — Sprache verwalten
    • t(path) — Uebersetzung per Dot-Notation (z. B. t('common.save'))
    • Sprachen via listLanguages() API laden
    • Uebersetzungen via getI18n(lang) lazy laden
    • Svelte 5 runes-basiert (wie session.svelte.ts)
  • Tests in frontend/src/tests/i18n.test.ts:
    • Store-Funktionen (setLocale, getLocale, t)
    • API-Integration (listLanguages, getI18n)
    • Vorhandensein aller Uebersetzungsdateien

Commit 2: feat(frontend): Sprachauswahl in Account-Einstellungen

Scope:

  • Sprachauswahl-Dropdown in Account-Seite (account/+page.svelte)
  • Initiale Sprache aus Cookie ui_locale beim App-Start laden
  • +layout.svelte integriert i18n Store und initialisiert Locale aus Cookie
  • +layout.server.ts liest ui_locale-Cookie aus
  • Api-Response listLanguages in account/+page.server.ts laden
  • Tests aktualisieren (account.test.ts):
    • Sprachauswahl-Komponente vorhanden
    • Cookie wird gesetzt/gelesen
    • Locale-Wechsel funktioniert

Commit 3: feat(frontend): DSGVO-Consent-Dialog und Consent-Annahme

Scope:

  • Neue Consent-Komponente frontend/src/lib/components/consent-dialog.svelte:
    • Zeigt Policy-Text (aus i18n/de/consent.json)
    • Checkbox "Ich stimme den Datenschutzbestimmungen zu"
    • Accept-Button ruft updateGuestConsent() API auf
    • Benoetigt eventId (aus Invitations) + policyVersion
  • Integration in Dashboard (/app/dashboard):
    • Erkennung von 403 "DSGVO-Zustimmung erforderlich"
    • Anzeige des Consent-Dialogs als Overlay
    • Nach erfolgreicher Zustimmung: Seiten-Reload
  • Integration in Account-Seite:
    • Consent-Status-Abschnitt ("DSGVO-Zustimmung" Card)
    • Zeigt acceptedAt und policyVersion nach Zustimmung
    • Accept-Button fuer Erst-Zustimmung
  • Tests (frontend/src/tests/consent.test.ts):
    • Komponente existiert
    • Dashboard erkennt 403-Consent-Error
    • API-Call bei Zustimmung
    • Seiten-Reload nach Erfolg

Commit 4: feat(frontend): Consent-Status in Personenuebersicht und Haushalts-Overlay

Scope:

  • Consent-Info in Person-Detail-Seite (persons/[personId]/+page.svelte):
    • Anzeige des Consent-Status (z. B. "DSGVO akzeptiert am ..." oder "Nicht akzeptiert")
    • Button "Zustimmung erteilen" fuer Haushaltsmitglieder
  • Haushalts-Consent-Overlay:
    • ConsentDialog erweitert fuer Fremd-Zustimmung (acceptedBy-Parameter)
    • Haushaltsmitglied kann Consent fuer andere Mitglieder abgeben
  • Personen-Liste (persons/+page.svelte):
    • Optional: Consent-Badge-Spalte (wenn Consent-Daten verfuegbar)
  • Tests aktualisieren (persons.test.ts) fuer neue Consent-Elemente

Hinweis zum Consent-API-Design:
Der Backend-Endpunkt PUT /api/v1/events/{event_id}/guests/{person_id}/consent erfordert eine eventId. Die Invitations-API ist nicht durch requireConsent geschuetzt, daher laden wir die Einladungen vorab, um eine eventId fuer den Consent-Call zu erhalten. Falls keine Invitations existieren, wird eine entsprechende Meldung angezeigt.

refs #106

## Umsetzungsplan Nach Analyse des aktuellen Stands (Backend i18n + Consent vollstaendig via MS-BE-API-5, Frontend fehlt komplett) ergibt sich folgende Einteilung in 4 Commits. ### Commit 1: `feat(frontend): i18n-Infrastruktur mit Uebersetzungsdateien und Store` **Scope:** - Erstellung der Frontend-Uebersetzungsdateien in `frontend/src/lib/i18n/de/`: - `common.json` — Allgemein (Speichern, Abbrechen, etc.) - `events.json` — Event-bezogene Texte - `persons.json` — Personen-bezogene Texte - `groups.json` — Haushalts-bezogene Texte - `templates.json` — Vorlagen-bezogene Texte - `account.json` — Account-Einstellungen (Sprache, Consent) - `consent.json` — DSGVO-Consent-Texte (Policy, Dialog) - `errors.json` — Fehlermeldungen - `frontend/src/lib/i18n/en/_placeholder.json` fuer EN-Struktur - i18n Store `frontend/src/lib/stores/i18n.svelte.ts` mit: - `getLocale()`, `setLocale(lang)` — Sprache verwalten - `t(path)` — Uebersetzung per Dot-Notation (z. B. `t('common.save')`) - Sprachen via `listLanguages()` API laden - Uebersetzungen via `getI18n(lang)` lazy laden - Svelte 5 runes-basiert (wie `session.svelte.ts`) - Tests in `frontend/src/tests/i18n.test.ts`: - Store-Funktionen (setLocale, getLocale, t) - API-Integration (listLanguages, getI18n) - Vorhandensein aller Uebersetzungsdateien ### Commit 2: `feat(frontend): Sprachauswahl in Account-Einstellungen` **Scope:** - Sprachauswahl-Dropdown in Account-Seite (`account/+page.svelte`) - Initiale Sprache aus Cookie `ui_locale` beim App-Start laden - `+layout.svelte` integriert i18n Store und initialisiert Locale aus Cookie - `+layout.server.ts` liest `ui_locale`-Cookie aus - Api-Response `listLanguages` in `account/+page.server.ts` laden - Tests aktualisieren (`account.test.ts`): - Sprachauswahl-Komponente vorhanden - Cookie wird gesetzt/gelesen - Locale-Wechsel funktioniert ### Commit 3: `feat(frontend): DSGVO-Consent-Dialog und Consent-Annahme` **Scope:** - Neue Consent-Komponente `frontend/src/lib/components/consent-dialog.svelte`: - Zeigt Policy-Text (aus `i18n/de/consent.json`) - Checkbox "Ich stimme den Datenschutzbestimmungen zu" - Accept-Button ruft `updateGuestConsent()` API auf - Benoetigt eventId (aus Invitations) + policyVersion - Integration in Dashboard (`/app/dashboard`): - Erkennung von 403 "DSGVO-Zustimmung erforderlich" - Anzeige des Consent-Dialogs als Overlay - Nach erfolgreicher Zustimmung: Seiten-Reload - Integration in Account-Seite: - Consent-Status-Abschnitt ("DSGVO-Zustimmung" Card) - Zeigt acceptedAt und policyVersion nach Zustimmung - Accept-Button fuer Erst-Zustimmung - Tests (`frontend/src/tests/consent.test.ts`): - Komponente existiert - Dashboard erkennt 403-Consent-Error - API-Call bei Zustimmung - Seiten-Reload nach Erfolg ### Commit 4: `feat(frontend): Consent-Status in Personenuebersicht und Haushalts-Overlay` **Scope:** - Consent-Info in Person-Detail-Seite (`persons/[personId]/+page.svelte`): - Anzeige des Consent-Status (z. B. "DSGVO akzeptiert am ..." oder "Nicht akzeptiert") - Button "Zustimmung erteilen" fuer Haushaltsmitglieder - Haushalts-Consent-Overlay: - ConsentDialog erweitert fuer Fremd-Zustimmung (acceptedBy-Parameter) - Haushaltsmitglied kann Consent fuer andere Mitglieder abgeben - Personen-Liste (`persons/+page.svelte`): - Optional: Consent-Badge-Spalte (wenn Consent-Daten verfuegbar) - Tests aktualisieren (`persons.test.ts`) fuer neue Consent-Elemente **Hinweis zum Consent-API-Design:** Der Backend-Endpunkt `PUT /api/v1/events/{event_id}/guests/{person_id}/consent` erfordert eine eventId. Die Invitations-API ist nicht durch `requireConsent` geschuetzt, daher laden wir die Einladungen vorab, um eine eventId fuer den Consent-Call zu erhalten. Falls keine Invitations existieren, wird eine entsprechende Meldung angezeigt. refs #106
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
v0.5.0
v0.4.0
v0.3.0
v0.2.2
v0.2.1
v0.2.0
v0.1.0
Labels
Clear labels   
component/backend
Backend-Komponente

  
component/docs
Dokumentation (README, design.md, AGENTS.md)

  
component/e2e
E2E-Testinfrastruktur (Playwright, Docker-E2E-Runner)

  
component/frontend
Frontend (Cloudflare Worker, BFF, UI)

  
component/infra
Infrastruktur (Docker, CI/CD, Build)

  
component/keycloak
Keycloak (Realm, Theme, Admin API)

  
prio/high
Hohe Prioritaet (blockierend/kritisch)

  
prio/low
Niedrige Prioritaet

  
prio/medium
Mittlere Prioritaet

  
type/bug
Fehler oder unerwartetes Verhalten

  
type/chore
Wartungs- und Konfigurationsaufgaben

  
type/feature
Neues Feature

  
type/refactor
Refactoring

  
type/test
Tests

No labels
component/backend
component/docs
component/e2e
component/frontend
component/infra
component/keycloak
prio/high
prio/low
prio/medium
type/bug
type/chore
type/feature
type/refactor
type/test
Milestone
Clear milestone
No items
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
WompSchmiede/FamilienFeierPlaner#106
No description provided.