From 439bab63613996b7e5c3d79c89477ae9074ccbc0 Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Wed, 7 Jan 2026 09:15:17 +0100 Subject: [PATCH] fix: Make collection checkboxes visible with inline styles (v0.6.0-r7) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- package/secubox/luci-app-crowdsec-dashboard/Makefile | 2 +- .../resources/view/crowdsec-dashboard/wizard.js | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/package/secubox/luci-app-crowdsec-dashboard/Makefile b/package/secubox/luci-app-crowdsec-dashboard/Makefile index 3e2188d0..2775d51f 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/Makefile +++ b/package/secubox/luci-app-crowdsec-dashboard/Makefile @@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk PKG_NAME:=luci-app-crowdsec-dashboard PKG_VERSION:=0.6.0 -PKG_RELEASE:=6 +PKG_RELEASE:=7 PKG_ARCH:=all PKG_LICENSE:=Apache-2.0 diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js index 164fefe8..3d151bf0 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js @@ -249,15 +249,17 @@ return view.extend({ E('div', { 'class': 'collections-list' }, recommendedCollections.map(L.bind(function(collection) { + var checkboxId = 'collection-' + collection.name.replace('/', '-'); var checkbox = E('input', { 'type': 'checkbox', - 'id': 'collection-' + collection.name.replace('/', '-'), - 'checked': collection.preselected, - 'data-collection': collection.name + 'id': checkboxId, + 'checked': collection.preselected ? 'checked' : null, + 'data-collection': collection.name, + 'style': 'width: 18px; height: 18px; cursor: pointer; margin: 0;' }); return E('div', { 'class': 'collection-item' }, [ - E('label', {}, [ + E('label', { 'for': checkboxId, 'style': 'display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;' }, [ checkbox, E('div', { 'class': 'collection-info' }, [ E('strong', {}, collection.name), @@ -274,7 +276,7 @@ return view.extend({ E('div', { 'class': 'spinning' }), E('p', {}, _('Installing collections...')), E('div', { 'id': 'install-status' }, this.wizardData.installStatus || '') - ]) : null, + ]) : E([]), // Navigation E('div', { 'class': 'wizard-nav' }, [