Fix: Backend-Bugs, fehlende Galerie, Watchtower statt Docker-Socket

- express.urlencoded() hinzugefuegt (Login war komplett kaputt) - Oeffentliche Galerie zeigt jetzt alle Bilder (statt leere Galerie) - loadGallery() Aufruf in main.js eingefuegt (fehlte komplett) - main.min.js neu gebaut mit gulp (Galerie-Code fehlte in minified Version) - Watchtower Container in docker-compose.yml (auto-updates alle 5 Min) - Docker-Socket und docker-cli aus Photography-Container entfernt - runs.json Muell-Datei geloescht - Brain.md und Feature-Request.md aktualisiert Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-12 17:22:49 +02:00
parent 15e74f42c2
commit a4f3cf738c
8 changed files with 139 additions and 81 deletions
--- a/Brain.md
+++ b/Brain.md
@@ -20,12 +20,15 @@ Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Ansprue
 | Komponente | Technologie |
 |---|---|
 | Static Site Generator | **Jekyll** (Ruby-basiert) |
+| Backend | **Node.js / Express** (Auth, API, Static Serving) |
+| Datenbank | **SQLite** (Nutzerverwaltung, Bildzuweisung) |
 | Templating | Liquid Templates |
 | Styling | SCSS -> kompiliertes CSS |
 | JS Libraries | jQuery, Poptrox (Lightbox), EXIF.js |
 | Build-Tool | Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen) |
-| Hosting | **UGREEN NAS (Docker)** via nginx |
-| Containerisierung | Docker Multi-Stage (Jekyll Build + nginx) |
+| Hosting | **UGREEN NAS (Docker)** via Node.js Express |
+| Containerisierung | Docker Multi-Stage (Jekyll Build + Node.js Backend) |
+| Auto-Update | **Watchtower** (prueft alle 5 Min auf neue Images) |
 | Fonts | FontAwesome, Google Fonts (Source Sans Pro) |
 | Paketmanager | npm (Node), Bundler (Ruby) |

@@ -37,9 +40,13 @@ Photography/
 ├── _layouts/
 │   └── default.html     # Basis-Layout (Head + Body + Scripts)
 ├── _includes/
-│   ├── header.html      # <head> Bereich: CSS, Fonts, Google Analytics
+│   ├── header.html      # <head> Bereich: CSS, Fonts
 │   └── footer.html      # Script-Einbindungen (jQuery, Poptrox, EXIF, Main)
-├── index.html           # Hauptseite: Header, Galerie-Grid, Footer/About
+├── index.html           # Hauptseite: Header, Galerie-Grid, Footer/About, Login-Panel
+├── admin.html           # Admin-Dashboard (Nutzerverwaltung, Bildzuweisung)
+├── backend/
+│   ├── server.js        # Express Backend (Auth, API, Static Files, Port 8090)
+│   └── database.js      # SQLite Datenbank-Setup (Users, User-Images)
 ├── assets/
 │   ├── css/             # Kompilierte CSS-Dateien (.min.css)
 │   ├── sass/            # SCSS Quelldateien
@@ -47,50 +54,82 @@ Photography/
 │   │   ├── components/  # Buttons, Forms, Icons, Panels, Poptrox
 │   │   ├── layout/      # Header, Footer, Main, Wrapper
 │   │   └── libs/        # Breakpoints, Mixins, Vars, Functions
-│   ├── js/              # JavaScript (jQuery, Poptrox, EXIF, Main)
+│   ├── js/              # JavaScript (jQuery, Poptrox, EXIF, Main, Admin)
 │   ├── fonts/           # FontAwesome Fonts
 │   └── webfonts/        # FA5 Webfonts
 ├── images/
 │   ├── fulls/           # Vollaufloesung Bilder
 │   └── thumbs/          # Thumbnails (512px)
 ├── gulpfile.mjs         # Build: SCSS->CSS, JS minify, Image resize
-├── package.json         # Node Dependencies
+├── package.json         # Node Dependencies (Express, SQLite, JWT, bcrypt)
 ├── Gemfile              # Ruby Dependencies (jekyll)
-└── CNAME                # Custom Domain Config
+├── Dockerfile           # Multi-Stage: Jekyll Build + Node.js Runtime
+├── docker-compose.yml   # Container + Watchtower
+├── entrypoint.sh        # Thumbnail-Generierung + Node.js Start
+└── nginx.conf           # (Legacy, nicht mehr aktiv - Express dient statische Dateien)
 ```

 ## Wie die Galerie funktioniert (Dynamisch)

 1. **Bilder hochladen**: Fotos in Nextcloud-Ordner `Websitebilder` ablegen
-2. **Volume-Mount**: Docker mountet den Nextcloud-Ordner als `/images/fulls/` (read-only)
+2. **Volume-Mount**: Docker mountet den Nextcloud-Ordner als `/app/public/images/fulls/` (read-only)
 3. **Thumbnails**: `entrypoint.sh` generiert automatisch 512px Thumbnails via ImageMagick
 4. **Thumbnail-Check**: Alle 60 Sekunden prueft der Container auf neue Bilder
-5. **nginx autoindex**: Liefert JSON-Liste aller Dateien in `/images/fulls/`
+5. **Express API**: `/images/fulls/` liefert JSON-Liste der Bilddateien
 6. **JavaScript (main.js)**: Fetcht die JSON-Liste und baut dynamisch `<article class="thumb">` Elemente
 7. **Poptrox-Lightbox**: Klick oeffnet Vollbild + EXIF-Daten (clientseitig via exif.js)
+8. **Download-Button**: In der Lightbox kann jedes Bild heruntergeladen werden
+
+### Zugriffslogik
+- **Nicht eingeloggt / Admin**: Alle Bilder sichtbar (oeffentliche Galerie)
+- **Eingeloggter Nutzer**: Nur zugewiesene Bilder sichtbar + Download

 ### Nextcloud-Integration
 - **Nextcloud-Pfad**: `/volume1/nextcloud/data/Tom/files/Websitebilder`
- **Mount im Container**: `/usr/share/nginx/html/images/fulls:ro`
+- **Mount im Container**: `/app/public/images/fulls:ro`
 - **Thumbnails-Volume**: Docker-Volume `thumbs` (persistent)
+- **Datenbank-Volume**: Docker-Volume `database` (persistent, SQLite)
 - **Workflow**: Bild in Nextcloud hochladen -> max. 60s warten -> Seite neu laden -> fertig

+## Login-System & Nutzerverwaltung
+
+### Architektur
+- **Backend**: Node.js/Express auf Port 8090
+- **Auth**: JWT-Token als httpOnly Cookie (7 Tage gueltig)
+- **Datenbank**: SQLite unter `/app/data/database.sqlite`
+- **Passwort-Hashing**: bcryptjs (10 Rounds)
+
+### Standard-Admin
+- **Username**: `admin`
+- **Passwort**: `admin123` (SOFORT AENDERN nach erstem Login!)
+- **Rolle**: admin
+
+### API-Endpunkte
+| Endpunkt | Methode | Beschreibung |
+|---|---|---|
+| `/api/auth/login` | POST | Login (username, password) |
+| `/api/auth/logout` | POST | Logout (Cookie loeschen) |
+| `/api/auth/me` | GET | Aktueller User |
+| `/api/admin/users` | GET/POST | Nutzer auflisten / erstellen |
+| `/api/admin/users/:id` | DELETE | Nutzer loeschen |
+| `/api/admin/assign` | GET/POST | Bildzuweisungen anzeigen / setzen |
+| `/images/fulls/` | GET | Bilderliste (gefiltert nach User-Rolle) |
+
 ## Wichtige Konfiguration (_config.yml)

- `baseurl`: URL der Website (leer fuer lokal)
+- `baseurl`: URL der Website
 - `title`, `subtitle`, `author`: Seitentitel und Autor
 - `header.title/subtitle`: Header-Anzeige
- `footer.name/bio/github`: Footer-Infos
+- `footer.name/bio`: Footer-Infos
 - `social_urls`: Links zu Social Media
 - `exif`: Welche EXIF-Tags angezeigt werden (Model, FNumber, ExposureTime, ISO)
- `google_analytics`: Tracking-ID

 ## Build-Befehle

 | Befehl | Aktion |
 |---|---|
 | `bundle install` | Ruby Dependencies installieren |
-| `bundle exec jekyll serve` | Lokaler Dev-Server |
+| `bundle exec jekyll serve` | Lokaler Dev-Server (nur Frontend) |
 | `npm install` | Node Dependencies installieren |
 | `gulp build` | SCSS kompilieren + JS minifizieren |
 | `gulp resize` | Bilder zu fulls (1024px) + thumbs (512px) |
@@ -99,45 +138,51 @@ Photography/
 ## Docker / NAS Hosting

 - **NAS**: UGREEN mit UGOS PRO
- **Port**: 8090 (Port 80 ist belegt)
- **Zugriff**: `http://NAS-IP:8090` -> spaeter `https://tom.mischlabs.de`
- **Domain**: tom.mischlabs.de (Reverse Proxy auf NAS einrichten)
+- **Port**: 8090 (intern und extern)
+- **Domain**: tom.mischlabs.de (via Cloudflare Tunnel)

 ### Docker-Dateien
- `Dockerfile` - Multi-Stage: Ruby/Jekyll baut Site -> nginx serviert statische Dateien
- `docker-compose.yml` - Container-Definition, Port 8090:80, Nextcloud-Volume, auto-restart
- `entrypoint.sh` - Thumbnail-Generierung + periodischer Check (alle 60s)
- `nginx.conf` - Webserver-Config mit Caching und Sicherheit
+- `Dockerfile` - Multi-Stage: Ruby/Jekyll baut Site -> Node.js Express serviert alles
+- `docker-compose.yml` - Photography Container + Watchtower, Volumes fuer Bilder/Thumbs/DB
+- `entrypoint.sh` - Thumbnail-Generierung + Node.js Server-Start
 - `.dockerignore` - Haelt Build-Context klein (kein .git, node_modules etc.)

-### Docker-Befehle
+### Docker-Befehle (auf NAS via SSH)
 | Befehl | Aktion |
 |---|---|
-| `docker compose up -d --build` | Container bauen und starten |
-| `docker compose down` | Container stoppen |
-| `docker compose logs -f` | Logs anzeigen |
-| `docker compose up -d --build --force-recreate` | Neu bauen nach Aenderungen |
+| `sudo docker compose up -d` | Container starten |
+| `sudo docker compose down` | Container stoppen |
+| `sudo docker compose logs -f photography` | Logs anzeigen |
+| `sudo docker compose pull && sudo docker compose up -d` | Manuelles Update |

-### Deployment-Workflow
-1. Aenderungen lokal machen (Bilder, Config, Design)
-2. Git commit & push
-3. Auf NAS: `git pull && docker compose up -d --build`
-4. Fertig - Website aktualisiert
+### Deployment-Workflow (automatisch!)
+1. Aenderungen lokal machen (Code, Design)
+2. `gulp build` ausfuehren (JS + CSS minifizieren)
+3. Git commit & push nach master
+4. GitHub Actions baut automatisch Docker Image -> GHCR
+5. Watchtower auf NAS erkennt neues Image (alle 5 Min)
+6. Watchtower aktualisiert Container automatisch
+7. Fertig - Website aktualisiert ohne SSH!

-## Anpassungs-Roadmap (TODO - mit Besitzer besprechen)
+## Anpassungs-Roadmap

 - [x] Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
 - [x] Social Media Links aktualisieren (Instagram: @Mischkomposition)
 - [x] Sponsor-Bereich entfernen
- [x] Kontaktformular auf tom@mischlabs.de konfiguriert
+- [x] Kontaktformular auf tom@mischlabs.de konfiguriert (Formsubmit.co)
 - [x] Google Analytics vom Originalautor entfernt
 - [x] Custom Domain: tom.mischlabs.de eingetragen
 - [x] Nextcloud-Integration (Bilder aus Websitebilder-Ordner)
 - [x] Dynamische Galerie (JS statt Jekyll-Loop)
 - [x] Automatische Thumbnail-Generierung
+- [x] Login-System mit JWT + SQLite
+- [x] Admin-Dashboard (Nutzerverwaltung, Bildzuweisung)
+- [x] Kunden-Portal (zugewiesene Bilder + Download)
+- [x] Watchtower fuer automatische Updates
 - [ ] Footer Bio-Text schreiben (optional)
 - [ ] Farbschema/Design anpassen
 - [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung)
+- [ ] Admin-Passwort aendern!

 ---