87 lines
3.4 KiB
Markdown
87 lines
3.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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
|
|
```
|