fix(crowdsec): Restore working setup page from settings.js

Restored the original settings.js functionality as setup.js with
updated nav references. The simplified version was broken.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-02-02 11:01:16 +01:00
parent a9086b1d21
commit 21f59b6c9a
2 changed files with 146 additions and 148 deletions

View File

@ -9,7 +9,7 @@ include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-crowdsec-dashboard PKG_NAME:=luci-app-crowdsec-dashboard
PKG_VERSION:=0.7.0 PKG_VERSION:=0.7.0
PKG_RELEASE:=31 PKG_RELEASE:=32
PKG_ARCH:=all PKG_ARCH:=all
PKG_LICENSE:=Apache-2.0 PKG_LICENSE:=Apache-2.0

View File

@ -2,12 +2,11 @@
'require view'; 'require view';
'require dom'; 'require dom';
'require ui'; 'require ui';
'require crowdsec-dashboard/api as api'; 'require crowdsec-dashboard.api as api';
return view.extend({ return view.extend({
status: {}, status: {},
settings: {}, settings: {},
bouncerStatus: {},
load: function() { load: function() {
var link = document.createElement('link'); var link = document.createElement('link');
@ -17,7 +16,8 @@ return view.extend({
return Promise.all([ return Promise.all([
api.getStatus(), api.getStatus(),
api.getSettings(), api.getSettings(),
api.getFirewallBouncerStatus() api.getMachines(),
api.getCollections()
]); ]);
}, },
@ -25,53 +25,60 @@ return view.extend({
var self = this; var self = this;
this.status = data[0] || {}; this.status = data[0] || {};
this.settings = data[1] || {}; this.settings = data[1] || {};
this.bouncerStatus = data[2] || {}; var machines = Array.isArray(data[2]) ? data[2] : (data[2].machines || []);
var colData = data[3] || {};
var isFirstRun = !this.status.capi_enrolled; var collections = colData.collections || [];
var allGood = this.status.crowdsec === 'running' &&
this.status.lapi_status === 'available' &&
this.status.capi_enrolled &&
this.bouncerStatus.running;
return E('div', { 'class': 'cs-view' }, [ return E('div', { 'class': 'cs-view' }, [
// Header // Header
E('div', { 'class': 'cs-header' }, [ E('div', { 'class': 'cs-header' }, [
E('div', { 'class': 'cs-title' }, isFirstRun ? 'CrowdSec Setup' : 'CrowdSec Setup'), E('div', { 'class': 'cs-title' }, 'CrowdSec Setup'),
E('div', { 'class': 'cs-status' }, [ E('div', { 'class': 'cs-status' }, [
E('span', { 'class': 'cs-dot ' + (allGood ? 'online' : 'offline') }), E('span', { 'class': 'cs-dot ' + (this.status.crowdsec === 'running' ? 'online' : 'offline') }),
allGood ? 'All Systems Go' : 'Setup Required' this.status.crowdsec === 'running' ? 'Running' : 'Stopped'
]) ])
]), ]),
// Navigation // Navigation
this.renderNav('setup'), this.renderNav('setup'),
// Status Card // Service Control
E('div', { 'class': 'cs-card' }, [ E('div', { 'class': 'cs-card' }, [
E('div', { 'class': 'cs-card-header' }, 'System Status'), E('div', { 'class': 'cs-card-header' }, 'Service Control'),
E('div', { 'class': 'cs-card-body' }, this.renderStatus()) E('div', { 'class': 'cs-card-body' }, [
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem;' }, [
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('start'); } }, 'Start'),
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('stop'); } }, 'Stop'),
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('restart'); } }, 'Restart')
]),
this.renderHealth()
])
]), ]),
// Console Enrollment Card // Console Enrollment
E('div', { 'class': 'cs-card' }, [ E('div', { 'class': 'cs-card' }, [
E('div', { 'class': 'cs-card-header' }, [ E('div', { 'class': 'cs-card-header' }, [
'Console Enrollment', 'Console Enrollment',
E('span', { 'class': 'cs-badge ' + (this.status.capi_enrolled ? 'success' : 'warning') }, E('span', { 'class': 'cs-badge ' + (this.status.capi_enrolled ? 'success' : 'warning') },
this.status.capi_enrolled ? 'Enrolled' : 'Not Enrolled') this.status.capi_enrolled ? 'Enrolled' : 'Not Enrolled')
]), ]),
E('div', { 'class': 'cs-card-body' }, this.renderEnrollment()) E('div', { 'class': 'cs-card-body', 'id': 'enrollment-section' }, this.renderEnrollment())
]), ]),
// Service Control Card // Two column
E('div', { 'class': 'cs-card' }, [ E('div', { 'class': 'cs-grid-2' }, [
E('div', { 'class': 'cs-card-header' }, 'Service Control'), // Machines
E('div', { 'class': 'cs-card-body' }, [ E('div', { 'class': 'cs-card' }, [
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap;' }, [ E('div', { 'class': 'cs-card-header' }, 'Registered Machines'),
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('start'); } }, 'Start'), E('div', { 'class': 'cs-card-body' }, this.renderMachines(machines))
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('stop'); } }, 'Stop'), ]),
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('restart'); } }, 'Restart'), // Collections
E('button', { 'class': 'cs-btn primary', 'click': function() { self.repairAll(); } }, 'Repair') E('div', { 'class': 'cs-card' }, [
]) E('div', { 'class': 'cs-card-header' }, [
'Collections',
E('button', { 'class': 'cs-btn cs-btn-sm', 'click': function() { self.updateHub(); } }, 'Update')
]),
E('div', { 'class': 'cs-card-body', 'id': 'collections-list' }, this.renderCollections(collections))
]) ])
]) ])
]); ]);
@ -93,22 +100,19 @@ return view.extend({
})); }));
}, },
renderStatus: function() { renderHealth: function() {
var s = this.status; var s = this.status;
var b = this.bouncerStatus;
var checks = [ var checks = [
{ label: 'CrowdSec Agent', ok: s.crowdsec === 'running', detail: s.crowdsec || 'unknown' }, { label: 'Agent', ok: s.crowdsec === 'running' },
{ label: 'Local API (LAPI)', ok: s.lapi_status === 'available', detail: s.lapi_status || 'unknown' }, { label: 'LAPI', ok: s.lapi_status === 'available' },
{ label: 'Central API (CAPI)', ok: s.capi_enrolled, detail: s.capi_enrolled ? 'Enrolled' : 'Not enrolled' }, { label: 'CAPI', ok: s.capi_enrolled }
{ label: 'Firewall Bouncer', ok: b.running, detail: b.running ? 'Running' : 'Stopped' }
]; ];
return E('div', { 'class': 'cs-health' }, checks.map(function(c) {
return E('div', { 'class': 'cs-status-grid' }, checks.map(function(c) { return E('div', { 'class': 'cs-health-item' }, [
return E('div', { 'class': 'cs-status-item' }, [ E('div', { 'class': 'cs-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
E('div', { 'class': 'cs-status-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'), E('div', {}, [
E('div', { 'class': 'cs-status-info' }, [ E('div', { 'class': 'cs-health-label' }, c.label),
E('div', { 'class': 'cs-status-label' }, c.label), E('div', { 'class': 'cs-health-value' }, c.ok ? 'OK' : 'Error')
E('div', { 'class': 'cs-status-detail' }, c.detail)
]) ])
]); ]);
})); }));
@ -122,96 +126,74 @@ return view.extend({
return E('div', {}, [ return E('div', {}, [
E('p', { 'style': 'color: var(--cs-muted); margin-bottom: 1rem;' }, E('p', { 'style': 'color: var(--cs-muted); margin-bottom: 1rem;' },
enrolled 'Enroll to receive community blocklists from CrowdSec Console.'),
? 'Your instance is enrolled in the CrowdSec Console and receiving community blocklists.' E('div', { 'class': 'cs-field' }, [
: 'Enroll to receive community blocklists. Get your key from app.crowdsec.net'), E('label', { 'class': 'cs-label' }, 'Enrollment Key'),
E('input', { 'type': 'text', 'id': 'enroll-key', 'class': 'cs-input', 'value': key,
!enrolled ? E('div', {}, [ 'placeholder': 'Get key from app.crowdsec.net' })
E('div', { 'class': 'cs-field' }, [ ]),
E('label', { 'class': 'cs-label' }, 'Enrollment Key'), E('div', { 'class': 'cs-field' }, [
E('input', { 'type': 'text', 'id': 'enroll-key', 'class': 'cs-input', 'value': key, E('label', { 'class': 'cs-label' }, 'Machine Name (optional)'),
'placeholder': 'clxxxxxxxxxxxxxxxxx' }) E('input', { 'type': 'text', 'id': 'machine-name', 'class': 'cs-input', 'value': name,
]), 'placeholder': 'Custom name for this machine' })
E('div', { 'class': 'cs-field' }, [ ]),
E('label', { 'class': 'cs-label' }, 'Machine Name (optional)'), E('div', { 'style': 'display: flex; gap: 8px;' }, [
E('input', { 'type': 'text', 'id': 'machine-name', 'class': 'cs-input', 'value': name, E('button', { 'class': 'cs-btn primary', 'click': function() { self.saveAndEnroll(); } },
'placeholder': 'my-router' }) enrolled ? 'Re-enroll' : 'Save & Enroll'),
]), E('button', { 'class': 'cs-btn', 'click': function() { self.saveSettings(); } }, 'Save Only'),
E('button', { 'class': 'cs-btn primary', 'style': 'margin-top: 0.5rem;', enrolled ? E('button', { 'class': 'cs-btn danger', 'click': function() { self.disableConsole(); } }, 'Disable') : null
'click': function() { self.enroll(); } }, 'Enroll Now') ].filter(Boolean))
]) : E('div', { 'style': 'display: flex; gap: 8px;' }, [
E('button', { 'class': 'cs-btn', 'click': function() { self.showReenroll(); } }, 'Re-enroll'),
E('button', { 'class': 'cs-btn danger', 'click': function() { self.disableConsole(); } }, 'Disable')
])
]); ]);
}, },
showReenroll: function() { renderMachines: function(machines) {
var self = this; if (!machines.length) {
var container = document.querySelector('.cs-card-body'); return E('div', { 'class': 'cs-empty' }, 'No machines registered');
if (!container) return; }
return E('table', { 'class': 'cs-table' }, [
// Find the enrollment card body E('thead', {}, E('tr', {}, [
var cards = document.querySelectorAll('.cs-card'); E('th', {}, 'Machine'),
for (var i = 0; i < cards.length; i++) { E('th', {}, 'Status')
var header = cards[i].querySelector('.cs-card-header'); ])),
if (header && header.textContent.includes('Console Enrollment')) { E('tbody', {}, machines.map(function(m) {
var body = cards[i].querySelector('.cs-card-body'); var active = m.isValidated || m.is_validated;
body.innerHTML = ''; return E('tr', {}, [
dom.append(body, [ E('td', {}, m.machineId || m.machine_id || '-'),
E('div', { 'class': 'cs-field' }, [ E('td', {}, E('span', { 'class': 'cs-badge ' + (active ? 'success' : 'warning') },
E('label', { 'class': 'cs-label' }, 'New Enrollment Key'), active ? 'Active' : 'Pending'))
E('input', { 'type': 'text', 'id': 'enroll-key', 'class': 'cs-input',
'placeholder': 'clxxxxxxxxxxxxxxxxx' })
]),
E('div', { 'class': 'cs-field' }, [
E('label', { 'class': 'cs-label' }, 'Machine Name (optional)'),
E('input', { 'type': 'text', 'id': 'machine-name', 'class': 'cs-input',
'value': this.settings.machine_name || '', 'placeholder': 'my-router' })
]),
E('div', { 'style': 'display: flex; gap: 8px; margin-top: 0.5rem;' }, [
E('button', { 'class': 'cs-btn primary', 'click': function() { self.enroll(); } }, 'Enroll'),
E('button', { 'class': 'cs-btn', 'click': function() { location.reload(); } }, 'Cancel')
])
]); ]);
break; }))
} ]);
}
}, },
enroll: function() { renderCollections: function(collections) {
var self = this; var self = this;
var key = document.getElementById('enroll-key').value.trim(); var installed = collections.filter(function(c) {
var name = document.getElementById('machine-name').value.trim(); return c.status === 'enabled' || c.installed;
if (!key) {
this.toast('Please enter an enrollment key', 'error');
return;
}
this.toast('Enrolling...', 'info');
api.saveSettings(key, name, '1').then(function() {
return api.consoleEnroll(key, name);
}).then(function(r) {
if (r && r.success) {
self.toast('Enrolled successfully!', 'success');
setTimeout(function() { location.reload(); }, 2000);
} else {
self.toast('Enrollment failed: ' + (r.error || 'Unknown error'), 'error');
}
}).catch(function(e) {
self.toast('Error: ' + e.message, 'error');
}); });
if (!installed.length) {
return E('div', { 'class': 'cs-empty' }, 'No collections installed');
}
return E('table', { 'class': 'cs-table' }, [
E('thead', {}, E('tr', {}, [
E('th', {}, 'Collection'),
E('th', {}, 'Action')
])),
E('tbody', {}, installed.map(function(c) {
return E('tr', {}, [
E('td', {}, c.name || '-'),
E('td', {}, E('button', { 'class': 'cs-btn cs-btn-sm danger',
'click': function() { self.removeCollection(c.name); } }, 'Remove'))
]);
}))
]);
}, },
disableConsole: function() { svcAction: function(action) {
var self = this; var self = this;
if (!confirm('Disable console enrollment? You will stop receiving community blocklists.')) return; api.serviceControl(action).then(function(r) {
api.consoleDisable().then(function(r) {
if (r.success) { if (r.success) {
self.toast('Console disabled', 'success'); self.toast('Service ' + action + ' OK', 'success');
setTimeout(function() { location.reload(); }, 1500); setTimeout(function() { location.reload(); }, 1500);
} else { } else {
self.toast('Failed: ' + (r.error || 'Unknown'), 'error'); self.toast('Failed: ' + (r.error || 'Unknown'), 'error');
@ -219,50 +201,66 @@ return view.extend({
}); });
}, },
svcAction: function(action) { saveSettings: function() {
var self = this; var self = this;
this.toast(action.charAt(0).toUpperCase() + action.slice(1) + 'ing...', 'info'); var key = document.getElementById('enroll-key').value.trim();
var name = document.getElementById('machine-name').value.trim();
api.saveSettings(key, name, '0').then(function(r) {
self.toast(r.success ? 'Settings saved' : 'Failed', r.success ? 'success' : 'error');
});
},
api.serviceControl(action).then(function(r) { saveAndEnroll: function() {
if (r.success) { var self = this;
self.toast('Service ' + action + ' OK', 'success'); var key = document.getElementById('enroll-key').value.trim();
var name = document.getElementById('machine-name').value.trim();
if (!key) { self.toast('Enter enrollment key', 'error'); return; }
api.saveSettings(key, name, '1').then(function(r) {
if (!r.success) { self.toast('Save failed', 'error'); return; }
return api.consoleEnroll(key, name);
}).then(function(r) {
if (r && r.success) {
self.toast('Enrolled!', 'success');
setTimeout(function() { location.reload(); }, 2000); setTimeout(function() { location.reload(); }, 2000);
} else { } else if (r) {
self.toast('Failed: ' + (r.error || 'Unknown'), 'error'); self.toast('Enroll failed: ' + (r.error || ''), 'error');
} }
}); });
}, },
repairAll: function() { disableConsole: function() {
var self = this; var self = this;
this.toast('Repairing...', 'info'); if (!confirm('Disable console enrollment?')) return;
api.consoleDisable().then(function(r) {
self.toast(r.success ? 'Disabled' : 'Failed', r.success ? 'success' : 'error');
if (r.success) setTimeout(function() { location.reload(); }, 1500);
});
},
// Repair LAPI first, then CAPI updateHub: function() {
api.repairLapi().then(function(r) { var self = this;
if (!r.success) { api.updateHub().then(function(r) {
self.toast('LAPI repair failed', 'error'); self.toast(r.success ? 'Hub updated' : 'Failed', r.success ? 'success' : 'error');
return Promise.reject(); if (r.success) setTimeout(function() { location.reload(); }, 1500);
} });
return api.repairCapi(); },
}).then(function(r) {
if (r && r.success) { removeCollection: function(name) {
self.toast('Repair complete', 'success'); var self = this;
setTimeout(function() { location.reload(); }, 2000); if (!confirm('Remove ' + name + '?')) return;
} else if (r) { api.removeCollection(name).then(function(r) {
self.toast('CAPI repair: ' + (r.error || 'check status'), 'warning'); self.toast(r.success ? 'Removed' : 'Failed', r.success ? 'success' : 'error');
setTimeout(function() { location.reload(); }, 2000); if (r.success) setTimeout(function() { location.reload(); }, 1500);
}
}).catch(function() {
// Already showed error
}); });
}, },
toast: function(msg, type) { toast: function(msg, type) {
var t = document.querySelector('.cs-toast'); var t = document.querySelector('.cs-toast');
if (t) t.remove(); if (t) t.remove();
t = E('div', { 'class': 'cs-toast ' + (type || '') }, msg); t = E('div', { 'class': 'cs-toast ' + type }, msg);
document.body.appendChild(t); document.body.appendChild(t);
setTimeout(function() { if (t.parentNode) t.remove(); }, 4000); setTimeout(function() { t.remove(); }, 4000);
}, },
handleSaveApply: null, handleSaveApply: null,