CyberMind-FR
66aa12d6b6
Add unified SecuBox header navigation to all 10 System Hub views for consistent portal integration when accessed from SecuBox Portal: - overview.js, health.js, services.js, diagnostics.js - logs.js, backup.js, components.js, settings.js - dev-status.js, remote.js Pattern: Wrap view content with secubox-page-wrapper and prepend SbHeader.render() to hide LuCI sidebar when in portal context. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
478 lines
17 KiB
JavaScript
478 lines
17 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require ui';
|
|
'require secubox-theme/theme as Theme';
|
|
'require system-hub/api as API';
|
|
'require system-hub/theme-assets as ThemeAssets';
|
|
'require system-hub/nav as HubNav';
|
|
'require secubox-portal/header as SbHeader';
|
|
|
|
var shLang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
|
|
(document.documentElement && document.documentElement.getAttribute('lang')) ||
|
|
(navigator.language ? navigator.language.split('-')[0] : 'en');
|
|
Theme.init({ language: shLang });
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
API.remoteStatus(),
|
|
API.ttydStatus()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var remote = data[0] || {};
|
|
var ttyd = data[1] || {};
|
|
this.remote = remote;
|
|
this.ttyd = ttyd;
|
|
|
|
var view = E('div', { 'class': 'system-hub-dashboard' }, [
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
|
ThemeAssets.stylesheet('common.css'),
|
|
ThemeAssets.stylesheet('dashboard.css'),
|
|
HubNav.renderTabs('remote'),
|
|
|
|
// rtty Remote Access Section
|
|
E('div', { 'class': 'sh-card sh-remote-card' }, [
|
|
E('div', { 'class': 'sh-card-header' }, [
|
|
E('div', { 'class': 'sh-card-title' }, [ E('span', { 'class': 'sh-card-title-icon' }, '🔗'), _('rtty - Remote Terminal') ]),
|
|
E('div', { 'class': 'sh-card-badge', 'id': 'rtty-status-badge' }, remote.running ? _('Connected') : _('Disconnected'))
|
|
]),
|
|
E('div', { 'class': 'sh-card-body' }, [
|
|
// Device ID
|
|
E('div', { 'class': 'sh-remote-id' }, [
|
|
E('div', { 'class': 'sh-remote-id-icon' }, '🆔'),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'sh-remote-id-value', 'id': 'rtty-device-id' }, remote.id || _('Not configured')),
|
|
E('div', { 'class': 'sh-remote-id-label' }, _('Device ID - Share this with support'))
|
|
])
|
|
]),
|
|
|
|
// Configuration fields
|
|
E('div', { 'class': 'sh-form-grid', 'style': 'margin-top: 16px;' }, [
|
|
// Server Host
|
|
E('div', { 'class': 'sh-form-group' }, [
|
|
E('label', { 'class': 'sh-form-label' }, _('Server Host')),
|
|
E('input', {
|
|
'type': 'text',
|
|
'class': 'sh-form-input',
|
|
'id': 'rtty-host',
|
|
'placeholder': 'rttys.example.com',
|
|
'value': remote.host || ''
|
|
})
|
|
]),
|
|
// Server Port
|
|
E('div', { 'class': 'sh-form-group' }, [
|
|
E('label', { 'class': 'sh-form-label' }, _('Server Port')),
|
|
E('input', {
|
|
'type': 'number',
|
|
'class': 'sh-form-input',
|
|
'id': 'rtty-port',
|
|
'placeholder': '5912',
|
|
'value': remote.port || 5912
|
|
})
|
|
]),
|
|
// Token
|
|
E('div', { 'class': 'sh-form-group' }, [
|
|
E('label', { 'class': 'sh-form-label' }, _('Access Token')),
|
|
E('input', {
|
|
'type': 'password',
|
|
'class': 'sh-form-input',
|
|
'id': 'rtty-token',
|
|
'placeholder': _('Optional authentication token'),
|
|
'value': remote.token || ''
|
|
})
|
|
]),
|
|
// Device Description
|
|
E('div', { 'class': 'sh-form-group' }, [
|
|
E('label', { 'class': 'sh-form-label' }, _('Description')),
|
|
E('input', {
|
|
'type': 'text',
|
|
'class': 'sh-form-input',
|
|
'id': 'rtty-description',
|
|
'placeholder': _('Device description'),
|
|
'value': remote.description || ''
|
|
})
|
|
])
|
|
]),
|
|
|
|
// SSL Toggle
|
|
this.renderToggle('🔒', _('Use SSL/TLS'), _('Encrypt connection to relay server'), remote.ssl, 'rtty-ssl'),
|
|
|
|
// Status
|
|
!remote.installed ? E('div', { 'style': 'padding: 16px; background: rgba(245, 158, 11, 0.1); border-radius: 10px; border-left: 3px solid #f59e0b; margin-top: 16px;' }, [
|
|
E('span', { 'style': 'font-size: 20px; margin-right: 12px;' }, '⚠️'),
|
|
E('span', {}, _('rtty is not installed.')),
|
|
E('a', { 'href': '#', 'style': 'color: #6366f1; margin-left: 8px;', 'click': L.bind(this.installRtty, this) }, _('Install now'))
|
|
]) : E('div', { 'style': 'padding: 10px; background: rgba(34,197,94,0.12); border-radius: 10px; margin-top: 16px;' }, [
|
|
E('span', { 'style': 'font-size: 20px; margin-right: 12px;' }, remote.running ? '🟢' : '🟠'),
|
|
E('span', {}, remote.running ? _('Connected to relay server') : _('Installed but not connected'))
|
|
]),
|
|
|
|
// Actions
|
|
E('div', { 'class': 'sh-btn-group', 'style': 'margin-top: 16px;' }, [
|
|
E('button', {
|
|
'class': 'sh-btn sh-btn-primary',
|
|
'id': 'rtty-save-btn',
|
|
'click': L.bind(this.saveRttySettings, this)
|
|
}, [ '💾 ', _('Save Settings') ]),
|
|
E('button', {
|
|
'class': 'sh-btn',
|
|
'id': 'rtty-toggle-btn',
|
|
'click': L.bind(this.toggleRttyService, this)
|
|
}, [ remote.running ? '⏹️ ' + _('Disconnect') : '▶️ ' + _('Connect') ]),
|
|
E('button', {
|
|
'class': 'sh-btn',
|
|
'click': L.bind(this.showCredentials, this)
|
|
}, [ '🔑 ', _('Show Credentials') ])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// SSH Section
|
|
E('div', { 'class': 'sh-card' }, [
|
|
E('div', { 'class': 'sh-card-header' }, [
|
|
E('div', { 'class': 'sh-card-title' }, [ E('span', { 'class': 'sh-card-title-icon' }, '🔐'), _('SSH Access') ])
|
|
]),
|
|
E('div', { 'class': 'sh-card-body' }, [
|
|
E('div', { 'class': 'sh-sysinfo-grid' }, [
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Status')),
|
|
E('span', { 'class': 'sh-sysinfo-value', 'style': 'color: #22c55e;' }, _('Active'))
|
|
]),
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Port')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, '22')
|
|
])
|
|
]),
|
|
E('div', { 'style': 'margin-top: 16px; padding: 14px; background: #0a0a0f; border-radius: 8px; font-family: monospace; font-size: 12px; color: #a0a0b0;' }, [
|
|
'ssh root@', E('span', { 'style': 'color: #6366f1;' }, window.location.hostname)
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Web Console (ttyd) Section
|
|
E('div', { 'class': 'sh-card sh-webconsole-card' }, [
|
|
E('div', { 'class': 'sh-card-header' }, [
|
|
E('div', { 'class': 'sh-card-title' }, [ E('span', { 'class': 'sh-card-title-icon' }, '💻'), _('Web Console') ]),
|
|
E('div', { 'class': 'sh-card-badge', 'id': 'ttyd-status-badge' }, ttyd.running ? _('Running') : _('Stopped'))
|
|
]),
|
|
E('div', { 'class': 'sh-card-body' }, [
|
|
// Status info
|
|
E('div', { 'class': 'sh-sysinfo-grid' }, [
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Status')),
|
|
E('span', { 'class': 'sh-sysinfo-value', 'id': 'ttyd-status-text', 'style': ttyd.running ? 'color: #22c55e;' : 'color: #f59e0b;' },
|
|
ttyd.installed ? (ttyd.running ? _('Running') : _('Stopped')) : _('Not Installed'))
|
|
]),
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Port')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, ttyd.port || 7681)
|
|
])
|
|
]),
|
|
|
|
// Install warning or console iframe
|
|
!ttyd.installed ? E('div', { 'style': 'padding: 16px; background: rgba(245, 158, 11, 0.1); border-radius: 10px; border-left: 3px solid #f59e0b; margin-top: 16px;' }, [
|
|
E('span', { 'style': 'font-size: 20px; margin-right: 12px;' }, '⚠️'),
|
|
E('span', {}, _('Web Console (ttyd) is not installed.')),
|
|
E('a', { 'href': '#', 'style': 'color: #6366f1; margin-left: 8px;', 'click': L.bind(this.installTtyd, this) }, _('Install now'))
|
|
]) : (ttyd.running ?
|
|
// Console iframe when running
|
|
E('div', { 'id': 'ttyd-console-container', 'style': 'margin-top: 16px; border-radius: 8px; overflow: hidden; background: #0a0a0f; border: 1px solid rgba(255,255,255,0.1);' }, [
|
|
E('iframe', {
|
|
'id': 'ttyd-iframe',
|
|
'src': 'http://' + window.location.hostname + ':' + (ttyd.port || 7681),
|
|
'style': 'width: 100%; height: 400px; border: none; background: #0a0a0f;',
|
|
'title': 'Web Console'
|
|
})
|
|
]) :
|
|
// Start prompt when stopped
|
|
E('div', { 'style': 'padding: 20px; background: rgba(99, 102, 241, 0.1); border-radius: 10px; margin-top: 16px; text-align: center;' }, [
|
|
E('span', { 'style': 'font-size: 40px; display: block; margin-bottom: 12px;' }, '💻'),
|
|
E('p', { 'style': 'margin: 0 0 16px 0; color: #a0a0b0;' }, _('Web Console is ready. Click Start to open the terminal.')),
|
|
E('button', {
|
|
'class': 'sh-btn sh-btn-primary',
|
|
'click': L.bind(this.startTtyd, this)
|
|
}, [ '▶️ ', _('Start Console') ])
|
|
])
|
|
),
|
|
|
|
// Actions
|
|
ttyd.installed ? E('div', { 'class': 'sh-btn-group', 'style': 'margin-top: 16px;' }, [
|
|
E('button', {
|
|
'class': 'sh-btn sh-btn-primary',
|
|
'id': 'ttyd-toggle-btn',
|
|
'click': L.bind(this.toggleTtyd, this)
|
|
}, [ ttyd.running ? '⏹️ ' + _('Stop') : '▶️ ' + _('Start') ]),
|
|
ttyd.running ? E('button', {
|
|
'class': 'sh-btn',
|
|
'click': L.bind(this.openTtydFullscreen, this)
|
|
}, [ '🔲 ', _('Fullscreen') ]) : '',
|
|
E('button', {
|
|
'class': 'sh-btn',
|
|
'click': L.bind(this.refreshTtydStatus, this)
|
|
}, [ '🔄 ', _('Refresh') ])
|
|
]) : ''
|
|
])
|
|
]),
|
|
|
|
// Support Contact (static)
|
|
E('div', { 'class': 'sh-card' }, [
|
|
E('div', { 'class': 'sh-card-header' }, [
|
|
E('div', { 'class': 'sh-card-title' }, [ E('span', { 'class': 'sh-card-title-icon' }, '📞'), _('Contact Support') ])
|
|
]),
|
|
E('div', { 'class': 'sh-card-body' }, [
|
|
E('div', { 'class': 'sh-sysinfo-grid' }, [
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Provider')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, 'CyberMind.fr')
|
|
]),
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Email')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, 'support@cybermind.fr')
|
|
]),
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Phone')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, '+33 1 23 45 67 89')
|
|
]),
|
|
E('div', { 'class': 'sh-sysinfo-item' }, [
|
|
E('span', { 'class': 'sh-sysinfo-label' }, _('Website')),
|
|
E('span', { 'class': 'sh-sysinfo-value' }, 'https://cybermind.fr')
|
|
])
|
|
])
|
|
])
|
|
])
|
|
]);
|
|
|
|
var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
|
|
wrapper.appendChild(SbHeader.render());
|
|
wrapper.appendChild(view);
|
|
return wrapper;
|
|
},
|
|
|
|
renderToggle: function(icon, label, desc, enabled, id) {
|
|
return E('div', { 'class': 'sh-toggle', 'style': 'margin-top: 16px;' }, [
|
|
E('div', { 'class': 'sh-toggle-info' }, [
|
|
E('span', { 'class': 'sh-toggle-icon' }, icon),
|
|
E('div', {}, [
|
|
E('div', { 'class': 'sh-toggle-label' }, label),
|
|
E('div', { 'class': 'sh-toggle-desc' }, desc)
|
|
])
|
|
]),
|
|
E('div', {
|
|
'class': 'sh-toggle-switch' + (enabled ? ' active' : ''),
|
|
'id': id,
|
|
'click': function(ev) {
|
|
ev.target.classList.toggle('active');
|
|
}
|
|
})
|
|
]);
|
|
},
|
|
|
|
showCredentials: function() {
|
|
ui.showModal(_('rtty Credentials'), [
|
|
E('p', {}, _('Retrieving credentials...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
API.remoteCredentials().then(L.bind(function(result) {
|
|
ui.hideModal();
|
|
ui.showModal(_('rtty Credentials'), [
|
|
E('div', { 'style': 'font-size:16px; margin-bottom:12px;' }, [
|
|
E('strong', {}, _('Device ID:')), ' ', (result.id || _('Not configured'))
|
|
]),
|
|
E('div', { 'style': 'font-size:16px; margin-bottom:12px;' }, [
|
|
E('strong', {}, _('Token:')), ' ', (result.token || _('No token set'))
|
|
]),
|
|
E('p', { 'style': 'color: #a0a0b0; font-size: 13px; margin-top: 16px;' },
|
|
_('Share the Device ID with support to allow remote access via the rtty relay server.')),
|
|
E('div', { 'class': 'sh-btn-group', 'style': 'margin-top:16px;' }, [
|
|
E('button', { 'class': 'sh-btn sh-btn-primary', 'click': ui.hideModal }, _('Close'))
|
|
])
|
|
]);
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
toggleRttyService: function() {
|
|
if (!this.remote || !this.remote.installed) return;
|
|
var action = this.remote.running ? 'stop' : 'start';
|
|
|
|
ui.showModal(action === 'start' ? _('Connecting...') : _('Disconnecting...'), [
|
|
E('p', {}, action === 'start' ? _('Connecting to relay server...') : _('Stopping rtty service...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
|
|
API.remoteServiceAction(action).then(L.bind(function(res) {
|
|
ui.hideModal();
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', {}, '✅ ' + (res.message || action)), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, res.error || _('Action failed')), 'error');
|
|
}
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
saveRttySettings: function() {
|
|
var host = document.getElementById('rtty-host').value;
|
|
var port = parseInt(document.getElementById('rtty-port').value) || 5912;
|
|
var token = document.getElementById('rtty-token').value;
|
|
var description = document.getElementById('rtty-description').value;
|
|
var ssl = document.getElementById('rtty-ssl').classList.contains('active') ? 1 : 0;
|
|
|
|
if (!host) {
|
|
ui.addNotification(null, E('p', {}, _('Server host is required')), 'error');
|
|
return;
|
|
}
|
|
|
|
ui.showModal(_('Saving Settings'), [
|
|
E('p', {}, _('Saving rtty configuration...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
|
|
API.remoteSaveSettings({
|
|
host: host,
|
|
port: port,
|
|
token: token,
|
|
description: description,
|
|
ssl: ssl
|
|
}).then(L.bind(function(result) {
|
|
ui.hideModal();
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', {}, _('Settings saved successfully')), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, result.error || _('Failed to save settings')), 'error');
|
|
}
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
installRtty: function(ev) {
|
|
ev.preventDefault();
|
|
ui.showModal(_('Installing rtty'), [
|
|
E('p', {}, _('Installing rtty-openssl package...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
API.remoteInstall().then(L.bind(function(result) {
|
|
ui.hideModal();
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', {}, result.message || _('Installed successfully')), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, result.error || _('Installation failed')), 'error');
|
|
}
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
reload: function() {
|
|
this.load().then(L.bind(function(data) {
|
|
var node = this.render(data);
|
|
var root = document.querySelector('.system-hub-dashboard');
|
|
if (root && root.parentNode) {
|
|
root.parentNode.replaceChild(node, root);
|
|
}
|
|
}, this));
|
|
},
|
|
|
|
// TTYD Web Console methods
|
|
installTtyd: function(ev) {
|
|
ev.preventDefault();
|
|
ui.showModal(_('Installing Web Console'), [
|
|
E('p', {}, _('Installing ttyd...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
API.ttydInstall().then(L.bind(function(result) {
|
|
ui.hideModal();
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', {}, _('Web Console installed successfully')), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, result.error || _('Installation failed')), 'error');
|
|
}
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
startTtyd: function() {
|
|
ui.showModal(_('Starting Web Console'), [
|
|
E('p', {}, _('Starting ttyd service...')),
|
|
E('div', { 'class': 'spinning' })
|
|
]);
|
|
API.ttydStart().then(L.bind(function(result) {
|
|
ui.hideModal();
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', {}, _('Web Console started on port ') + result.port), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, result.error || _('Failed to start')), 'error');
|
|
}
|
|
}, this)).catch(function(err) {
|
|
ui.hideModal();
|
|
ui.addNotification(null, E('p', {}, err.message || err), 'error');
|
|
});
|
|
},
|
|
|
|
stopTtyd: function() {
|
|
API.ttydStop().then(L.bind(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', {}, _('Web Console stopped')), 'info');
|
|
this.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, result.error || _('Failed to stop')), 'error');
|
|
}
|
|
}, this));
|
|
},
|
|
|
|
toggleTtyd: function() {
|
|
if (this.ttyd && this.ttyd.running) {
|
|
this.stopTtyd();
|
|
} else {
|
|
this.startTtyd();
|
|
}
|
|
},
|
|
|
|
openTtydFullscreen: function() {
|
|
var port = (this.ttyd && this.ttyd.port) || 7681;
|
|
window.open('http://' + window.location.hostname + ':' + port, '_blank');
|
|
},
|
|
|
|
refreshTtydStatus: function() {
|
|
API.ttydStatus().then(L.bind(function(status) {
|
|
this.ttyd = status;
|
|
var badge = document.getElementById('ttyd-status-badge');
|
|
var text = document.getElementById('ttyd-status-text');
|
|
var btn = document.getElementById('ttyd-toggle-btn');
|
|
|
|
if (badge) badge.textContent = status.running ? _('Running') : _('Stopped');
|
|
if (text) {
|
|
text.textContent = status.installed ? (status.running ? _('Running') : _('Stopped')) : _('Not Installed');
|
|
text.style.color = status.running ? '#22c55e' : '#f59e0b';
|
|
}
|
|
if (btn) btn.innerHTML = status.running ? '⏹️ ' + _('Stop') : '▶️ ' + _('Start');
|
|
|
|
// Reload to update iframe visibility
|
|
if (status.running !== this.ttyd.running) {
|
|
this.reload();
|
|
}
|
|
}, this));
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|