qciganoandClaude Sonnet 5
aff961816b
Auf ausdrücklichen Wunsch: /verwaltung/ + /api/verwaltung/* verlangen jetzt ZUSÄTZLICH zum normalen 90-Tage-Seitenzugang einen zweiten, eigenen Code, den nur qciga und VanVan kennen — und der nach 24 Stunden automatisch abläuft (muss also einmal täglich neu eingegeben werden). Der Rest der Seite ist davon unberührt, nur die Bestellübersicht ist betroffen. Bewusst als eigenständiges System (eigenes Cookie vandiy_verwaltung_session, eigenes Geheimnis VERWALTUNG_SESSION_SECRET, eigener HMAC-Signaturcode statt geteiltem mit dem normalen Seitenzugang) — gleiches Trennungsprinzip wie bei den Kundenkonten: ein Leck bei einer Sitzungsart darf nie die andere gefährden. Neue Dateien: functions/_shared/verwaltung-auth.js (Session-Logik), public/verwaltung-code.html (Eingabemaske im selben Stil wie die Haupt-Zugangsseite). functions/_middleware.js prüft nach erfolgreicher Haupt-Sitzung zusätzlich diese zweite Sitzung für /verwaltung*-Pfade. Beide API-Routen (orders.js, orders/[id].js) prüfen die zweite Schranke zusätzlich eigenständig, nach demselben Verteidigungs-in-der-Tiefe-Prinzip wie die bestehende Haupt-Prüfung. Lokal vollständig durchgetestet (wrangler pages dev): kompletter Ablauf ohne jeden Zugang -> Haupt-Gate -> Redirect zum Tages-Code -> falscher Code abgelehnt -> richtiger Code setzt 24-Stunden-Cookie -> Seite und API danach erreichbar. Bestätigt: der Rest der Seite bleibt unberührt (kein Tages-Code nötig), UND dass VanVan mit nur dem Haupt-Zugang (ohne Tages-Code) ebenfalls noch ausgesperrt bleibt, wie gewünscht. Zwei neue Cloudflare-Secrets in Produktion gesetzt: VERWALTUNG_SESSION_SECRET (zufällig erzeugt) und VERWALTUNG_ACCESS_CODE (der eigentliche Tages-Code, an qciga und VanVan zu verteilen). Co-Authored-By: Claude Sonnet 5 <[email protected]>
Van's DIY & Bastelbedarf – Website (lokale Vorschau)
Hallo VanVan 🩵 Das hier ist der Code für deinen zukünftigen Onlineshop. Du musst nichts programmieren – diese Anleitung reicht, um die Seite auf deinem PC anzusehen.
Schnellstart (empfohlen)
- Doppelklick auf die Datei
Vorschau-Starten.batin diesem Ordner. - Es öffnet sich ein schwarzes Fenster, das kurz Dinge vorbereitet.
- Danach öffnet sich automatisch dein Browser mit der Vorschau.
- Zum Beenden: im schwarzen Fenster
Strg + Cdrücken, dann Fenster schließen.
Falls sich nichts öffnet: prüfe, ob im schwarzen Fenster ein Hinweis auf Node.js steht (siehe unten) und lies die Fehlermeldung genau durch.
Voraussetzung: Node.js
Diese Website braucht ein kostenloses Programm namens Node.js, damit sie auf deinem PC laufen kann (das ist wie ein kleiner "Motor" für moderne Webseiten).
- Prüfen, ob es schon installiert ist: das Start-Skript macht das automatisch.
- Falls nicht: Download unter https://nodejs.org → den Button mit "LTS" wählen →
installieren (einfach überall "Weiter" klicken) → danach
Vorschau-Starten.baterneut starten.
Manueller Start (für Filipe / falls das Skript mal nicht geht)
Im Ordner shop/ in einer Kommandozeile (z. B. Git Bash oder PowerShell):
npm install # nur beim allerersten Mal nötig
npm run build # baut die Seite (prüft, ob alles fehlerfrei ist)
npm run dev # startet die lokale Vorschau
Danach im Browser öffnen: http://localhost:4321
Was ist das hier gerade für ein Stand?
Phase 1 – Design & Struktur. Alle Seiten aus dem Pflichtenheft sind als echtes, klickbares Frontend vorhanden (Startseite, Shop, Kategorien, Produktseiten, Warenkorb, Checkout-Vorschau, rechtliche Seiten usw.). Der Warenkorb funktioniert bereits (im Browser gespeichert), es gibt aber noch keine echte Bestellabwicklung, keine echte Zahlung und noch kein Adminbereich – das folgt in Phase 2. Alle Produkte, Preise, Bilder und der "Über die Kreative"-Text sind aktuell Platzhalter und werden ersetzt, sobald du echte Fotos/Texte/Preise lieferst.
Projektstruktur (kurz)
shop/
├─ src/pages/ ← jede Datei hier ist eine Seite der Website
├─ src/data/ ← Produkte & Kategorien (hier später echte Daten eintragen)
├─ src/components/ ← wiederverwendbare Bausteine (z. B. Produktkarte)
├─ src/layouts/ ← gemeinsamer Rahmen (Header/Footer) aller Seiten
├─ src/styles/ ← Farben, Schriften, Design-Grundlagen
└─ public/ ← Logo, Icons, robots.txt
Mehr Hintergrund (Pflichtenheft-Zusammenfassung, Branding-Entscheidungen, Tech-Stack-Begründung) steht im Obsidian-Vault unter „Van Van – Homepage".