Compare commits
No commits in common. "main" and "feature/booking-component" have entirely different histories.
main
...
feature/bo
|
|
@ -10,6 +10,5 @@ Thumbs.db
|
|||
# Private Buchungsdaten und lokale Testergebnisse
|
||||
src/server/data/*
|
||||
!src/server/data/.gitkeep
|
||||
!src/server/data/contact-requests.csv
|
||||
playwright-report/
|
||||
test-results/
|
||||
|
|
|
|||
|
|
@ -43,12 +43,6 @@ angezeigt. Der Ablauf bleibt eine Simulation ohne Zahlung oder verbindliche
|
|||
Beratung. Buchungen liegen lokal in `src/server/data/bookings.csv`. Diese Datei
|
||||
nicht vorab leer anlegen: Das Backend erzeugt sie bei der ersten Buchung selbst.
|
||||
|
||||
## Beraterkontakt testen
|
||||
|
||||
Die [Kontakt-Testseite](http://localhost:5173/contact-test.html?berater-id=relindis-agethen)
|
||||
öffnet das neue Popup. Kundenprüfung, Mailpit-Versand, Profil-Einbindung und
|
||||
Checkliste sind in [docs/contact.md](docs/contact.md) dokumentiert.
|
||||
|
||||
## Prüfen
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -4,28 +4,13 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ernährungs-Pakete – Tri-Hub</title>
|
||||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||
<link rel="stylesheet" href="/src/styles/packages.css" />
|
||||
</head>
|
||||
<body class="packages-page">
|
||||
<div id="navbar-placeholder"></div>
|
||||
<main class="packages-section" id="main-content" tabindex="-1">
|
||||
<div class="packages-header">
|
||||
<div>
|
||||
<p class="packages-eyebrow">TRI-HUB · ERNÄHRUNG</p>
|
||||
<h1>Unsere Ernährungs-Pakete</h1>
|
||||
</div>
|
||||
<p class="packages-intro">
|
||||
Wähle das Paket, das zu deinem aktuellen Stand passt. Von
|
||||
den Grundlagen bis zur Wettkampf-Vorbereitung.
|
||||
</p>
|
||||
</div>
|
||||
<body>
|
||||
<header class="container"><a href="/">Zur Startseite</a></header>
|
||||
<main class="packages-section" id="angebotsuebersicht-section">
|
||||
<div class="packages-header"><h1>Unsere Ernährungs-Pakete</h1></div>
|
||||
<div class="packages-container" id="packages-container"></div>
|
||||
</main>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/components/navigationsbar/navigation.js"
|
||||
></script>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/features/angebote/angebote-entry.js"
|
||||
|
|
|
|||
31
berater.html
31
berater.html
|
|
@ -1,31 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Lerne die Ernährungsberaterinnen und Ernährungsberater von Tri-Hub kennen." />
|
||||
<title>Beraterprofil · Tri-Hub</title>
|
||||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||
<link rel="stylesheet" href="/src/styles/packages.css" />
|
||||
<link rel="stylesheet" href="/src/features/berater/berater.css" />
|
||||
</head>
|
||||
<body class="packages-page advisor-page">
|
||||
<div id="navbar-placeholder"></div>
|
||||
<main id="main-content" class="advisor-main">
|
||||
<section class="advisor-section" aria-labelledby="advisor-heading">
|
||||
<div class="advisor-container">
|
||||
<header class="advisor-heading">
|
||||
<p class="advisor-eyebrow">PERSÖNLICH FÜR DICH DA</p>
|
||||
<h1 id="advisor-heading">Lerne deine Ernährungsberater kennen.</h1>
|
||||
<p class="advisor-intro">Hinter einer guten Ernährungsstrategie stehen Menschen, die zuhören und ihre Erfahrung in deinen Alltag und dein Training einbringen.</p>
|
||||
</header>
|
||||
<div class="advisor-grid" id="advisor-profiles" aria-live="polite">
|
||||
<p class="advisor-loading">Beraterprofile werden geladen …</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||
<script type="module" src="/src/features/berater/berater-entry.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Berater kontaktieren – Tri-Hub Testseite</title>
|
||||
</head>
|
||||
<body>
|
||||
<main class="contact-test">
|
||||
<p>TRI-HUB · KONTAKT-DEMO</p>
|
||||
<h1>Dein direkter Draht zur Beratung</h1>
|
||||
<p id="advisor-name"></p>
|
||||
<button id="open-contact" type="button">
|
||||
Berater kontaktieren
|
||||
</button>
|
||||
<p>
|
||||
Testseite für das spätere Beraterprofil. Nutze eine
|
||||
E-Mail-Adresse aus einer vorhandenen Testbuchung.
|
||||
</p>
|
||||
</main>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/features/contact/contact-entry.js"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
# Beraterprofile und Bildergalerie testen
|
||||
|
||||
Die Berater-Tests laufen auf dem Branch `feature/beraterbilder`. Dieser enthält auch die Profiländerungen aus `feature/beraterprofile`.
|
||||
|
||||
## Node-Tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
Die Node-Suite prüft die Beraterdaten, eindeutige IDs, Kontaktanzeigenamen, vorhandene Porträt- und Aktionsbilder sowie den Navigationslink zur eigenständigen Profilseite.
|
||||
|
||||
## Browser-Tests
|
||||
|
||||
```sh
|
||||
npm run test:browser -- src/tests/browser/berater.spec.js
|
||||
```
|
||||
|
||||
Die Browser-Tests prüfen die Profilkarten, den Kontakt-Dialog, die Bildgröße und das manuelle Wechseln der Galerie mit Pfeilen und Positionspunkten. Playwright startet dafür standardmäßig die Testserver auf den Ports 3000 und 5173. Falls diese Ports bereits von den lokalen Projektservern belegt sind, kann Playwright sie wiederverwenden:
|
||||
|
||||
```sh
|
||||
PW_REUSE_EXISTING=1 npm run test:browser -- src/tests/browser/berater.spec.js
|
||||
```
|
||||
|
||||
PowerShell:
|
||||
|
||||
```powershell
|
||||
$env:PW_REUSE_EXISTING = "1"
|
||||
npm run test:browser -- src/tests/browser/berater.spec.js
|
||||
```
|
||||
|
||||
Beim ersten Browser-Testlauf kann Playwright Chromium benötigen:
|
||||
|
||||
```sh
|
||||
npx playwright install chromium
|
||||
```
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
# Übergabe an die KI der Beraterprofilseite
|
||||
|
||||
Binde das vorhandene Kontakt-Popup in die Kontaktbuttons der Beraterprofile
|
||||
ein. Übergib ausschließlich die Berater-ID als `advisorId`. Implementiere
|
||||
kein eigenes Kontaktformular und keine separate E-Mail-Prüfung.
|
||||
|
||||
## Relevante Dateien
|
||||
|
||||
- `src/shared/berater-daten.json`: gemeinsame Datenquelle für Profile und Kontakt;
|
||||
Array mit eindeutigen String-IDs, `vorname`, `nachname`, optionalem `spitzname` und `email`. Eigene öffentliche Profilfelder dürfen ergänzt werden.
|
||||
- `src/shared/berater.js`: `findAdvisor(advisorId)` liefert den passenden Eintrag.
|
||||
- `src/features/contact/contact-dialog.js`: exportiert `openContactDialog({ advisorId })`.
|
||||
- `src/features/contact/contact.css`: wird automatisch vom Popup-Modul importiert;
|
||||
die Schriftdateien liegen unter `public/fonts/`.
|
||||
- `src/features/contact/contact-entry.js` und `contact-test.html`: Beispielintegration.
|
||||
- `src/server/services/contact-service.js`: prüft Kunden-E-Mail und Berater-ID,
|
||||
lädt die Empfängeradresse serverseitig aus der JSON.
|
||||
- `src/server/swagger.json`: API-Vertrag für `POST /api/contact`.
|
||||
|
||||
## Datenvertrag
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "relindis-agethen",
|
||||
"vorname": "Relindis",
|
||||
"nachname": "Agethen",
|
||||
"spitzname": "Lilli",
|
||||
"email": "relindis.agethen@tri-hub.de"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Die Profilseite und das Popup müssen dieselben IDs verwenden. E-Mail-Adressen
|
||||
werden explizit gepflegt und nicht aus Namen erzeugt. Sie müssen auf `@tri-hub.de`
|
||||
enden. Keine vertraulichen Informationen in die JSON schreiben: Sie ist Teil
|
||||
des Frontends. Nach Änderungen API neu starten und Frontend neu bauen.
|
||||
|
||||
## Einzubindender Code
|
||||
|
||||
Beispielbutton (ID aus dem jeweiligen Profil):
|
||||
|
||||
```html
|
||||
<button type="button" data-berater-id="relindis-agethen">
|
||||
Berater kontaktieren
|
||||
</button>
|
||||
```
|
||||
|
||||
Im JavaScript-Modul der Profilseite, einmalig registrieren:
|
||||
|
||||
```js
|
||||
// Importpfad relativ zu dieser Datei anpassen.
|
||||
import { openContactDialog } from "./src/features/contact/contact-dialog.js";
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
const button = event.target.closest("button[data-berater-id]");
|
||||
if (!button) return;
|
||||
openContactDialog({ advisorId: button.dataset.beraterId });
|
||||
});
|
||||
```
|
||||
|
||||
Bei dynamischer Erzeugung des Buttons die ID aus dem Profil setzen:
|
||||
|
||||
```js
|
||||
button.dataset.beraterId = profile.id;
|
||||
```
|
||||
|
||||
Alternativ direkt am einzelnen Button binden (nicht zusätzlich zur Delegation):
|
||||
|
||||
```js
|
||||
button.addEventListener("click", () => {
|
||||
openContactDialog({ advisorId: profile.id });
|
||||
});
|
||||
```
|
||||
|
||||
Falls die Profilseite selbst Daten aus der gemeinsamen Datei benötigt:
|
||||
|
||||
```js
|
||||
// Beispiel für ein Modul direkt unter src/; Pfad ggf. anpassen.
|
||||
import berater from "./shared/berater-daten.json" with { type: "json" };
|
||||
|
||||
const profile = berater.find((entry) => entry.id === advisorId);
|
||||
// profile.vorname, profile.nachname, profile.spitzname und profile.email sind verfügbar.
|
||||
```
|
||||
|
||||
Das Popup zeigt den getrimmten `spitzname`, falls nicht leer, sonst den
|
||||
getrimmten `vorname`. `nachname` und das bisherige Feld `name` werden für die
|
||||
Überschrift nicht verwendet. Es wird kein „kontaktieren“ angehängt.
|
||||
|
||||
Das Popup ermittelt den Anzeigenamen selbst und sendet beim Absenden
|
||||
`{ email, advisorId, reason, simulationAccepted }` an `/api/contact`. Die
|
||||
Profilseite muss weder Name noch E-Mail an das Popup schicken. Kundenprüfung,
|
||||
Simulation, Mailpit-Versand und Microsoft-Bookings-Weiterleitung sind bereits
|
||||
implementiert. Unbekannte IDs sperren das Absenden.
|
||||
|
||||
## Testen
|
||||
|
||||
Mit laufendem Frontend, API und Mailpit:
|
||||
`http://localhost:5173/contact-test.html?berater-id=relindis-agethen`.
|
||||
Für die Kundenadresse eine vorhandene Testbuchung verwenden. Die Prüfung
|
||||
findet ausschließlich beim Absenden statt. Der Branch ist
|
||||
`feature/terminbuchung-kontaktfeld`; die Kontaktdateien müssen im Arbeitsstand
|
||||
der Profilseite vorhanden sein.
|
||||
154
docs/contact.md
154
docs/contact.md
|
|
@ -1,154 +0,0 @@
|
|||
# Beraterkontakt (Simulation)
|
||||
|
||||
## Testseite starten
|
||||
|
||||
Wie bei der Buchung in drei Terminals starten:
|
||||
|
||||
```sh
|
||||
npm run dev:mail
|
||||
npm run dev:server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Öffne <http://localhost:5173/contact-test.html?berater-id=relindis-agethen>.
|
||||
Der Button öffnet ein modales Fenster. Gib eine E-Mail aus einer vorhandenen
|
||||
Buchung in `src/server/data/bookings.csv` ein, wähle einen Kontaktgrund und
|
||||
bestätige den Simulationshinweis. Beim Klick auf „Anfrage senden & Termin wählen“
|
||||
prüft der Server die E-Mail und versendet nur bei vorhandener Buchung. Bei Bedarf zuerst
|
||||
über die bestehende Angebotsseite eine Testbuchung anlegen.
|
||||
|
||||
Nach dem Absenden müssen zwei getrennte Nachrichten in
|
||||
<http://localhost:8025> erscheinen: an die Kundenadresse und beispielsweise
|
||||
`relindis.agethen@tri-hub.de`. Der Browser wechselt anschließend zur vom Auftrag
|
||||
vorgegebenen Microsoft-Bookings-Adresse. Es wird dort kein Termin automatisch
|
||||
gebucht. Die Checkliste spricht von Microsoft Forms; umgesetzt ist der konkret
|
||||
angegebene Bookings-Link.
|
||||
|
||||
## Checkliste
|
||||
|
||||
- [x] Kontaktgrund auswählbar: Coaching, Ernährungsplan, Wettkampfverpflegung,
|
||||
Regeneration, Paketfragen, Termin und Sonstiges.
|
||||
- [x] Getrennte Eingangsbestätigungen an Kunde und Berater, ausschließlich
|
||||
simuliert über Mailpit, mit Kontaktgrund und Simulationshinweis.
|
||||
- [x] Weiterleitung zur vorhandenen Microsoft-Bookings-Adresse nach Annahme
|
||||
beider Nachrichten durch Mailpit; zusätzlicher Link als Rückfalloption.
|
||||
- [x] Kontakt nur nach erfolgreichem E-Mail-Abgleich mit `bookings.csv`;
|
||||
der Server prüft beim tatsächlichen Absenden erneut.
|
||||
|
||||
## Einbindung in Beraterprofile
|
||||
|
||||
Die Profilseite importiert `openContactDialog` aus
|
||||
`src/features/contact/contact-dialog.js` und übergibt ausschließlich die ID:
|
||||
|
||||
```js
|
||||
import { openContactDialog } from "./src/features/contact/contact-dialog.js";
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
openContactDialog({ advisorId: profile.id });
|
||||
});
|
||||
```
|
||||
|
||||
Den Importpfad relativ zur einbindenden Datei anpassen. Das Modul bringt die
|
||||
Popup-Styles und die lokalen DM-Sans-Schriftdateien mit. Die vollständige
|
||||
Einbauanleitung für die Profilseite steht in [contact-integration.md](contact-integration.md).
|
||||
|
||||
Die gemeinsame Datenquelle `src/shared/berater-daten.json` enthält ein Array
|
||||
mit eindeutigen String-IDs und den Feldern `id`, `vorname`, `nachname`, `spitzname`, `email`. Die vorhandenen Einträge enthalten die Beraterprofile. Zusätzliche Profilfelder sind möglich. Die Datei
|
||||
wird im Frontend eingebunden: ausschließlich öffentliche Profildaten eintragen.
|
||||
|
||||
`src/shared/berater.js` stellt `findAdvisor(advisorId)` bereit. Popup und Server
|
||||
verwenden dieselbe Zuordnung. Der Server holt die Empfängeradresse ausschließlich
|
||||
aus dieser JSON; vom Browser gesendete Namen oder Empfängeradressen werden
|
||||
nicht übernommen. E-Mail-Adressen müssen gültig sein und auf `@tri-hub.de`
|
||||
enden. Eine unbekannte ID wird abgelehnt und sperrt das Absenden im Popup.
|
||||
|
||||
Die Testseite liest den URL-Parameter `berater-id`, zum Beispiel
|
||||
`contact-test.html?berater-id=maren-hoffmann`. Ohne Parameter verwendet sie
|
||||
`relindis-agethen`. Nach Änderungen an der JSON den API-Server neu starten und für
|
||||
das Deployment das Frontend neu bauen.
|
||||
|
||||
Das native `dialog` hält den Tastaturfokus im Popup. Escape und Schließen
|
||||
bringen ihn zum auslösenden Button zurück. Während einer Anfrage ist Schließen
|
||||
kurz gesperrt, damit der Versand nicht unbemerkt weiterläuft. Das Fenster ist
|
||||
auf schmalen Bildschirmen scrollbar. Die E-Mail wird bei jedem Absenden geprüft;
|
||||
ein separater Prüfbutton ist nicht erforderlich. Es gibt keine zusätzlichen
|
||||
Laufzeitabhängigkeiten.
|
||||
|
||||
## API
|
||||
|
||||
Der vollständige OpenAPI-Vertrag steht in `src/server/swagger.json`.
|
||||
Beide Endpunkte erwarten POST mit `Content-Type: application/json`, maximal
|
||||
8 KiB. Fehler enthalten `error.code` und `error.message`.
|
||||
|
||||
| Endpunkt | Eingabe | Erfolg |
|
||||
| ----------------------- | --------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| `/api/contact/validate` | `{ "email": "kunde@example.test" }` | 200: `{ "valid": true, "email": "kunde@example.test" }` |
|
||||
| `/api/contact` | E-Mail, Berater-ID, Grund, Zustimmung (siehe unten) | 201: `simulated`, `emailStatus: "accepted"`, `redirectUrl` |
|
||||
|
||||
```json
|
||||
{
|
||||
"email": "kunde@example.test",
|
||||
"advisorId": "relindis-agethen",
|
||||
"reason": "coaching",
|
||||
"simulationAccepted": true
|
||||
}
|
||||
```
|
||||
|
||||
400 bedeutet ungültige Eingaben, 403 keine passende Buchung, 405 falsche Methode,
|
||||
413 zu große Anfrage, 415 falscher Medientyp, 503 nicht lesbarer CSV-Speicher oder ungültige Beraterkontaktdaten.
|
||||
502 bedeutet, dass mindestens eine Mailannahme fehlgeschlagen oder unklar ist;
|
||||
der Browser leitet dann nicht weiter. 500 bezeichnet einen unerwarteten Fehler.
|
||||
Die CSV wird ausschließlich gelesen und bleibt unverändert. Der separate
|
||||
Validierungsendpunkt bleibt für API-Nutzer verfügbar; das Popup verwendet
|
||||
ausschließlich `/api/contact` mit integrierter Kundenprüfung.
|
||||
|
||||
## Grenzen der Simulation
|
||||
|
||||
Der E-Mail-Abgleich ignoriert Groß-/Kleinschreibung und äußere Leerzeichen.
|
||||
Er bestätigt einen Eintrag in der Buchungsdatei, nicht den Besitz des Postfachs.
|
||||
Die Prüfantwort ist kein Anmeldetoken und gibt keine Buchungsdetails zurück.
|
||||
Vor einem öffentlichen Produktiveinsatz wären eine Anmeldung oder Bestätigung
|
||||
per E-Mail sowie ein Schutz vor automatisierten Adressabfragen erforderlich.
|
||||
|
||||
Kontaktmails verwenden fest `127.0.0.1:1025`, unabhängig von einer eventuell
|
||||
externen SMTP-Konfiguration des Buchungsablaufs. Mailpit muss deshalb auf
|
||||
demselben Host laufen. Kunden- und Berateradresse sind simulierte Empfänger;
|
||||
es erfolgt kein externer Versand. SMTP-Annahme ist keine reale Zustellbestätigung.
|
||||
|
||||
Kontaktanfragen werden nicht dauerhaft gespeichert und haben keinen
|
||||
Idempotenzschlüssel. Doppelklicks sind während des Versands gesperrt. Bei
|
||||
Verbindungsabbrüchen oder Teilfehlern kann bereits eine Nachricht vorliegen:
|
||||
vor manuellem Wiederholen Mailpit prüfen. Es gibt keinen automatischen Neuversand.
|
||||
|
||||
## Prüfungen
|
||||
|
||||
- `npm test`: API, CSV-Abgleich, erneute Validierung beim Absenden, ungültige
|
||||
Eingaben, SMTP-Empfänger und Teilfehler; isolierte temporäre CSV-Dateien.
|
||||
- `npm run test:browser`: vollständiger Ablauf einschließlich abgefangener
|
||||
externer Weiterleitung, unbekannter Adresse, geänderter E-Mail, Versandfehler,
|
||||
mobiler Darstellung, Fokus und Escape; zusätzlich bestehende Buchungstests.
|
||||
- `npm run build` und `git diff --check`.
|
||||
- Lokaler SMTP-Smoke-Test mit Mailpit: beide Empfänger und Simulationshinweis
|
||||
in den empfangenen Nachrichten geprüft.
|
||||
|
||||
Chromium muss für Playwright installiert sein (`npx playwright install chromium`).
|
||||
In dieser Arbeitsumgebung liegt der Testbrowser unter `/tmp/trihub-playwright`;
|
||||
hier mit `PLAYWRIGHT_BROWSERS_PATH=/tmp/trihub-playwright npm run test:browser` starten.
|
||||
Der globale Formatcheck hat bereits bestehende Abweichungen in `src/main.js`
|
||||
und `src/components/navigationsbar/README.md`; die Kontaktdateien sind formatiert.
|
||||
Der bestehende Gesamt-Build meldet außerdem fehlende ältere Schriftdateien aus
|
||||
dem globalen Stylesheet. Das Kontakt-Popup verwendet eigene lokale Schriftdateien.
|
||||
|
||||
### Ergebnis dieser Umsetzung
|
||||
|
||||
31 API-/Servicetests und alle vier Kontakt-Browsertests bestanden.
|
||||
Build, lokale Mailpit-Prüfung und Formatierung der geänderten Dateien bestanden.
|
||||
Die bestehenden Buchungs-Browsertests sind teilweise nicht mehr an das schon
|
||||
vorhandene Buchungs-Popup angepasst: Sie suchen Formularfelder, ohne vorher
|
||||
„Jetzt buchen“ zu klicken. Weitere Bestandsfälle erwarten einen nicht mehr vorhandenen Startseiten-Link
|
||||
oder eine Seitennavigation, wo bereits ein Popup geöffnet wird. Beim ursprünglichen Gesamtlauf bestanden 7 von 15 Browsertests; die 8 Fehler
|
||||
betrafen ausschließlich die unveränderten Buchungstests. Die gezielten
|
||||
Kontakttests werden nach Anpassungen separat ausgeführt.
|
||||
`git diff --check` ist für die eigenen Änderungen sauber; die zuvor bereits
|
||||
geänderte `bookings.csv` erzeugt separat CRLF-Whitespace-Hinweise und wurde
|
||||
von dieser Umsetzung nicht verändert.
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
# Kontaktformular der Ernährungsseite
|
||||
|
||||
Das Formular in `index.html` sendet seine Eingaben als JSON an `POST /api/nutrition-contact`.
|
||||
Der Server validiert Name, E-Mail, Betreff und Nachricht, speichert die Anfrage in
|
||||
`src/server/data/contact-requests.csv` und sendet anschließend zwei E-Mails über
|
||||
Mailpit auf `127.0.0.1:1025`:
|
||||
|
||||
- eine Eingangsbestätigung an die eingegebene E-Mail-Adresse;
|
||||
- beide Nachrichten mit dem Absender `Tri-Hub Ernährung <noreply@tri-hub.de>`;
|
||||
- die vollständige Kontaktanfrage an die Mailpit-Testadresse
|
||||
`ernaehrung@tri-hub.de`; die SMTP-Verbindung ist fest auf den lokalen
|
||||
Mailpit-Server gesetzt, daher wird diese Nachricht nur simuliert und nicht
|
||||
an den echten Mailserver zugestellt.
|
||||
|
||||
Die Mailpit-Weboberfläche ist lokal unter `http://127.0.0.1:8025` erreichbar.
|
||||
Zum Entwickeln Mailpit mit `npm run dev:mail`, den API-Server mit
|
||||
`npm run dev:server` und Vite mit `npm run dev` starten.
|
||||
|
||||
Die CSV-Datei wird beim ersten erfolgreichen Absenden angelegt. Bei einem
|
||||
Mailfehler bleibt die Anfrage gespeichert; die API meldet, dass der Versand
|
||||
nicht vollständig bestätigt werden konnte.
|
||||
192
index.html
192
index.html
|
|
@ -22,8 +22,8 @@
|
|||
:root {
|
||||
--page-bg: #0d0d1a;
|
||||
--page-bg-2: #1a1a2e;
|
||||
--brand: #53d5cd;
|
||||
--brand-hover: #36b8b1;
|
||||
--green: #10b981;
|
||||
--green-dark: #059669;
|
||||
--white: #ffffff;
|
||||
--light: #f8fafc;
|
||||
--muted: #94a3b8;
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
background:
|
||||
radial-gradient(
|
||||
circle at 12% 0%,
|
||||
rgba(83, 213, 205, 0.09),
|
||||
rgba(16, 185, 129, 0.09),
|
||||
transparent 30%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 88% 26%,
|
||||
rgba(83, 213, 205, 0.055),
|
||||
rgba(16, 185, 129, 0.055),
|
||||
transparent 27%
|
||||
),
|
||||
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
}
|
||||
|
||||
.brand span {
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -138,14 +138,14 @@
|
|||
|
||||
.nav-cta {
|
||||
padding: 11px 16px;
|
||||
border: 1px solid rgba(83, 213, 205, 0.42);
|
||||
border: 1px solid rgba(16, 185, 129, 0.42);
|
||||
border-radius: 999px;
|
||||
color: var(--white) !important;
|
||||
background: rgba(83, 213, 205, 0.07);
|
||||
background: rgba(16, 185, 129, 0.07);
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
background: rgba(83, 213, 205, 0.14);
|
||||
background: rgba(16, 185, 129, 0.14);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
|
||||
.eyebrow {
|
||||
margin-bottom: 18px;
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
}
|
||||
|
||||
.hero h1 .accent {
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
|
|
@ -220,12 +220,12 @@
|
|||
|
||||
.button-primary {
|
||||
color: #06130f;
|
||||
background: var(--brand);
|
||||
box-shadow: 0 14px 32px rgba(83, 213, 205, 0.18);
|
||||
background: var(--green);
|
||||
box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: #75e2dc;
|
||||
background: #34d399;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
border-color: rgba(83, 213, 205, 0.55);
|
||||
border-color: rgba(16, 185, 129, 0.55);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
background:
|
||||
radial-gradient(
|
||||
circle at 72% 18%,
|
||||
rgba(83, 213, 205, 0.2),
|
||||
rgba(16, 185, 129, 0.2),
|
||||
transparent 32%
|
||||
),
|
||||
linear-gradient(
|
||||
|
|
@ -269,18 +269,18 @@
|
|||
height: 230px;
|
||||
right: -75px;
|
||||
top: -75px;
|
||||
border: 1px solid rgba(83, 213, 205, 0.24);
|
||||
border: 1px solid rgba(16, 185, 129, 0.24);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 0 34px rgba(83, 213, 205, 0.035),
|
||||
0 0 0 68px rgba(83, 213, 205, 0.02);
|
||||
0 0 0 34px rgba(16, 185, 129, 0.035),
|
||||
0 0 0 68px rgba(16, 185, 129, 0.02);
|
||||
}
|
||||
|
||||
.hero-card-mark {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 38px;
|
||||
color: rgba(83, 213, 205, 0.88);
|
||||
color: rgba(16, 185, 129, 0.88);
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -342,13 +342,13 @@
|
|||
|
||||
.topic:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(83, 213, 205, 0.34);
|
||||
border-color: rgba(16, 185, 129, 0.34);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.topic-number {
|
||||
margin-bottom: 70px;
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
|
|
@ -407,8 +407,8 @@
|
|||
height: 10px;
|
||||
margin-top: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand);
|
||||
box-shadow: 0 0 0 5px rgba(83, 213, 205, 0.08);
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.review-section {
|
||||
|
|
@ -470,7 +470,6 @@
|
|||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
|
|
@ -486,7 +485,6 @@
|
|||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
select {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
|
|
@ -506,8 +504,8 @@
|
|||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: rgba(83, 213, 205, 0.75);
|
||||
box-shadow: 0 0 0 3px rgba(83, 213, 205, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.75);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
|
|
@ -535,7 +533,7 @@
|
|||
.rating-input label:hover,
|
||||
.rating-input label:hover ~ label,
|
||||
.rating-input input:checked ~ label {
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.consent {
|
||||
|
|
@ -549,7 +547,7 @@
|
|||
|
||||
.consent input {
|
||||
margin-top: 4px;
|
||||
accent-color: var(--brand);
|
||||
accent-color: var(--green);
|
||||
}
|
||||
|
||||
.review-form .button {
|
||||
|
|
@ -559,25 +557,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#contactMessageHint.is-valid {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
color: #fca5a5;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.form-status.is-error {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
min-height: 20px;
|
||||
margin-top: 12px;
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -611,7 +594,7 @@
|
|||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
color: #06130f;
|
||||
background: var(--brand);
|
||||
background: var(--green);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
|
@ -630,7 +613,7 @@
|
|||
}
|
||||
|
||||
.stars {
|
||||
color: var(--brand);
|
||||
color: var(--green);
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1119,117 +1102,6 @@
|
|||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Kontaktaufnahme -->
|
||||
<section class="section" id="kontakt">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<div class="eyebrow">KONTAKT AUFNEHMEN</div>
|
||||
<h2
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Schreib uns.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="section-intro">
|
||||
Du hast Fragen oder möchtest einen Termin
|
||||
vereinbaren? Schreib uns einfach. Wir melden uns
|
||||
schnellstmöglich bei dir.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="review-form" id="contactForm">
|
||||
<div class="field" style="margin-top: 0">
|
||||
<label for="contactName">Dein Name*</label>
|
||||
<input
|
||||
id="contactName"
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
placeholder="z. B. Thomas Müller"
|
||||
maxlength="120"
|
||||
required
|
||||
/>
|
||||
<small
|
||||
class="field-error"
|
||||
data-error-for="name"
|
||||
></small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="contactEmail"
|
||||
>Deine E-Mail-Adresse*</label
|
||||
>
|
||||
<input
|
||||
id="contactEmail"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
placeholder="z. B. thomas@example.de"
|
||||
maxlength="254"
|
||||
required
|
||||
/>
|
||||
<small
|
||||
class="field-error"
|
||||
data-error-for="email"
|
||||
></small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="contactSubject">Betreff*</label>
|
||||
<input
|
||||
id="contactSubject"
|
||||
name="subject"
|
||||
type="text"
|
||||
placeholder="Worum geht es?"
|
||||
maxlength="160"
|
||||
required
|
||||
/>
|
||||
<small
|
||||
class="field-error"
|
||||
data-error-for="subject"
|
||||
></small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="message">Deine Nachricht*</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Wie können wir dir helfen?"
|
||||
minlength="10"
|
||||
maxlength="5000"
|
||||
required
|
||||
></textarea>
|
||||
|
||||
<small id="contactMessageHint"
|
||||
>Mindestens 10 Zeichen erforderlich.</small
|
||||
>
|
||||
<small
|
||||
class="field-error"
|
||||
data-error-for="message"
|
||||
></small>
|
||||
<br />
|
||||
<small>*Pflichtfelder</small>
|
||||
</div>
|
||||
|
||||
<button class="button button-primary" type="submit">
|
||||
Nachricht senden
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="form-status"
|
||||
id="contactFormStatus"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
|
@ -1246,10 +1118,6 @@
|
|||
type="module"
|
||||
src="/src/components/navigationsbar/navigation.js"
|
||||
></script>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/features/contact/contact-form.js"
|
||||
></script>
|
||||
<script>
|
||||
const form = document.getElementById("reviewForm");
|
||||
const status = document.getElementById("formStatus");
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"dependencies": {
|
||||
"csv-parse": "^7.0.2",
|
||||
"csv-stringify": "^6.8.3",
|
||||
"libphonenumber-js": "^1.13.14",
|
||||
"nodemailer": "^10.0.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -983,12 +982,6 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/libphonenumber-js": {
|
||||
"version": "1.13.14",
|
||||
"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.13.14.tgz",
|
||||
"integrity": "sha512-llihgCcx0BFLksecLP+x1J+6JDE1GsXS1RN/LoPF6qcwpeQcnjj0lcvZxY8AzbEpYwyZWPZW/nDuqkqzm3amiw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.19",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
"dependencies": {
|
||||
"csv-parse": "^7.0.2",
|
||||
"csv-stringify": "^6.8.3",
|
||||
"libphonenumber-js": "^1.13.14",
|
||||
"nodemailer": "^10.0.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<html lang="de" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Paket-Details – Tri-Hub Ernährungsberatung</title>
|
||||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/src/styles/packages.css" />
|
||||
</head>
|
||||
<body class="packages-page">
|
||||
<div id="navbar-placeholder"></div>
|
||||
<main class="packages-section" id="main-content" tabindex="-1">
|
||||
<a class="packages-back" href="/angebotsuebersicht.html"
|
||||
>← Zurück zur Angebotsübersicht</a
|
||||
>
|
||||
<div id="package-detail-container"></div>
|
||||
|
||||
<body>
|
||||
<header class="container">
|
||||
<a href="angebotsuebersicht.html">← Zurück zur Angebotsübersicht</a>
|
||||
</header>
|
||||
|
||||
<main class="packages-section">
|
||||
<div id="package-detail-container" class="detail-page-container">
|
||||
<!-- Wird dynamisch durch paket-details.js gefüllt -->
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/components/navigationsbar/navigation.js"
|
||||
></script>
|
||||
|
||||
<script
|
||||
type="module"
|
||||
src="/src/features/angebote/paket-details.js"
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ export default defineConfig({
|
|||
{
|
||||
command: "node src/tests/helpers/browser-server.js",
|
||||
url: "http://127.0.0.1:3000/api/angebote",
|
||||
reuseExistingServer: process.env.PW_REUSE_EXISTING === "1",
|
||||
reuseExistingServer: false,
|
||||
gracefulShutdown: { signal: "SIGTERM", timeout: 3000 },
|
||||
},
|
||||
{
|
||||
command: "npm run dev",
|
||||
url: "http://127.0.0.1:5173/booking.html",
|
||||
reuseExistingServer: process.env.PW_REUSE_EXISTING === "1",
|
||||
reuseExistingServer: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts) DMSans-Italic[opsz,wght].ttf: Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<header class="navbar" id="site-navbar">
|
||||
<div class="navbar__inner">
|
||||
<a
|
||||
href="/index.html#main-content"
|
||||
href="#main-content"
|
||||
class="navbar__brand"
|
||||
aria-label="Zum Hauptinhalt springen"
|
||||
>
|
||||
|
|
@ -32,19 +32,31 @@
|
|||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/index.html" class="navbar__link">Ernährung</a>
|
||||
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/berater.html" class="navbar__link">Beraterprofil</a>
|
||||
<a
|
||||
href="/index.html"
|
||||
class="navbar__link"
|
||||
>Beraterprofil</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/index.html" class="navbar__link">FAQ</a>
|
||||
<a
|
||||
href="/index.html"
|
||||
class="navbar__link"
|
||||
>FAQ</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/index.html#erfahrungen" class="navbar__link">Rezensionen</a>
|
||||
<a href="#erfahrungen" class="navbar__link">Rezensionen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/index.html#kontakt" class="navbar__link">Kontakt</a>
|
||||
<a
|
||||
href="/index.html"
|
||||
class="navbar__link"
|
||||
>Kontakt</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import "../../styles/styles.css";
|
||||
import "../../styles/packages.css";
|
||||
import { renderAngebotsuebersicht } from "./angebotsuebersicht.js";
|
||||
|
||||
renderAngebotsuebersicht();
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function renderAngebotsuebersicht() {
|
|||
${highlightHtml}
|
||||
</div>
|
||||
|
||||
<h2 class="package-title">${pkg.name}</h2>
|
||||
<h3 class="package-title">${pkg.name}</h3>
|
||||
<p class="package-desc">${pkg.summary}</p>
|
||||
|
||||
<div class="package-details-box">
|
||||
|
|
@ -41,7 +41,7 @@ export function renderAngebotsuebersicht() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/paket-details.html?id=${pkg.id}" class="package-btn">${pkg.buttonText} <span aria-hidden="true">→</span></a>
|
||||
<a href="paket-details.html?id=${pkg.id}" class="package-btn">${pkg.buttonText}</a>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,158 +1,102 @@
|
|||
import { packagesDetails } from "../../shared/packagesdetails.js";
|
||||
import { mountBookingPage } from "../booking/booking-page.js";
|
||||
import { formatMoney } from "../../shared/order-summary.js";
|
||||
import { paymentNotice } from "../../shared/booking-copy.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const container = document.getElementById("package-detail-container");
|
||||
if (!container) return;
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const pkg = packagesDetails.find((item) => item.id === params.get("id"));
|
||||
const requestedVariant = params.get("variant");
|
||||
const invalidVariant =
|
||||
requestedVariant &&
|
||||
!pkg?.variants?.some(
|
||||
(variant) => variant.variantId === requestedVariant,
|
||||
);
|
||||
const packageId = params.get("id");
|
||||
|
||||
if (!pkg || invalidVariant) {
|
||||
const pkg = packagesDetails.find((item) => item.id === packageId);
|
||||
|
||||
if (!pkg) {
|
||||
container.innerHTML = `
|
||||
<div class="package-card">
|
||||
<h1>Paket nicht gefunden</h1>
|
||||
<p>Bitte wähle ein gültiges Paket und eine passende Variante aus.</p>
|
||||
<a href="/angebotsuebersicht.html" class="package-btn">Zur Übersicht</a>
|
||||
</div>`;
|
||||
<div class="package-card">
|
||||
<h2>Paket nicht gefunden</h2>
|
||||
<p>Bitte wähle ein gültiges Angebot aus der Übersicht.</p>
|
||||
<a href="angebotsuebersicht.html" class="package-btn">Zur Übersicht</a>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
document.title = `${pkg.type} – Tri-Hub Ernährungsberatung`;
|
||||
const variantsHtml = pkg.variants?.length
|
||||
const variantsHtml = pkg.variants
|
||||
? `<div class="detail-box">
|
||||
<label for="variant-select">Wähle deine Variante</label>
|
||||
<select id="variant-select" class="variant-select">
|
||||
${pkg.variants
|
||||
.map(
|
||||
(variant) => `
|
||||
<option value="${variant.variantId}">
|
||||
${variant.label} – ${formatMoney(variant.price, pkg.currency)}
|
||||
</option>`,
|
||||
)
|
||||
.join("")}
|
||||
</select>
|
||||
</div>`
|
||||
<h3>Wähle deine Variante</h3>
|
||||
<select id="variant-select" class="variant-select">
|
||||
${pkg.variants.map((v) => `<option value="${v.variantId}" data-price="${v.price}">${v.label} –${v.price.toFixed(2)} €</option>`).join("")}
|
||||
</select>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
container.innerHTML = `
|
||||
<header class="detail-heading">
|
||||
<div class="package-type-container">
|
||||
<span class="package-type">${pkg.type} · <span id="package-duration"></span></span>
|
||||
${pkg.badge ? `<span class="package-highlight">${pkg.badge}</span>` : ""}
|
||||
</div>
|
||||
<h1>${pkg.title}</h1>
|
||||
<p class="package-desc">${pkg.subtitle}</p>
|
||||
</header>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-content">
|
||||
<section aria-labelledby="target-heading">
|
||||
<h2 id="target-heading">Für wen ist dieses Paket ideal?</h2>
|
||||
<ul class="detail-list">
|
||||
${pkg.targetGroup.map((item) => `<li>${item}</li>`).join("")}
|
||||
</ul>
|
||||
</section>
|
||||
<section aria-labelledby="features-heading">
|
||||
<h2 id="features-heading">Das ist im Paket enthalten</h2>
|
||||
<ul class="detail-list">
|
||||
${pkg.includedFeatures.map((feature) => `<li>${feature}</li>`).join("")}
|
||||
</ul>
|
||||
</section>
|
||||
<section aria-labelledby="steps-heading">
|
||||
<h2 id="steps-heading">So läuft deine Begleitung ab</h2>
|
||||
${pkg.processSteps
|
||||
.map(
|
||||
(step) => `
|
||||
<div class="process-step">
|
||||
<strong>${step.step}</strong>
|
||||
<p class="detail-text">${step.text}</p>
|
||||
</div>`,
|
||||
)
|
||||
.join("")}
|
||||
</section>
|
||||
</div>
|
||||
<section class="package-checkout" aria-labelledby="checkout-heading">
|
||||
<h2 id="checkout-heading">Dein ${pkg.type.toLowerCase().replace(/^./, (letter) => letter.toUpperCase())}-Paket</h2>
|
||||
<div class="price-box" aria-live="polite">
|
||||
<span class="price-amount" id="displayed-price"></span>
|
||||
<span class="price-note">inkl. ${pkg.taxRate} % MwSt. · ${pkg.billingInterval}</span>
|
||||
<p id="selected-duration" class="price-note"></p>
|
||||
</div>
|
||||
${variantsHtml}
|
||||
<button id="proceed-to-booking-btn" class="package-btn primary-cta" type="button" aria-haspopup="dialog" aria-expanded="false" disabled>
|
||||
Buchungsformular wird geladen …
|
||||
</button>
|
||||
<p class="booking-notice" id="booking-notice"></p>
|
||||
<div id="booking-root"></div>
|
||||
</section>
|
||||
</div>`;
|
||||
<div class="package-card detail-view">
|
||||
<div class="package-type-container">
|
||||
<span class="package-type">${pkg.type} · ${pkg.durationLabel}</span>
|
||||
<span class="package-highlight">${pkg.badge}</span>
|
||||
</div>
|
||||
|
||||
container.querySelector("#booking-notice").textContent = paymentNotice;
|
||||
const variantSelect = container.querySelector("#variant-select");
|
||||
if (variantSelect && requestedVariant)
|
||||
variantSelect.value = requestedVariant;
|
||||
const bookingBtn = container.querySelector("#proceed-to-booking-btn");
|
||||
const bookingRoot = container.querySelector("#booking-root");
|
||||
let cleanupBooking;
|
||||
let activeDialog;
|
||||
<h1 class="package-title">${pkg.title}</h1>
|
||||
<p class="package-desc">${pkg.subtitle}</p>
|
||||
|
||||
function prepareBooking() {
|
||||
cleanupBooking?.();
|
||||
activeDialog = null;
|
||||
bookingBtn.disabled = true;
|
||||
bookingBtn.textContent = "Buchungsformular wird geladen …";
|
||||
bookingBtn.setAttribute("aria-expanded", "false");
|
||||
bookingBtn.removeAttribute("aria-controls");
|
||||
const variant = pkg.variants?.find(
|
||||
(item) => item.variantId === variantSelect?.value,
|
||||
);
|
||||
const duration = variant
|
||||
? `${variant.durationWeeks} Wochen Begleitung`
|
||||
: pkg.durationLabel;
|
||||
container.querySelector("#displayed-price").textContent = formatMoney(
|
||||
variant?.price ?? pkg.price,
|
||||
pkg.currency,
|
||||
);
|
||||
container.querySelector("#package-duration").textContent = duration;
|
||||
container.querySelector("#selected-duration").textContent = duration;
|
||||
cleanupBooking = mountBookingPage(bookingRoot, {
|
||||
packageId: pkg.id,
|
||||
variantId: variantSelect?.value,
|
||||
<div class="price-box">
|
||||
<span class="price-amount" id="displayed-price">${pkg.price.toFixed(2)} €</span>
|
||||
<span class="price-note">inkl. ${pkg.taxRate}% MwSt. (${pkg.billingInterval})</span>
|
||||
</div>
|
||||
|
||||
${variantsHtml}
|
||||
|
||||
<div class="package-details-box">
|
||||
<div class="detail-item">
|
||||
<h3 class="detail-title">Für wen ist dieses Paket ideal?</h3>
|
||||
<ul class="detail-list">
|
||||
${pkg.targetGroup.map((item) => `<li>${item}</li>`).join("")}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-item">
|
||||
<h3 class="detail-title">Das ist im Paket enthalten</h3>
|
||||
<ul class="detail-list">
|
||||
${pkg.includedFeatures.map((feat) => `<li>${feat}</li>`).join("")}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-item">
|
||||
<h3 class="detail-title">So läuft deine Begleitung ab</h3>
|
||||
${pkg.processSteps
|
||||
.map(
|
||||
(s) => `
|
||||
<div class="process-step">
|
||||
<strong>${s.step}:</strong> <span class="detail-text">${s.text}</span>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="proceed-to-booking-btn" class="package-btn primary-cta">
|
||||
${pkg.ctaButtonText}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const variantSelect = document.getElementById("variant-select");
|
||||
const displayedPrice = document.getElementById("displayed-price");
|
||||
if (variantSelect && displayedPrice) {
|
||||
variantSelect.addEventListener("change", (e) => {
|
||||
const selectedOption = e.target.selectedOptions[0];
|
||||
const newPrice = parseFloat(
|
||||
selectedOption.getAttribute("data-price"),
|
||||
);
|
||||
displayedPrice.textContent = `${newPrice.toFixed(2)} €`;
|
||||
});
|
||||
}
|
||||
|
||||
// Booking lädt die Paketvorschau asynchron, auch bei einem erneuten Versuch.
|
||||
const observer = new MutationObserver(() => {
|
||||
const dialog = bookingRoot.querySelector(".booking__dialog");
|
||||
if (!dialog || dialog === activeDialog) return;
|
||||
activeDialog = dialog;
|
||||
bookingBtn.disabled = false;
|
||||
bookingBtn.textContent = "Jetzt buchen";
|
||||
bookingBtn.setAttribute("aria-controls", dialog.id);
|
||||
dialog.addEventListener("close", () => {
|
||||
bookingBtn.setAttribute("aria-expanded", "false");
|
||||
bookingBtn.focus();
|
||||
});
|
||||
});
|
||||
observer.observe(bookingRoot, { childList: true, subtree: true });
|
||||
prepareBooking();
|
||||
variantSelect?.addEventListener("change", prepareBooking);
|
||||
|
||||
const bookingBtn = document.getElementById("proceed-to-booking-btn");
|
||||
bookingBtn.addEventListener("click", () => {
|
||||
if (!activeDialog || activeDialog.open) return;
|
||||
activeDialog.showModal();
|
||||
bookingBtn.setAttribute("aria-expanded", "true");
|
||||
const result = activeDialog.querySelector(
|
||||
".booking__result:not([hidden])",
|
||||
);
|
||||
(result || activeDialog.querySelector('[name="name"]')).focus();
|
||||
const params = new URLSearchParams({ id: pkg.id });
|
||||
if (variantSelect) params.set("variant", variantSelect.value);
|
||||
window.location.href = `booking.html?${params}`;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,134 +0,0 @@
|
|||
import berater from "../../shared/berater-daten.json";
|
||||
import "./berater.css";
|
||||
|
||||
const container = document.querySelector("#advisor-profiles");
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value).replace(
|
||||
/[&<>"']/g,
|
||||
(character) =>
|
||||
({
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': """,
|
||||
"'": "'",
|
||||
})[character],
|
||||
);
|
||||
}
|
||||
|
||||
function contactName(person) {
|
||||
return (
|
||||
(typeof person.spitzname === "string" && person.spitzname.trim()) ||
|
||||
person.vorname ||
|
||||
person.name.trim().split(/\s+/)[0]
|
||||
);
|
||||
}
|
||||
|
||||
if (container) {
|
||||
if (!Array.isArray(berater) || berater.length === 0) {
|
||||
container.innerHTML =
|
||||
'<p class="advisor-loading">Aktuell sind keine Beraterprofile verfügbar.</p>';
|
||||
} else {
|
||||
container.innerHTML = berater
|
||||
.map(
|
||||
(person) => `
|
||||
<article class="package-card advisor-card">
|
||||
<div class="advisor-gallery" data-current-index="0" role="region" aria-roledescription="Karussell" aria-label="Bilder von ${escapeHtml(person.name)}">
|
||||
<div class="advisor-gallery__frame">
|
||||
<div class="advisor-gallery__track">
|
||||
${(person.bilder || [])
|
||||
.map(
|
||||
(bild, index) => `
|
||||
<figure class="advisor-gallery__slide" aria-label="${index + 1} von ${person.bilder.length}: ${escapeHtml(bild.typ)}" aria-hidden="${index !== 0}">
|
||||
<img class="advisor-gallery__image" src="${escapeHtml(bild.quelle)}" alt="${escapeHtml(person.name)} – ${escapeHtml(bild.typ)}" loading="${index === 0 ? "eager" : "lazy"}" />
|
||||
</figure>`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
<button class="advisor-gallery__arrow advisor-gallery__arrow--previous" type="button" data-gallery-direction="previous" aria-label="Vorheriges Bild von ${escapeHtml(person.name)}">‹</button>
|
||||
<button class="advisor-gallery__arrow advisor-gallery__arrow--next" type="button" data-gallery-direction="next" aria-label="Nächstes Bild von ${escapeHtml(person.name)}">›</button>
|
||||
</div>
|
||||
<div class="advisor-gallery__pagination" aria-label="Bildposition">
|
||||
${(person.bilder || [])
|
||||
.map(
|
||||
(bild, index) => `
|
||||
<button class="advisor-gallery__dot" type="button" data-gallery-index="${index}" aria-label="Bild ${index + 1}: ${escapeHtml(bild.typ)}" aria-current="${index === 0}"></button>`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="package-title">${escapeHtml(person.name)}</h3>
|
||||
<p class="package-type advisor-role">${escapeHtml(person.titel || "Ernährungsberatung")}</p>
|
||||
<div class="package-details-box">
|
||||
<div class="detail-item">
|
||||
<h4 class="detail-title">Kurzbiografie</h4>
|
||||
<p class="detail-text">${escapeHtml(person.biographie)}</p>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<h4 class="detail-title">Qualifikationen</h4>
|
||||
<ul class="detail-list">${(person.qualifikationen || []).map((qualification) => `<li>${escapeHtml(qualification)}</li>`).join("")}</ul>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<h4 class="detail-title">Schwerpunkte</h4>
|
||||
<ul class="detail-list">${(person.schwerpunkte || []).map((focus) => `<li>${escapeHtml(focus)}</li>`).join("")}</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button class="package-btn advisor-contact" type="button" data-berater-id="${escapeHtml(person.id)}" aria-haspopup="dialog">${escapeHtml(contactName(person))} kontaktieren</button>
|
||||
</article>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", async (event) => {
|
||||
const galleryControl = event.target.closest(
|
||||
"button[data-gallery-direction], button[data-gallery-index]",
|
||||
);
|
||||
if (galleryControl) {
|
||||
const gallery = galleryControl.closest(".advisor-gallery");
|
||||
const slides = [...gallery.querySelectorAll(".advisor-gallery__slide")];
|
||||
const currentIndex = Number(gallery.dataset.currentIndex || 0);
|
||||
const requestedIndex = galleryControl.hasAttribute(
|
||||
"data-gallery-direction",
|
||||
)
|
||||
? currentIndex +
|
||||
(galleryControl.dataset.galleryDirection === "next" ? 1 : -1)
|
||||
: Number(galleryControl.dataset.galleryIndex);
|
||||
const nextIndex = (requestedIndex + slides.length) % slides.length;
|
||||
|
||||
gallery.dataset.currentIndex = String(nextIndex);
|
||||
gallery.querySelector(".advisor-gallery__track").style.transform =
|
||||
`translateX(-${nextIndex * 100}%)`;
|
||||
slides.forEach((slide, index) => {
|
||||
slide.setAttribute("aria-hidden", String(index !== nextIndex));
|
||||
});
|
||||
gallery.querySelectorAll("[data-gallery-index]").forEach((button) => {
|
||||
button.setAttribute(
|
||||
"aria-current",
|
||||
String(Number(button.dataset.galleryIndex) === nextIndex),
|
||||
);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const button = event.target.closest("button[data-berater-id]");
|
||||
if (!button) return;
|
||||
|
||||
try {
|
||||
const { openContactDialog } = await import(
|
||||
/* @vite-ignore */ "../contact/contact-dialog.js"
|
||||
);
|
||||
openContactDialog({ advisorId: button.dataset.beraterId });
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Das Kontaktformular ist derzeit nicht verfügbar.",
|
||||
error,
|
||||
);
|
||||
button.insertAdjacentHTML(
|
||||
"afterend",
|
||||
'<p class="advisor-contact-error" role="status">Das Kontaktformular ist momentan nicht verfügbar.</p>',
|
||||
);
|
||||
button.disabled = true;
|
||||
}
|
||||
});
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
.advisor-page {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.advisor-main {
|
||||
min-height: 100vh;
|
||||
padding-top: 96px;
|
||||
}
|
||||
|
||||
.advisor-section {
|
||||
width: min(1180px, calc(100% - 3rem));
|
||||
margin: auto;
|
||||
padding-block: 5rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.advisor-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
||||
gap: 3rem;
|
||||
align-items: end;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.advisor-eyebrow {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
color: #53d5cd;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.advisor-heading h1 {
|
||||
margin: 0.75rem 0 1rem;
|
||||
font-size: clamp(2rem, 4.5vw, 3.75rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.advisor-intro {
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.advisor-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.advisor-loading {
|
||||
grid-column: 1 / -1;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.advisor-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.advisor-card .package-title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.advisor-card .package-type {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.advisor-card .package-details-box {
|
||||
flex: 1;
|
||||
padding-block: 1.25rem;
|
||||
}
|
||||
|
||||
.advisor-card .detail-title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.advisor-card .detail-item + .detail-item {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.advisor-card .detail-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.advisor-card .detail-list li::marker {
|
||||
color: #53d5cd;
|
||||
}
|
||||
|
||||
.advisor-contact {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.advisor-contact-error {
|
||||
margin: 10px 0 0;
|
||||
color: #fca5a5;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.advisor-section {
|
||||
width: calc(100% - 2rem);
|
||||
padding-block: 3.5rem;
|
||||
}
|
||||
|
||||
.advisor-heading {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.advisor-eyebrow {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.advisor-card .advisor-role {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.advisor-card .package-details-box {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #f8fafc1f;
|
||||
border-radius: 1.4rem;
|
||||
background: #ffffff0b;
|
||||
}
|
||||
|
||||
.advisor-gallery {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.advisor-gallery__frame {
|
||||
position: relative;
|
||||
padding: 0.7rem;
|
||||
overflow: hidden;
|
||||
border: 1px dashed #f8fafc38;
|
||||
border-radius: 1.5rem;
|
||||
background: #ffffff05;
|
||||
}
|
||||
|
||||
.advisor-gallery__track {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: clamp(240px, 34vw, 390px);
|
||||
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.advisor-gallery__slide {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.advisor-gallery__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.1rem;
|
||||
background: #071720;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.advisor-gallery__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
transform: translateY(-50%);
|
||||
border: 1px solid #ffffff55;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #071720bb;
|
||||
font: inherit;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.advisor-gallery__arrow:hover {
|
||||
border-color: #53d5cd;
|
||||
background: #071720ee;
|
||||
}
|
||||
|
||||
.advisor-gallery__arrow--previous {
|
||||
left: 1.2rem;
|
||||
}
|
||||
|
||||
.advisor-gallery__arrow--next {
|
||||
right: 1.2rem;
|
||||
}
|
||||
|
||||
.advisor-gallery__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.55rem;
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
.advisor-gallery__dot {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
padding: 0;
|
||||
border: 1px solid #94a3b8;
|
||||
border-radius: 50%;
|
||||
background: #ffffff12;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.advisor-gallery__dot[aria-current="true"] {
|
||||
transform: scale(1.15);
|
||||
border-color: #53d5cd;
|
||||
background: #53d5cd;
|
||||
}
|
||||
|
||||
.advisor-gallery__arrow:focus-visible,
|
||||
.advisor-gallery__dot:focus-visible {
|
||||
outline: 3px solid #53d5cd;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.advisor-gallery__track {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
.confirmation {
|
||||
--confirmation-accent: #53d5cd;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: #f8fafc;
|
||||
background:
|
||||
radial-gradient(ellipse at 5% 20%, #53d5cd14, transparent 45%),
|
||||
radial-gradient(ellipse at 5% 20%, #10b98114, transparent 45%),
|
||||
radial-gradient(ellipse at 95% 45%, #1a1a2e, transparent 55%), #0d0d1a;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
line-height: 1.65;
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
.confirmation a:focus-visible {
|
||||
outline: 3px solid var(--confirmation-accent);
|
||||
outline: 3px solid #10b981;
|
||||
outline-offset: 6px;
|
||||
}
|
||||
.confirmation__header {
|
||||
|
|
@ -54,9 +53,10 @@
|
|||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #f8fafc;
|
||||
color: var(--confirmation-accent);
|
||||
color: #087452;
|
||||
border-radius: 0.9rem;
|
||||
letter-spacing: -0.08em;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.confirmation__main {
|
||||
|
|
@ -81,25 +81,25 @@
|
|||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
margin-right: 0.5rem;
|
||||
border: 1px solid #53d5cd70;
|
||||
border: 1px solid #10b98170;
|
||||
border-radius: 50%;
|
||||
color: var(--confirmation-accent);
|
||||
color: #10b981;
|
||||
}
|
||||
.confirmation h1 {
|
||||
margin: 1rem 0 1.5rem;
|
||||
font-family: inherit;
|
||||
font-family: "Playfair Display", Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.confirmation h1 em {
|
||||
color: var(--confirmation-accent);
|
||||
color: #10b981;
|
||||
font-weight: inherit;
|
||||
}
|
||||
.confirmation h2 {
|
||||
margin: 0.5rem 0 1rem;
|
||||
font-family: inherit;
|
||||
font-family: "Playfair Display", Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3;
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
.confirmation__simulation {
|
||||
color: #cbd5e1;
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid var(--confirmation-accent);
|
||||
border-left: 2px solid #10b981;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.confirmation__grid {
|
||||
|
|
@ -167,8 +167,8 @@
|
|||
margin: 0.2rem 0 1rem;
|
||||
}
|
||||
.confirmation__mail {
|
||||
border-color: #53d5cd40;
|
||||
background: #53d5cd08;
|
||||
border-color: #10b98140;
|
||||
background: #10b98108;
|
||||
}
|
||||
.confirmation__mail h2 {
|
||||
font-family: inherit;
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--confirmation-accent);
|
||||
color: #10b981;
|
||||
}
|
||||
.confirmation__next {
|
||||
margin-top: 1.5rem;
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
}
|
||||
.confirmation__steps li::before {
|
||||
content: "0" counter(steps);
|
||||
color: var(--confirmation-accent);
|
||||
color: #10b981;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.confirmation__steps h3 {
|
||||
|
|
@ -242,14 +242,14 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
.confirmation__button {
|
||||
background: var(--confirmation-accent);
|
||||
background: #10b981;
|
||||
color: #071a14 !important;
|
||||
}
|
||||
.confirmation__link {
|
||||
border: 1px solid #ffffff20;
|
||||
}
|
||||
.confirmation__button:hover {
|
||||
background: #6de0d9;
|
||||
background: #34d399;
|
||||
}
|
||||
.confirmation__link:hover {
|
||||
background: #ffffff08;
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ if (
|
|||
if (body.emailStatus === "pending" && body.packageId) {
|
||||
const params = new URLSearchParams({ id: body.packageId });
|
||||
if (order?.variantId) params.set("variant", order.variantId);
|
||||
select("confirmation-retry").href = `/paket-details.html?${params}`;
|
||||
select("confirmation-retry").href = `/booking.html?${params}`;
|
||||
select("confirmation-retry").hidden = false;
|
||||
}
|
||||
select("confirmation-empty").hidden = true;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
import {
|
||||
isValidBookingPhone,
|
||||
phoneError,
|
||||
} from "../../shared/phone-validation.js";
|
||||
import { previewBooking, submitBooking } from "./booking-api.js";
|
||||
import "./booking.css";
|
||||
import { orderSummaryRows } from "../../shared/order-summary.js";
|
||||
|
|
@ -288,8 +284,12 @@ export function mountBookingPage(
|
|||
fields.email =
|
||||
"Bitte eine gültige E-Mail-Adresse eingeben.";
|
||||
phone.value = phone.value.trim();
|
||||
if (!isValidBookingPhone(phone.value))
|
||||
fields.phone = phoneError;
|
||||
if (
|
||||
phone.value.length > 50 ||
|
||||
/[\x00-\x1f\x7f]/.test(phone.value)
|
||||
)
|
||||
fields.phone =
|
||||
"Bitte höchstens 50 Zeichen ohne Zeilenumbrüche eingeben.";
|
||||
if (Object.keys(fields).length) {
|
||||
showError(
|
||||
"Bitte die markierten Angaben prüfen.",
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@
|
|||
border-style: dashed;
|
||||
}
|
||||
.booking__button {
|
||||
color: #061619;
|
||||
background: #53d5cd;
|
||||
color: #f7faf7;
|
||||
background: #176448;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
outline-offset: 4px;
|
||||
}
|
||||
.booking__button:focus-visible {
|
||||
outline-color: #53d5cd;
|
||||
outline-color: #18352b;
|
||||
}
|
||||
.booking__errors,
|
||||
.booking__field-error {
|
||||
|
|
@ -160,8 +160,8 @@
|
|||
border-radius: 0.75rem;
|
||||
}
|
||||
.booking__dialog .booking__button {
|
||||
background: #53d5cd;
|
||||
border-color: #53d5cd;
|
||||
background: #00b6c7;
|
||||
border-color: #00b6c7;
|
||||
color: #061619;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
|
@ -188,5 +188,5 @@
|
|||
.booking__dialog :focus-visible,
|
||||
.booking__dialog .booking__errors:focus,
|
||||
.booking__dialog .booking__result:focus {
|
||||
outline-color: #53d5cd;
|
||||
outline-color: #00d6e8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,128 +0,0 @@
|
|||
import { findAdvisor, advisorDisplayName } from "../../shared/berater.js";
|
||||
import {
|
||||
contactReasons,
|
||||
contactNotice,
|
||||
contactBookingUrl,
|
||||
} from "../../shared/contact.js";
|
||||
import "./contact.css";
|
||||
|
||||
// Auf Profilseiten: openContactDialog({ advisorId: profile.id }).
|
||||
export function openContactDialog({
|
||||
advisorId,
|
||||
navigate = (url) => window.location.assign(url),
|
||||
} = {}) {
|
||||
const advisor = findAdvisor(advisorId);
|
||||
const returnFocus = document.activeElement;
|
||||
const dialog = document.createElement("dialog");
|
||||
dialog.className = "contact-dialog";
|
||||
dialog.setAttribute("aria-labelledby", "contact-title");
|
||||
dialog.innerHTML = `
|
||||
<button class="contact-close" type="button" aria-label="Kontaktfenster schließen">×</button>
|
||||
<p class="contact-eyebrow">DEIN NÄCHSTER SCHRITT</p>
|
||||
<h2 id="contact-title"></h2>
|
||||
<p class="contact-advisor"></p>
|
||||
<form class="contact-form">
|
||||
<div><label for="contact-email">Deine Buchungs-E-Mail</label>
|
||||
<input id="contact-email" name="email" type="email" autocomplete="email" maxlength="254" required aria-describedby="contact-email-help">
|
||||
<p id="contact-email-help" class="contact-help">Verwende die E-Mail-Adresse, mit der du dein Paket gebucht hast.</p>
|
||||
</div>
|
||||
<div><label for="contact-reason">Grund für den Kontakt</label>
|
||||
<select id="contact-reason" name="reason" required><option value="">Bitte auswählen</option></select>
|
||||
</div>
|
||||
<label class="contact-consent"><input name="simulationAccepted" type="checkbox" required><span></span></label>
|
||||
<p class="contact-status" role="status" aria-live="polite"></p>
|
||||
<button class="contact-submit" type="submit" disabled>Anfrage senden & Termin wählen</button>
|
||||
</form>`;
|
||||
dialog.querySelector("#contact-title").textContent =
|
||||
advisorDisplayName(advisor) || "Berater nicht gefunden";
|
||||
dialog.querySelector(".contact-advisor").textContent = advisor
|
||||
? "Sende deine Kontaktanfrage."
|
||||
: "Die Berater-ID fehlt oder ist unbekannt. Bitte öffne das Fenster über ein Beraterprofil.";
|
||||
dialog.querySelector(".contact-consent span").textContent = contactNotice;
|
||||
const form = dialog.querySelector("form");
|
||||
const email = form.elements.email;
|
||||
const reason = form.elements.reason;
|
||||
for (const [value, label] of Object.entries(contactReasons)) {
|
||||
reason.add(new Option(label, value));
|
||||
}
|
||||
const status = dialog.querySelector(".contact-status");
|
||||
const submit = dialog.querySelector(".contact-submit");
|
||||
const close = dialog.querySelector(".contact-close");
|
||||
let busy = false;
|
||||
let sent = false;
|
||||
function update() {
|
||||
submit.disabled = busy || sent || !advisor;
|
||||
close.disabled = busy;
|
||||
email.disabled = busy || sent;
|
||||
reason.disabled = busy || sent;
|
||||
form.elements.simulationAccepted.disabled = busy || sent;
|
||||
}
|
||||
async function post(path, input) {
|
||||
const response = await fetch(path, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok)
|
||||
throw new Error(
|
||||
result.error?.message || "Die Anfrage ist fehlgeschlagen.",
|
||||
);
|
||||
return result;
|
||||
}
|
||||
email.addEventListener("input", () => {
|
||||
status.textContent = "";
|
||||
});
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
if (submit.disabled || !form.reportValidity()) return;
|
||||
const input = {
|
||||
email: email.value,
|
||||
advisorId,
|
||||
reason: reason.value,
|
||||
simulationAccepted: form.elements.simulationAccepted.checked,
|
||||
};
|
||||
busy = true;
|
||||
update();
|
||||
status.textContent =
|
||||
"E-Mail wird geprüft und simulierte Anfrage gesendet …";
|
||||
try {
|
||||
const result = await post("/api/contact", input);
|
||||
if (result.redirectUrl !== contactBookingUrl)
|
||||
throw new Error("Die Weiterleitungsadresse ist ungültig.");
|
||||
sent = true;
|
||||
status.textContent =
|
||||
"Beide Bestätigungen wurden in Mailpit angenommen. Microsoft Bookings wird geöffnet. ";
|
||||
const link = document.createElement("a");
|
||||
link.href = contactBookingUrl;
|
||||
link.textContent = "Weiter zur Terminwahl";
|
||||
status.append(link);
|
||||
navigate(contactBookingUrl);
|
||||
} catch (error) {
|
||||
status.textContent = `${error.message} Bei einem Verbindungsfehler bitte vor erneutem Senden Mailpit prüfen.`;
|
||||
} finally {
|
||||
busy = false;
|
||||
update();
|
||||
}
|
||||
});
|
||||
close.addEventListener("click", () => dialog.close());
|
||||
dialog.addEventListener("cancel", (event) => {
|
||||
if (busy) event.preventDefault();
|
||||
});
|
||||
const previousOverflow = document.body.style.overflow;
|
||||
dialog.addEventListener(
|
||||
"close",
|
||||
() => {
|
||||
document.body.style.overflow = previousOverflow;
|
||||
dialog.remove();
|
||||
returnFocus?.focus();
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
document.body.append(dialog);
|
||||
document.body.style.overflow = "hidden";
|
||||
update();
|
||||
dialog.showModal();
|
||||
email.focus();
|
||||
return dialog;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { openContactDialog } from "./contact-dialog.js";
|
||||
import { findAdvisor, advisorDisplayName } from "../../shared/berater.js";
|
||||
import "./contact-test.css";
|
||||
|
||||
const advisorId =
|
||||
new URLSearchParams(location.search).get("berater-id") ??
|
||||
"relindis-agethen";
|
||||
const advisor = findAdvisor(advisorId);
|
||||
document.querySelector("#advisor-name").textContent = advisor
|
||||
? `Dein Berater: ${advisorDisplayName(advisor)}`
|
||||
: "Unbekannte Berater-ID";
|
||||
document
|
||||
.querySelector("#open-contact")
|
||||
.addEventListener("click", () => openContactDialog({ advisorId }));
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
const form = document.querySelector("#contactForm");
|
||||
const status = document.querySelector("#contactFormStatus");
|
||||
const message = form?.elements.message;
|
||||
const messageHint = document.querySelector("#contactMessageHint");
|
||||
|
||||
function updateMessageHint() {
|
||||
if (!message || !messageHint) return;
|
||||
const valid = [...message.value.trim()].length >= 10;
|
||||
messageHint.classList.toggle("is-valid", valid);
|
||||
messageHint.textContent = valid
|
||||
? "Mindestens 10 Zeichen erreicht."
|
||||
: "Mindestens 10 Zeichen erforderlich.";
|
||||
}
|
||||
|
||||
function showErrors(fields = {}) {
|
||||
for (const input of form.elements) {
|
||||
if (!input.name) continue;
|
||||
input.removeAttribute("aria-invalid");
|
||||
const error = form.querySelector(`[data-error-for="${input.name}"]`);
|
||||
if (error) error.textContent = fields[input.name] ?? "";
|
||||
if (fields[input.name]) input.setAttribute("aria-invalid", "true");
|
||||
}
|
||||
}
|
||||
|
||||
message?.addEventListener("input", updateMessageHint);
|
||||
updateMessageHint();
|
||||
|
||||
form?.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
status.textContent = "";
|
||||
status.classList.remove("is-error");
|
||||
showErrors();
|
||||
|
||||
if (!form.reportValidity()) {
|
||||
status.textContent = "Bitte prüfe die markierten Eingaben.";
|
||||
status.classList.add("is-error");
|
||||
return;
|
||||
}
|
||||
|
||||
const submit = form.querySelector('[type="submit"]');
|
||||
submit.disabled = true;
|
||||
submit.textContent = "Wird gesendet …";
|
||||
try {
|
||||
const response = await fetch("/api/nutrition-contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(Object.fromEntries(new FormData(form))),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (!response.ok) {
|
||||
showErrors(result.error?.fields);
|
||||
throw new Error(
|
||||
result.error?.message ??
|
||||
"Die Nachricht konnte nicht gesendet werden.",
|
||||
);
|
||||
}
|
||||
form.reset();
|
||||
updateMessageHint();
|
||||
status.textContent =
|
||||
"Danke für deine Nachricht. Wir melden uns schnellstmöglich bei dir.";
|
||||
} catch (error) {
|
||||
status.textContent =
|
||||
error.message ||
|
||||
"Der Server ist gerade nicht erreichbar. Bitte versuche es erneut.";
|
||||
status.classList.add("is-error");
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submit.textContent = "Nachricht senden";
|
||||
}
|
||||
});
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
background: oklch(13% 0.022 223);
|
||||
color: oklch(96% 0.008 210);
|
||||
font:
|
||||
16px/1.5 "DM Sans",
|
||||
sans-serif;
|
||||
}
|
||||
.contact-test {
|
||||
max-width: 680px;
|
||||
margin: 12vh auto;
|
||||
padding: 24px;
|
||||
}
|
||||
.contact-test > p {
|
||||
color: oklch(72% 0.015 214);
|
||||
}
|
||||
.contact-test button {
|
||||
padding: 14px 24px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: oklch(20% 0.03 220);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-test button:focus-visible {
|
||||
outline: 3px solid oklch(70% 0.12 205 / 0.45);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
|
||||
}
|
||||
.contact-dialog {
|
||||
--contact-foreground: oklch(96% 0.008 210);
|
||||
--contact-accent: oklch(70% 0.12 205);
|
||||
box-sizing: border-box;
|
||||
width: min(32rem, calc(100vw - 2rem));
|
||||
max-height: calc(100dvh - 2rem);
|
||||
margin: auto;
|
||||
padding: 1.75rem;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #324449;
|
||||
border-radius: 1.25rem;
|
||||
background: #071316;
|
||||
color: var(--contact-foreground);
|
||||
font:
|
||||
400 16px/1.5 "DM Sans",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-shadow: 0 1.5rem 4rem #0006;
|
||||
}
|
||||
.contact-dialog::backdrop {
|
||||
background: rgb(0 0 0 / 65%);
|
||||
}
|
||||
.contact-dialog * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.contact-dialog h2 {
|
||||
margin: 8px 32px 8px 0;
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.contact-dialog p {
|
||||
margin: 0;
|
||||
}
|
||||
.contact-dialog .contact-eyebrow {
|
||||
color: var(--contact-accent);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.contact-advisor,
|
||||
.contact-help,
|
||||
.contact-consent {
|
||||
color: oklch(72% 0.015 214);
|
||||
}
|
||||
.contact-form {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
.contact-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.contact-form input:not([type="checkbox"]),
|
||||
.contact-form select {
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.8rem;
|
||||
border: 1px solid #61777d;
|
||||
border-radius: 0.75rem;
|
||||
background: #101e22;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
color-scheme: dark;
|
||||
}
|
||||
.contact-dialog button {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.8rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.75rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-dialog .contact-close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 28px;
|
||||
}
|
||||
.contact-submit {
|
||||
width: 100%;
|
||||
background: #53d5cd;
|
||||
color: oklch(20% 0.03 220);
|
||||
}
|
||||
.contact-submit:hover:not(:disabled) {
|
||||
background: #6de0d9;
|
||||
}
|
||||
|
||||
.contact-dialog :disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.contact-dialog :focus-visible {
|
||||
outline: 3px solid #53d5cd;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
.contact-dialog .contact-help {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.contact-form .contact-consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.contact-consent input {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 2px 0 0;
|
||||
accent-color: var(--contact-accent);
|
||||
}
|
||||
.contact-status {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.contact-status:empty {
|
||||
display: none;
|
||||
}
|
||||
.contact-status a {
|
||||
color: var(--contact-accent);
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import "./styles/styles.css";
|
||||
import "./components/navigationsbar/navigation.js";
|
||||
|
||||
|
||||
document.querySelector("#year").textContent = new Date().getFullYear();
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
createdAt,name,email,subject,message
|
||||
2026-09-29T18:51:35.694Z,Max Muster,test10@web.de,Erstgespräch für eine Ernährungsberatung,"Guten Tag,
|
||||
|
||||
ich möchte einen termin vereinbaren, können sie sich bei mir melden.
|
||||
|
||||
Mfg
|
||||
Max Muster"
|
||||
2026-09-29T19:27:34.639Z,Test Test,test11@web.de,Erstgespräch Ernährung,"Guten Tag,
|
||||
|
||||
können sie sich bei mir melden.
|
||||
|
||||
Mfg
|
||||
Test"
|
||||
|
|
|
@ -1,6 +1,3 @@
|
|||
import { createContactService } from "./services/contact-service.js";
|
||||
import { createContactEmailService } from "./services/contact-email.js";
|
||||
import { handleContact } from "./routes/contact.js";
|
||||
import { createServer } from "node:http";
|
||||
import { fileURLToPath, pathToFileURL } from "node:url";
|
||||
import { packages } from "../shared/packages.js";
|
||||
|
|
@ -11,10 +8,6 @@ import {
|
|||
import { createCsvStorage } from "./services/csv-storage.js";
|
||||
import { createEmailService } from "./services/email-service.js";
|
||||
import { handleBooking, json } from "./routes/bookings.js";
|
||||
import { handleContactForm } from "./routes/contact-form.js";
|
||||
import { createContactFormService } from "./services/contact-form-service.js";
|
||||
import { createContactFormStorage } from "./services/contact-form-storage.js";
|
||||
import { createContactFormEmailService } from "./services/contact-form-email.js";
|
||||
|
||||
export function createApp({
|
||||
catalog = packages,
|
||||
|
|
@ -23,11 +16,6 @@ export function createApp({
|
|||
),
|
||||
details,
|
||||
sendConfirmation,
|
||||
sendContact,
|
||||
contactFormStorage = createContactFormStorage(
|
||||
fileURLToPath(new URL("./data/contact-requests.csv", import.meta.url)),
|
||||
),
|
||||
sendContactForm,
|
||||
} = {}) {
|
||||
const ids = new Set();
|
||||
for (const entry of catalog) {
|
||||
|
|
@ -54,29 +42,8 @@ export function createApp({
|
|||
packages: catalog,
|
||||
sendConfirmation: sendConfirmation ?? createEmailService(),
|
||||
});
|
||||
const contact = createContactService({
|
||||
storage,
|
||||
sendContact: sendContact ?? createContactEmailService(),
|
||||
});
|
||||
// Registriert den separaten Kontaktformular-Service mit eigener CSV und Mailpit-Versand.
|
||||
const contactForm = createContactFormService({
|
||||
storage: contactFormStorage,
|
||||
sendContactForm: sendContactForm ?? createContactFormEmailService(),
|
||||
});
|
||||
return createServer(async (request, response) => {
|
||||
const path = new URL(request.url, "http://localhost").pathname;
|
||||
// Leitet die Ernährungsseite an ihren eigenen Kontaktformular-Endpunkt.
|
||||
if (path === "/api/nutrition-contact") {
|
||||
return handleContactForm(request, response, contactForm);
|
||||
}
|
||||
if (path === "/api/contact" || path === "/api/contact/validate") {
|
||||
return handleContact(
|
||||
request,
|
||||
response,
|
||||
contact,
|
||||
path.endsWith("/validate"),
|
||||
);
|
||||
}
|
||||
if (path === "/api/angebote" && request.method === "GET") {
|
||||
return json(response, 200, {
|
||||
packages: catalog.map(({ id, name, summary }) => ({
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function json(response, status, body) {
|
|||
response.end(JSON.stringify(body));
|
||||
}
|
||||
|
||||
export async function readJson(request) {
|
||||
async function readJson(request) {
|
||||
if (
|
||||
request.headers["content-type"]?.split(";")[0].trim() !==
|
||||
"application/json"
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import { BookingError } from "../services/booking-service.js";
|
||||
import { json, readJson } from "./bookings.js";
|
||||
|
||||
// Nimmt HTTP-Anfragen des Ernährungs-Kontaktformulars entgegen und übersetzt Service-Ergebnisse in JSON.
|
||||
export async function handleContactForm(request, response, service) {
|
||||
// Das Formular darf Anfragen ausschließlich per POST absenden.
|
||||
if (request.method !== "POST") {
|
||||
response.setHeader("Allow", "POST");
|
||||
return json(response, 405, {
|
||||
error: {
|
||||
code: "METHOD_NOT_ALLOWED",
|
||||
message: "Bitte POST verwenden.",
|
||||
},
|
||||
});
|
||||
}
|
||||
try {
|
||||
// Liest JSON, führt den Kontaktablauf aus und antwortet bei Erfolg mit HTTP 201.
|
||||
const result = await service.submit(await readJson(request));
|
||||
return json(response, 201, result);
|
||||
} catch (error) {
|
||||
// Erwartete Validierungs- und Dienstfehler behalten Status und Fehlercode.
|
||||
if (error instanceof BookingError) {
|
||||
return json(response, error.status, {
|
||||
error: {
|
||||
code: error.code,
|
||||
message: error.message,
|
||||
...(Object.keys(error.fields ?? {}).length
|
||||
? { fields: error.fields }
|
||||
: {}),
|
||||
},
|
||||
});
|
||||
}
|
||||
// Unerwartete Fehler werden protokolliert, ohne Formulardaten offenzulegen.
|
||||
console.error("Kontaktformular konnte nicht verarbeitet werden.");
|
||||
return json(response, 500, {
|
||||
error: {
|
||||
code: "INTERNAL_ERROR",
|
||||
message:
|
||||
"Die Nachricht konnte gerade nicht verarbeitet werden.",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { BookingError } from "../services/booking-service.js";
|
||||
import { json, readJson } from "./bookings.js";
|
||||
|
||||
export async function handleContact(request, response, service, validateOnly) {
|
||||
if (request.method !== "POST") {
|
||||
response.setHeader("Allow", "POST");
|
||||
return json(response, 405, {
|
||||
error: {
|
||||
code: "METHOD_NOT_ALLOWED",
|
||||
message: "Bitte POST verwenden.",
|
||||
},
|
||||
});
|
||||
}
|
||||
try {
|
||||
const input = await readJson(request);
|
||||
const result = await (validateOnly
|
||||
? service.validate(input)
|
||||
: service.submit(input));
|
||||
return json(response, validateOnly ? 200 : 201, result);
|
||||
} catch (error) {
|
||||
return json(
|
||||
response,
|
||||
error instanceof BookingError ? error.status : 500,
|
||||
{
|
||||
error: {
|
||||
code:
|
||||
error instanceof BookingError
|
||||
? error.code
|
||||
: "INTERNAL_ERROR",
|
||||
message:
|
||||
error instanceof BookingError
|
||||
? error.message
|
||||
: "Die Kontaktanfrage konnte nicht verarbeitet werden.",
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
import {
|
||||
isValidBookingPhone,
|
||||
phoneError,
|
||||
} from "../../shared/phone-validation.js";
|
||||
import { createHash } from "node:crypto";
|
||||
import { packagesDetails } from "../../shared/packagesdetails.js";
|
||||
|
||||
|
|
@ -17,7 +13,7 @@ export class BookingError extends Error {
|
|||
const uuidPattern =
|
||||
/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
||||
// Übliche unquotierte E-Mail-Adressen; einzelne Domainlabels maximal 63 Zeichen.
|
||||
export const emailPattern =
|
||||
const emailPattern =
|
||||
/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)+$/i;
|
||||
|
||||
function validateInput(input, key) {
|
||||
|
|
@ -116,12 +112,16 @@ function validateInput(input, key) {
|
|||
) {
|
||||
fields.email = "Bitte eine gültige E-Mail-Adresse eingeben.";
|
||||
}
|
||||
const phone = customer ? customer.phone : input.phone;
|
||||
if (phone !== undefined) {
|
||||
if (!isValidBookingPhone(phone)) {
|
||||
fields.phone = phoneError;
|
||||
} else if (!customer && phone.trim()) {
|
||||
result.phone = phone.trim();
|
||||
if (!customer && input.phone !== undefined) {
|
||||
if (
|
||||
typeof input.phone !== "string" ||
|
||||
input.phone.length > 50 ||
|
||||
/[\x00-\x1f\x7f]/.test(input.phone)
|
||||
) {
|
||||
fields.phone =
|
||||
"Bitte höchstens 50 Zeichen ohne Zeilenumbrüche eingeben.";
|
||||
} else if (input.phone.trim()) {
|
||||
result.phone = input.phone.trim();
|
||||
}
|
||||
}
|
||||
if (Object.keys(fields).length) {
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
import { advisorDisplayName } from "../../shared/berater.js";
|
||||
import { createMailTransport } from "./email-service.js";
|
||||
import { BookingError } from "./booking-service.js";
|
||||
import { contactNotice } from "../../shared/contact.js";
|
||||
|
||||
export function createContactEmailService(makeTransport) {
|
||||
// Dieser Ablauf bleibt auch bei extern konfiguriertem Buchungs-SMTP lokal.
|
||||
const { transport, from } = createMailTransport(
|
||||
{
|
||||
SMTP_HOST: "127.0.0.1",
|
||||
SMTP_PORT: "1025",
|
||||
SMTP_FROM: "Tri-Hub Ernährung <noreply@tri-hub.de>",
|
||||
},
|
||||
makeTransport,
|
||||
);
|
||||
return async ({ email, advisor, reason }) => {
|
||||
const results = await Promise.allSettled(
|
||||
[
|
||||
{
|
||||
to: email,
|
||||
text: `Deine Kontaktanfrage an ${advisorDisplayName(advisor)} ist in der Simulation eingegangen. ${advisorDisplayName(advisor)} wird sich bei dir melden.`,
|
||||
closing: "Viele Grüße\nTri-Hub Ernährung",
|
||||
},
|
||||
{
|
||||
to: advisor.email,
|
||||
text: `Hallo ${advisorDisplayName(advisor)}, bitte setze dich mit ${email} in Kontakt.`,
|
||||
},
|
||||
].map(async ({ to, text, closing }) => {
|
||||
const result = await transport.sendMail({
|
||||
from,
|
||||
to,
|
||||
subject:
|
||||
"Eingangsbestätigung – Tri-Hub Kontakt (Simulation)",
|
||||
text: `${text}\n\nKontaktgrund: ${reason}\n\n${contactNotice}${closing ? `\n\n${closing}` : ""}`,
|
||||
});
|
||||
if (
|
||||
!result.accepted?.some(
|
||||
(address) => address.toLowerCase() === to.toLowerCase(),
|
||||
)
|
||||
) {
|
||||
throw new Error("SMTP hat den Empfänger nicht angenommen.");
|
||||
}
|
||||
}),
|
||||
);
|
||||
if (results.some((result) => result.status === "rejected")) {
|
||||
throw new BookingError(
|
||||
502,
|
||||
"CONTACT_MAIL_FAILED",
|
||||
"Nicht beide Bestätigungen konnten bestätigt werden. Bitte Mailpit prüfen, bevor du erneut sendest; eine Nachricht kann bereits eingegangen sein.",
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import { createMailTransport } from "./email-service.js";
|
||||
import { BookingError } from "./booking-service.js";
|
||||
|
||||
// Sichtbarer Empfänger in Mailpit; der Transport darunter bleibt lokal.
|
||||
const contactAddress = "ernaehrung@tri-hub.de";
|
||||
|
||||
// Richtet den SMTP-Transport fest auf Mailpit ein und liefert den E-Mail-Versand zurück.
|
||||
export function createContactFormEmailService(
|
||||
env = process.env,
|
||||
makeTransport,
|
||||
) {
|
||||
const { transport, from } = createMailTransport(
|
||||
{
|
||||
SMTP_HOST: "127.0.0.1",
|
||||
SMTP_PORT: "1025",
|
||||
SMTP_FROM: "Tri-Hub Ernährung <noreply@tri-hub.de>",
|
||||
},
|
||||
makeTransport,
|
||||
);
|
||||
|
||||
return async function sendContactForm(data) {
|
||||
// Erstellt die Eingangsbestätigung für den Absender und die Anfrage für Tri-Hub.
|
||||
const messages = [
|
||||
{
|
||||
to: data.email,
|
||||
subject: "Wir haben deine Nachricht erhalten – Tri-Hub",
|
||||
text: [
|
||||
`Hallo ${data.name},`,
|
||||
"",
|
||||
"vielen Dank für deine Nachricht. Wir haben deine Anfrage erhalten und melden uns schnellstmöglich bei dir.",
|
||||
"",
|
||||
`Betreff: ${data.subject}`,
|
||||
"Deine Nachricht:",
|
||||
data.message,
|
||||
"",
|
||||
"Viele Grüße",
|
||||
"Tri-Hub Ernährung",
|
||||
].join("\n"),
|
||||
},
|
||||
{
|
||||
to: contactAddress,
|
||||
subject: `Tri-Hub Kontaktanfrage: ${data.subject}`,
|
||||
text: [
|
||||
"Neue Kontaktanfrage über die Ernährungsseite",
|
||||
"",
|
||||
`Name: ${data.name}`,
|
||||
`E-Mail: ${data.email}`,
|
||||
`Betreff: ${data.subject}`,
|
||||
"",
|
||||
"Nachricht:",
|
||||
data.message,
|
||||
].join("\n"),
|
||||
replyTo: data.email,
|
||||
},
|
||||
];
|
||||
|
||||
// Sendet beide Nachrichten und prüft, dass Mailpit beide Empfänger angenommen hat.
|
||||
const results = await Promise.allSettled(
|
||||
messages.map(async (message) => {
|
||||
const result = await transport.sendMail({ from, ...message });
|
||||
if (
|
||||
!result.accepted?.some(
|
||||
(address) =>
|
||||
address.toLowerCase() === message.to.toLowerCase(),
|
||||
)
|
||||
) {
|
||||
throw new Error("SMTP hat den Empfänger nicht angenommen.");
|
||||
}
|
||||
}),
|
||||
);
|
||||
// Ein Fehler bei mindestens einer Nachricht wird an den Service weitergegeben.
|
||||
if (results.some((result) => result.status === "rejected")) {
|
||||
throw new BookingError(
|
||||
502,
|
||||
"CONTACT_EMAIL_FAILED",
|
||||
"Deine Nachricht wurde gespeichert, aber die E-Mails konnten nicht vollständig gesendet werden. Bitte versuche es später erneut oder melde dich direkt bei Tri-Hub.",
|
||||
);
|
||||
}
|
||||
return { emailStatus: "accepted" };
|
||||
};
|
||||
}
|
||||
|
||||
export { contactAddress };
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
import { BookingError, emailPattern } from "./booking-service.js";
|
||||
|
||||
// Prüft und normalisiert die vom Browser übermittelten Kontaktangaben.
|
||||
function normalizeInput(input) {
|
||||
if (!input || typeof input !== "object" || Array.isArray(input)) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_INPUT",
|
||||
"Bitte alle Pflichtfelder prüfen.",
|
||||
);
|
||||
}
|
||||
|
||||
// Legt die zulässige Höchstlänge für jedes Formularfeld fest.
|
||||
const limits = { name: 120, email: 254, subject: 160, message: 5000 };
|
||||
const fields = {};
|
||||
const data = {};
|
||||
for (const [field, max] of Object.entries(limits)) {
|
||||
const value = input[field];
|
||||
if (typeof value !== "string") {
|
||||
fields[field] = "Dieses Feld ist erforderlich.";
|
||||
continue;
|
||||
}
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) fields[field] = "Dieses Feld ist erforderlich.";
|
||||
else if (trimmed.length > max)
|
||||
fields[field] = `Maximal ${max} Zeichen eingeben.`;
|
||||
else if (
|
||||
(field === "message"
|
||||
? /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/
|
||||
: /[\x00-\x1f\x7f]/
|
||||
).test(trimmed)
|
||||
)
|
||||
fields[field] = "Bitte entferne ungültige Steuerzeichen.";
|
||||
else data[field] = trimmed;
|
||||
}
|
||||
// Prüft zusätzlich das E-Mail-Format und die Mindestlänge der Nachricht.
|
||||
if (
|
||||
data.email &&
|
||||
(!emailPattern.test(data.email) || data.email.split("@")[0].length > 64)
|
||||
) {
|
||||
fields.email = "Bitte eine gültige E-Mail-Adresse eingeben.";
|
||||
}
|
||||
if (data.message && [...data.message].length < 10) {
|
||||
fields.message =
|
||||
"Deine Nachricht muss mindestens 10 Zeichen enthalten.";
|
||||
}
|
||||
// Gibt alle gefundenen Feldfehler gesammelt an die Route zurück.
|
||||
if (Object.keys(fields).length) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_INPUT",
|
||||
"Bitte prüfe deine Eingaben.",
|
||||
fields,
|
||||
);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// Verbindet Validierung, CSV-Speicherung und anschließenden E-Mail-Versand.
|
||||
export function createContactFormService({ storage, sendContactForm }) {
|
||||
return {
|
||||
async submit(input) {
|
||||
const data = normalizeInput(input);
|
||||
// Ergänzt einen Zeitstempel, damit die Anfrage zeitlich nachvollziehbar bleibt.
|
||||
const record = { createdAt: new Date().toISOString(), ...data };
|
||||
// Speichert vor dem Versand, damit die Anfrage bei SMTP-Problemen erhalten bleibt.
|
||||
try {
|
||||
await storage.append(record);
|
||||
} catch {
|
||||
throw new BookingError(
|
||||
503,
|
||||
"CONTACT_NOT_SAVED",
|
||||
"Deine Nachricht konnte gerade nicht gespeichert werden. Bitte versuche es erneut.",
|
||||
);
|
||||
}
|
||||
// Sendet die beiden Mails erst nach erfolgreichem Speichern der Anfrage.
|
||||
try {
|
||||
await sendContactForm(record);
|
||||
} catch (error) {
|
||||
if (error instanceof BookingError) throw error;
|
||||
throw new BookingError(
|
||||
502,
|
||||
"CONTACT_EMAIL_FAILED",
|
||||
"Deine Nachricht wurde gespeichert, aber die E-Mails konnten nicht vollständig gesendet werden. Bitte versuche es später erneut oder melde dich direkt bei Tri-Hub.",
|
||||
);
|
||||
}
|
||||
return { saved: true, emailStatus: "accepted" };
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { mkdir, open, readFile, rename, rm } from "node:fs/promises";
|
||||
import { dirname } from "node:path";
|
||||
import { randomUUID } from "node:crypto";
|
||||
import { parse } from "csv-parse/sync";
|
||||
import { stringify } from "csv-stringify/sync";
|
||||
|
||||
// Diese Spalten bilden den festen Aufbau der Kontaktanfragen-CSV.
|
||||
const columns = ["createdAt", "name", "email", "subject", "message"];
|
||||
|
||||
// Schützt CSV-Zellen vor Tabellenformeln, wenn die Datei geöffnet wird.
|
||||
function protect(value) {
|
||||
const text = String(value ?? "");
|
||||
return /^(?:'|[\t\r\n]|\s*[=+@-])/u.test(text) ? `'${text}` : text;
|
||||
}
|
||||
|
||||
// Entfernt beim Einlesen den Schutzpräfix und stellt den Eingabewert wieder her.
|
||||
function restore(value) {
|
||||
return value.startsWith("'") ? value.slice(1) : value;
|
||||
}
|
||||
|
||||
// Erstellt den CSV-Speicher und hält Schreibvorgänge dieser Instanz in einer Warteschlange.
|
||||
export function createContactFormStorage(filePath) {
|
||||
let queue = Promise.resolve();
|
||||
|
||||
// Liest alle Anfragen ein und prüft, ob die Datei den erwarteten CSV-Kopf besitzt.
|
||||
async function readAll() {
|
||||
let content;
|
||||
try {
|
||||
content = await readFile(filePath, "utf8");
|
||||
} catch (error) {
|
||||
if (error.code === "ENOENT") return [];
|
||||
throw error;
|
||||
}
|
||||
if (!content.trim()) throw new Error("Leere Kontaktdatei");
|
||||
return parse(content, {
|
||||
bom: true,
|
||||
columns(header) {
|
||||
if (header.join(",") !== columns.join(",")) {
|
||||
throw new Error("Unbekanntes Kontakt-CSV-Format");
|
||||
}
|
||||
return header;
|
||||
},
|
||||
skip_empty_lines: true,
|
||||
}).map((row) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(row).map(([key, value]) => [
|
||||
key,
|
||||
restore(value),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Schreibt die vollständige CSV in eine temporäre Datei und ersetzt danach atomar das Original.
|
||||
async function writeAll(records) {
|
||||
await mkdir(dirname(filePath), { recursive: true });
|
||||
const temporary = `${filePath}.${randomUUID()}.tmp`;
|
||||
const content = stringify(
|
||||
records.map((row) =>
|
||||
Object.fromEntries(
|
||||
columns.map((column) => [column, protect(row[column])]),
|
||||
),
|
||||
),
|
||||
{ header: true, columns, record_delimiter: "\r\n" },
|
||||
);
|
||||
try {
|
||||
const handle = await open(temporary, "wx", 0o600);
|
||||
try {
|
||||
await handle.writeFile(content, "utf8");
|
||||
await handle.sync();
|
||||
} finally {
|
||||
await handle.close();
|
||||
}
|
||||
await rename(temporary, filePath);
|
||||
} finally {
|
||||
await rm(temporary, { force: true });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
readAll,
|
||||
// Hängt eine Anfrage nacheinander an, damit parallele Absendevorgänge keine Zeilen verlieren.
|
||||
append(record) {
|
||||
const operation = queue.then(async () => {
|
||||
const records = await readAll();
|
||||
records.push(record);
|
||||
await writeAll(records);
|
||||
});
|
||||
queue = operation.catch(() => {});
|
||||
return operation;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
import { findAdvisor } from "../../shared/berater.js";
|
||||
import { BookingError, emailPattern } from "./booking-service.js";
|
||||
import { contactReasons, contactBookingUrl } from "../../shared/contact.js";
|
||||
|
||||
function advisorDetails(advisorId) {
|
||||
const advisor = findAdvisor(advisorId);
|
||||
if (!advisor) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_ADVISOR",
|
||||
"Bitte eine gültige Berater-ID übergeben.",
|
||||
);
|
||||
}
|
||||
if (
|
||||
typeof advisor.vorname !== "string" ||
|
||||
!advisor.vorname.trim() ||
|
||||
typeof advisor.email !== "string" ||
|
||||
advisor.email.length > 254 ||
|
||||
!emailPattern.test(advisor.email) ||
|
||||
advisor.email.split("@")[0].length > 64 ||
|
||||
!advisor.email.toLowerCase().endsWith("@tri-hub.de")
|
||||
) {
|
||||
throw new BookingError(
|
||||
503,
|
||||
"ADVISOR_UNAVAILABLE",
|
||||
"Die Kontaktdaten dieses Beraters sind nicht verfügbar.",
|
||||
);
|
||||
}
|
||||
return { ...advisor };
|
||||
}
|
||||
|
||||
export function createContactService({ storage, sendContact }) {
|
||||
async function validate(input) {
|
||||
if (
|
||||
!input ||
|
||||
typeof input !== "object" ||
|
||||
Array.isArray(input) ||
|
||||
typeof input.email !== "string" ||
|
||||
input.email.length > 254
|
||||
) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_EMAIL",
|
||||
"Bitte eine gültige E-Mail-Adresse eingeben.",
|
||||
);
|
||||
}
|
||||
const email = input.email.trim().toLowerCase();
|
||||
if (!emailPattern.test(email) || email.split("@")[0].length > 64) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_EMAIL",
|
||||
"Bitte eine gültige E-Mail-Adresse eingeben.",
|
||||
);
|
||||
}
|
||||
let records;
|
||||
try {
|
||||
records = await storage.readAll();
|
||||
} catch {
|
||||
throw new BookingError(
|
||||
503,
|
||||
"STORAGE_UNAVAILABLE",
|
||||
"Die Kundendaten können gerade nicht geprüft werden.",
|
||||
);
|
||||
}
|
||||
if (!records.some((row) => row.email?.trim().toLowerCase() === email)) {
|
||||
throw new BookingError(
|
||||
403,
|
||||
"CUSTOMER_NOT_FOUND",
|
||||
"Zu dieser E-Mail-Adresse liegt keine Buchung vor. Bitte verwende die Adresse deiner Buchung.",
|
||||
);
|
||||
}
|
||||
return { email, valid: true };
|
||||
}
|
||||
return {
|
||||
validate,
|
||||
async submit(input) {
|
||||
const { email } = await validate(input);
|
||||
const advisor = advisorDetails(input.advisorId);
|
||||
if (
|
||||
typeof input.reason !== "string" ||
|
||||
!Object.hasOwn(contactReasons, input.reason)
|
||||
) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"INVALID_REASON",
|
||||
"Bitte einen Kontaktgrund auswählen.",
|
||||
);
|
||||
}
|
||||
if (input.simulationAccepted !== true) {
|
||||
throw new BookingError(
|
||||
400,
|
||||
"SIMULATION_REQUIRED",
|
||||
"Bitte den Simulationshinweis bestätigen.",
|
||||
);
|
||||
}
|
||||
await sendContact({
|
||||
email,
|
||||
advisor,
|
||||
reason: contactReasons[input.reason],
|
||||
});
|
||||
return {
|
||||
simulated: true,
|
||||
emailStatus: "accepted",
|
||||
redirectUrl: contactBookingUrl,
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import nodemailer from "nodemailer";
|
|||
import { orderSummaryRows } from "../../shared/order-summary.js";
|
||||
import { paymentNotice } from "../../shared/booking-copy.js";
|
||||
|
||||
export function createMailTransport(
|
||||
export function createEmailService(
|
||||
env = process.env,
|
||||
makeTransport = nodemailer.createTransport,
|
||||
) {
|
||||
|
|
@ -34,14 +34,6 @@ export function createMailTransport(
|
|||
disableUrlAccess: true,
|
||||
});
|
||||
const from = env.SMTP_FROM || "Tri-Hub <buchung@example.test>";
|
||||
return { transport, from };
|
||||
}
|
||||
|
||||
export function createEmailService(
|
||||
env = process.env,
|
||||
makeTransport = nodemailer.createTransport,
|
||||
) {
|
||||
const { transport, from } = createMailTransport(env, makeTransport);
|
||||
return async function sendConfirmation(booking) {
|
||||
const order = booking.bookedPackage;
|
||||
const phone = booking.phone || booking.customer?.phone;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"openapi": "3.0.3",
|
||||
"info": {
|
||||
"title": "Tri-Hub Ernährungsberatung & Booking API",
|
||||
"description": "API-Spezifikation für die Angebotsübersicht (US2.1), die Paket-Detailansicht und den Buchungsservice (US2.4 Paket buchen). Kontakt-Simulation mit CSV-Kundenvalidierung und Mailpit.",
|
||||
"version": "1.2.0"
|
||||
"description": "API-Spezifikation für die Angebotsübersicht (US2.1), die Paket-Detailansicht und den Buchungsservice (US2.4 Paket buchen).",
|
||||
"version": "1.1.0"
|
||||
},
|
||||
"servers": [
|
||||
{
|
||||
|
|
@ -224,288 +224,6 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"/contact/validate": {
|
||||
"post": {
|
||||
"tags": ["Contact"],
|
||||
"summary": "Kunden-E-Mail prüfen",
|
||||
"description": "Vergleicht normalisierte E-Mail mit bookings.csv. Kein Nachweis des Postfachbesitzes.",
|
||||
"requestBody": {
|
||||
"required": true,
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"required": ["email"],
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"format": "email",
|
||||
"maxLength": 254
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"responses": {
|
||||
"200": {
|
||||
"description": "Kunde in CSV gefunden",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"required": ["valid", "email"],
|
||||
"properties": {
|
||||
"valid": {
|
||||
"type": "boolean",
|
||||
"enum": [true]
|
||||
},
|
||||
"email": {
|
||||
"type": "string",
|
||||
"format": "email",
|
||||
"maxLength": 254
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"400": {
|
||||
"description": "Ungültige Eingabe oder JSON",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"403": {
|
||||
"description": "Keine Buchung zur E-Mail",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"405": {
|
||||
"description": "Nur POST erlaubt",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"413": {
|
||||
"description": "Mehr als 8 KiB",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"415": {
|
||||
"description": "Content-Type muss application/json sein",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"503": {
|
||||
"description": "CSV nicht lesbar",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"500": {
|
||||
"description": "Unerwarteter Fehler",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"/contact": {
|
||||
"post": {
|
||||
"tags": ["Contact"],
|
||||
"summary": "Beraterkontakt simulieren",
|
||||
"description": "Vergleicht normalisierte E-Mail mit bookings.csv. Kein Nachweis des Postfachbesitzes. Prüft CSV bei jedem Absenden erneut. Versand ausschließlich an lokales Mailpit (127.0.0.1:1025), zwei getrennte Bestätigungen. Kein automatischer Neuversand, keine persistente Kontaktablage.",
|
||||
"requestBody": {
|
||||
"required": true,
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"required": [
|
||||
"email",
|
||||
"advisorId",
|
||||
"reason",
|
||||
"simulationAccepted"
|
||||
],
|
||||
"properties": {
|
||||
"email": {
|
||||
"type": "string",
|
||||
"format": "email",
|
||||
"maxLength": 254
|
||||
},
|
||||
"reason": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"coaching",
|
||||
"nutrition",
|
||||
"competition",
|
||||
"recovery",
|
||||
"package",
|
||||
"appointment",
|
||||
"other"
|
||||
]
|
||||
},
|
||||
"simulationAccepted": {
|
||||
"type": "boolean",
|
||||
"enum": [true]
|
||||
},
|
||||
"advisorId": {
|
||||
"type": "string",
|
||||
"example": "relindis-agethen",
|
||||
"description": "ID aus src/shared/berater-daten.json. Name und E-Mail werden serverseitig ausschließlich dort nachgeschlagen."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"responses": {
|
||||
"201": {
|
||||
"description": "Beide simulierten E-Mails von Mailpit angenommen; Weiterleitung möglich",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"type": "object",
|
||||
"required": [
|
||||
"simulated",
|
||||
"emailStatus",
|
||||
"redirectUrl"
|
||||
],
|
||||
"properties": {
|
||||
"simulated": {
|
||||
"type": "boolean",
|
||||
"enum": [true]
|
||||
},
|
||||
"emailStatus": {
|
||||
"type": "string",
|
||||
"enum": ["accepted"]
|
||||
},
|
||||
"redirectUrl": {
|
||||
"type": "string",
|
||||
"format": "uri",
|
||||
"description": "Feste Microsoft-Bookings-Adresse; keine benutzerdefinierten Redirects."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"400": {
|
||||
"description": "Ungültige Eingabe oder JSON",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"403": {
|
||||
"description": "Keine Buchung zur E-Mail",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"405": {
|
||||
"description": "Nur POST erlaubt",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"413": {
|
||||
"description": "Mehr als 8 KiB",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"415": {
|
||||
"description": "Content-Type muss application/json sein",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"503": {
|
||||
"description": "CSV nicht lesbar oder Beraterkontaktdaten ungültig",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"500": {
|
||||
"description": "Unerwarteter Fehler",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"502": {
|
||||
"description": "Mindestens eine Mailannahme fehlgeschlagen oder unklar; vor Wiederholung Mailpit prüfen",
|
||||
"content": {
|
||||
"application/json": {
|
||||
"schema": {
|
||||
"$ref": "#/components/schemas/ContactError"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"components": {
|
||||
|
|
@ -835,7 +553,7 @@
|
|||
"phone": {
|
||||
"type": "string",
|
||||
"maxLength": 50,
|
||||
"description": "Optionale Telefonnummer: deutsche Nummer mit Vorwahl oder internationale Nummer mit Ländervorwahl. Prüfung des Nummernformats, keine Bestätigung der Erreichbarkeit. Bei customer gilt customer.phone.",
|
||||
"description": "Optionale Telefonnummer bei Übergabe von name und email, ohne Steuerzeichen. Bei customer gilt customer.phone.",
|
||||
"example": "+49 170 1234567"
|
||||
},
|
||||
"customer": {
|
||||
|
|
@ -857,8 +575,6 @@
|
|||
},
|
||||
"phone": {
|
||||
"type": "string",
|
||||
"maxLength": 50,
|
||||
"description": "Optional. Deutsche Nummer mit Vorwahl oder internationale Nummer mit Ländervorwahl; keine Bestätigung der Erreichbarkeit.",
|
||||
"example": "+49 170 1234567"
|
||||
},
|
||||
"ageGroup": {
|
||||
|
|
@ -958,24 +674,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ContactError": {
|
||||
"type": "object",
|
||||
"required": ["error"],
|
||||
"properties": {
|
||||
"error": {
|
||||
"type": "object",
|
||||
"required": ["code", "message"],
|
||||
"properties": {
|
||||
"code": {
|
||||
"type": "string"
|
||||
},
|
||||
"message": {
|
||||
"type": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "relindis-agethen",
|
||||
"name": "Relindis Agethen (Lilli)",
|
||||
"email": "relindis.agethen@tri-hub.de",
|
||||
"titel": "Triathletin und Ernährungsberaterin",
|
||||
"biographie": "Relindis Agethen, genannt Lilli, ist seit 16 Jahren im Triathlon aktiv und bringt starke sportliche Erfolge mit: Vize-Europameisterin, Deutsche Meisterin und mehrfache Baden-Württembergische Meisterin. Als zertifizierte Ernährungsberaterin für Sportler B-Lizenz ergänzt sie das Team um Leistungsentwicklung und Ernährungswissen.",
|
||||
"qualifikationen": [
|
||||
"Zertifizierte Ernährungsberaterin für Sportler (B-Lizenz)",
|
||||
"Vize-Europameisterin",
|
||||
"Deutsche Meisterin",
|
||||
"Mehrfache Baden-Württembergische Meisterin"
|
||||
],
|
||||
"schwerpunkte": [
|
||||
"Ernährung",
|
||||
"Leistungssport-Perspektive",
|
||||
"Wettkampforientierte Entwicklung"
|
||||
],
|
||||
"bildquelle": "",
|
||||
"vorname": "Relindis",
|
||||
"nachname": "Agethen",
|
||||
"spitzname": "Lilli",
|
||||
"bilder": [
|
||||
{
|
||||
"quelle": "/images/Lilli1.jpeg",
|
||||
"typ": "Porträt"
|
||||
},
|
||||
{
|
||||
"quelle": "/images/Lilli2.jpeg",
|
||||
"typ": "Aktionsbild"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "maren-hoffmann",
|
||||
"name": "Maren Hoffmann",
|
||||
"email": "maren.hoffmann@tri-hub.de",
|
||||
"titel": "Triathletin und Ernährungsberaterin",
|
||||
"biographie": "Maren Hoffmann verbindet ihre langjährige Erfahrung im Ausdauersport mit ihrem Wissen aus der Ernährungsberatung. Sie unterstützt Athletinnen und Athleten dabei, Training und Ernährung alltagstauglich aufeinander abzustimmen und sich gezielt auf Wettkämpfe vorzubereiten.",
|
||||
"qualifikationen": [
|
||||
"Ernährungsberaterin für Sporternährung",
|
||||
"Langjährige Erfahrung im Ausdauersport"
|
||||
],
|
||||
"schwerpunkte": [
|
||||
"Ernährung im Ausdauertraining",
|
||||
"Wettkampfverpflegung",
|
||||
"Alltagstaugliche Ernährungsroutinen"
|
||||
],
|
||||
"bildquelle": "",
|
||||
"vorname": "Maren",
|
||||
"nachname": "Hoffmann",
|
||||
"spitzname": "",
|
||||
"bilder": [
|
||||
{
|
||||
"quelle": "/images/Maren1.jpeg",
|
||||
"typ": "Porträt"
|
||||
},
|
||||
{
|
||||
"quelle": "/images/Maren2.jpeg",
|
||||
"typ": "Aktionsbild"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import berater from "./berater-daten.json" with { type: "json" };
|
||||
|
||||
export function findAdvisor(advisorId) {
|
||||
return typeof advisorId === "string"
|
||||
? berater.find((entry) => entry.id === advisorId)
|
||||
: undefined;
|
||||
}
|
||||
|
||||
export function advisorDisplayName(advisor) {
|
||||
return advisor?.spitzname?.trim() || advisor?.vorname?.trim() || "";
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
export const contactReasons = {
|
||||
coaching: "Persönliches Coaching und Erstgespräch",
|
||||
nutrition: "Ernährungsplan und Anpassungen",
|
||||
competition: "Wettkampfverpflegung und Hydration",
|
||||
recovery: "Regeneration und Verträglichkeit",
|
||||
package: "Fragen zum gebuchten Paket",
|
||||
appointment: "Termin vereinbaren oder ändern",
|
||||
other: "Sonstiges Anliegen",
|
||||
};
|
||||
|
||||
export const contactNotice =
|
||||
"Dies ist eine Simulation des Kontaktprozesses. Die Bestätigungen werden nur im lokalen Mailpit gesammelt. Es wird kein Berater tatsächlich kontaktiert. Die Weiterleitung öffnet die externe Microsoft-Bookings-Seite; dort wird hierdurch kein Termin gebucht.";
|
||||
|
||||
export const contactBookingUrl =
|
||||
"https://bookings.cloud.microsoft/bookwithme/user/b055625c7e5b4bf3866230ffa066536b%40Tri-hub.de/meetingtype/qkJP99nqg0a_Na5Z-gY9WQ2?anonymous&ismsaljsauthenabled";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { isValidPhoneNumber } from "libphonenumber-js/max";
|
||||
|
||||
export const phoneError =
|
||||
"Bitte eine gültige Telefonnummer mit Vorwahl eingeben, z. B. 0170 1234567 oder +49 170 1234567.";
|
||||
|
||||
export function isValidBookingPhone(value) {
|
||||
if (typeof value !== "string" || value.length > 50) return false;
|
||||
if (/[\x00-\x1f\x7f]/.test(value)) return false;
|
||||
const phone = value.trim();
|
||||
if (!phone) return true;
|
||||
if (!/^\+?[0-9 ()/.-]+$/.test(phone)) return false;
|
||||
if (!/^(?:\+|0)/.test(phone)) return false;
|
||||
return isValidPhoneNumber(phone, "DE");
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
:root {
|
||||
--nav-bg: #0d0d1a;
|
||||
--nav-border: rgba(248, 250, 252, 0.08);
|
||||
--nav-accent: #53d5cd;
|
||||
--nav-green: #10b981;
|
||||
--nav-white: #ffffff;
|
||||
--nav-light: #f8fafc;
|
||||
--nav-muted: #94a3b8;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
.navbar__inner {
|
||||
width: 100%;
|
||||
min-height: 96px;
|
||||
min-height: 76px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -52,13 +52,9 @@
|
|||
}
|
||||
|
||||
.navbar__logo-img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
padding: 5px;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.navbar__brand-text {
|
||||
|
|
@ -123,7 +119,7 @@
|
|||
}
|
||||
|
||||
.navbar__link--home:hover {
|
||||
border-color: rgba(83, 213, 205, 0.55);
|
||||
border-color: rgba(16, 185, 129, 0.55);
|
||||
color: var(--nav-white);
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +127,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nav-accent);
|
||||
color: #22d3ee;
|
||||
}
|
||||
|
||||
.navbar__home-icon svg {
|
||||
|
|
@ -146,7 +142,7 @@
|
|||
|
||||
.navbar a:focus-visible,
|
||||
.navbar button:focus-visible {
|
||||
outline: 3px solid var(--nav-accent);
|
||||
outline: 3px solid var(--nav-green);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -188,7 +184,7 @@
|
|||
|
||||
.navbar__nav {
|
||||
position: absolute;
|
||||
top: 96px;
|
||||
top: 76px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--nav-bg);
|
||||
|
|
@ -221,5 +217,5 @@
|
|||
|
||||
/* Platz für die fixierte Navbar */
|
||||
body {
|
||||
padding-top: 96px;
|
||||
padding-top: 76px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,279 +1,123 @@
|
|||
.packages-page {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: #f8fafc;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, #53d5cd17, transparent 30%),
|
||||
radial-gradient(circle at 88% 26%, #53d5cd0e, transparent 27%),
|
||||
linear-gradient(145deg, #0d0d1a, #1a1a2e);
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
color-scheme: dark;
|
||||
}
|
||||
.packages-section,
|
||||
.packages-section * {
|
||||
box-sizing: border-box;
|
||||
:root {
|
||||
--bg-dark: #0d0d1a;
|
||||
--bg-card: #1a1a2e;
|
||||
--accent-teal: #10b981;
|
||||
--text-white: #ffffff;
|
||||
--text-lightgray: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--font-display: "Playfair Display", serif;
|
||||
--font-body: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.packages-section {
|
||||
width: min(1180px, calc(100% - 3rem));
|
||||
margin: auto;
|
||||
padding-block: 5rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.packages-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
||||
gap: 3rem;
|
||||
align-items: end;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.packages-eyebrow,
|
||||
.package-type {
|
||||
color: #53d5cd;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.packages-header h1,
|
||||
.detail-heading h1 {
|
||||
margin: 0.75rem 0 1rem;
|
||||
font-size: clamp(2rem, 4.5vw, 3.75rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.packages-intro,
|
||||
.package-desc,
|
||||
.detail-text,
|
||||
.detail-list,
|
||||
.price-note,
|
||||
.booking-notice {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.packages-intro {
|
||||
margin: 0;
|
||||
max-width: 40rem;
|
||||
background-color: var(--bg-dark);
|
||||
padding: 4rem 2rem;
|
||||
font-family: var(--font-body);
|
||||
color: var(--text-lightgray);
|
||||
}
|
||||
|
||||
.packages-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.package-card,
|
||||
.package-checkout {
|
||||
min-width: 0;
|
||||
padding: 1.75rem;
|
||||
border: 1px solid #f8fafc1f;
|
||||
border-radius: 1.4rem;
|
||||
background: #ffffff0b;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
background-color: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.package-type-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.package-type {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.package-highlight {
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.65rem;
|
||||
background: #53d5cd14;
|
||||
color: #75e2dc;
|
||||
border: 1px solid #53d5cd33;
|
||||
font-size: 0.65rem;
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
color: var(--accent-teal);
|
||||
font-size: 0.7rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.package-title {
|
||||
margin: 0 0 1rem;
|
||||
color: #fff;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.025em;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.75rem;
|
||||
color: var(--text-white);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.package-desc {
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
.package-details-box {
|
||||
padding-block: 1.5rem;
|
||||
border-top: 1px solid #f8fafc1f;
|
||||
flex: 1;
|
||||
}
|
||||
.detail-item + .detail-item {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
.detail-title {
|
||||
margin: 0 0 0.5rem;
|
||||
color: #f8fafc;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.detail-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.package-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
padding: 0.8rem 1.1rem;
|
||||
border: 1px solid #94a3b840;
|
||||
border-radius: 999px;
|
||||
background: #ffffff06;
|
||||
color: #f8fafc;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.package-btn:hover {
|
||||
border-color: #53d5cd;
|
||||
background: #53d5cd14;
|
||||
}
|
||||
.package-btn.primary-cta {
|
||||
background: #53d5cd;
|
||||
border-color: #53d5cd;
|
||||
color: #06130f;
|
||||
}
|
||||
.package-btn.primary-cta:hover {
|
||||
background: #75e2dc;
|
||||
}
|
||||
.package-btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: wait;
|
||||
}
|
||||
.packages-section :focus-visible {
|
||||
outline: 3px solid #53d5cd;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
.packages-back {
|
||||
display: inline-block;
|
||||
color: var(--text-lightgray);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 2rem;
|
||||
padding-block: 0.5rem;
|
||||
color: #75e2dc;
|
||||
text-decoration: none;
|
||||
}
|
||||
.detail-heading {
|
||||
max-width: 52rem;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.package-details-box {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-grow: 1; /* Schiebt den Button immer ganz nach unten */
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.detail-content > section + section {
|
||||
margin-top: 2.5rem;
|
||||
|
||||
.detail-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.detail-content h2,
|
||||
.package-checkout h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.detail-list {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.detail-list li {
|
||||
margin-block: 0.65rem;
|
||||
}
|
||||
.detail-list li::marker {
|
||||
color: #53d5cd;
|
||||
}
|
||||
.process-step {
|
||||
margin-top: 1rem;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid #f8fafc1f;
|
||||
border-radius: 1rem;
|
||||
background: #ffffff06;
|
||||
}
|
||||
.process-step strong {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.process-step p {
|
||||
margin: 0;
|
||||
}
|
||||
.price-box {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.price-amount {
|
||||
display: block;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
|
||||
.detail-title {
|
||||
color: var(--text-white);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
color: #75e2dc;
|
||||
}
|
||||
.price-note,
|
||||
.booking-notice {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.detail-box {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.detail-box label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.variant-select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 3rem;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid #94a3b866;
|
||||
border-radius: 0.75rem;
|
||||
color: #f8fafc;
|
||||
background: #0d0d1a;
|
||||
font: inherit;
|
||||
|
||||
.detail-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Die Detailseite zeigt ihre eigene Übersicht; Booking liefert den Dialog. */
|
||||
.packages-section #booking-root > .booking > h2,
|
||||
.packages-section #booking-root .booking__package,
|
||||
.packages-section #booking-root .booking__payment,
|
||||
.packages-section #booking-root .booking__open {
|
||||
display: none;
|
||||
|
||||
.package-btn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: var(--text-white);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.packages-section .booking__dialog {
|
||||
background: #0d0d1a;
|
||||
color: #f8fafc;
|
||||
border-color: #94a3b840;
|
||||
}
|
||||
.packages-section .booking__dialog .booking__button:not(.booking__cancel) {
|
||||
background: #53d5cd;
|
||||
border-color: #53d5cd;
|
||||
color: #06130f;
|
||||
}
|
||||
.packages-section .booking__dialog :focus-visible {
|
||||
outline-color: #53d5cd;
|
||||
}
|
||||
@media (max-width: 60rem) {
|
||||
.packages-container {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
||||
}
|
||||
.packages-header,
|
||||
.detail-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 30rem) {
|
||||
.packages-section {
|
||||
width: calc(100% - 2rem);
|
||||
padding-block: 2.5rem;
|
||||
}
|
||||
.package-card,
|
||||
.package-checkout {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.package-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-color: var(--accent-teal);
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -333,16 +333,16 @@
|
|||
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
||||
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
||||
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
||||
--color-green-100: #e6fbf9;
|
||||
--color-green-200: #cef7f4;
|
||||
--color-green-300: #a5eee9;
|
||||
--color-green-400: #78e2dc;
|
||||
--color-green-500: #53d5cd;
|
||||
--color-green-600: #36b8b1;
|
||||
--color-green-700: #298f8b;
|
||||
--color-green-800: #1e706d;
|
||||
--color-emerald-100: #e6fbf9;
|
||||
--color-emerald-400: #53d5cd;
|
||||
--color-green-100: oklch(96.2% 0.044 156.743);
|
||||
--color-green-200: oklch(92.5% 0.084 155.995);
|
||||
--color-green-300: oklch(87.1% 0.15 154.449);
|
||||
--color-green-400: oklch(79.2% 0.209 151.711);
|
||||
--color-green-500: oklch(72.3% 0.219 149.579);
|
||||
--color-green-600: oklch(62.7% 0.194 149.214);
|
||||
--color-green-700: oklch(52.7% 0.154 150.069);
|
||||
--color-green-800: oklch(44.8% 0.119 151.328);
|
||||
--color-emerald-100: oklch(95% 0.052 163.051);
|
||||
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
||||
--color-teal-500: oklch(70.4% 0.14 182.503);
|
||||
--color-teal-600: oklch(60% 0.118 184.704);
|
||||
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
||||
|
|
@ -2483,7 +2483,7 @@
|
|||
}
|
||||
}
|
||||
.border-emerald-400\/20 {
|
||||
border-color: #53d5cd33;
|
||||
border-color: #00d29433;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.border-emerald-400\/20 {
|
||||
|
|
@ -2495,7 +2495,7 @@
|
|||
}
|
||||
}
|
||||
.border-emerald-400\/30 {
|
||||
border-color: #53d5cd4d;
|
||||
border-color: #00d2944d;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.border-emerald-400\/30 {
|
||||
|
|
@ -2540,7 +2540,7 @@
|
|||
border-color: var(--color-green-500);
|
||||
}
|
||||
.border-green-500\/20 {
|
||||
border-color: #53d5cd33;
|
||||
border-color: #00c75833;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.border-green-500\/20 {
|
||||
|
|
@ -2552,7 +2552,7 @@
|
|||
}
|
||||
}
|
||||
.border-green-500\/30 {
|
||||
border-color: #53d5cd4d;
|
||||
border-color: #00c7584d;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.border-green-500\/30 {
|
||||
|
|
@ -3109,7 +3109,7 @@
|
|||
}
|
||||
}
|
||||
.bg-emerald-400\/10 {
|
||||
background-color: #53d5cd1a;
|
||||
background-color: #00d2941a;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.bg-emerald-400\/10 {
|
||||
|
|
@ -3164,7 +3164,7 @@
|
|||
background-color: var(--color-green-100);
|
||||
}
|
||||
.bg-green-500\/10 {
|
||||
background-color: #53d5cd1a;
|
||||
background-color: #00c7581a;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.bg-green-500\/10 {
|
||||
|
|
@ -3176,7 +3176,7 @@
|
|||
}
|
||||
}
|
||||
.bg-green-500\/20 {
|
||||
background-color: #53d5cd33;
|
||||
background-color: #00c75833;
|
||||
}
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
.bg-green-500\/20 {
|
||||
|
|
@ -8681,8 +8681,8 @@
|
|||
--ink-strong: oklch(20% 0.03 220);
|
||||
--surface-elevated: oklch(18% 0.026 221);
|
||||
--surface-soft: oklch(23% 0.028 219);
|
||||
--accent-strong: #53d5cd;
|
||||
--accent-muted: #36b8b1;
|
||||
--accent-strong: oklch(70% 0.12 205);
|
||||
--accent-muted: oklch(58% 0.09 205);
|
||||
--accent-warm: oklch(84% 0.16 87);
|
||||
--background: oklch(13% 0.022 223);
|
||||
--foreground: oklch(96% 0.008 210);
|
||||
|
|
@ -8690,7 +8690,7 @@
|
|||
--card-foreground: oklch(95% 0.008 210);
|
||||
--popover: oklch(17% 0.024 221);
|
||||
--popover-foreground: oklch(95% 0.008 210);
|
||||
--primary: #53d5cd;
|
||||
--primary: oklch(70% 0.12 205);
|
||||
--primary-foreground: oklch(18% 0.02 220);
|
||||
--secondary: oklch(24% 0.026 220);
|
||||
--secondary-foreground: oklch(90% 0.01 210);
|
||||
|
|
@ -8710,7 +8710,7 @@
|
|||
--chart-5: oklch(63% 0.09 177);
|
||||
--sidebar: oklch(15% 0.02 221);
|
||||
--sidebar-foreground: oklch(95% 0.008 210);
|
||||
--sidebar-primary: #53d5cd;
|
||||
--sidebar-primary: oklch(70% 0.12 205);
|
||||
--sidebar-primary-foreground: oklch(18% 0.02 220);
|
||||
--sidebar-accent: oklch(23% 0.026 219);
|
||||
--sidebar-accent-foreground: oklch(95% 0.008 210);
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
import test from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import { access, readFile } from "node:fs/promises";
|
||||
import { join } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import berater from "../shared/berater-daten.json" with { type: "json" };
|
||||
import { advisorDisplayName, findAdvisor } from "../shared/berater.js";
|
||||
|
||||
const projectRoot = fileURLToPath(new URL("../../", import.meta.url));
|
||||
|
||||
test("Beraterdaten haben eindeutige IDs und vollständige Profilfelder", () => {
|
||||
assert.ok(berater.length >= 2);
|
||||
assert.equal(new Set(berater.map(({ id }) => id)).size, berater.length);
|
||||
|
||||
for (const person of berater) {
|
||||
assert.ok(person.id.trim());
|
||||
assert.ok(person.name.trim());
|
||||
assert.match(person.email, /^[^@\s]+@tri-hub\.de$/);
|
||||
assert.ok(person.biographie.trim());
|
||||
assert.ok(Array.isArray(person.qualifikationen));
|
||||
assert.ok(Array.isArray(person.schwerpunkte));
|
||||
assert.ok("bildquelle" in person);
|
||||
}
|
||||
});
|
||||
|
||||
test("Berater lassen sich per ID finden; unbekannte IDs liefern undefined", () => {
|
||||
assert.equal(findAdvisor("relindis-agethen")?.spitzname, "Lilli");
|
||||
assert.equal(findAdvisor("maren-hoffmann")?.vorname, "Maren");
|
||||
assert.equal(findAdvisor("nicht-vorhanden"), undefined);
|
||||
assert.equal(findAdvisor(null), undefined);
|
||||
});
|
||||
|
||||
test("Kontaktname bevorzugt Spitzname und fällt auf den Vornamen zurück", () => {
|
||||
assert.equal(
|
||||
advisorDisplayName({ spitzname: " Lilli ", vorname: "Relindis" }),
|
||||
"Lilli",
|
||||
);
|
||||
assert.equal(
|
||||
advisorDisplayName({ spitzname: "", vorname: "Maren" }),
|
||||
"Maren",
|
||||
);
|
||||
assert.equal(
|
||||
advisorDisplayName({ spitzname: null, vorname: "Maren" }),
|
||||
"Maren",
|
||||
);
|
||||
assert.equal(advisorDisplayName({ spitzname: " ", vorname: " " }), "");
|
||||
});
|
||||
|
||||
test("jedes Profil hat Porträt und Aktionsbild, deren Dateien vorhanden sind", async () => {
|
||||
for (const person of berater) {
|
||||
assert.equal(
|
||||
person.bilder?.length,
|
||||
2,
|
||||
`${person.id} muss zwei Bilder haben`,
|
||||
);
|
||||
assert.deepEqual(
|
||||
person.bilder.map(({ typ }) => typ),
|
||||
["Porträt", "Aktionsbild"],
|
||||
);
|
||||
|
||||
for (const { quelle } of person.bilder) {
|
||||
assert.match(quelle, /^\/images\//);
|
||||
await access(join(projectRoot, "public", quelle.slice(1)));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("Profilseite ist separat verlinkt und die Landingpage rendert keine Beraterkarten", async () => {
|
||||
const [page, landingPage, navigation] = await Promise.all([
|
||||
readFile(join(projectRoot, "berater.html"), "utf8"),
|
||||
readFile(join(projectRoot, "index.html"), "utf8"),
|
||||
readFile(
|
||||
join(projectRoot, "src/components/navigationsbar/navigation.html"),
|
||||
"utf8",
|
||||
),
|
||||
]);
|
||||
|
||||
assert.match(page, /id="advisor-profiles"/);
|
||||
assert.match(page, /src="\/src\/features\/berater\/berater-entry\.js"/);
|
||||
assert.match(navigation, /href="\/berater\.html"[^>]*>Beraterprofil/);
|
||||
assert.doesNotMatch(landingPage, /id="advisor-profiles"/);
|
||||
assert.doesNotMatch(landingPage, /berater-entry\.js/);
|
||||
});
|
||||
|
|
@ -619,44 +619,3 @@ test("Swagger-Kundendaten und Zustimmung werden validiert und dauerhaft gespeich
|
|||
409,
|
||||
);
|
||||
});
|
||||
|
||||
test("Telefonnummern werden in beiden Anfrageformaten geprüft", async (t) => {
|
||||
const { post, sent } = await setup(t);
|
||||
for (const phone of [
|
||||
"123",
|
||||
"00000000000",
|
||||
"abc",
|
||||
"+999 123456789",
|
||||
"0170 test 1234567",
|
||||
]) {
|
||||
for (const data of [
|
||||
{ ...input, phone },
|
||||
{
|
||||
packageId: input.packageId,
|
||||
acceptedTerms: true,
|
||||
customer: {
|
||||
firstName: "Test",
|
||||
lastName: "Person",
|
||||
email: input.email,
|
||||
phone,
|
||||
},
|
||||
},
|
||||
]) {
|
||||
const result = await post(data);
|
||||
assert.equal(result.status, 400, phone);
|
||||
assert.ok(result.body.error.fields.phone);
|
||||
}
|
||||
}
|
||||
assert.equal(sent.length, 0);
|
||||
for (const phone of [
|
||||
"",
|
||||
"0170 1234567",
|
||||
"+49 170 1234567",
|
||||
"0049 170 1234567",
|
||||
"030 123456",
|
||||
"+44 20 7946 0958",
|
||||
]) {
|
||||
const result = await post({ ...input, phone });
|
||||
assert.equal(result.status, 201, phone);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/berater.html");
|
||||
});
|
||||
|
||||
test("Navigation öffnet die separate Beraterseite und Profile werden geladen", async ({
|
||||
page,
|
||||
}) => {
|
||||
const profileLink = page.locator('.navbar__link[href="/berater.html"]');
|
||||
if (!(await profileLink.isVisible())) {
|
||||
await page.getByRole("button", { name: "Menü öffnen" }).click();
|
||||
}
|
||||
await expect(profileLink).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("heading", { name: /Ernährungsberater/ }),
|
||||
).toBeVisible();
|
||||
|
||||
const cards = page.locator(".advisor-card");
|
||||
await expect(cards).toHaveCount(2);
|
||||
await expect(cards.nth(0)).toContainText("Relindis Agethen (Lilli)");
|
||||
await expect(cards.nth(0)).toContainText("Kurzbiografie");
|
||||
await expect(cards.nth(0)).toContainText("Qualifikationen");
|
||||
await expect(cards.nth(0)).toContainText("Schwerpunkte");
|
||||
const roleBackground = await cards
|
||||
.nth(0)
|
||||
.locator(".advisor-role")
|
||||
.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||||
const detailsBackground = await cards
|
||||
.nth(0)
|
||||
.locator(".package-details-box")
|
||||
.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||||
expect(roleBackground).toBe("rgba(0, 0, 0, 0)");
|
||||
expect(detailsBackground).not.toBe("rgba(0, 0, 0, 0)");
|
||||
await expect(
|
||||
cards.nth(0).getByRole("button", { name: "Lilli kontaktieren" }),
|
||||
).toBeVisible();
|
||||
await expect(
|
||||
cards.nth(1).getByRole("button", { name: "Maren kontaktieren" }),
|
||||
).toBeVisible();
|
||||
|
||||
await cards
|
||||
.nth(0)
|
||||
.getByRole("button", { name: "Lilli kontaktieren" })
|
||||
.click();
|
||||
const contactDialog = page.getByRole("dialog");
|
||||
await expect(contactDialog).toBeVisible();
|
||||
await expect(contactDialog).toContainText("Lilli");
|
||||
});
|
||||
|
||||
test("Beraterbilder sind präsent und lassen sich mit Karussell-Pfeilen wechseln", async ({
|
||||
page,
|
||||
}) => {
|
||||
const lilli = page
|
||||
.locator(".advisor-card")
|
||||
.filter({ hasText: "Relindis Agethen" });
|
||||
const image = lilli.locator(
|
||||
'.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
|
||||
);
|
||||
const track = lilli.locator(".advisor-gallery__track");
|
||||
const previous = lilli.getByRole("button", {
|
||||
name: "Vorheriges Bild von Relindis Agethen (Lilli)",
|
||||
});
|
||||
const next = lilli.getByRole("button", {
|
||||
name: "Nächstes Bild von Relindis Agethen (Lilli)",
|
||||
});
|
||||
const portraitDot = lilli.getByRole("button", { name: "Bild 1: Porträt" });
|
||||
const actionDot = lilli.getByRole("button", {
|
||||
name: "Bild 2: Aktionsbild",
|
||||
});
|
||||
|
||||
await expect(image).toBeVisible();
|
||||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||||
const bounds = await image.boundingBox();
|
||||
expect(bounds.width).toBeGreaterThan(150);
|
||||
expect(bounds.height).toBeGreaterThan(150);
|
||||
await expect(portraitDot).toHaveAttribute("aria-current", "true");
|
||||
await expect(actionDot).toHaveAttribute("aria-current", "false");
|
||||
|
||||
await next.click();
|
||||
await expect(track).toHaveCSS("transform", /matrix\(1, 0, 0, 1, -/);
|
||||
await expect(image).toHaveAttribute("src", "/images/Lilli2.jpeg");
|
||||
await expect(image).toHaveAttribute(
|
||||
"alt",
|
||||
"Relindis Agethen (Lilli) – Aktionsbild",
|
||||
);
|
||||
await expect(actionDot).toHaveAttribute("aria-current", "true");
|
||||
await expect(portraitDot).toHaveAttribute("aria-current", "false");
|
||||
|
||||
await previous.click();
|
||||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||||
await expect(portraitDot).toHaveAttribute("aria-current", "true");
|
||||
|
||||
await portraitDot.click();
|
||||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||||
});
|
||||
|
||||
test("Maren hat ebenfalls ein umschaltbares Porträt- und Aktionsbild", async ({
|
||||
page,
|
||||
}) => {
|
||||
const maren = page
|
||||
.locator(".advisor-card")
|
||||
.filter({ hasText: "Maren Hoffmann" });
|
||||
const image = maren.locator(
|
||||
'.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
|
||||
);
|
||||
|
||||
await expect(image).toHaveAttribute("src", "/images/Maren1.jpeg");
|
||||
await maren
|
||||
.getByRole("button", { name: "Nächstes Bild von Maren Hoffmann" })
|
||||
.click();
|
||||
await expect(image).toHaveAttribute("src", "/images/Maren2.jpeg");
|
||||
});
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
import { test, expect } from "@playwright/test";
|
||||
import { randomUUID } from "node:crypto";
|
||||
import { contactBookingUrl } from "../../shared/contact.js";
|
||||
|
||||
async function open(page) {
|
||||
await page.goto("/contact-test.html?berater-id=maren-hoffmann");
|
||||
await page
|
||||
.getByRole("button", { name: "Berater kontaktieren", exact: true })
|
||||
.click();
|
||||
}
|
||||
|
||||
test("Popup prüft E-Mail beim Absenden und leitet nur bekannte Kunden weiter", async ({
|
||||
page,
|
||||
request,
|
||||
}) => {
|
||||
const email = `kontakt-${randomUUID()}@example.test`;
|
||||
const booking = await request.post("/api/bookings", {
|
||||
headers: { "Idempotency-Key": randomUUID() },
|
||||
data: { packageId: "ernaehrung-starter", name: "Testkunde", email },
|
||||
});
|
||||
expect(booking.ok()).toBeTruthy();
|
||||
await open(page);
|
||||
await expect(page.getByRole("dialog")).toContainText("Maren");
|
||||
const submit = page.getByRole("button", { name: "Anfrage senden" });
|
||||
await expect(
|
||||
page.getByRole("button", { name: "E-Mail prüfen" }),
|
||||
).toHaveCount(0);
|
||||
await expect(submit).toBeEnabled();
|
||||
await page
|
||||
.getByLabel("Deine Buchungs-E-Mail")
|
||||
.fill("unbekannt@example.test");
|
||||
await page.getByLabel("Grund für den Kontakt").selectOption("nutrition");
|
||||
await page.getByRole("checkbox").check();
|
||||
await submit.click();
|
||||
await expect(page.getByRole("status")).toContainText("keine Buchung");
|
||||
await expect(page.getByRole("dialog")).toBeVisible();
|
||||
await page.getByLabel("Deine Buchungs-E-Mail").fill(email);
|
||||
await page.route("https://bookings.cloud.microsoft/**", (route) =>
|
||||
route.fulfill({ body: "Microsoft Bookings (Test)" }),
|
||||
);
|
||||
const sentRequest = page.waitForRequest((request) =>
|
||||
request.url().endsWith("/api/contact"),
|
||||
);
|
||||
await submit.click();
|
||||
expect((await sentRequest).postDataJSON().advisorId).toBe("maren-hoffmann");
|
||||
await expect(page).toHaveURL(contactBookingUrl);
|
||||
});
|
||||
|
||||
test("Mobiles Popup: Fokus, Escape, Rückkehr zum Auslöser und keine Überbreite", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await open(page);
|
||||
await expect(page.getByLabel("Deine Buchungs-E-Mail")).toBeFocused();
|
||||
const box = await page.getByRole("dialog").boundingBox();
|
||||
expect(box.x).toBeGreaterThanOrEqual(0);
|
||||
expect(box.x + box.width).toBeLessThanOrEqual(375);
|
||||
await page.keyboard.press("Shift+Tab");
|
||||
await expect(
|
||||
page.getByRole("button", { name: "Kontaktfenster schließen" }),
|
||||
).toBeFocused();
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(page.getByRole("dialog")).toHaveCount(0);
|
||||
await expect(
|
||||
page.getByRole("button", { name: "Berater kontaktieren", exact: true }),
|
||||
).toBeFocused();
|
||||
});
|
||||
|
||||
test("Versandfehler zeigt Meldung und bleibt im Popup", async ({ page }) => {
|
||||
await page.route("**/api/contact", (route) =>
|
||||
route.fulfill({
|
||||
status: 502,
|
||||
json: { error: { message: "Mailpit nicht erreichbar." } },
|
||||
}),
|
||||
);
|
||||
await open(page);
|
||||
await page.getByLabel("Deine Buchungs-E-Mail").fill("kunde@example.test");
|
||||
await page.getByLabel("Grund für den Kontakt").selectOption("package");
|
||||
await page.getByRole("checkbox").check();
|
||||
await page.getByRole("button", { name: "Anfrage senden" }).click();
|
||||
await expect(page.getByRole("status")).toContainText(
|
||||
"Mailpit nicht erreichbar",
|
||||
);
|
||||
await expect(page.getByRole("dialog")).toBeVisible();
|
||||
});
|
||||
|
||||
test("Unbekannte Berater-ID sperrt das Absenden", async ({ page }) => {
|
||||
await page.goto("/contact-test.html?berater-id=unbekannt");
|
||||
await page
|
||||
.getByRole("button", { name: "Berater kontaktieren", exact: true })
|
||||
.click();
|
||||
await expect(page.getByRole("dialog")).toContainText(
|
||||
"Berater-ID fehlt oder ist unbekannt",
|
||||
);
|
||||
await expect(
|
||||
page.getByRole("button", { name: "Anfrage senden" }),
|
||||
).toBeDisabled();
|
||||
});
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
import test from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { createApp } from "../server/index.js";
|
||||
import { createContactFormEmailService } from "../server/services/contact-form-email.js";
|
||||
import { createContactFormStorage } from "../server/services/contact-form-storage.js";
|
||||
|
||||
const validInput = {
|
||||
name: "Test Person",
|
||||
email: "person@example.test",
|
||||
subject: "Eine Frage",
|
||||
message: "Das ist eine ausreichend lange Nachricht.",
|
||||
};
|
||||
|
||||
// Startet die API mit temporärer Kontakt-CSV und einem ersetzbaren Mailversand.
|
||||
async function fixture(t, options = {}) {
|
||||
const directory = await mkdtemp(join(tmpdir(), "trihub-contact-form-"));
|
||||
const storage =
|
||||
options.storage ??
|
||||
createContactFormStorage(join(directory, "contact-requests.csv"));
|
||||
const sent = [];
|
||||
const app = createApp({
|
||||
sendConfirmation: async () => {},
|
||||
sendContact: async () => {},
|
||||
contactFormStorage: storage,
|
||||
sendContactForm: async (data) => sent.push(data),
|
||||
...options,
|
||||
});
|
||||
await new Promise((resolve) => app.listen(0, "127.0.0.1", resolve));
|
||||
t.after(async () => {
|
||||
app.closeAllConnections();
|
||||
await new Promise((resolve) => app.close(resolve));
|
||||
await rm(directory, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
const base = `http://127.0.0.1:${app.address().port}`;
|
||||
async function post(input = validInput, headers = {}) {
|
||||
const response = await fetch(`${base}/api/nutrition-contact`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", ...headers },
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
return { status: response.status, body: await response.json() };
|
||||
}
|
||||
return { app, base, post, sent, storage, directory };
|
||||
}
|
||||
|
||||
// Prüft den erfolgreichen Ablauf von HTTP-Anfrage über CSV bis zur Mail-Abhängigkeit.
|
||||
test("gültige Anfrage wird gespeichert und an den Mailversand übergeben", async (t) => {
|
||||
const f = await fixture(t);
|
||||
const result = await f.post();
|
||||
|
||||
assert.equal(result.status, 201);
|
||||
assert.deepEqual(result.body, { saved: true, emailStatus: "accepted" });
|
||||
assert.equal(f.sent.length, 1);
|
||||
assert.deepEqual(
|
||||
{
|
||||
name: f.sent[0].name,
|
||||
email: f.sent[0].email,
|
||||
subject: f.sent[0].subject,
|
||||
message: f.sent[0].message,
|
||||
},
|
||||
validInput,
|
||||
);
|
||||
assert.ok(!Number.isNaN(Date.parse(f.sent[0].createdAt)));
|
||||
assert.deepEqual(await f.storage.readAll(), f.sent);
|
||||
});
|
||||
|
||||
// Stellt sicher, dass fehlerhafte Pflichtfelder nicht gespeichert oder versendet werden.
|
||||
test("Pflichtfelder, E-Mail, Längen und Mindestlänge werden validiert", async (t) => {
|
||||
const f = await fixture(t);
|
||||
const invalidInputs = [
|
||||
{ ...validInput, name: " " },
|
||||
{ ...validInput, name: "Test\nBcc: fremd" },
|
||||
{ ...validInput, name: "x".repeat(121) },
|
||||
{ ...validInput, email: "keine-adresse" },
|
||||
{ ...validInput, email: "x".repeat(255) },
|
||||
{ ...validInput, subject: "x".repeat(161) },
|
||||
{ ...validInput, message: "zu kurz" },
|
||||
{ ...validInput, message: "x".repeat(5001) },
|
||||
{ ...validInput, message: "Nachricht\u0000ungültig" },
|
||||
{ ...validInput, message: undefined },
|
||||
null,
|
||||
[],
|
||||
];
|
||||
|
||||
for (const input of invalidInputs) {
|
||||
const result = await f.post(input);
|
||||
assert.equal(result.status, 400, JSON.stringify(input));
|
||||
}
|
||||
assert.deepEqual(await f.storage.readAll(), []);
|
||||
assert.equal(f.sent.length, 0);
|
||||
});
|
||||
|
||||
// Prüft die Begrenzungen und JSON-Fehlerbehandlung des HTTP-Endpunkts.
|
||||
test("HTTP-Route lehnt falsche Methode, Inhaltstyp, JSON und große Bodies ab", async (t) => {
|
||||
const f = await fixture(t);
|
||||
assert.equal((await fetch(`${f.base}/api/nutrition-contact`)).status, 405);
|
||||
|
||||
const wrongType = await fetch(`${f.base}/api/nutrition-contact`, {
|
||||
method: "POST",
|
||||
body: "{}",
|
||||
});
|
||||
assert.equal(wrongType.status, 415);
|
||||
|
||||
const invalidJson = await fetch(`${f.base}/api/nutrition-contact`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: "{",
|
||||
});
|
||||
assert.equal(invalidJson.status, 400);
|
||||
|
||||
const tooLarge = await fetch(`${f.base}/api/nutrition-contact`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: "x".repeat(9000) }),
|
||||
});
|
||||
assert.equal(tooLarge.status, 413);
|
||||
assert.deepEqual(await f.storage.readAll(), []);
|
||||
});
|
||||
|
||||
// Ein Speicherfehler muss verhindern, dass anschließend E-Mails abgeschickt werden.
|
||||
test("Speicherfehler melden 503 und starten keinen Mailversand", async (t) => {
|
||||
let sendCount = 0;
|
||||
const f = await fixture(t, {
|
||||
storage: {
|
||||
async append() {
|
||||
throw new Error("Datenträger nicht verfügbar");
|
||||
},
|
||||
},
|
||||
sendContactForm: async () => sendCount++,
|
||||
});
|
||||
const result = await f.post();
|
||||
|
||||
assert.equal(result.status, 503);
|
||||
assert.equal(result.body.error.code, "CONTACT_NOT_SAVED");
|
||||
assert.equal(sendCount, 0);
|
||||
});
|
||||
|
||||
// Nach einem SMTP-Fehler bleibt die bereits gespeicherte Anfrage erhalten.
|
||||
test("Mailfehler melden 502, erhalten aber die gespeicherte Anfrage", async (t) => {
|
||||
const f = await fixture(t, {
|
||||
sendContactForm: async () => {
|
||||
throw new Error("Mailpit nicht erreichbar");
|
||||
},
|
||||
});
|
||||
const result = await f.post();
|
||||
|
||||
assert.equal(result.status, 502);
|
||||
assert.equal(result.body.error.code, "CONTACT_EMAIL_FAILED");
|
||||
assert.equal(result.body.error.message.includes("gespeichert"), true);
|
||||
assert.equal((await f.storage.readAll()).length, 1);
|
||||
});
|
||||
|
||||
// Prüft CSV-Rundlauf, Formelschutz und gleichzeitiges Anhängen mehrerer Anfragen.
|
||||
test("CSV erhält Sonderzeichen und verliert bei parallelen Anhängen keine Zeilen", async (t) => {
|
||||
const directory = await mkdtemp(join(tmpdir(), "trihub-contact-csv-"));
|
||||
const file = join(directory, "contact-requests.csv");
|
||||
const storage = createContactFormStorage(file);
|
||||
t.after(() => rm(directory, { recursive: true, force: true }));
|
||||
const names = [
|
||||
'=HYPERLINK("evil")',
|
||||
'Test, "Person"',
|
||||
"Zeile 1\nZeile 2",
|
||||
"'Original",
|
||||
...Array.from({ length: 8 }, (_, index) => `Person ${index}`),
|
||||
];
|
||||
|
||||
await Promise.all(
|
||||
names.map((name, index) =>
|
||||
storage.append({
|
||||
createdAt: `2026-01-01T00:00:0${index}.000Z`,
|
||||
name,
|
||||
email: `person${index}@example.test`,
|
||||
subject: "CSV Test",
|
||||
message: "Eine Nachricht mit mehr als zehn Zeichen.",
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const records = await storage.readAll();
|
||||
assert.equal(records.length, names.length);
|
||||
assert.deepEqual(
|
||||
records.map((record) => record.name).sort(),
|
||||
[...names].sort(),
|
||||
);
|
||||
const csv = await readFile(file, "utf8");
|
||||
assert.match(csv, /'=HYPERLINK/);
|
||||
assert.match(csv, /"Test, ""Person"""/);
|
||||
});
|
||||
|
||||
// Beschädigte CSV-Kopfzeilen sollen fehlschlagen und unangetastet bleiben.
|
||||
test("CSV mit unerwartetem Kopf wird nicht überschrieben", async (t) => {
|
||||
const directory = await mkdtemp(
|
||||
join(tmpdir(), "trihub-contact-csv-invalid-"),
|
||||
);
|
||||
const file = join(directory, "contact-requests.csv");
|
||||
const storage = createContactFormStorage(file);
|
||||
const corrupt = "wrong,header\n1,2\n";
|
||||
await writeFile(file, corrupt);
|
||||
t.after(() => rm(directory, { recursive: true, force: true }));
|
||||
|
||||
await assert.rejects(
|
||||
storage.append({ ...validInput, createdAt: "2026-01-01" }),
|
||||
);
|
||||
assert.equal(await readFile(file, "utf8"), corrupt);
|
||||
});
|
||||
|
||||
// Verifiziert die zwei Mailvorlagen und dass der Transport fest bei Mailpit bleibt.
|
||||
test("Mailservice verwendet Mailpit und sendet Bestätigung sowie Tri-Hub-Anfrage", async () => {
|
||||
const config = [];
|
||||
const messages = [];
|
||||
const sendContactForm = createContactFormEmailService(
|
||||
{},
|
||||
(transportConfig) => {
|
||||
config.push(transportConfig);
|
||||
return {
|
||||
async sendMail(message) {
|
||||
messages.push(message);
|
||||
return { accepted: [message.to] };
|
||||
},
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
await sendContactForm({
|
||||
...validInput,
|
||||
createdAt: "2026-01-01T00:00:00.000Z",
|
||||
});
|
||||
|
||||
assert.equal(config[0].host, "127.0.0.1");
|
||||
assert.equal(config[0].port, 1025);
|
||||
assert.deepEqual(
|
||||
messages.map((message) => message.to).sort(),
|
||||
[validInput.email, "ernaehrung@tri-hub.de"].sort(),
|
||||
);
|
||||
assert.ok(
|
||||
messages.every(
|
||||
(message) =>
|
||||
message.from === "Tri-Hub Ernährung <noreply@tri-hub.de>",
|
||||
),
|
||||
);
|
||||
assert.ok(
|
||||
messages.every((message) => message.text.includes(validInput.message)),
|
||||
);
|
||||
const request = messages.find(
|
||||
(message) => message.to === "ernaehrung@tri-hub.de",
|
||||
);
|
||||
assert.equal(request.replyTo, validInput.email);
|
||||
});
|
||||
|
||||
// SMTP-Ablehnung wird als Fehler sichtbar, statt fälschlich Erfolg zu melden.
|
||||
test("Mailservice meldet, wenn Mailpit einen Empfänger ablehnt", async () => {
|
||||
const sendContactForm = createContactFormEmailService({}, () => ({
|
||||
async sendMail(message) {
|
||||
return {
|
||||
accepted: message.to === validInput.email ? [message.to] : [],
|
||||
};
|
||||
},
|
||||
}));
|
||||
|
||||
await assert.rejects(
|
||||
sendContactForm(validInput),
|
||||
(error) =>
|
||||
error.status === 502 && error.code === "CONTACT_EMAIL_FAILED",
|
||||
);
|
||||
});
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
import test from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import { mkdtemp, rm } from "node:fs/promises";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { createApp } from "../server/index.js";
|
||||
import { createCsvStorage } from "../server/services/csv-storage.js";
|
||||
import { createContactEmailService } from "../server/services/contact-email.js";
|
||||
import { contactBookingUrl } from "../shared/contact.js";
|
||||
|
||||
async function fixture(t, options = {}) {
|
||||
const dir = await mkdtemp(join(tmpdir(), "trihub-contact-"));
|
||||
const storage = createCsvStorage(join(dir, "bookings.csv"));
|
||||
await storage.writeAll([
|
||||
{
|
||||
bookingId: "TH-000001",
|
||||
email: "kunde@example.test",
|
||||
name: "Testkunde",
|
||||
},
|
||||
]);
|
||||
const sent = [];
|
||||
const app = createApp({
|
||||
storage,
|
||||
sendConfirmation: async () => {},
|
||||
sendContact: async (data) => sent.push(data),
|
||||
...options,
|
||||
});
|
||||
await new Promise((resolve) => app.listen(0, "127.0.0.1", resolve));
|
||||
t.after(async () => {
|
||||
app.closeAllConnections();
|
||||
await new Promise((resolve) => app.close(resolve));
|
||||
await rm(dir, { recursive: true, force: true });
|
||||
});
|
||||
const base = `http://127.0.0.1:${app.address().port}`;
|
||||
const post = async (path, input) => {
|
||||
const response = await fetch(base + path, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
return { status: response.status, body: await response.json() };
|
||||
};
|
||||
return { post, sent, storage, base };
|
||||
}
|
||||
const input = {
|
||||
email: "kunde@example.test",
|
||||
advisorId: "relindis-agethen",
|
||||
reason: "coaching",
|
||||
simulationAccepted: true,
|
||||
};
|
||||
|
||||
test("CSV-Abgleich normalisiert E-Mail; Versand erhält Berater und festen Redirect", async (t) => {
|
||||
const f = await fixture(t);
|
||||
const before = await f.storage.readAll();
|
||||
const validation = await f.post("/api/contact/validate", {
|
||||
email: " KUNDE@example.test ",
|
||||
});
|
||||
assert.equal(validation.status, 200);
|
||||
assert.equal(validation.body.email, input.email);
|
||||
const result = await f.post("/api/contact", {
|
||||
...input,
|
||||
advisor: "Manipuliert",
|
||||
advisorEmail: "falsch@example.test",
|
||||
});
|
||||
assert.equal(result.status, 201);
|
||||
assert.equal(result.body.redirectUrl, contactBookingUrl);
|
||||
assert.equal(result.body.simulated, true);
|
||||
assert.equal(f.sent[0].advisor.email, "relindis.agethen@tri-hub.de");
|
||||
assert.equal(f.sent[0].advisor.vorname, "Relindis");
|
||||
const second = await f.post("/api/contact", {
|
||||
...input,
|
||||
advisorId: "maren-hoffmann",
|
||||
});
|
||||
assert.equal(second.status, 201);
|
||||
assert.equal(f.sent[1].advisor.email, "maren.hoffmann@tri-hub.de");
|
||||
assert.deepEqual(await f.storage.readAll(), before);
|
||||
});
|
||||
|
||||
test("Ungültige und unbekannte Kunden, manipulierte Berater, Gründe und fehlende Zustimmung senden nichts", async (t) => {
|
||||
const f = await fixture(t);
|
||||
for (const [data, status] of [
|
||||
[null, 400],
|
||||
[{ ...input, email: "bad" }, 400],
|
||||
[{ ...input, email: "unknown@example.test" }, 403],
|
||||
[{ ...input, advisorId: "unbekannt" }, 400],
|
||||
[{ ...input, advisorId: null }, 400],
|
||||
[{ ...input, reason: "__proto__" }, 400],
|
||||
[{ ...input, simulationAccepted: false }, 400],
|
||||
])
|
||||
assert.equal((await f.post("/api/contact", data)).status, status);
|
||||
assert.equal(f.sent.length, 0);
|
||||
});
|
||||
|
||||
test("Absenden prüft CSV erneut; Speicherfehler bleiben geschlossen", async (t) => {
|
||||
const f = await fixture(t);
|
||||
assert.equal((await f.post("/api/contact/validate", input)).status, 200);
|
||||
await f.storage.writeAll([]);
|
||||
assert.equal((await f.post("/api/contact", input)).status, 403);
|
||||
const broken = await fixture(t, {
|
||||
storage: {
|
||||
readAll() {
|
||||
throw new Error("unavailable");
|
||||
},
|
||||
},
|
||||
});
|
||||
assert.equal((await broken.post("/api/contact", input)).status, 503);
|
||||
assert.equal(broken.sent.length, 0);
|
||||
});
|
||||
|
||||
test("HTTP-Vertrag weist falsche Methode, ungültiges JSON und große Requests zurück", async (t) => {
|
||||
const f = await fixture(t);
|
||||
assert.equal((await fetch(f.base + "/api/contact")).status, 405);
|
||||
assert.equal(
|
||||
(await fetch(f.base + "/api/contact", { method: "POST", body: "x" }))
|
||||
.status,
|
||||
415,
|
||||
);
|
||||
assert.equal(
|
||||
(
|
||||
await fetch(f.base + "/api/contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: "{",
|
||||
})
|
||||
).status,
|
||||
400,
|
||||
);
|
||||
assert.equal(
|
||||
(await f.post("/api/contact", { email: "x".repeat(9000) })).status,
|
||||
413,
|
||||
);
|
||||
});
|
||||
|
||||
test("Zwei getrennte simulierte Bestätigungen; Teilfehler verhindern Erfolg", async (t) => {
|
||||
const messages = [];
|
||||
const sender = createContactEmailService((config) => {
|
||||
assert.equal(config.host, "127.0.0.1");
|
||||
assert.equal(config.port, 1025);
|
||||
return {
|
||||
async sendMail(message) {
|
||||
messages.push(message);
|
||||
return { accepted: [message.to] };
|
||||
},
|
||||
};
|
||||
});
|
||||
const f = await fixture(t, { sendContact: sender });
|
||||
assert.equal((await f.post("/api/contact", input)).status, 201);
|
||||
assert.deepEqual(
|
||||
messages.map((m) => m.to),
|
||||
[input.email, "relindis.agethen@tri-hub.de"],
|
||||
);
|
||||
for (const message of messages) {
|
||||
assert.match(message.text, /Simulation/);
|
||||
assert.match(message.text, /Persönliches Coaching/);
|
||||
}
|
||||
const failing = createContactEmailService(() => ({
|
||||
async sendMail(message) {
|
||||
return { accepted: message.to === input.email ? [message.to] : [] };
|
||||
},
|
||||
}));
|
||||
const failure = await fixture(t, { sendContact: failing });
|
||||
const result = await failure.post("/api/contact", input);
|
||||
assert.equal(result.status, 502);
|
||||
assert.equal(result.body.redirectUrl, undefined);
|
||||
});
|
||||
|
||||
test("Anzeigename bevorzugt Spitzname, sonst Vorname, ohne Nachnamen", async () => {
|
||||
const { advisorDisplayName } = await import("../shared/berater.js");
|
||||
assert.equal(
|
||||
advisorDisplayName({
|
||||
spitzname: " Lilli ",
|
||||
vorname: "Relindis",
|
||||
nachname: "Agethen",
|
||||
}),
|
||||
"Lilli",
|
||||
);
|
||||
assert.equal(
|
||||
advisorDisplayName({
|
||||
spitzname: " ",
|
||||
vorname: "Maren",
|
||||
nachname: "Hoffmann",
|
||||
}),
|
||||
"Maren",
|
||||
);
|
||||
assert.equal(
|
||||
advisorDisplayName({ vorname: "Maren", nachname: "Hoffmann" }),
|
||||
"Maren",
|
||||
);
|
||||
});
|
||||
|
|
@ -11,7 +11,6 @@ const server = createApp({
|
|||
catalog: packages,
|
||||
storage: createCsvStorage(join(directory, "bookings.csv")),
|
||||
sendConfirmation: async () => {},
|
||||
sendContact: async () => {},
|
||||
});
|
||||
server.listen(3000, "127.0.0.1");
|
||||
async function stop() {
|
||||
|
|
|
|||
|
|
@ -19,9 +19,6 @@ export default defineConfig({
|
|||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
contactTest: fileURLToPath(
|
||||
new URL("./contact-test.html", import.meta.url),
|
||||
),
|
||||
angebote: fileURLToPath(
|
||||
new URL("./angebotsuebersicht.html", import.meta.url),
|
||||
),
|
||||
|
|
@ -35,9 +32,6 @@ export default defineConfig({
|
|||
booking: fileURLToPath(
|
||||
new URL("./booking.html", import.meta.url),
|
||||
),
|
||||
berater: fileURLToPath(
|
||||
new URL("./berater.html", import.meta.url),
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue