From 09694b64a15d79a2cb5bfcaf6e736a3d25ba293b Mon Sep 17 00:00:00 2001
From: CyberMind-FR <gandalf@Gk2.net>
Date: Wed, 7 Jan 2026 09:17:25 +0100
Subject: [PATCH] fix: Use SecuBox cyber-checkbox class for collection
 checkboxes (v0.6.0-r8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix invisible checkboxes using SecuBox theme structure:
- Wrap checkbox inputs with .cyber-checkbox label class
- Update wizard.css to style .cyber-checkbox properly
- Use theme's native checkbox styling from forms.css
- Add !important to override theme defaults where needed

Issue: Checkboxes still not visible after inline styles
Root Cause: SecuBox theme requires .cyber-checkbox wrapper class
Solution: Restructure HTML to match theme's checkbox pattern

Structure Change:
OLD: <label><input><div class="collection-info">
NEW: <label class="cyber-checkbox"><input><div class="collection-info">

CSS Updates:
- .collection-item .cyber-checkbox (flex layout with gap)
- .collection-item .cyber-checkbox input[type="checkbox"] (18x18px, flex-shrink: 0)
- Added !important to override theme padding

Theme Pattern:
.cyber-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; }
.cyber-checkbox input[type="checkbox"] { width: 18px; height: 18px; }

Version: 0.6.0-8

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../secubox/luci-app-crowdsec-dashboard/Makefile |  2 +-
 .../resources/crowdsec-dashboard/wizard.css      |  8 +++++---
 .../resources/view/crowdsec-dashboard/wizard.js  | 16 +++++++---------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package/secubox/luci-app-crowdsec-dashboard/Makefile b/package/secubox/luci-app-crowdsec-dashboard/Makefile
index 2775d51f..421be45d 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:=7
+PKG_RELEASE:=8
 PKG_ARCH:=all
 
 PKG_LICENSE:=Apache-2.0
diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/wizard.css b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/wizard.css
index 91e76f28..5f52aded 100644
--- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/wizard.css
+++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/wizard.css
@@ -198,18 +198,20 @@
 	background: rgba(15, 23, 42, 0.7);
 }
 
-.collection-item label {
-	display: flex;
+.collection-item .cyber-checkbox {
+	display: flex !important;
 	align-items: center;
 	gap: 12px;
 	cursor: pointer;
 	user-select: none;
+	padding: 0 !important;
 }
 
-.collection-item input[type="checkbox"] {
+.collection-item .cyber-checkbox input[type="checkbox"] {
 	cursor: pointer;
 	width: 18px;
 	height: 18px;
+	flex-shrink: 0;
 }
 
 .collection-info {
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 3d151bf0..c8ed2846 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
@@ -250,17 +250,15 @@ 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': 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', { 'for': checkboxId, 'style': 'display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;' }, [
-							checkbox,
+						E('label', { 'class': 'cyber-checkbox', 'for': checkboxId }, [
+							E('input', {
+								'type': 'checkbox',
+								'id': checkboxId,
+								'checked': collection.preselected ? 'checked' : null,
+								'data-collection': collection.name
+							}),
 							E('div', { 'class': 'collection-info' }, [
 								E('strong', {}, collection.name),
 								E('div', { 'class': 'collection-desc' }, collection.description)