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>
344 lines
12 KiB
JavaScript
344 lines
12 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require form';
|
|
'require ui';
|
|
'require ksm-manager/api as KSM';
|
|
'require secubox/kiss-theme';
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
KSM.listKeys()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var keys = data[0].keys || [];
|
|
|
|
var m, s, o;
|
|
|
|
m = new form.JSONMap({}, _('Key Management'), _('Manage cryptographic keys with support for software and hardware storage.'));
|
|
|
|
// Generate Key Section
|
|
s = m.section(form.TypedSection, 'generate', _('Generate New Key'));
|
|
s.anonymous = true;
|
|
s.addremove = false;
|
|
|
|
o = s.option(form.ListValue, 'key_type', _('Key Type'));
|
|
o.value('rsa', _('RSA'));
|
|
o.value('ecdsa', _('ECDSA'));
|
|
o.value('ed25519', _('Ed25519'));
|
|
o.default = 'rsa';
|
|
|
|
o = s.option(form.ListValue, 'key_size', _('Key Size'));
|
|
o.value('2048', '2048 bits');
|
|
o.value('3072', '3072 bits');
|
|
o.value('4096', '4096 bits (Recommended)');
|
|
o.value('256', '256 bits (ECDSA)');
|
|
o.value('384', '384 bits (ECDSA)');
|
|
o.value('521', '521 bits (ECDSA)');
|
|
o.default = '4096';
|
|
o.depends('key_type', 'rsa');
|
|
|
|
o = s.option(form.Value, 'label', _('Label'));
|
|
o.placeholder = 'My SSL Certificate Key';
|
|
o.rmempty = false;
|
|
|
|
o = s.option(form.Value, 'passphrase', _('Passphrase'));
|
|
o.password = true;
|
|
o.placeholder = _('Optional passphrase for key protection');
|
|
|
|
o = s.option(form.Button, '_generate', _('Generate Key'));
|
|
o.inputtitle = _('Generate');
|
|
o.onclick = L.bind(this.handleGenerateKey, this);
|
|
|
|
// Import Key Section
|
|
s = m.section(form.TypedSection, 'import', _('Import Existing Key'));
|
|
s.anonymous = true;
|
|
s.addremove = false;
|
|
|
|
o = s.option(form.Value, 'import_label', _('Label'));
|
|
o.placeholder = 'Imported Key';
|
|
o.rmempty = false;
|
|
|
|
o = s.option(form.ListValue, 'format', _('Format'));
|
|
o.value('pem', 'PEM');
|
|
o.value('der', 'DER');
|
|
o.value('p12', 'PKCS#12');
|
|
o.default = 'pem';
|
|
|
|
o = s.option(form.TextValue, 'key_data', _('Key Data'));
|
|
o.rows = 10;
|
|
o.placeholder = '-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----';
|
|
o.rmempty = false;
|
|
|
|
o = s.option(form.Value, 'import_passphrase', _('Passphrase'));
|
|
o.password = true;
|
|
o.placeholder = _('Passphrase if key is encrypted');
|
|
|
|
o = s.option(form.Button, '_import', _('Import Key'));
|
|
o.inputtitle = _('Import');
|
|
o.onclick = L.bind(this.handleImportKey, this);
|
|
|
|
// Existing Keys Table
|
|
var keysTable = KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Existing Keys'),
|
|
KissTheme.badge(keys.length + ' keys', 'blue')
|
|
]),
|
|
this.renderKeysTable(keys)
|
|
);
|
|
|
|
return KissTheme.wrap([
|
|
m.render(),
|
|
keysTable
|
|
], 'admin/secubox/ksm/keys');
|
|
},
|
|
|
|
renderKeysTable: function(keys) {
|
|
if (!keys || keys.length === 0) {
|
|
return E('p', { 'style': 'color: var(--kiss-muted); text-align: center; padding: 20px;' },
|
|
'No keys found. Generate or import a key to get started.');
|
|
}
|
|
|
|
return E('table', { 'class': 'kiss-table' }, [
|
|
E('thead', {}, E('tr', {}, [
|
|
E('th', { 'style': 'padding: 10px 12px;' }, _('Label')),
|
|
E('th', { 'style': 'padding: 10px 12px;' }, _('Type')),
|
|
E('th', { 'style': 'padding: 10px 12px;' }, _('Size')),
|
|
E('th', { 'style': 'padding: 10px 12px;' }, _('Storage')),
|
|
E('th', { 'style': 'padding: 10px 12px;' }, _('Created')),
|
|
E('th', { 'style': 'padding: 10px 12px; text-align: center;' }, _('Actions'))
|
|
])),
|
|
E('tbody', {}, keys.map(L.bind(function(key) {
|
|
return E('tr', {}, [
|
|
E('td', { 'style': 'padding: 10px 12px;' }, key.label || 'Unnamed'),
|
|
E('td', { 'style': 'padding: 10px 12px;' }, KSM.formatKeyType(key.type)),
|
|
E('td', { 'style': 'padding: 10px 12px;' }, key.size ? key.size + ' bits' : 'N/A'),
|
|
E('td', { 'style': 'padding: 10px 12px;' }, KSM.formatStorage(key.storage || 'software')),
|
|
E('td', { 'style': 'padding: 10px 12px; font-family: monospace; font-size: 12px;' }, KSM.formatTimestamp(key.created)),
|
|
E('td', { 'style': 'padding: 10px 12px; text-align: center;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'style': 'padding: 4px 10px; font-size: 12px; margin-right: 6px;',
|
|
'click': L.bind(function() { this.handleViewKey(key.id); }, this)
|
|
}, 'View'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-cyan',
|
|
'style': 'padding: 4px 10px; font-size: 12px; margin-right: 6px;',
|
|
'click': L.bind(function() { this.handleExportKey(key.id); }, this)
|
|
}, 'Export'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'style': 'padding: 4px 10px; font-size: 12px;',
|
|
'click': L.bind(function() { this.handleDeleteKey(key.id, key.label); }, this)
|
|
}, 'Delete')
|
|
])
|
|
]);
|
|
}, this)))
|
|
]);
|
|
},
|
|
|
|
handleGenerateKey: function(ev) {
|
|
var formData = {};
|
|
var inputs = ev.target.closest('.cbi-section').querySelectorAll('input, select');
|
|
|
|
inputs.forEach(function(input) {
|
|
if (input.name) {
|
|
formData[input.name] = input.value;
|
|
}
|
|
});
|
|
|
|
var keyType = formData['cbid.generate.cfg.key_type'] || 'rsa';
|
|
var keySize = parseInt(formData['cbid.generate.cfg.key_size'] || '4096');
|
|
var label = formData['cbid.generate.cfg.label'];
|
|
var passphrase = formData['cbid.generate.cfg.passphrase'] || '';
|
|
|
|
if (!label) {
|
|
ui.addNotification(null, E('p', _('Please provide a label for the key')), 'error');
|
|
return;
|
|
}
|
|
|
|
ui.showModal(_('Generating Key'), [
|
|
E('p', { 'class': 'spinning' }, _('Please wait while the key is being generated...'))
|
|
]);
|
|
|
|
KSM.generateKey(keyType, keySize, label, passphrase).then(function(result) {
|
|
ui.hideModal();
|
|
if (result && result.success) {
|
|
ui.addNotification(null, E('p', _('Key generated successfully: %s').format(result.id)), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', _('Failed to generate key: %s').format(result.error || 'Unknown error')), 'error');
|
|
}
|
|
}).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', _('Error generating key: %s').format(err.message)), 'error');
|
|
});
|
|
},
|
|
|
|
handleImportKey: function(ev) {
|
|
var formData = {};
|
|
var inputs = ev.target.closest('.cbi-section').querySelectorAll('input, select, textarea');
|
|
|
|
inputs.forEach(function(input) {
|
|
if (input.name) {
|
|
formData[input.name] = input.value;
|
|
}
|
|
});
|
|
|
|
var label = formData['cbid.import.cfg.import_label'];
|
|
var format = formData['cbid.import.cfg.format'] || 'pem';
|
|
var keyData = formData['cbid.import.cfg.key_data'];
|
|
var passphrase = formData['cbid.import.cfg.import_passphrase'] || '';
|
|
|
|
if (!label || !keyData) {
|
|
ui.addNotification(null, E('p', _('Please provide a label and key data')), 'error');
|
|
return;
|
|
}
|
|
|
|
ui.showModal(_('Importing Key'), [
|
|
E('p', { 'class': 'spinning' }, _('Please wait...'))
|
|
]);
|
|
|
|
KSM.importKey(label, keyData, format, passphrase).then(function(result) {
|
|
ui.hideModal();
|
|
if (result && result.success) {
|
|
ui.addNotification(null, E('p', _('Key imported successfully: %s').format(result.id)), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', _('Failed to import key: %s').format(result.error || 'Unknown error')), 'error');
|
|
}
|
|
}).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', _('Error importing key: %s').format(err.message)), 'error');
|
|
});
|
|
},
|
|
|
|
handleViewKey: function(keyId) {
|
|
KSM.exportKey(keyId, 'pem', false, '').then(function(result) {
|
|
if (result && result.success) {
|
|
ui.showModal(_('Public Key'), [
|
|
E('p', { 'style': 'color: var(--kiss-muted);' }, _('Public key for: %s').format(keyId)),
|
|
E('pre', {
|
|
'style': 'white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto; ' +
|
|
'background: var(--kiss-bg); padding: 16px; border-radius: 8px; font-family: monospace; font-size: 12px;'
|
|
}, result.key_data),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-cyan',
|
|
'click': function() {
|
|
navigator.clipboard.writeText(result.key_data);
|
|
ui.addNotification(null, E('p', _('Public key copied to clipboard')), 'info');
|
|
}
|
|
}, _('Copy to Clipboard')),
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'background: var(--kiss-bg2); border: 1px solid var(--kiss-line);',
|
|
'click': ui.hideModal
|
|
}, _('Close'))
|
|
])
|
|
]);
|
|
} else {
|
|
ui.addNotification(null, E('p', _('Failed to retrieve key')), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
handleExportKey: function(keyId) {
|
|
ui.showModal(_('Export Key'), [
|
|
E('p', { 'style': 'color: var(--kiss-muted);' }, _('Select export options for key: %s').format(keyId)),
|
|
E('div', { 'style': 'margin: 16px 0;' }, [
|
|
E('label', { 'style': 'display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;' }, [
|
|
E('span', { 'style': 'font-weight: 500; color: var(--kiss-muted);' }, _('Format')),
|
|
E('select', {
|
|
'id': 'export-format',
|
|
'style': 'padding: 10px 14px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); ' +
|
|
'border-radius: 6px; color: var(--kiss-text);'
|
|
}, [
|
|
E('option', { 'value': 'pem' }, 'PEM'),
|
|
E('option', { 'value': 'der' }, 'DER')
|
|
])
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 8px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'export-include-private' }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, _('Include private key'))
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() {
|
|
var format = document.getElementById('export-format').value;
|
|
var includePrivate = document.getElementById('export-include-private').checked;
|
|
|
|
KSM.exportKey(keyId, format, includePrivate, '').then(function(result) {
|
|
if (result && result.success) {
|
|
var blob = new Blob([result.key_data], { type: 'text/plain' });
|
|
var url = window.URL.createObjectURL(blob);
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = keyId + '.' + format;
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', _('Key exported successfully')), 'info');
|
|
} else {
|
|
ui.addNotification(null, E('p', _('Failed to export key')), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, _('Export')),
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'background: var(--kiss-bg2); border: 1px solid var(--kiss-line);',
|
|
'click': ui.hideModal
|
|
}, _('Cancel'))
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleDeleteKey: function(keyId, label) {
|
|
ui.showModal(_('Confirm Deletion'), [
|
|
E('p', { 'style': 'color: var(--kiss-text);' }, _('Are you sure you want to delete the key: %s?').format(label || keyId)),
|
|
E('p', { 'style': 'color: var(--kiss-red);' }, _('This action cannot be undone.')),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 8px; margin: 16px 0;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'delete-secure-erase' }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, _('Secure erase (shred)'))
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'click': function() {
|
|
var secureErase = document.getElementById('delete-secure-erase').checked;
|
|
|
|
ui.hideModal();
|
|
ui.showModal(_('Deleting Key'), [
|
|
E('p', { 'class': 'spinning' }, _('Please wait...'))
|
|
]);
|
|
|
|
KSM.deleteKey(keyId, secureErase).then(function(result) {
|
|
ui.hideModal();
|
|
if (result && result.success) {
|
|
ui.addNotification(null, E('p', _('Key deleted successfully')), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', _('Failed to delete key')), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, _('Delete')),
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'background: var(--kiss-bg2); border: 1px solid var(--kiss-line);',
|
|
'click': ui.hideModal
|
|
}, _('Cancel'))
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|