CyberMind-FR
c74ba2e474
- Rewrite smtp-relay/settings.js with proper KISS theme styling - Rewrite secubox-users/overview.js with proper KISS theme styling - Use KissTheme.wrap() for consistent dark theme rendering - Add stat cards with colored values matching mailserver reference - Add proper form styling with inline CSS variables - Add NZB tools (SABnzbd, NZBHydra) to KISS menu Downloads - Add webtorrent to portal tree Downloads category - Fix portal tree webtorrent pattern KISS = Keep It Simple Sexy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
382 lines
14 KiB
JavaScript
382 lines
14 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require rpc';
|
|
'require poll';
|
|
'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({
|
|
load: function() {
|
|
return Promise.all([
|
|
callStatus(),
|
|
callUsers()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var status = data[0] || {};
|
|
var usersData = data[1] || {};
|
|
var users = usersData.users || [];
|
|
|
|
// Start polling
|
|
poll.add(function() {
|
|
return callUsers().then(function(data) {
|
|
self.updateStats(data);
|
|
});
|
|
}, 30);
|
|
|
|
var totalLogins = 0;
|
|
var totalFailures = 0;
|
|
users.forEach(function(u) {
|
|
totalLogins += (u.login_success || 0);
|
|
totalFailures += (u.login_failure || 0);
|
|
});
|
|
|
|
var content = [
|
|
// Header
|
|
E('div', { 'style': 'margin-bottom: 24px;' }, [
|
|
E('h2', { 'style': 'margin: 0 0 8px 0; display: flex; align-items: center; gap: 12px;' }, [
|
|
E('span', {}, '\uD83D\uDC65'),
|
|
'SecuBox Users'
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 0;' },
|
|
'Unified user management across all SecuBox services')
|
|
]),
|
|
|
|
// Stats Grid
|
|
E('div', { 'class': 'kiss-grid kiss-grid-4', 'style': 'margin-bottom: 20px;' }, [
|
|
this.statCard('Users', users.length, 'var(--kiss-cyan)', 'users'),
|
|
this.statCard('Services', 6, 'var(--kiss-purple)', 'services'),
|
|
this.statCard('Logins', totalLogins, 'var(--kiss-green)', 'logins'),
|
|
this.statCard('Failures', totalFailures,
|
|
totalFailures > 50 ? 'var(--kiss-red)' : 'var(--kiss-yellow)', 'failures')
|
|
]),
|
|
|
|
// Users Card
|
|
E('div', { 'class': 'kiss-card' }, [
|
|
E('div', { 'class': 'kiss-card-title', 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, '\uD83D\uDC65 User Accounts'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'style': 'padding: 6px 12px; font-size: 12px;',
|
|
'click': ui.createHandlerFn(this, this.showAddUserModal)
|
|
}, '+ Add User')
|
|
]),
|
|
this.renderUserTable(users)
|
|
]),
|
|
|
|
// Connected Services Card
|
|
E('div', { 'class': 'kiss-card kiss-panel-blue' }, [
|
|
E('div', { 'class': 'kiss-card-title' }, ['\uD83D\uDD17 Connected Services']),
|
|
E('div', { 'style': 'display: flex; flex-wrap: wrap; gap: 16px;' }, [
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\u2601 Nextcloud'),
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\uD83C\uDFAC PeerTube'),
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\uD83D\uDCAC Jabber'),
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\uD83D\uDCE1 Matrix'),
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\u2709 Email'),
|
|
E('span', { 'class': 'kiss-badge kiss-badge-green' }, '\uD83D\uDCBB Gitea')
|
|
]),
|
|
E('p', { 'style': 'margin-top: 12px; color: var(--kiss-muted); font-size: 12px;' },
|
|
'Users are automatically provisioned across all enabled services.')
|
|
])
|
|
];
|
|
|
|
return KissTheme.wrap(content, 'admin/system/secubox-users');
|
|
},
|
|
|
|
statCard: function(label, value, color, dataAttr) {
|
|
return E('div', { 'class': 'kiss-stat' }, [
|
|
E('div', {
|
|
'class': 'kiss-stat-value',
|
|
'style': 'color: ' + color,
|
|
'data-stat': dataAttr
|
|
}, String(value)),
|
|
E('div', { 'class': 'kiss-stat-label' }, label)
|
|
]);
|
|
},
|
|
|
|
updateStats: function(data) {
|
|
var users = (data.users || []);
|
|
var usersEl = document.querySelector('[data-stat="users"]');
|
|
var loginsEl = document.querySelector('[data-stat="logins"]');
|
|
var failuresEl = document.querySelector('[data-stat="failures"]');
|
|
|
|
if (usersEl) usersEl.textContent = users.length;
|
|
|
|
var totalLogins = 0, totalFailures = 0;
|
|
users.forEach(function(u) {
|
|
totalLogins += (u.login_success || 0);
|
|
totalFailures += (u.login_failure || 0);
|
|
});
|
|
|
|
if (loginsEl) loginsEl.textContent = totalLogins;
|
|
if (failuresEl) {
|
|
failuresEl.textContent = totalFailures;
|
|
failuresEl.style.color = totalFailures > 50 ? 'var(--kiss-red)' : 'var(--kiss-yellow)';
|
|
}
|
|
},
|
|
|
|
renderUserTable: function(users) {
|
|
var self = this;
|
|
|
|
if (!users.length) {
|
|
return E('div', { 'style': 'text-align: center; padding: 40px; color: var(--kiss-muted);' }, [
|
|
E('p', { 'style': 'font-size: 48px; margin: 0;' }, '\uD83D\uDC65'),
|
|
E('p', {}, 'No users configured yet'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': ui.createHandlerFn(this, this.showAddUserModal)
|
|
}, '+ Add First User')
|
|
]);
|
|
}
|
|
|
|
var rows = users.map(function(user) {
|
|
var services = (user.services || []).map(function(s) {
|
|
return E('span', {
|
|
'style': 'display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 4px; background: rgba(0,200,83,0.15); color: var(--kiss-green); font-size: 11px;'
|
|
}, s);
|
|
});
|
|
|
|
var failColor = (user.login_failure || 0) > 10 ? 'var(--kiss-red)' :
|
|
((user.login_failure || 0) > 0 ? 'var(--kiss-yellow)' : 'var(--kiss-green)');
|
|
|
|
return E('tr', {}, [
|
|
E('td', { 'style': 'padding: 12px 8px;' }, [
|
|
E('div', { 'style': 'font-weight: 600;' }, user.username),
|
|
E('div', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, user.email || '')
|
|
]),
|
|
E('td', { 'style': 'padding: 12px 8px; color: var(--kiss-muted);' }, user.last_login || 'Never'),
|
|
E('td', { 'style': 'padding: 12px 8px; text-align: center;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-green); font-weight: 600;' }, String(user.login_success || 0)),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, ' / '),
|
|
E('span', { 'style': 'color: ' + failColor + '; font-weight: 600;' }, String(user.login_failure || 0))
|
|
]),
|
|
E('td', { 'style': 'padding: 12px 8px;' }, services),
|
|
E('td', { 'style': 'padding: 12px 8px; text-align: right;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 4px 10px; font-size: 12px; margin-right: 6px;',
|
|
'click': function() { self.showPasswdModal(user.username); }
|
|
}, '\uD83D\uDD11 Password'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'style': 'padding: 4px 10px; font-size: 12px;',
|
|
'click': function() { self.showDeleteModal(user.username); }
|
|
}, '\uD83D\uDDD1 Delete')
|
|
])
|
|
]);
|
|
});
|
|
|
|
return E('table', { 'style': 'width: 100%; border-collapse: collapse;' }, [
|
|
E('thead', {}, [
|
|
E('tr', { 'style': 'border-bottom: 1px solid var(--kiss-border);' }, [
|
|
E('th', { 'style': 'padding: 8px; text-align: left; color: var(--kiss-muted); font-size: 11px; text-transform: uppercase;' }, 'User'),
|
|
E('th', { 'style': 'padding: 8px; text-align: left; color: var(--kiss-muted); font-size: 11px; text-transform: uppercase;' }, 'Last Login'),
|
|
E('th', { 'style': 'padding: 8px; text-align: center; color: var(--kiss-muted); font-size: 11px; text-transform: uppercase;' }, 'Success / Fail'),
|
|
E('th', { 'style': 'padding: 8px; text-align: left; color: var(--kiss-muted); font-size: 11px; text-transform: uppercase;' }, 'Services'),
|
|
E('th', { 'style': 'padding: 8px; text-align: right; color: var(--kiss-muted); font-size: 11px; text-transform: uppercase;' }, 'Actions')
|
|
])
|
|
]),
|
|
E('tbody', {}, rows)
|
|
]);
|
|
},
|
|
|
|
showAddUserModal: function() {
|
|
var self = this;
|
|
|
|
ui.showModal(_('Add User'), [
|
|
E('div', { 'style': 'min-width: 400px;' }, [
|
|
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
|
E('div', { 'style': 'color: var(--kiss-muted); font-size: 11px; text-transform: uppercase; margin-bottom: 6px;' }, 'Username'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-username',
|
|
'placeholder': 'johndoe',
|
|
'style': 'width: 100%; padding: 8px 12px; border: 1px solid var(--kiss-border); border-radius: 6px; background: var(--kiss-bg2); color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
|
E('div', { 'style': 'color: var(--kiss-muted); font-size: 11px; text-transform: uppercase; margin-bottom: 6px;' }, 'Password'),
|
|
E('input', {
|
|
'type': 'password',
|
|
'id': 'new-password',
|
|
'placeholder': 'Leave empty to auto-generate',
|
|
'style': 'width: 100%; padding: 8px 12px; border: 1px solid var(--kiss-border); border-radius: 6px; background: var(--kiss-bg2); color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
|
E('div', { 'style': 'color: var(--kiss-muted); font-size: 11px; text-transform: uppercase; margin-bottom: 6px;' }, 'Services'),
|
|
E('div', { 'style': 'display: flex; flex-wrap: wrap; gap: 12px;' }, [
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-nextcloud', 'checked': true }), 'Nextcloud'
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-peertube', 'checked': true }), 'PeerTube'
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-jabber', 'checked': true }), 'Jabber'
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-matrix', 'checked': true }), 'Matrix'
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-email', 'checked': true }), 'Email'
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 6px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'svc-gitea', 'checked': true }), 'Gitea'
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 12px; justify-content: flex-end;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() { self.doAddUser(); }
|
|
}, '\u2714 Create User')
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
doAddUser: function() {
|
|
var username = document.getElementById('new-username').value.trim();
|
|
var password = document.getElementById('new-password').value;
|
|
|
|
if (!username) {
|
|
ui.addNotification(null, E('p', _('Username required')), 'warning');
|
|
return;
|
|
}
|
|
|
|
var services = [];
|
|
['nextcloud', 'peertube', 'jabber', 'matrix', 'email', 'gitea'].forEach(function(s) {
|
|
if (document.getElementById('svc-' + s).checked) services.push(s);
|
|
});
|
|
|
|
ui.hideModal();
|
|
|
|
callAddUser(username, password, services.join(',')).then(function(res) {
|
|
if (res.success) {
|
|
var msg = 'User ' + username + ' created';
|
|
if (res.password) msg += '. Password: ' + res.password;
|
|
ui.addNotification(null, E('p', msg), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', res.error || 'Failed'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
showPasswdModal: function(username) {
|
|
var self = this;
|
|
|
|
ui.showModal(_('Change Password'), [
|
|
E('div', { 'style': 'min-width: 350px;' }, [
|
|
E('p', {}, 'Change password for: ' + E('strong', {}, username)),
|
|
E('div', { 'style': 'margin: 16px 0;' }, [
|
|
E('div', { 'style': 'color: var(--kiss-muted); font-size: 11px; text-transform: uppercase; margin-bottom: 6px;' }, 'New Password'),
|
|
E('input', {
|
|
'type': 'password',
|
|
'id': 'change-password',
|
|
'placeholder': 'Leave empty to auto-generate',
|
|
'style': 'width: 100%; padding: 8px 12px; border: 1px solid var(--kiss-border); border-radius: 6px; background: var(--kiss-bg2); color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 12px; justify-content: flex-end;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'click': function() { self.doPasswd(username); }
|
|
}, '\uD83D\uDD11 Change')
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
doPasswd: function(username) {
|
|
var password = document.getElementById('change-password').value;
|
|
ui.hideModal();
|
|
|
|
callPasswd(username, password).then(function(res) {
|
|
if (res.success) {
|
|
var msg = 'Password changed for ' + username;
|
|
if (res.password) msg += '. New: ' + res.password;
|
|
ui.addNotification(null, E('p', msg), 'info');
|
|
} else {
|
|
ui.addNotification(null, E('p', res.error || 'Failed'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
showDeleteModal: function(username) {
|
|
var self = this;
|
|
|
|
ui.showModal(_('Delete User'), [
|
|
E('div', { 'style': 'min-width: 300px;' }, [
|
|
E('p', { 'style': 'color: var(--kiss-red);' },
|
|
'Delete user: ' + E('strong', {}, username) + '?'),
|
|
E('p', { 'style': 'color: var(--kiss-muted); font-size: 13px;' },
|
|
'This removes the user from all services.'),
|
|
E('div', { 'style': 'display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'click': function() { self.doDelete(username); }
|
|
}, '\uD83D\uDDD1 Delete')
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
doDelete: function(username) {
|
|
ui.hideModal();
|
|
|
|
callDeleteUser(username).then(function(res) {
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', 'User ' + username + ' deleted'), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', res.error || 'Failed'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|