CyberMind-FR
1bbd345cee
Convert 90+ LuCI view files from legacy cbi-button-* classes to KissTheme kiss-btn-* classes for consistent dark theme styling. Pattern conversions applied: - cbi-button-positive → kiss-btn-green - cbi-button-negative/remove → kiss-btn-red - cbi-button-apply → kiss-btn-cyan - cbi-button-action → kiss-btn-blue - cbi-button (plain) → kiss-btn Also replaced hardcoded colors (#080, #c00, #888, etc.) with CSS variables (--kiss-green, --kiss-red, --kiss-muted, etc.) for proper dark theme compatibility. Apps updated include: ai-gateway, auth-guardian, bandwidth-manager, cloner, config-advisor, crowdsec-dashboard, dns-provider, exposure, glances, haproxy, hexojs, iot-guard, jellyfin, ksm-manager, mac-guardian, magicmirror2, master-link, meshname-dns, metablogizer, metabolizer, mqtt-bridge, netdata-dashboard, picobrew, routes-status, secubox-admin, secubox-mirror, secubox-p2p, secubox-security-threats, service-registry, simplex, streamlit, system-hub, tor-shield, traffic-shaper, vhost-manager, vortex-dns, vortex-firewall, webradio, wireguard-dashboard, zigbee2mqtt, zkp, and more. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
343 lines
13 KiB
JavaScript
343 lines
13 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require rpc';
|
|
'require secubox/kiss-theme';
|
|
|
|
var callStatus = rpc.declare({
|
|
object: 'luci.secubox-users',
|
|
method: 'status',
|
|
expect: { }
|
|
});
|
|
|
|
var callUsers = rpc.declare({
|
|
object: 'luci.secubox-users',
|
|
method: 'users',
|
|
expect: { }
|
|
});
|
|
|
|
var callAddUser = rpc.declare({
|
|
object: 'luci.secubox-users',
|
|
method: 'add',
|
|
params: ['username', 'password', 'services'],
|
|
expect: { }
|
|
});
|
|
|
|
var callDeleteUser = rpc.declare({
|
|
object: 'luci.secubox-users',
|
|
method: 'delete',
|
|
params: ['username'],
|
|
expect: { }
|
|
});
|
|
|
|
var callPasswd = rpc.declare({
|
|
object: 'luci.secubox-users',
|
|
method: 'passwd',
|
|
params: ['username', 'password'],
|
|
expect: { }
|
|
});
|
|
|
|
return view.extend({
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null,
|
|
|
|
load: function() {
|
|
return Promise.all([
|
|
callStatus(),
|
|
callUsers()
|
|
]);
|
|
},
|
|
|
|
renderStats: function(status, userCount) {
|
|
var c = KissTheme.colors;
|
|
var services = status.services || {};
|
|
var activeServices = Object.keys(services).filter(function(s) { return services[s]; }).length;
|
|
return [
|
|
KissTheme.stat(userCount, 'Users', c.blue),
|
|
KissTheme.stat(activeServices, 'Services', c.green),
|
|
KissTheme.stat(status.domain || 'N/A', 'Domain', c.purple)
|
|
];
|
|
},
|
|
|
|
renderServices: function(services) {
|
|
var serviceNames = ['nextcloud', 'peertube', 'matrix', 'jabber', 'email', 'gitea', 'jellyfin'];
|
|
var badges = serviceNames.map(function(name) {
|
|
var running = services[name];
|
|
return KissTheme.badge(name.charAt(0).toUpperCase() + name.slice(1), running ? 'green' : 'muted');
|
|
});
|
|
return E('div', { 'style': 'display: flex; flex-wrap: wrap; gap: 8px;' }, badges);
|
|
},
|
|
|
|
renderUserRow: function(user) {
|
|
var self = this;
|
|
var services = (user.services || []).map(function(s) {
|
|
return E('span', {
|
|
'style': 'display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 4px; background: var(--kiss-bg); color: var(--kiss-cyan); font-size: 11px;'
|
|
}, s);
|
|
});
|
|
|
|
var lastLogin = user.last_login || 'never';
|
|
var loginSuccess = user.login_success || 0;
|
|
var loginFailure = user.login_failure || 0;
|
|
var failColor = loginFailure > 10 ? 'var(--kiss-red)' : (loginFailure > 0 ? 'var(--kiss-orange)' : 'var(--kiss-green)');
|
|
|
|
return E('tr', {}, [
|
|
E('td', { 'style': 'font-weight: 600;' }, user.username),
|
|
E('td', { 'style': 'color: var(--kiss-muted);' }, user.email),
|
|
E('td', { 'style': 'color: var(--kiss-muted);' }, lastLogin),
|
|
E('td', { 'style': 'text-align: center;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-green); font-weight: 600;' }, String(loginSuccess)),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, ' / '),
|
|
E('span', { 'style': 'color: ' + failColor + '; font-weight: 600;' }, String(loginFailure))
|
|
]),
|
|
E('td', {}, services),
|
|
E('td', { 'style': 'width: 180px;' }, [
|
|
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 4px 10px; font-size: 11px;',
|
|
'click': function() { self.handlePasswd(user.username); }
|
|
}, 'Password'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'style': 'padding: 4px 10px; font-size: 11px;',
|
|
'click': function() { self.handleDelete(user.username); }
|
|
}, 'Delete')
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
renderUsersTable: function(users) {
|
|
var self = this;
|
|
if (!users || users.length === 0) {
|
|
return E('p', { 'style': 'color: var(--kiss-muted);' }, 'No users configured. Click "Add User" to create one.');
|
|
}
|
|
|
|
var rows = users.map(function(u) { return self.renderUserRow(u); });
|
|
|
|
return E('table', { 'class': 'kiss-table' }, [
|
|
E('thead', {}, [
|
|
E('tr', {}, [
|
|
E('th', {}, 'Username'),
|
|
E('th', {}, 'Email'),
|
|
E('th', {}, 'Last Login'),
|
|
E('th', { 'style': 'text-align: center;' }, 'OK / Fail'),
|
|
E('th', {}, 'Services'),
|
|
E('th', {}, 'Actions')
|
|
])
|
|
]),
|
|
E('tbody', {}, rows)
|
|
]);
|
|
},
|
|
|
|
handleAdd: function() {
|
|
var self = this;
|
|
|
|
ui.showModal('Add User', [
|
|
E('div', { 'style': 'padding: 16px;' }, [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 16px;' }, [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Username'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-username',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 10px 12px; border-radius: 6px;'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Password'),
|
|
E('input', {
|
|
'type': 'password',
|
|
'id': 'new-password',
|
|
'placeholder': 'Leave empty to generate',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 10px 12px; border-radius: 6px;'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Services'),
|
|
E('div', { 'style': 'display: flex; flex-wrap: wrap; gap: 12px;' }, [
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-nextcloud', 'checked': true }), 'Nextcloud']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-peertube', 'checked': true }), 'PeerTube']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-jabber', 'checked': true }), 'Jabber']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-matrix', 'checked': true }), 'Matrix']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-email', 'checked': true }), 'Email']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-gitea', 'checked': true }), 'Gitea']),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [E('input', { 'type': 'checkbox', 'id': 'svc-jellyfin', 'checked': true }), 'Jellyfin'])
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; padding: 16px; border-top: 1px solid var(--kiss-line);' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() {
|
|
var username = document.getElementById('new-username').value;
|
|
var password = document.getElementById('new-password').value;
|
|
var services = [];
|
|
if (document.getElementById('svc-nextcloud').checked) services.push('nextcloud');
|
|
if (document.getElementById('svc-peertube').checked) services.push('peertube');
|
|
if (document.getElementById('svc-jabber').checked) services.push('jabber');
|
|
if (document.getElementById('svc-matrix').checked) services.push('matrix');
|
|
if (document.getElementById('svc-email').checked) services.push('email');
|
|
if (document.getElementById('svc-gitea').checked) services.push('gitea');
|
|
if (document.getElementById('svc-jellyfin').checked) services.push('jellyfin');
|
|
|
|
if (!username) {
|
|
ui.addNotification(null, E('p', 'Username required'), 'error');
|
|
return;
|
|
}
|
|
|
|
ui.hideModal();
|
|
ui.showModal('Creating User...', [
|
|
E('p', { 'class': 'spinning' }, 'Please wait...')
|
|
]);
|
|
|
|
callAddUser(username, password, services.join(',')).then(function(res) {
|
|
ui.hideModal();
|
|
if (res && res.success) {
|
|
ui.showModal('User Created', [
|
|
E('div', { 'style': 'padding: 20px;' }, [
|
|
E('p', {}, 'User created successfully!'),
|
|
E('div', { 'style': 'margin: 16px 0; padding: 12px; background: var(--kiss-bg); border-radius: 6px;' }, [
|
|
E('div', { 'style': 'display: flex; gap: 12px; margin-bottom: 8px;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Username:'),
|
|
E('span', { 'style': 'font-weight: 600;' }, res.username)
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 12px; margin-bottom: 8px;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Password:'),
|
|
E('span', { 'style': 'font-family: monospace; background: var(--kiss-bg2); padding: 4px 8px; border-radius: 4px;' }, res.password)
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 12px;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Email:'),
|
|
E('span', {}, res.email)
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; padding: 16px;' }, [
|
|
E('button', { 'class': 'kiss-btn kiss-btn-green', 'click': function() { ui.hideModal(); location.reload(); } }, 'OK')
|
|
])
|
|
]);
|
|
} else {
|
|
ui.addNotification(null, E('p', 'Error: ' + (res.error || 'Unknown error')), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Create User')
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleDelete: function(username) {
|
|
if (!confirm('Delete user "' + username + '" from all services?')) {
|
|
return;
|
|
}
|
|
|
|
ui.showModal('Deleting...', [
|
|
E('p', { 'class': 'spinning' }, 'Please wait...')
|
|
]);
|
|
|
|
callDeleteUser(username).then(function(res) {
|
|
ui.hideModal();
|
|
if (res && res.success) {
|
|
ui.addNotification(null, E('p', 'User deleted'), 'success');
|
|
location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', 'Error: ' + (res.error || 'Unknown error')), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
handlePasswd: function(username) {
|
|
ui.showModal('Change Password', [
|
|
E('div', { 'style': 'padding: 16px;' }, [
|
|
E('p', {}, 'Change password for: ' + username),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px; margin-top: 16px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'New Password'),
|
|
E('input', {
|
|
'type': 'password',
|
|
'id': 'new-passwd',
|
|
'placeholder': 'Leave empty to generate',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 10px 12px; border-radius: 6px;'
|
|
})
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; padding: 16px; border-top: 1px solid var(--kiss-line);' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'click': function() {
|
|
var password = document.getElementById('new-passwd').value;
|
|
ui.hideModal();
|
|
ui.showModal('Updating...', [
|
|
E('p', { 'class': 'spinning' }, 'Please wait...')
|
|
]);
|
|
|
|
callPasswd(username, password).then(function(res) {
|
|
ui.hideModal();
|
|
if (res && res.success) {
|
|
ui.showModal('Password Updated', [
|
|
E('div', { 'style': 'padding: 20px;' }, [
|
|
E('p', {}, 'Password updated for all services!'),
|
|
E('p', { 'style': 'font-family: monospace; background: var(--kiss-bg); padding: 12px; margin: 12px 0; border-radius: 6px;' }, res.password)
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; padding: 16px;' }, [
|
|
E('button', { 'class': 'kiss-btn kiss-btn-green', 'click': ui.hideModal }, 'OK')
|
|
])
|
|
]);
|
|
} else {
|
|
ui.addNotification(null, E('p', 'Error updating password'), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Update')
|
|
])
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var status = data[0] || {};
|
|
var usersData = data[1] || {};
|
|
var users = usersData.users || [];
|
|
var services = status.services || {};
|
|
|
|
var content = [
|
|
// Header
|
|
E('div', { 'style': 'margin-bottom: 24px;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 16px;' }, [
|
|
E('h2', { 'style': 'font-size: 24px; font-weight: 700; margin: 0;' }, 'SecuBox User Management'),
|
|
KissTheme.badge(users.length + ' Users', 'blue')
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 8px 0 0 0;' },
|
|
'Manage unified user accounts across all SecuBox services')
|
|
]),
|
|
|
|
// Stats
|
|
E('div', { 'class': 'kiss-grid kiss-grid-3', 'style': 'margin: 20px 0;' },
|
|
this.renderStats(status, users.length)),
|
|
|
|
// Services
|
|
KissTheme.card('Available Services', this.renderServices(services)),
|
|
|
|
// Users
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Users'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'style': 'padding: 6px 14px;',
|
|
'click': function() { self.handleAdd(); }
|
|
}, 'Add User')
|
|
]),
|
|
this.renderUsersTable(users)
|
|
)
|
|
];
|
|
|
|
return KissTheme.wrap(content, 'admin/system/secubox-users/overview');
|
|
}
|
|
});
|