- Add parseScenario() to format scenario names
- Add getCountryFlag() to display country flag emojis
- Add formatRelativeTime() for relative timestamps
- Fix decisions data flattening in handleUnban, handleBulkUnban, submitBan, and polling
- Fix getDashboardData to properly flatten alerts->decisions structure
- Fix context error in overview renderDecisionsTable (this vs self)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix invisible checkboxes in Step 3 collections:
- Add explicit inline styles to checkbox inputs
- Set width: 18px, height: 18px with cursor: pointer
- Add 'for' attribute to label for better click handling
- Replace null rendering with empty element E([])
- Fixes "null" text appearing on screen
Issue: Collection items not selectable, checkboxes invisible
Cause: Checkboxes may be hidden by browser default styles
Solution: Add explicit inline styles and proper label association
Frontend Changes:
- htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js
- Add inline styles to checkbox inputs
- Add 'for' attribute linking label to checkbox
- Replace ': null' with ': E([])' to avoid "null" text
Checkboxes now have:
- Explicit dimensions (18x18px)
- Proper cursor styling
- Label association via 'for' attribute
- No more "null" text rendering
Version: 0.6.0-7
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix Next button remaining disabled despite correct status:
- Change renderStep1 to read from data parameter instead of wizardData
- Read status.crowdsec and status.lapi_status from passed data
- Ensures button state reflects actual API response
Issue: Next button not clickable even with LAPI available
Cause: renderStep1 reading from stale wizardData instead of fresh data
Solution: Read from data parameter passed by render()
Frontend Changes:
- htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js
- renderStep1: Read from data.status instead of this.wizardData
- Extract crowdsecRunning and lapiAvailable from data parameter
Version: 0.6.0-5
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix missing navigation buttons in wizard:
- Add explicit CSS loading in render() method
- Use L.resource() to load wizard.css
- Inject <link> tag into document head
- Ensures wizard styling is applied
Issue: Navigation buttons (Cancel, Next) not visible
Cause: wizard.css was not being loaded
Solution: Add CSS file loading in render method
Frontend Changes:
- htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js
- Add CSS link injection in render()
- Load crowdsec-dashboard/wizard.css via L.resource()
Version: 0.6.0-4
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced CrowdSec Dashboard bouncers page with comprehensive firewall
bouncer management capabilities.
New Features:
- Dedicated Firewall Bouncer management card with 3 status panels:
* Service Status: Running/stopped, boot start enabled/disabled, configured status
* Blocked IPs: Real-time IPv4/IPv6 blocked IP counts with View Details modal
* nftables Status: IPv4/IPv6 table active status
- Service Control Buttons:
* Start/Stop service (contextual based on current state)
* Restart service
* Enable/Disable boot start (contextual)
* Configuration viewer
- Real-time Updates:
* Auto-refresh every 10 seconds via polling
* Manual refresh button
* Live status badge updates
- nftables Details Modal:
* Lists all blocked IPv4 addresses (scrollable)
* Lists all blocked IPv6 addresses (scrollable)
* Shows IPv4/IPv6 rules count
* Formatted with monospace font
- Configuration Viewer Modal:
* Displays all UCI configuration settings
* Shows enabled/disabled status
* Shows IPv4/IPv6 support
* Shows API URL, update frequency, deny action
* Shows deny logging and log prefix
* Shows configured network interfaces
* Handles unconfigured state with installation prompt
UI Enhancements:
- Responsive grid layout for status cards
- Color-coded status indicators (green=active, red=stopped, gray=disabled, yellow=warning)
- Material design badges for all status indicators
- Visual feedback for all operations with notifications
- Loading spinners for async operations
- Professional styling consistent with SecuBox theme
Integration:
- Utilizes new API methods: getFirewallBouncerStatus, controlFirewallBouncer,
getFirewallBouncerConfig, getNftablesStats
- Error handling with user-friendly notifications
- Proper promise chaining and async/await patterns
Technical Details:
- Added renderFirewallBouncerCard() method (125 lines)
- Added handleFirewallBouncerControl() method for service actions
- Added handleFirewallBouncerRefresh() for manual/auto refresh
- Added showNftablesDetails() modal for blocked IPs
- Added showFirewallBouncerConfig() modal for UCI settings
- Enhanced load() to fetch firewall bouncer data
- Updated polling to refresh firewall bouncer status
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 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>
Enhanced dashboard UX when CrowdSec service is not running:
API module (api.js):
- Modified getDashboardData() to handle error responses gracefully
- Returns empty arrays/objects for stats when service is stopped
- Includes error flag in response data
Overview module (overview.js):
- Added 'fs' module import for service control
- Added startCrowdSec() function to start service from UI
- Display warning banner when service is stopped
- Provide actionable message with start service link
Dashboard CSS (dashboard.css):
- Added .cs-warning-banner styles for error messages
- Professional warning styling with icon and content layout
This resolves XHR timeout errors by showing friendly error messages
instead of hanging requests.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed 'new api()' to 'api' in all dashboard views since the API module
exports an object, not a constructor class.
Fixed files:
- overview.js
- decisions.js
- alerts.js
- metrics.js
- waf.js
This resolves the 'TypeError: api is not a constructor' error.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
