Frontend — Build & Deploy

React + Vite + TailwindCSS Web-Frontend, deployed als statische Dateien auf Nginx.

Eckdaten

Server: your-backend (Debian 13, Nginx)
Tech: React 18, Vite, TailwindCSS, Recharts, Zustand, lucide-react
Theme: Dark mit Orange-Akzent, komplett deutsch
Auth: JWT Login (8h Token)
Default-Login: admin / YOUR_PASSWORD

Seiten

Seite	Beschreibung
Dashboard	Uebersicht aller Firewalls, Status-Kacheln, AgentPanel per Klick
Firewalls	Suchbare Tabelle, AgentPanel mit Tabs (Uebersicht, Interfaces, Dienste, Tunnel, VPN, WireGuard, Routen, DHCP, Zertifikate, Backups, Agent); Firewall hinzufuegen/loeschen
Tunnel	Globale Tunnel-Uebersicht ueber alle Firewalls
Firmware	Multi-Plattform Firmware-Upload, Agent-Update-Trigger
Kunden	CRUD Kundenverwaltung
Einstellungen	Benutzerverwaltung, Passworte aendern

Features (v1.0.3)

Firewall hinzufuegen / Pre-Registration

Dialog mit Name + optionalem Kunden
Zeigt Installationsanleitung mit Copy-Buttons fuer die Shell-Befehle
Agent wird mit hostname="(ausstehend)" angelegt, automatisches Matching bei Registration

Firewall loeschen

Papierkorb-Icon im AgentPanel
Loescht Agent und alle zugehoerigen Daten (Systemdaten, Events, Backups, Metriken)

OPNsense Business Edition Lizenz-Anzeige

Im Uebersicht-Tab des AgentPanel:

Product Name (z.B. "OPNsense Business Edition")
Subscription Key
Ablaufdatum
Restlaufzeit mit visuellem Farbbalken (gruen/gelb/rot je nach verbleibender Zeit)

Agent-Tab

Agent-Info: Version, Agent-ID, Plattform, Uptime
Update-Button: Direktes Agent-Update anfordern
Befehle: Remote-Shell-Befehle direkt aus dem Frontend ausfuehren

Firmware-Seite

Multi-Platform Upload (FreeBSD, Linux, Windows)
Versions-Uebersicht pro Plattform mit SHA256-Hash und Groesse
Agent-Update-Buttons (einzeln oder alle)

Build & Deploy

cd frontend
npm run build                                              # ~330 KB JS, ~32 KB CSS
ssh root@your-backend 'rm -rf /var/www/html/assets/*'     # Alte Hashes loeschen!
scp -r dist/* root@your-backend:/var/www/html/

Wichtig: Vor Deploy immer assets/ loeschen — Vite generiert Hash-basierte Dateinamen, alte Dateien bleiben sonst auf dem Server und Browser-Cache liefert 404.

Dateistruktur

frontend/
├── src/
│   ├── App.jsx              # Router + ProtectedRoute
│   ├── api/client.js        # API Client (auth, agents, firmware, tunnels, etc.)
│   ├── stores/auth.js       # Zustand Auth Store (JWT Token)
│   ├── layouts/AppLayout.jsx # Sidebar + Outlet
│   ├── components/
│   │   ├── AgentPanel.jsx   # Side Panel mit Tabs (Uebersicht bis Agent)
│   │   └── StatusBadge.jsx  # Online/Offline/Stale Badge
│   └── pages/
│       ├── Dashboard.jsx    # Status-Kacheln + Agent-Liste
│       ├── Agents.jsx       # Firewall-Tabelle
│       ├── AgentDetail.jsx  # Detail-Ansicht (full page)
│       ├── Tunnels.jsx      # Globale Tunnel-Uebersicht
│       ├── Firmware.jsx     # Multi-Plattform Firmware + Update-Trigger
│       ├── Customers.jsx    # Kunden CRUD
│       ├── SettingsPage.jsx # User-Management
│       └── Login.jsx        # JWT Login
├── vite.config.js
└── package.json

3.4 KiB Raw Blame History