- Create nav.js for Client Guardian with SecuBox themed tabs
- Create nav.js for CrowdSec dashboard with themed navigation
- Update all Client Guardian views to use CgNav.renderTabs()
- Update all CrowdSec views to use CsNav.renderTabs()
- Update Client Guardian menu.json paths from /client-guardian/ to /guardian/
- Hide default LuCI tabs via CSS injection for both dashboards
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fixed "[object HTMLElement]" display bugs in CrowdSec dashboard views by properly structuring DOM element children arrays.
## Problem:
Multiple CrowdSec dashboard views were showing "[object HTMLElement]" instead of properly rendered content. This occurred when JavaScript code tried to concatenate strings with E() DOM elements using the + operator.
## Root Cause:
```javascript
// WRONG: String concatenation with DOM elements
E('p', {}, _('Access metrics at: ') + E('code', {}, url))
// Results in: "Access metrics at: [object HTMLElement]"
```
When you concatenate a string with a DOM element, JavaScript converts the DOM element to its string representation "[object HTMLElement]", which then gets rendered as text.
## Solution:
Changed from string concatenation to proper children arrays:
```javascript
// CORRECT: Array of children
E('p', {}, [
_('Access metrics at: '),
E('code', {}, url)
])
```
## Files Fixed:
### metrics.js (line 299-302):
- Fixed "Access metrics at: [object HTMLElement]" in metrics export info box
- Changed from concatenation to children array
### settings.js (line 217-220):
- Fixed "Or use: [object HTMLElement]" in collections empty state
- Changed from concatenation to children array
### waf.js (lines 123-126):
- Fixed 4 instances in WAF setup instructions:
- "Install AppSec collections: [object HTMLElement]"
- "Restart CrowdSec service: [object HTMLElement]"
- "Verify status: [object HTMLElement]"
- Changed all from concatenation to children arrays
## Technical Notes:
- The E() helper function expects children to be:
1. A single string
2. A single DOM element
3. An array of strings and/or DOM elements
- String concatenation (+) cannot be used to combine text with DOM elements
- Always use array notation when mixing text and elements
## Testing:
- Deployed to router 192.168.8.191
- Metrics view now displays "Access metrics at: http://127.0.0.1:6060/metrics" correctly
- Settings view shows "Or use: cscli hub update" properly
- WAF view renders all setup instructions with code blocks correctly
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
