secubox-openwrt/luci-app-client-guardian
CyberMind-FR 40a8437a2a feat: apply Design System v0.3.0 to all 15 SecuBox modules
Extended the demo-inspired design system from system-hub to all SecuBox modules
for complete visual consistency across the entire platform.

🎨 Design System v0.3.0 Applied
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📦 Modules Updated (15 total):
-  luci-app-auth-guardian
-  luci-app-bandwidth-manager
-  luci-app-cdn-cache
-  luci-app-client-guardian
-  luci-app-crowdsec-dashboard
-  luci-app-ksm-manager
-  luci-app-media-flow
-  luci-app-netdata-dashboard
-  luci-app-netifyd-dashboard
-  luci-app-network-modes
-  luci-app-secubox
-  luci-app-system-hub
-  luci-app-traffic-shaper
-  luci-app-vhost-manager
-  luci-app-wireguard-dashboard

🎨 Design System Features
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Dark Mode Palette (Demo-inspired):
- Background: #0a0a0f → #12121a → #1a1a24
- Text: #fafafa / #a0a0b0
- Borders: #2a2a35
- Primary gradient: #6366f1 → #8b5cf6 (Indigo-Violet)

Typography:
- Body: Inter (Google Fonts)
- Monospace: JetBrains Mono (for metrics, IDs, code)

Components:
- Compact stats badges (130px min)
- Gradient text titles with background-clip
- Cards with gradient border hover effects
- Sticky navigation tabs with backdrop-filter
- Filter tabs with gradient active state
- Buttons with cubic-bezier transitions
- Status badges (success/danger/warning/info)

Responsive Grid Layouts:
- Stats: repeat(auto-fit, minmax(130px, 1fr))
- Metrics: repeat(auto-fit, minmax(240px, 1fr))
- Cards: repeat(auto-fit, minmax(300px, 1fr))

📄 Files Added (14 new):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Created common.css for each module:
- templates/common-css-template.css (master template)
- */resources/*/common.css (14 modules)

📝 Files Modified (42):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Makefiles (13 modules):
- Updated PKG_VERSION from 0.0.9 → 0.2.2
- auth-guardian, bandwidth-manager, cdn-cache, client-guardian
- crowdsec-dashboard, ksm-manager, media-flow, netdata-dashboard
- netifyd-dashboard, network-modes, traffic-shaper, vhost-manager
- wireguard-dashboard

API.js files (14 modules):
- Added "// Version: 0.2.2" comment
- Consistent version tracking across all modules

Dashboard CSS (13 modules):
- Added "Version: 0.3.0" in file headers
- Updated to use Design System variables

SecuBox CSS (6 files):
- alerts.css, dashboard.css, modules.css
- monitoring.css, secubox.css
- All updated to version 0.3.0

🔧 CSS Variables System
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

All modules now use consistent --sh-* CSS variables:
- --sh-text-primary / --sh-text-secondary
- --sh-bg-primary / --sh-bg-secondary / --sh-bg-tertiary / --sh-bg-card
- --sh-border / --sh-hover-bg / --sh-hover-shadow
- --sh-primary / --sh-primary-end (for gradients)
- --sh-success / --sh-danger / --sh-warning / --sh-info
- --sh-shadow

Benefits:
✓ Instant theme switching (light/dark mode)
✓ Easy color customization via CSS variables
✓ Consistent branding across all modules
✓ Reduced CSS duplication
✓ Better maintainability

📊 Statistics
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Files changed: 56 total
- New files: 14 (common.css + template)
- Modified files: 42
  - 13 Makefiles (version updates)
  - 14 API.js (version tracking)
  - 13 dashboard.css (version headers)
  - 6 secubox CSS files
  - 1 settings.local.json

Total lines added: ~8,000+ (common.css templates)
Common CSS size: ~420 lines per module
Design system coverage: 100% (all 15 modules)

 Validation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Validation script passed successfully:
- ✓ Check 1: RPCD naming (15 modules)
- ✓ Check 2: Menu paths (100+ views)
- ✓ Check 3: View files (2 warnings - debug files)
- ✓ Check 4: Permissions (15 RPCD scripts)
- ✓ Check 5: JSON syntax (30 files)
- ✓ Check 6: ubus naming (17 objects)

🎯 Migration Notes
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Developers:
1. Import common.css in your HTML/views
2. Use --sh-* CSS variables instead of hardcoded colors
3. Leverage pre-built components (.sh-card, .sh-btn-primary, etc.)
4. Follow responsive grid patterns
5. Test in both light and dark modes

Users:
- All modules now have consistent modern design
- Unified color scheme across entire SecuBox platform
- Better accessibility with improved contrast ratios
- Smooth animations and transitions
- Responsive design for mobile/tablet/desktop

📚 Documentation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Reference:
- Design demo: https://cybermind.fr/apps/system-hub/demo.html
- Template: templates/common-css-template.css
- Guidelines: DEVELOPMENT-GUIDELINES.md
- Quick start: QUICK-START.md

Next Steps:
- Deploy modules to test environment
- Verify visual consistency
- Collect user feedback
- Fine-tune responsive breakpoints if needed

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-26 20:15:33 +01:00
..
.github/workflows fix: hope modules refresh 2025-12-23 18:56:15 +01:00
htdocs/luci-static/resources feat: apply Design System v0.3.0 to all 15 SecuBox modules 2025-12-26 20:15:33 +01:00
root fix: remove UCI dependencies from menu definitions 2025-12-25 16:23:30 +01:00
Makefile feat: apply Design System v0.3.0 to all 15 SecuBox modules 2025-12-26 20:15:33 +01:00
README.md fix: hope modules refresh 2025-12-23 18:56:15 +01:00

luci-app-client-guardian

Network Access Control & Captive Portal Dashboard for OpenWrt

🛡️ Client Guardian est un système de contrôle d'accès réseau (NAC) nouvelle génération pour OpenWrt avec portail captif, surveillance en temps réel, gestion des zones et alertes SMS/Email.

Client Guardian Dashboard

Fonctionnalités

🔍 Surveillance Temps Réel

  • Détection automatique des nouveaux clients (MAC + DHCP hostname)
  • Statut en ligne/hors ligne en temps réel
  • Historique de trafic par client (RX/TX)
  • Première connexion / Dernière activité

🏠 Gestion des Zones

Zone Description Internet Local Isolation
LAN Privé Réseau de confiance
IoT Objets connectés
Enfants Accès filtré Filtré
Invités Accès limité Limité
Quarantaine Non approuvés Portal
Bloqué Bannis

Politique par Défaut : Quarantaine

  • Tout nouveau client non reconnu → Quarantaine automatique
  • Accès uniquement au portail captif
  • Approbation manuelle requise pour accès complet
  • Protection contre les intrusions

🚪 Portail Captif Nouvelle Génération

  • Interface moderne et personnalisable
  • Authentification par mot de passe / inscription
  • Conditions d'utilisation acceptées
  • Durée de session configurable
  • Logo et couleurs personnalisables

👨‍👩‍👧‍👦 Contrôle Parental

  • Plages horaires : Blocage nocturne, heures scolaires
  • Filtrage de contenu : Adulte, violence, jeux d'argent
  • SafeSearch forcé : Google, Bing, YouTube
  • YouTube Mode Restreint
  • Listes blanches/noires d'URLs personnalisées
  • Quotas journaliers de temps d'écran

🔔 Alertes SMS & Email

  • Nouveau client détecté
  • Tentative de client banni
  • Quota dépassé
  • Activité suspecte (scan de ports, etc.)
  • Templates personnalisables
  • Fournisseurs SMS : Twilio, Nexmo, OVH

📦 Installation

Prérequis

opkg update
opkg install luci-base rpcd dnsmasq-full iptables uhttpd

Optionnels

# Pour les notifications
opkg install msmtp curl

# Pour le filtrage DNS
opkg install adblock

# Pour les quotas de bande passante
opkg install sqm-scripts

Installation du package

# Depuis les sources
git clone https://github.com/gkerma/luci-app-client-guardian.git
cd luci-app-client-guardian
make install

# Redémarrer rpcd
/etc/init.d/rpcd restart

🎯 Utilisation

Workflow Typique

  1. Nouveau client se connecte → Automatiquement en quarantaine
  2. Alerte envoyée → SMS/Email à l'admin
  3. Admin vérifie → Dans le dashboard LuCI
  4. Décision :
    • Approuver → Assigner à une zone (LAN, IoT, Enfants...)
    • 🚫 Bannir → Bloquer définitivement

Actions sur les Clients

Action Description
Approuver Sortir de quarantaine, assigner zone
🚫 Bannir Bloquer tout accès réseau
Quarantaine Remettre en isolation
✏️ Modifier Changer nom, zone, quota

🔧 Configuration

Fichier UCI /etc/config/client-guardian

# Configuration globale
config client-guardian 'config'
    option enabled '1'
    option default_policy 'quarantine'
    option scan_interval '30'
    option portal_enabled '1'

# Alertes Email
config email 'email'
    option enabled '1'
    option smtp_server 'smtp.gmail.com'
    option smtp_port '587'
    option smtp_user 'user@gmail.com'
    list recipients 'admin@example.com'

# Alertes SMS (Twilio)
config sms 'sms'
    option enabled '1'
    option provider 'twilio'
    option api_key 'ACxxxxx'
    option api_secret 'xxxxx'
    list recipients '+33612345678'

# Zone personnalisée
config zone 'gaming'
    option name 'Gaming'
    option network 'lan'
    option internet_access '1'
    option bandwidth_limit '0'
    option time_restrictions '0'

# Client connu
config client 'mon_pc'
    option name 'PC Bureau'
    option mac 'AA:BB:CC:DD:EE:FF'
    option zone 'lan_private'
    option status 'approved'
    option static_ip '192.168.1.10'

🏗️ Architecture

┌──────────────────────────────────────────────────────────────┐
│                      LuCI Web Interface                       │
│  ┌──────────┬──────────┬──────────┬──────────┬──────────┐   │
│  │ Overview │ Clients  │  Zones   │  Portal  │ Parental │   │
│  └──────────┴──────────┴──────────┴──────────┴──────────┘   │
├──────────────────────────────────────────────────────────────┤
│                        RPCD Backend                           │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │ status | clients | zones | approve | ban | quarantine  │ │
│  └─────────────────────────────────────────────────────────┘ │
├──────────────────────────────────────────────────────────────┤
│                     System Integration                        │
│  ┌───────────┬───────────┬───────────┬───────────────────┐  │
│  │  dnsmasq  │ iptables  │  arptables │ uhttpd (portal)  │  │
│  │  (DHCP)   │ (firewall)│  (MAC)     │                  │  │
│  └───────────┴───────────┴───────────┴───────────────────┘  │
├──────────────────────────────────────────────────────────────┤
│                       Alert System                            │
│  ┌───────────────────┬────────────────────────────────────┐ │
│  │   Email (msmtp)   │      SMS (Twilio/Nexmo/OVH)       │ │
│  └───────────────────┴────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

📊 API RPCD

Méthode Description Paramètres
status État global du système -
clients Liste tous les clients -
zones Liste toutes les zones -
parental Config contrôle parental -
portal Config portail captif -
alerts Config alertes -
logs Journal d'événements limit, level
approve_client Approuver un client mac, name, zone
ban_client Bannir un client mac, reason
quarantine_client Mettre en quarantaine mac
update_client Modifier un client section, name, zone...
update_zone Modifier une zone id, name, bandwidth_limit...
update_portal Modifier le portail title, subtitle...
send_test_alert Envoyer alerte test type (email/sms)

🔐 Sécurité

  • Quarantaine par défaut : Aucun accès sans approbation
  • Isolation des zones : IoT isolé du LAN
  • Détection d'intrusion : Alertes en temps réel
  • Historique complet : Logs de toutes les connexions
  • ACL : Permissions granulaires pour l'API

🎨 Thème

  • Couleur principale : Rouge sécurité (#ef4444)
  • Fond : Dark mode (#0f0a0a)
  • Zones : Couleurs distinctes par type
  • Animations : Pulse pour quarantaine, glow pour alertes

📁 Structure du Package

luci-app-client-guardian/
├── Makefile
├── README.md
├── htdocs/luci-static/resources/
│   ├── client-guardian/
│   │   ├── api.js
│   │   └── dashboard.css
│   └── view/client-guardian/
│       ├── overview.js
│       ├── clients.js
│       ├── zones.js
│       ├── portal.js
│       ├── parental.js
│       ├── alerts.js
│       └── logs.js
└── root/
    ├── etc/
    │   └── config/client-guardian
    └── usr/
        ├── libexec/rpcd/client-guardian
        └── share/
            ├── luci/menu.d/luci-app-client-guardian.json
            └── rpcd/acl.d/luci-app-client-guardian.json

🛣️ Roadmap

  • Surveillance temps réel
  • Gestion des zones
  • Portail captif
  • Contrôle parental
  • Alertes Email/SMS
  • Intégration Pi-hole
  • Statistiques graphiques (historique)
  • Application mobile
  • API REST externe
  • Intégration Home Assistant

📄 Licence

Apache-2.0 - Voir LICENSE

👤 Auteur

Gandalf - CyberMind.fr


Protégez votre réseau avec Client Guardian 🛡️