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>
331 lines
13 KiB
JavaScript
331 lines
13 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require rpc';
|
|
'require ui';
|
|
'require poll';
|
|
'require secubox/kiss-theme';
|
|
|
|
var callStatus = rpc.declare({ object: 'luci.saas-relay', method: 'status', expect: {} });
|
|
var callListServices = rpc.declare({ object: 'luci.saas-relay', method: 'list_services', expect: {} });
|
|
var callServiceEnable = rpc.declare({ object: 'luci.saas-relay', method: 'service_enable', params: ['id'], expect: {} });
|
|
var callServiceDisable = rpc.declare({ object: 'luci.saas-relay', method: 'service_disable', params: ['id'], expect: {} });
|
|
var callServiceAdd = rpc.declare({ object: 'luci.saas-relay', method: 'service_add', params: ['id', 'name', 'domain', 'emoji'], expect: {} });
|
|
var callServiceDelete = rpc.declare({ object: 'luci.saas-relay', method: 'service_delete', params: ['id'], expect: {} });
|
|
var callStart = rpc.declare({ object: 'luci.saas-relay', method: 'start', expect: {} });
|
|
var callStop = rpc.declare({ object: 'luci.saas-relay', method: 'stop', expect: {} });
|
|
var callSetup = rpc.declare({ object: 'luci.saas-relay', method: 'setup', expect: {} });
|
|
var callListCookies = rpc.declare({ object: 'luci.saas-relay', method: 'list_cookies', params: ['service'], expect: {} });
|
|
var callImportCookies = rpc.declare({ object: 'luci.saas-relay', method: 'import_cookies', params: ['service', 'cookies'], expect: {} });
|
|
var callClearCookies = rpc.declare({ object: 'luci.saas-relay', method: 'clear_cookies', params: ['service'], expect: {} });
|
|
var callGetLog = rpc.declare({ object: 'luci.saas-relay', method: 'get_log', params: ['lines'], expect: {} });
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([callStatus(), callListServices()]);
|
|
},
|
|
|
|
renderStats: function(status) {
|
|
var c = KissTheme.colors;
|
|
return [
|
|
KissTheme.stat(status.status === 'running' ? 'UP' : 'DOWN', 'Status', status.status === 'running' ? c.green : c.red),
|
|
KissTheme.stat((status.enabled_services || 0) + '/' + (status.service_count || 0), 'Services', c.blue),
|
|
KissTheme.stat(status.total_cookies || 0, 'Cookies', c.orange),
|
|
KissTheme.stat(status.proxy_port || 8890, 'Port', c.purple)
|
|
];
|
|
},
|
|
|
|
renderServiceCard: function(service) {
|
|
var self = this;
|
|
|
|
return E('div', {
|
|
'style': 'background: var(--kiss-bg2); border-radius: 8px; padding: 16px; border-left: 3px solid ' + (service.enabled ? 'var(--kiss-green)' : 'var(--kiss-muted)') + ';'
|
|
}, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 12px; margin-bottom: 12px;' }, [
|
|
E('span', { 'style': 'font-size: 1.5em;' }, service.emoji || '🔗'),
|
|
E('div', { 'style': 'flex: 1;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 8px;' }, [
|
|
KissTheme.badge(service.enabled ? 'ON' : 'OFF', service.enabled ? 'green' : 'red'),
|
|
E('span', { 'style': 'font-weight: 600;' }, service.name)
|
|
]),
|
|
E('div', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, service.domain),
|
|
E('div', { 'style': 'font-size: 11px; color: var(--kiss-muted);' }, (service.cookie_count || 0) + ' cookies')
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 6px;' }, [
|
|
E('button', {
|
|
'class': service.enabled ? 'kiss-btn kiss-btn-red' : 'kiss-btn kiss-btn-green',
|
|
'style': 'padding: 4px 10px; font-size: 11px;',
|
|
'click': function() { self.toggleService(service); }
|
|
}, service.enabled ? 'Disable' : 'Enable'),
|
|
E('button', {
|
|
'class': 'kiss-btn',
|
|
'style': 'padding: 4px 10px; font-size: 11px;',
|
|
'click': function() { self.manageCookies(service); }
|
|
}, 'Cookies'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'style': 'padding: 4px 10px; font-size: 11px;',
|
|
'click': function() { self.deleteService(service.id); }
|
|
}, 'Del')
|
|
])
|
|
]);
|
|
},
|
|
|
|
toggleService: function(service) {
|
|
var self = this;
|
|
var action = service.enabled ? callServiceDisable : callServiceEnable;
|
|
|
|
action({ id: service.id }).then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', result.message), 'success');
|
|
self.refreshView();
|
|
} else {
|
|
ui.addNotification(null, E('p', result.error || 'Failed'), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
deleteService: function(id) {
|
|
var self = this;
|
|
if (!confirm('Delete service "' + id + '" and its cookies?')) return;
|
|
|
|
callServiceDelete({ id: id }).then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', result.message), 'success');
|
|
self.refreshView();
|
|
}
|
|
});
|
|
},
|
|
|
|
manageCookies: function(service) {
|
|
callListCookies({ service: service.id }).then(function(result) {
|
|
ui.showModal('Cookies for ' + service.name, [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 12px;' }, [
|
|
E('p', { 'style': 'margin: 0; color: var(--kiss-muted);' }, 'Current: ' + (result.count || 0) + ' cookies'),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Import Cookies (JSON)'),
|
|
E('textarea', {
|
|
'id': 'cookie-import-text',
|
|
'style': 'width: 100%; height: 150px; font-family: monospace; font-size: 11px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 8px; border-radius: 6px;',
|
|
'placeholder': '{"cookie_name": "cookie_value", ...}'
|
|
}, result.cookies !== '{}' ? result.cookies : '')
|
|
]),
|
|
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'click': function() {
|
|
var cookies = document.getElementById('cookie-import-text').value;
|
|
try {
|
|
JSON.parse(cookies);
|
|
callImportCookies({ service: service.id, cookies: cookies }).then(function(res) {
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', res.message), 'success');
|
|
ui.hideModal();
|
|
}
|
|
});
|
|
} catch (e) {
|
|
ui.addNotification(null, E('p', 'Invalid JSON'), 'error');
|
|
}
|
|
}
|
|
}, 'Import'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-red',
|
|
'click': function() {
|
|
if (confirm('Clear all cookies for ' + service.name + '?')) {
|
|
callClearCookies({ service: service.id }).then(function(res) {
|
|
ui.addNotification(null, E('p', res.message), 'success');
|
|
ui.hideModal();
|
|
});
|
|
}
|
|
}
|
|
}, 'Clear'),
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Close')
|
|
])
|
|
])
|
|
]);
|
|
});
|
|
},
|
|
|
|
addService: function() {
|
|
var self = this;
|
|
|
|
ui.showModal('Add Service', [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 12px;' }, [
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'ID (lowercase, no spaces)'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-svc-id',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 8px 12px; border-radius: 6px;'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Name'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-svc-name',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 8px 12px; border-radius: 6px;'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Domain'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-svc-domain',
|
|
'placeholder': 'example.com',
|
|
'style': 'background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 8px 12px; border-radius: 6px;'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('label', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Emoji'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'new-svc-emoji',
|
|
'value': '🔗',
|
|
'style': 'width: 60px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); color: var(--kiss-text); padding: 8px 12px; border-radius: 6px;'
|
|
})
|
|
])
|
|
]),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() {
|
|
var id = document.getElementById('new-svc-id').value;
|
|
var name = document.getElementById('new-svc-name').value;
|
|
var domain = document.getElementById('new-svc-domain').value;
|
|
var emoji = document.getElementById('new-svc-emoji').value || '🔗';
|
|
|
|
if (!id || !name || !domain) {
|
|
ui.addNotification(null, E('p', 'All fields required'), 'error');
|
|
return;
|
|
}
|
|
|
|
callServiceAdd({ id: id, name: name, domain: domain, emoji: emoji }).then(function(res) {
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', res.message), 'success');
|
|
ui.hideModal();
|
|
self.refreshView();
|
|
} else {
|
|
ui.addNotification(null, E('p', res.error), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Add')
|
|
])
|
|
]);
|
|
},
|
|
|
|
startRelay: function() {
|
|
var self = this;
|
|
callStart().then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', result.message), 'success');
|
|
self.refreshView();
|
|
} else {
|
|
ui.addNotification(null, E('p', result.error), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
stopRelay: function() {
|
|
var self = this;
|
|
callStop().then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', result.message), 'success');
|
|
self.refreshView();
|
|
} else {
|
|
ui.addNotification(null, E('p', result.error), 'error');
|
|
}
|
|
});
|
|
},
|
|
|
|
showLog: function() {
|
|
callGetLog({ lines: 50 }).then(function(result) {
|
|
var entries = result.entries || [];
|
|
var logContent = entries.length > 0 ? entries.join('\n') : 'No activity logged';
|
|
|
|
ui.showModal('Activity Log', [
|
|
E('pre', {
|
|
'style': 'background: var(--kiss-bg); color: var(--kiss-text); padding: 16px; border-radius: 8px; max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 11px;'
|
|
}, logContent),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; margin-top: 12px;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Close')
|
|
])
|
|
]);
|
|
});
|
|
},
|
|
|
|
refreshView: function() {
|
|
var self = this;
|
|
Promise.all([callStatus(), callListServices()]).then(function(results) {
|
|
var status = results[0];
|
|
var services = results[1].services || [];
|
|
|
|
var statsEl = document.getElementById('relay-stats');
|
|
if (statsEl) {
|
|
statsEl.innerHTML = '';
|
|
self.renderStats(status).forEach(function(el) { statsEl.appendChild(el); });
|
|
}
|
|
|
|
var servicesEl = document.getElementById('services-container');
|
|
if (servicesEl) {
|
|
servicesEl.innerHTML = '';
|
|
if (services.length === 0) {
|
|
servicesEl.appendChild(E('div', { 'style': 'text-align: center; padding: 24px; color: var(--kiss-muted);' },
|
|
'No services configured. Click "Add Service" to get started.'));
|
|
} else {
|
|
services.forEach(function(svc) {
|
|
servicesEl.appendChild(self.renderServiceCard(svc));
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var status = data[0] || {};
|
|
var services = (data[1] && data[1].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;' }, 'SaaS Relay'),
|
|
KissTheme.badge(status.status === 'running' ? 'RUNNING' : 'STOPPED', status.status === 'running' ? 'green' : 'red')
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 8px 0 0 0;' }, 'Shared browser session proxy for SaaS services')
|
|
]),
|
|
|
|
// Stats
|
|
E('div', { 'class': 'kiss-grid kiss-grid-4', 'id': 'relay-stats', 'style': 'margin: 20px 0;' }, this.renderStats(status)),
|
|
|
|
// Actions
|
|
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;' }, [
|
|
E('button', { 'class': 'kiss-btn kiss-btn-green', 'click': function() { self.startRelay(); } }, 'Start'),
|
|
E('button', { 'class': 'kiss-btn kiss-btn-red', 'click': function() { self.stopRelay(); } }, 'Stop'),
|
|
E('button', { 'class': 'kiss-btn kiss-btn-blue', 'click': function() { self.addService(); } }, '+ Add Service'),
|
|
E('button', { 'class': 'kiss-btn', 'click': function() { self.showLog(); } }, 'View Log'),
|
|
E('button', { 'class': 'kiss-btn', 'click': function() { self.refreshView(); } }, 'Refresh')
|
|
]),
|
|
|
|
// Services
|
|
KissTheme.card('Services (' + services.length + ')',
|
|
E('div', { 'id': 'services-container', 'style': 'display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;' },
|
|
services.length > 0 ?
|
|
services.map(function(svc) { return self.renderServiceCard(svc); }) :
|
|
[E('div', { 'style': 'text-align: center; padding: 24px; color: var(--kiss-muted); grid-column: 1 / -1;' },
|
|
'No services configured. Click "Add Service" to get started.')]
|
|
)
|
|
)
|
|
];
|
|
|
|
return KissTheme.wrap(content, 'admin/services/saas-relay/overview');
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|