twothatit
41ba835a99
- Multi-language support (EN/DE) with i18n engine and language files - Configurable branding (name, subtitle, logo) in Settings - Global default language and per-user language preference - User management router with CRUD endpoints - Customer status sync on start/stop/restart - Health check fixes: derive status from container state, remove broken wget healthcheck - Caddy reverse proxy and dashboard env templates for customer stacks - Updated README with real hardware specs, prerequisites, and new features - Removed .claude settings (JWT tokens) and build artifacts from tracking - Updated .gitignore for .claude/ and Windows artifacts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1168 lines
52 KiB
JavaScript
1168 lines
52 KiB
JavaScript
/**
|
|
* NetBird MSP Appliance - Frontend Application
|
|
* Vanilla JavaScript with Bootstrap 5
|
|
*/
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// State
|
|
// ---------------------------------------------------------------------------
|
|
let authToken = localStorage.getItem('authToken') || null;
|
|
let currentUser = null;
|
|
let currentPage = 'dashboard';
|
|
let currentCustomerId = null;
|
|
let currentCustomerData = null;
|
|
let customersPage = 1;
|
|
let brandingData = { branding_name: 'NetBird MSP Appliance', branding_logo_path: null };
|
|
let azureConfig = { azure_enabled: false };
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// API helper
|
|
// ---------------------------------------------------------------------------
|
|
async function api(method, path, body = null) {
|
|
const opts = {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
};
|
|
if (authToken) {
|
|
opts.headers['Authorization'] = `Bearer ${authToken}`;
|
|
}
|
|
if (body) {
|
|
opts.body = JSON.stringify(body);
|
|
}
|
|
let resp;
|
|
try {
|
|
resp = await fetch(`/api${path}`, opts);
|
|
} catch (networkErr) {
|
|
console.error(`API network error: ${method} ${path}`, networkErr);
|
|
throw new Error(t('errors.networkError'));
|
|
}
|
|
if (resp.status === 401) {
|
|
logout();
|
|
throw new Error(t('errors.sessionExpired'));
|
|
}
|
|
let data;
|
|
try {
|
|
data = await resp.json();
|
|
} catch (jsonErr) {
|
|
console.error(`API JSON parse error: ${method} ${path} (status ${resp.status})`, jsonErr);
|
|
throw new Error(t('errors.serverError', { status: resp.status }));
|
|
}
|
|
if (!resp.ok) {
|
|
let msg = t('errors.requestFailed');
|
|
if (Array.isArray(data.detail)) {
|
|
msg = data.detail.map(e => {
|
|
const field = e.loc ? e.loc[e.loc.length - 1] : '';
|
|
const text = (e.msg || '').replace(/^Value error, ?/, '');
|
|
return field ? `${field}: ${text}` : text;
|
|
}).join('\n');
|
|
} else if (typeof data.detail === 'string') {
|
|
msg = data.detail;
|
|
} else if (data.message) {
|
|
msg = data.message;
|
|
}
|
|
console.error(`API error: ${method} ${path} (status ${resp.status})`, msg);
|
|
throw new Error(msg);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Auth
|
|
// ---------------------------------------------------------------------------
|
|
async function initApp() {
|
|
await initI18n();
|
|
await loadBranding();
|
|
await loadAzureLoginConfig();
|
|
|
|
if (authToken) {
|
|
try {
|
|
const user = await api('GET', '/auth/me');
|
|
currentUser = user;
|
|
document.getElementById('nav-username').textContent = user.username;
|
|
// Apply user's language preference if set
|
|
if (user.default_language && !localStorage.getItem('language')) {
|
|
await setLanguage(user.default_language);
|
|
}
|
|
showAppPage();
|
|
loadDashboard();
|
|
} catch {
|
|
authToken = null;
|
|
localStorage.removeItem('authToken');
|
|
showLoginPage();
|
|
}
|
|
} else {
|
|
showLoginPage();
|
|
}
|
|
}
|
|
|
|
function showLoginPage() {
|
|
document.getElementById('login-page').classList.remove('d-none');
|
|
document.getElementById('app-page').classList.add('d-none');
|
|
}
|
|
|
|
function showAppPage() {
|
|
document.getElementById('login-page').classList.add('d-none');
|
|
document.getElementById('app-page').classList.remove('d-none');
|
|
}
|
|
|
|
async function loadBranding() {
|
|
try {
|
|
const resp = await fetch('/api/settings/branding');
|
|
if (resp.ok) {
|
|
brandingData = await resp.json();
|
|
// Set system default language from server config
|
|
if (brandingData.default_language) {
|
|
setSystemDefault(brandingData.default_language);
|
|
}
|
|
applyBranding();
|
|
}
|
|
} catch {
|
|
// Use defaults
|
|
}
|
|
}
|
|
|
|
function applyBranding() {
|
|
const name = brandingData.branding_name || 'NetBird MSP Appliance';
|
|
const subtitle = brandingData.branding_subtitle || t('login.subtitle');
|
|
const logoPath = brandingData.branding_logo_path;
|
|
|
|
// Login page
|
|
document.getElementById('login-title').textContent = name;
|
|
const subtitleEl = document.getElementById('login-subtitle');
|
|
if (subtitleEl) subtitleEl.textContent = subtitle;
|
|
document.title = name;
|
|
if (logoPath) {
|
|
document.getElementById('login-logo').innerHTML = `<img src="${logoPath}" alt="Logo" style="max-height:64px;max-width:200px;" class="mb-1">`;
|
|
} else {
|
|
document.getElementById('login-logo').innerHTML = '<i class="bi bi-hdd-network fs-1 text-primary"></i>';
|
|
}
|
|
|
|
// Navbar — use short form for the nav bar
|
|
const shortName = name.length > 30 ? name.substring(0, 30) + '\u2026' : name;
|
|
document.getElementById('nav-brand-name').textContent = shortName;
|
|
if (logoPath) {
|
|
document.getElementById('nav-logo').innerHTML = `<img src="${logoPath}" alt="Logo" style="height:28px;max-width:120px;" class="me-2">`;
|
|
} else {
|
|
document.getElementById('nav-logo').innerHTML = '<i class="bi bi-hdd-network me-2"></i>';
|
|
}
|
|
}
|
|
|
|
async function loadAzureLoginConfig() {
|
|
try {
|
|
const resp = await fetch('/api/auth/azure/config');
|
|
if (resp.ok) {
|
|
azureConfig = await resp.json();
|
|
if (azureConfig.azure_enabled) {
|
|
document.getElementById('azure-login-divider').classList.remove('d-none');
|
|
} else {
|
|
document.getElementById('azure-login-divider').classList.add('d-none');
|
|
}
|
|
}
|
|
} catch {
|
|
// Azure not configured
|
|
}
|
|
}
|
|
|
|
function loginWithAzure() {
|
|
if (!azureConfig.azure_enabled || !azureConfig.azure_tenant_id || !azureConfig.azure_client_id) {
|
|
alert(t('errors.azureNotConfigured'));
|
|
return;
|
|
}
|
|
const redirectUri = window.location.origin + '/';
|
|
const authUrl = `https://login.microsoftonline.com/${azureConfig.azure_tenant_id}/oauth2/v2.0/authorize`
|
|
+ `?client_id=${azureConfig.azure_client_id}`
|
|
+ `&response_type=code`
|
|
+ `&redirect_uri=${encodeURIComponent(redirectUri)}`
|
|
+ `&scope=${encodeURIComponent('openid profile email User.Read')}`
|
|
+ `&response_mode=query`;
|
|
window.location.href = authUrl;
|
|
}
|
|
|
|
async function handleAzureCallback() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const code = params.get('code');
|
|
if (!code) return false;
|
|
|
|
// Clear URL params
|
|
window.history.replaceState({}, document.title, '/');
|
|
|
|
try {
|
|
const data = await api('POST', '/auth/azure/callback', {
|
|
code: code,
|
|
redirect_uri: window.location.origin + '/',
|
|
});
|
|
authToken = data.access_token;
|
|
localStorage.setItem('authToken', authToken);
|
|
currentUser = data.user;
|
|
document.getElementById('nav-username').textContent = currentUser.username;
|
|
// Apply user's language preference
|
|
if (currentUser.default_language) {
|
|
await setLanguage(currentUser.default_language);
|
|
}
|
|
showAppPage();
|
|
loadDashboard();
|
|
return true;
|
|
} catch (err) {
|
|
const errorEl = document.getElementById('login-error');
|
|
errorEl.textContent = t('errors.azureLoginFailed', { error: err.message });
|
|
errorEl.classList.remove('d-none');
|
|
showLoginPage();
|
|
return true;
|
|
}
|
|
}
|
|
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errorEl = document.getElementById('login-error');
|
|
const spinner = document.getElementById('login-spinner');
|
|
errorEl.classList.add('d-none');
|
|
spinner.classList.remove('d-none');
|
|
|
|
try {
|
|
const data = await api('POST', '/auth/login', {
|
|
username: document.getElementById('login-username').value,
|
|
password: document.getElementById('login-password').value,
|
|
});
|
|
authToken = data.access_token;
|
|
localStorage.setItem('authToken', authToken);
|
|
currentUser = data.user;
|
|
document.getElementById('nav-username').textContent = currentUser.username;
|
|
// Apply user's language preference
|
|
if (currentUser.default_language) {
|
|
await setLanguage(currentUser.default_language);
|
|
}
|
|
showAppPage();
|
|
loadDashboard();
|
|
} catch (err) {
|
|
errorEl.textContent = err.message;
|
|
errorEl.classList.remove('d-none');
|
|
} finally {
|
|
spinner.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
function logout() {
|
|
// Use fetch directly (not api()) to avoid 401 → logout → 401 infinite loop
|
|
if (authToken) {
|
|
fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${authToken}`,
|
|
},
|
|
}).catch(() => {});
|
|
}
|
|
authToken = null;
|
|
currentUser = null;
|
|
localStorage.removeItem('authToken');
|
|
showLoginPage();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Language switching (saves preference to server for logged-in users)
|
|
// ---------------------------------------------------------------------------
|
|
async function switchLanguage(lang) {
|
|
await setLanguage(lang);
|
|
applyBranding();
|
|
// Save preference to server if user is logged in
|
|
if (currentUser && currentUser.id) {
|
|
try {
|
|
await api('PUT', `/users/${currentUser.id}`, { default_language: lang });
|
|
currentUser.default_language = lang;
|
|
} catch {
|
|
// Silently fail — localStorage already saved
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Navigation
|
|
// ---------------------------------------------------------------------------
|
|
function showPage(page) {
|
|
document.querySelectorAll('.page-content').forEach(el => el.classList.add('d-none'));
|
|
document.getElementById(`page-${page}`).classList.remove('d-none');
|
|
currentPage = page;
|
|
|
|
if (page === 'dashboard') loadDashboard();
|
|
else if (page === 'settings') loadSettings();
|
|
else if (page === 'monitoring') loadMonitoring();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Dashboard
|
|
// ---------------------------------------------------------------------------
|
|
async function loadDashboard() {
|
|
await Promise.all([loadStats(), loadCustomers()]);
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const data = await api('GET', '/monitoring/status');
|
|
document.getElementById('stat-total').textContent = data.total_customers;
|
|
document.getElementById('stat-active').textContent = data.active;
|
|
document.getElementById('stat-inactive').textContent = data.inactive;
|
|
document.getElementById('stat-error').textContent = data.error;
|
|
} catch (err) {
|
|
console.error('Failed to load stats:', err);
|
|
}
|
|
}
|
|
|
|
async function loadCustomers() {
|
|
const search = document.getElementById('search-input').value;
|
|
const status = document.getElementById('status-filter').value;
|
|
let url = `/customers?page=${customersPage}&per_page=25`;
|
|
if (search) url += `&search=${encodeURIComponent(search)}`;
|
|
if (status) url += `&status=${encodeURIComponent(status)}`;
|
|
|
|
try {
|
|
const data = await api('GET', url);
|
|
renderCustomersTable(data);
|
|
} catch (err) {
|
|
console.error('Failed to load customers:', err);
|
|
}
|
|
}
|
|
|
|
function renderCustomersTable(data) {
|
|
const tbody = document.getElementById('customers-table-body');
|
|
if (!data.items || data.items.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">${t('dashboard.noCustomers')}</td></tr>`;
|
|
document.getElementById('pagination-info').textContent = t('dashboard.showingEmpty');
|
|
document.getElementById('pagination-controls').innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = data.items.map(c => {
|
|
const dPort = c.deployment && c.deployment.dashboard_port;
|
|
const dashUrl = c.deployment && c.deployment.setup_url;
|
|
const dashLink = dPort
|
|
? `<a href="${esc(dashUrl || 'http://localhost:' + dPort)}" target="_blank" class="text-decoration-none" title="${t('customer.openDashboard')}">:${dPort} <i class="bi bi-box-arrow-up-right"></i></a>`
|
|
: '-';
|
|
return `<tr>
|
|
<td>${c.id}</td>
|
|
<td><a href="#" onclick="viewCustomer(${c.id})" class="text-decoration-none fw-semibold">${esc(c.name)}</a></td>
|
|
<td><code>${esc(c.subdomain)}</code></td>
|
|
<td>${statusBadge(c.status)}</td>
|
|
<td>${dashLink}</td>
|
|
<td>${c.max_devices}</td>
|
|
<td>${formatDate(c.created_at)}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" title="${t('common.view')}" onclick="viewCustomer(${c.id})"><i class="bi bi-eye"></i></button>
|
|
${c.deployment && c.deployment.deployment_status === 'running'
|
|
? `<button class="btn btn-outline-warning" title="${t('common.stop')}" onclick="customerAction(${c.id},'stop')"><i class="bi bi-stop-circle"></i></button>`
|
|
: `<button class="btn btn-outline-success" title="${t('common.start')}" onclick="customerAction(${c.id},'start')"><i class="bi bi-play-circle"></i></button>`
|
|
}
|
|
<button class="btn btn-outline-info" title="${t('common.restart')}" onclick="customerAction(${c.id},'restart')"><i class="bi bi-arrow-repeat"></i></button>
|
|
<button class="btn btn-outline-danger" title="${t('common.delete')}" onclick="showDeleteModal(${c.id},'${esc(c.name)}')"><i class="bi bi-trash"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
|
|
// Pagination
|
|
const start = (data.page - 1) * data.per_page + 1;
|
|
const end = Math.min(data.page * data.per_page, data.total);
|
|
document.getElementById('pagination-info').textContent = t('dashboard.showing', { start, end, total: data.total });
|
|
|
|
let paginationHtml = '';
|
|
for (let i = 1; i <= data.pages; i++) {
|
|
paginationHtml += `<li class="page-item ${i === data.page ? 'active' : ''}"><a class="page-link" href="#" onclick="goToPage(${i})">${i}</a></li>`;
|
|
}
|
|
document.getElementById('pagination-controls').innerHTML = paginationHtml;
|
|
}
|
|
|
|
function goToPage(page) {
|
|
customersPage = page;
|
|
loadCustomers();
|
|
}
|
|
|
|
// Search & filter listeners
|
|
document.getElementById('search-input').addEventListener('input', debounce(() => { customersPage = 1; loadCustomers(); }, 300));
|
|
document.getElementById('status-filter').addEventListener('change', () => { customersPage = 1; loadCustomers(); });
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Customer CRUD
|
|
// ---------------------------------------------------------------------------
|
|
function showNewCustomerModal() {
|
|
document.getElementById('customer-modal-title').textContent = t('customerModal.newCustomer');
|
|
document.getElementById('customer-edit-id').value = '';
|
|
document.getElementById('customer-form').reset();
|
|
document.getElementById('cust-max-devices').value = '20';
|
|
document.getElementById('customer-modal-error').classList.add('d-none');
|
|
const saveBtnSpan = document.getElementById('customer-save-btn').querySelector('span[data-i18n]');
|
|
if (saveBtnSpan) saveBtnSpan.textContent = t('customerModal.saveAndDeploy');
|
|
|
|
// Update subdomain suffix
|
|
api('GET', '/settings/system').then(cfg => {
|
|
document.getElementById('cust-subdomain-suffix').textContent = `.${cfg.base_domain || 'domain.com'}`;
|
|
}).catch(() => {});
|
|
|
|
const modalEl = document.getElementById('customer-modal');
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
// Enable subdomain field for new customers
|
|
document.getElementById('cust-subdomain').disabled = false;
|
|
modal.show();
|
|
}
|
|
|
|
function editCurrentCustomer() {
|
|
if (!currentCustomerData) return;
|
|
const c = currentCustomerData;
|
|
document.getElementById('customer-modal-title').textContent = t('customerModal.editCustomer');
|
|
document.getElementById('customer-edit-id').value = c.id;
|
|
document.getElementById('cust-name').value = c.name;
|
|
document.getElementById('cust-company').value = c.company || '';
|
|
document.getElementById('cust-subdomain').value = c.subdomain;
|
|
document.getElementById('cust-subdomain').disabled = true; // Can't change subdomain
|
|
document.getElementById('cust-email').value = c.email;
|
|
document.getElementById('cust-max-devices').value = c.max_devices;
|
|
document.getElementById('cust-notes').value = c.notes || '';
|
|
document.getElementById('customer-modal-error').classList.add('d-none');
|
|
const saveBtnSpan = document.getElementById('customer-save-btn').querySelector('span[data-i18n]');
|
|
if (saveBtnSpan) saveBtnSpan.textContent = t('customerModal.saveChanges');
|
|
|
|
const modalEl = document.getElementById('customer-modal');
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
modal.show();
|
|
}
|
|
|
|
async function saveCustomer() {
|
|
const errorEl = document.getElementById('customer-modal-error');
|
|
const spinner = document.getElementById('customer-save-spinner');
|
|
errorEl.classList.add('d-none');
|
|
spinner.classList.remove('d-none');
|
|
|
|
const editId = document.getElementById('customer-edit-id').value;
|
|
const payload = {
|
|
name: document.getElementById('cust-name').value,
|
|
company: document.getElementById('cust-company').value || null,
|
|
email: document.getElementById('cust-email').value,
|
|
max_devices: parseInt(document.getElementById('cust-max-devices').value) || 20,
|
|
notes: document.getElementById('cust-notes').value || null,
|
|
};
|
|
|
|
try {
|
|
if (editId) {
|
|
await api('PUT', `/customers/${editId}`, payload);
|
|
} else {
|
|
payload.subdomain = document.getElementById('cust-subdomain').value.toLowerCase();
|
|
await api('POST', '/customers', payload);
|
|
}
|
|
// Close modal safely
|
|
const modalEl = document.getElementById('customer-modal');
|
|
const modalInstance = bootstrap.Modal.getInstance(modalEl);
|
|
if (modalInstance) {
|
|
modalInstance.hide();
|
|
} else {
|
|
modalEl.classList.remove('show');
|
|
document.body.classList.remove('modal-open');
|
|
document.querySelector('.modal-backdrop')?.remove();
|
|
}
|
|
loadDashboard();
|
|
if (editId && currentCustomerId == editId) {
|
|
viewCustomer(editId);
|
|
}
|
|
} catch (err) {
|
|
console.error('saveCustomer error:', err);
|
|
errorEl.textContent = err.message || t('errors.unknownError');
|
|
errorEl.classList.remove('d-none');
|
|
errorEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
} finally {
|
|
spinner.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
function showDeleteModal(id, name) {
|
|
document.getElementById('delete-customer-id').value = id;
|
|
document.getElementById('delete-customer-name').textContent = name;
|
|
new bootstrap.Modal(document.getElementById('delete-modal')).show();
|
|
}
|
|
|
|
function deleteCurrentCustomer() {
|
|
if (!currentCustomerData) return;
|
|
showDeleteModal(currentCustomerData.id, currentCustomerData.name);
|
|
}
|
|
|
|
async function confirmDeleteCustomer() {
|
|
const id = document.getElementById('delete-customer-id').value;
|
|
const spinner = document.getElementById('delete-spinner');
|
|
spinner.classList.remove('d-none');
|
|
|
|
try {
|
|
await api('DELETE', `/customers/${id}`);
|
|
bootstrap.Modal.getInstance(document.getElementById('delete-modal')).hide();
|
|
showPage('dashboard');
|
|
} catch (err) {
|
|
alert(t('errors.deleteFailed', { error: err.message }));
|
|
} finally {
|
|
spinner.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Customer Actions (start/stop/restart)
|
|
// ---------------------------------------------------------------------------
|
|
async function customerAction(id, action) {
|
|
try {
|
|
await api('POST', `/customers/${id}/${action}`);
|
|
if (currentPage === 'dashboard') loadCustomers();
|
|
if (currentCustomerId == id) viewCustomer(id);
|
|
} catch (err) {
|
|
alert(t('errors.actionFailed', { action, error: err.message }));
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Customer Detail
|
|
// ---------------------------------------------------------------------------
|
|
async function viewCustomer(id) {
|
|
currentCustomerId = id;
|
|
showPage('customer-detail');
|
|
|
|
try {
|
|
const data = await api('GET', `/customers/${id}`);
|
|
currentCustomerData = data;
|
|
document.getElementById('detail-customer-name').textContent = data.name;
|
|
const badge = document.getElementById('detail-customer-status');
|
|
badge.innerHTML = statusBadge(data.status);
|
|
|
|
// Info tab
|
|
document.getElementById('detail-info-content').innerHTML = `
|
|
<div class="row g-3">
|
|
<div class="col-md-6"><strong>${t('customer.name')}</strong> ${esc(data.name)}</div>
|
|
<div class="col-md-6"><strong>${t('customer.company')}</strong> ${esc(data.company || '-')}</div>
|
|
<div class="col-md-6"><strong>${t('customer.subdomain')}</strong> <code>${esc(data.subdomain)}</code></div>
|
|
<div class="col-md-6"><strong>${t('customer.email')}</strong> ${esc(data.email)}</div>
|
|
<div class="col-md-6"><strong>${t('customer.maxDevices')}</strong> ${data.max_devices}</div>
|
|
<div class="col-md-6"><strong>${t('customer.status')}</strong> ${statusBadge(data.status)}</div>
|
|
<div class="col-md-6"><strong>${t('customer.created')}</strong> ${formatDate(data.created_at)}</div>
|
|
<div class="col-md-6"><strong>${t('customer.updated')}</strong> ${formatDate(data.updated_at)}</div>
|
|
${data.notes ? `<div class="col-12"><strong>${t('customer.notes')}</strong> ${esc(data.notes)}</div>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
// Deployment tab
|
|
if (data.deployment) {
|
|
const d = data.deployment;
|
|
document.getElementById('detail-deployment-content').innerHTML = `
|
|
<div class="row g-3">
|
|
<div class="col-md-6"><strong>${t('customer.deploymentStatus')}</strong> ${statusBadge(d.deployment_status)}</div>
|
|
<div class="col-md-6"><strong>${t('customer.relayUdpPort')}</strong> ${d.relay_udp_port}</div>
|
|
<div class="col-md-6"><strong>${t('customer.dashboardPort')}</strong> ${d.dashboard_port || '-'}${d.dashboard_port ? ` <a href="${esc(d.setup_url || 'http://localhost:' + d.dashboard_port)}" target="_blank" class="ms-2"><i class="bi bi-box-arrow-up-right"></i> ${t('customer.open')}</a>` : ''}</div>
|
|
<div class="col-md-6"><strong>${t('customer.containerPrefix')}</strong> <code>${esc(d.container_prefix)}</code></div>
|
|
<div class="col-md-6"><strong>${t('customer.deployed')}</strong> ${formatDate(d.deployed_at)}</div>
|
|
<div class="col-12">
|
|
<strong>${t('customer.setupUrl')}</strong>
|
|
<div class="input-group mt-1">
|
|
<input type="text" class="form-control" value="${esc(d.setup_url || '')}" readonly id="setup-url-input">
|
|
<button class="btn btn-outline-secondary" onclick="copySetupUrl()"><i class="bi bi-clipboard"></i> ${t('customer.copy')}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mt-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<strong><i class="bi bi-key me-1"></i>${t('customer.netbirdLogin')}</strong>
|
|
${d.has_credentials ? '' : `<span class="badge bg-secondary">${t('customer.notAvailable')}</span>`}
|
|
</div>
|
|
<div class="card-body" id="credentials-container">
|
|
${d.has_credentials ? `
|
|
<div id="credentials-placeholder">
|
|
<button class="btn btn-outline-primary btn-sm" onclick="loadCredentials(${id})">
|
|
<i class="bi bi-shield-lock me-1"></i>${t('customer.showCredentials')}
|
|
</button>
|
|
</div>
|
|
<div id="credentials-content" style="display:none">
|
|
<div class="mb-2">
|
|
<label class="form-label mb-1"><small>${t('customer.credEmail')}</small></label>
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" class="form-control" id="cred-email" readonly>
|
|
<button class="btn btn-outline-secondary" onclick="copyCredential('cred-email')" title="${t('customer.copy')}"><i class="bi bi-clipboard"></i></button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-1"><small>${t('customer.credPassword')}</small></label>
|
|
<div class="input-group input-group-sm">
|
|
<input type="password" class="form-control" id="cred-password" readonly>
|
|
<button class="btn btn-outline-secondary" data-toggle-pw onclick="togglePasswordVisibility('cred-password')" title="${t('customer.showHide')}"><i class="bi bi-eye"></i></button>
|
|
<button class="btn btn-outline-secondary" onclick="copyCredential('cred-password')" title="${t('customer.copy')}"><i class="bi bi-clipboard"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : `<p class="text-muted mb-0">${t('customer.credentialsNotAvailable')}</p>`}
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button class="btn btn-success btn-sm me-1" onclick="customerAction(${id},'start')"><i class="bi bi-play-circle me-1"></i>${t('customer.start')}</button>
|
|
<button class="btn btn-warning btn-sm me-1" onclick="customerAction(${id},'stop')"><i class="bi bi-stop-circle me-1"></i>${t('customer.stop')}</button>
|
|
<button class="btn btn-info btn-sm me-1" onclick="customerAction(${id},'restart')"><i class="bi bi-arrow-repeat me-1"></i>${t('customer.restart')}</button>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="customerAction(${id},'deploy')"><i class="bi bi-rocket me-1"></i>${t('customer.reDeploy')}</button>
|
|
</div>
|
|
`;
|
|
} else {
|
|
document.getElementById('detail-deployment-content').innerHTML = `
|
|
<p class="text-muted">${t('customer.noDeployment')}</p>
|
|
<button class="btn btn-primary" onclick="customerAction(${id},'deploy')"><i class="bi bi-rocket me-1"></i>${t('customer.deployNow')}</button>
|
|
`;
|
|
}
|
|
|
|
// Logs tab (preview from deployment_logs table)
|
|
if (data.logs && data.logs.length > 0) {
|
|
document.getElementById('detail-logs-content').innerHTML = data.logs.map(l =>
|
|
`<div class="log-entry log-${l.status}"><span class="log-time">${formatDate(l.created_at)}</span> <span class="badge bg-${l.status === 'success' ? 'success' : l.status === 'error' ? 'danger' : 'info'}">${l.status}</span> <strong>${esc(l.action)}</strong>: ${esc(l.message)}</div>`
|
|
).join('');
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('detail-info-content').innerHTML = `<div class="alert alert-danger">${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadCustomerLogs() {
|
|
if (!currentCustomerId) return;
|
|
try {
|
|
const data = await api('GET', `/customers/${currentCustomerId}/logs`);
|
|
const content = document.getElementById('detail-logs-content');
|
|
if (!data.logs || Object.keys(data.logs).length === 0) {
|
|
content.innerHTML = `<p class="text-muted">${t('customer.noContainerLogs')}</p>`;
|
|
return;
|
|
}
|
|
let html = '';
|
|
for (const [name, logText] of Object.entries(data.logs)) {
|
|
html += `<h6 class="mt-3"><i class="bi bi-box me-1"></i>${esc(name)}</h6><pre class="log-pre">${esc(logText)}</pre>`;
|
|
}
|
|
content.innerHTML = html;
|
|
} catch (err) {
|
|
document.getElementById('detail-logs-content').innerHTML = `<div class="alert alert-danger">${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadCustomerHealth() {
|
|
if (!currentCustomerId) return;
|
|
try {
|
|
const data = await api('GET', `/customers/${currentCustomerId}/health`);
|
|
const content = document.getElementById('detail-health-content');
|
|
let html = `<div class="mb-3"><strong>${t('customer.overall')}</strong> ${data.healthy ? `<span class="text-success">${t('customer.healthy')}</span>` : `<span class="text-danger">${t('customer.unhealthy')}</span>`}</div>`;
|
|
if (data.containers && data.containers.length > 0) {
|
|
html += `<table class="table table-sm"><thead><tr><th>${t('customer.thContainer')}</th><th>${t('customer.thContainerStatus')}</th><th>${t('customer.thHealth')}</th><th>${t('customer.thImage')}</th></tr></thead><tbody>`;
|
|
data.containers.forEach(c => {
|
|
const statusClass = c.status === 'running' ? 'text-success' : 'text-danger';
|
|
const healthClass = c.health === 'healthy' ? 'text-success' : 'text-danger';
|
|
const healthLabel = c.health === 'healthy' ? t('customer.healthy') : t('customer.unhealthy');
|
|
html += `<tr><td>${esc(c.name)}</td><td class="${statusClass}">${c.status}</td><td class="${healthClass}">${healthLabel}</td><td><code>${esc(c.image)}</code></td></tr>`;
|
|
});
|
|
html += '</tbody></table>';
|
|
}
|
|
html += `<div class="text-muted small">${t('customer.lastCheck', { time: formatDate(data.last_check) })}</div>`;
|
|
content.innerHTML = html;
|
|
} catch (err) {
|
|
document.getElementById('detail-health-content').innerHTML = `<div class="alert alert-danger">${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function copySetupUrl() {
|
|
const input = document.getElementById('setup-url-input');
|
|
navigator.clipboard.writeText(input.value).then(() => {
|
|
showToast(t('messages.setupUrlCopied'));
|
|
});
|
|
}
|
|
|
|
async function loadCredentials(customerId) {
|
|
try {
|
|
const data = await api('GET', `/customers/${customerId}/credentials`);
|
|
document.getElementById('cred-email').value = data.email;
|
|
document.getElementById('cred-password').value = data.password;
|
|
document.getElementById('credentials-placeholder').style.display = 'none';
|
|
document.getElementById('credentials-content').style.display = 'block';
|
|
} catch (err) {
|
|
showToast(t('errors.failedToLoadCredentials', { error: err.message }), 'danger');
|
|
}
|
|
}
|
|
|
|
function copyCredential(fieldId) {
|
|
const input = document.getElementById(fieldId);
|
|
const origType = input.type;
|
|
input.type = 'text';
|
|
navigator.clipboard.writeText(input.value).then(() => {
|
|
input.type = origType;
|
|
showToast(t('messages.copiedToClipboard'));
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Settings
|
|
// ---------------------------------------------------------------------------
|
|
async function loadSettings() {
|
|
try {
|
|
const cfg = await api('GET', '/settings/system');
|
|
document.getElementById('cfg-base-domain').value = cfg.base_domain || '';
|
|
document.getElementById('cfg-admin-email').value = cfg.admin_email || '';
|
|
document.getElementById('cfg-data-dir').value = cfg.data_dir || '';
|
|
document.getElementById('cfg-docker-network').value = cfg.docker_network || '';
|
|
document.getElementById('cfg-relay-base-port').value = cfg.relay_base_port || 3478;
|
|
document.getElementById('cfg-dashboard-base-port').value = cfg.dashboard_base_port || 9000;
|
|
document.getElementById('cfg-npm-api-url').value = cfg.npm_api_url || '';
|
|
document.getElementById('npm-credentials-status').textContent = cfg.npm_credentials_set ? t('settings.credentialsSet') : t('settings.noCredentials');
|
|
document.getElementById('cfg-mgmt-image').value = cfg.netbird_management_image || '';
|
|
document.getElementById('cfg-signal-image').value = cfg.netbird_signal_image || '';
|
|
document.getElementById('cfg-relay-image').value = cfg.netbird_relay_image || '';
|
|
document.getElementById('cfg-dashboard-image').value = cfg.netbird_dashboard_image || '';
|
|
|
|
// Branding tab
|
|
document.getElementById('cfg-branding-name').value = cfg.branding_name || '';
|
|
document.getElementById('cfg-branding-subtitle').value = cfg.branding_subtitle || '';
|
|
document.getElementById('cfg-default-language').value = cfg.default_language || 'en';
|
|
updateLogoPreview(cfg.branding_logo_path);
|
|
|
|
// Azure AD tab
|
|
document.getElementById('cfg-azure-enabled').checked = cfg.azure_enabled || false;
|
|
document.getElementById('cfg-azure-tenant').value = cfg.azure_tenant_id || '';
|
|
document.getElementById('cfg-azure-client-id').value = cfg.azure_client_id || '';
|
|
document.getElementById('azure-secret-status').textContent = cfg.azure_client_secret_set ? t('settings.secretSet') : t('settings.noSecret');
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failedToLoadSettings', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
function updateLogoPreview(logoPath) {
|
|
const preview = document.getElementById('branding-logo-preview');
|
|
if (logoPath) {
|
|
preview.innerHTML = `<img src="${logoPath}" alt="Logo" style="max-height:64px;max-width:200px;"><div class="text-muted small mt-1">${logoPath}</div>`;
|
|
} else {
|
|
preview.innerHTML = `<i class="bi bi-hdd-network fs-1 text-primary"></i><div class="text-muted small mt-1">${t('settings.defaultIcon')}</div>`;
|
|
}
|
|
}
|
|
|
|
// System settings form
|
|
document.getElementById('settings-system-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await api('PUT', '/settings/system', {
|
|
base_domain: document.getElementById('cfg-base-domain').value,
|
|
admin_email: document.getElementById('cfg-admin-email').value,
|
|
data_dir: document.getElementById('cfg-data-dir').value,
|
|
docker_network: document.getElementById('cfg-docker-network').value,
|
|
relay_base_port: parseInt(document.getElementById('cfg-relay-base-port').value),
|
|
dashboard_base_port: parseInt(document.getElementById('cfg-dashboard-base-port').value),
|
|
});
|
|
showSettingsAlert('success', t('messages.systemSettingsSaved'));
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failed', { error: err.message }));
|
|
}
|
|
});
|
|
|
|
// NPM settings form
|
|
document.getElementById('settings-npm-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const payload = { npm_api_url: document.getElementById('cfg-npm-api-url').value };
|
|
const email = document.getElementById('cfg-npm-api-email').value;
|
|
const password = document.getElementById('cfg-npm-api-password').value;
|
|
if (email) payload.npm_api_email = email;
|
|
if (password) payload.npm_api_password = password;
|
|
try {
|
|
await api('PUT', '/settings/system', payload);
|
|
showSettingsAlert('success', t('messages.npmSettingsSaved'));
|
|
document.getElementById('cfg-npm-api-email').value = '';
|
|
document.getElementById('cfg-npm-api-password').value = '';
|
|
loadSettings();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failed', { error: err.message }));
|
|
}
|
|
});
|
|
|
|
// Image settings form
|
|
document.getElementById('settings-images-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await api('PUT', '/settings/system', {
|
|
netbird_management_image: document.getElementById('cfg-mgmt-image').value,
|
|
netbird_signal_image: document.getElementById('cfg-signal-image').value,
|
|
netbird_relay_image: document.getElementById('cfg-relay-image').value,
|
|
netbird_dashboard_image: document.getElementById('cfg-dashboard-image').value,
|
|
});
|
|
showSettingsAlert('success', t('messages.imageSettingsSaved'));
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failed', { error: err.message }));
|
|
}
|
|
});
|
|
|
|
// Test NPM connection
|
|
async function testNpmConnection() {
|
|
const spinner = document.getElementById('npm-test-spinner');
|
|
const resultEl = document.getElementById('npm-test-result');
|
|
spinner.classList.remove('d-none');
|
|
resultEl.classList.add('d-none');
|
|
|
|
try {
|
|
const data = await api('GET', '/settings/test-npm');
|
|
resultEl.className = `mt-3 alert alert-${data.ok ? 'success' : 'danger'}`;
|
|
resultEl.textContent = data.message;
|
|
resultEl.classList.remove('d-none');
|
|
} catch (err) {
|
|
resultEl.className = 'mt-3 alert alert-danger';
|
|
resultEl.textContent = err.message;
|
|
resultEl.classList.remove('d-none');
|
|
} finally {
|
|
spinner.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
// Change password form
|
|
document.getElementById('change-password-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const resultEl = document.getElementById('password-result');
|
|
const newPw = document.getElementById('pw-new').value;
|
|
const confirmPw = document.getElementById('pw-confirm').value;
|
|
|
|
if (newPw !== confirmPw) {
|
|
resultEl.className = 'mt-3 alert alert-danger';
|
|
resultEl.textContent = t('errors.passwordsDoNotMatch');
|
|
resultEl.classList.remove('d-none');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await api('POST', '/auth/change-password', {
|
|
current_password: document.getElementById('pw-current').value,
|
|
new_password: newPw,
|
|
});
|
|
resultEl.className = 'mt-3 alert alert-success';
|
|
resultEl.textContent = t('messages.passwordChanged');
|
|
resultEl.classList.remove('d-none');
|
|
document.getElementById('change-password-form').reset();
|
|
} catch (err) {
|
|
resultEl.className = 'mt-3 alert alert-danger';
|
|
resultEl.textContent = err.message;
|
|
resultEl.classList.remove('d-none');
|
|
}
|
|
});
|
|
|
|
function showSettingsAlert(type, msg) {
|
|
const el = document.getElementById('settings-alert');
|
|
el.className = `alert alert-${type} alert-dismissible fade show`;
|
|
el.innerHTML = `${msg}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
|
|
el.classList.remove('d-none');
|
|
setTimeout(() => el.classList.add('d-none'), 5000);
|
|
}
|
|
|
|
// Branding form
|
|
document.getElementById('settings-branding-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await api('PUT', '/settings/system', {
|
|
branding_name: document.getElementById('cfg-branding-name').value || 'NetBird MSP Appliance',
|
|
branding_subtitle: document.getElementById('cfg-branding-subtitle').value || 'Multi-Tenant Management Platform',
|
|
default_language: document.getElementById('cfg-default-language').value || 'en',
|
|
});
|
|
showSettingsAlert('success', t('messages.brandingNameSaved'));
|
|
await loadBranding();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failed', { error: err.message }));
|
|
}
|
|
});
|
|
|
|
async function uploadLogo() {
|
|
const fileInput = document.getElementById('branding-logo-file');
|
|
if (!fileInput.files.length) {
|
|
showSettingsAlert('danger', t('errors.selectFileFirst'));
|
|
return;
|
|
}
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
|
|
try {
|
|
const resp = await fetch('/api/settings/branding/logo', {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${authToken}` },
|
|
body: formData,
|
|
});
|
|
const data = await resp.json();
|
|
if (!resp.ok) {
|
|
throw new Error(data.detail || t('errors.uploadFailed'));
|
|
}
|
|
updateLogoPreview(data.branding_logo_path);
|
|
showSettingsAlert('success', t('messages.logoUploaded'));
|
|
fileInput.value = '';
|
|
await loadBranding();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.logoUploadFailed', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
async function deleteLogo() {
|
|
try {
|
|
await api('DELETE', '/settings/branding/logo');
|
|
updateLogoPreview(null);
|
|
showSettingsAlert('success', t('messages.logoRemoved'));
|
|
await loadBranding();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failedToRemoveLogo', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// User Management
|
|
// ---------------------------------------------------------------------------
|
|
async function loadUsers() {
|
|
try {
|
|
const users = await api('GET', '/users');
|
|
const tbody = document.getElementById('users-table-body');
|
|
if (!users || users.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">${t('settings.noUsersFound') || t('common.loading')}</td></tr>`;
|
|
return;
|
|
}
|
|
tbody.innerHTML = users.map(u => {
|
|
const langDisplay = u.default_language ? u.default_language.toUpperCase() : `<span class="text-muted">${t('settings.systemDefault')}</span>`;
|
|
return `<tr>
|
|
<td>${u.id}</td>
|
|
<td><strong>${esc(u.username)}</strong></td>
|
|
<td>${esc(u.email || '-')}</td>
|
|
<td><span class="badge bg-info">${esc(u.role || 'admin')}</span></td>
|
|
<td><span class="badge bg-${u.auth_provider === 'azure' ? 'primary' : 'secondary'}">${esc(u.auth_provider || 'local')}</span></td>
|
|
<td>${langDisplay}</td>
|
|
<td>${u.is_active ? `<span class="badge bg-success">${t('common.active')}</span>` : `<span class="badge bg-danger">${t('common.disabled')}</span>`}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
${u.is_active
|
|
? `<button class="btn btn-outline-warning" title="${t('common.disable')}" onclick="toggleUserActive(${u.id}, false)"><i class="bi bi-pause-circle"></i></button>`
|
|
: `<button class="btn btn-outline-success" title="${t('common.enable')}" onclick="toggleUserActive(${u.id}, true)"><i class="bi bi-play-circle"></i></button>`
|
|
}
|
|
${u.auth_provider === 'local' ? `<button class="btn btn-outline-info" title="${t('common.resetPassword')}" onclick="resetUserPassword(${u.id}, '${esc(u.username)}')"><i class="bi bi-key"></i></button>` : ''}
|
|
<button class="btn btn-outline-danger" title="${t('common.delete')}" onclick="deleteUser(${u.id}, '${esc(u.username)}')"><i class="bi bi-trash"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
} catch (err) {
|
|
document.getElementById('users-table-body').innerHTML = `<tr><td colspan="8" class="text-danger">${err.message}</td></tr>`;
|
|
}
|
|
}
|
|
|
|
function showNewUserModal() {
|
|
document.getElementById('user-form').reset();
|
|
document.getElementById('user-modal-error').classList.add('d-none');
|
|
new bootstrap.Modal(document.getElementById('user-modal')).show();
|
|
}
|
|
|
|
async function saveNewUser() {
|
|
const errorEl = document.getElementById('user-modal-error');
|
|
errorEl.classList.add('d-none');
|
|
|
|
const langValue = document.getElementById('new-user-language').value;
|
|
const payload = {
|
|
username: document.getElementById('new-user-username').value,
|
|
password: document.getElementById('new-user-password').value,
|
|
email: document.getElementById('new-user-email').value || null,
|
|
default_language: langValue || null,
|
|
};
|
|
|
|
try {
|
|
await api('POST', '/users', payload);
|
|
bootstrap.Modal.getInstance(document.getElementById('user-modal')).hide();
|
|
showSettingsAlert('success', t('messages.userCreated', { username: payload.username }));
|
|
loadUsers();
|
|
} catch (err) {
|
|
errorEl.textContent = err.message;
|
|
errorEl.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
async function deleteUser(id, username) {
|
|
if (!confirm(t('messages.confirmDeleteUser', { username }))) return;
|
|
try {
|
|
await api('DELETE', `/users/${id}`);
|
|
showSettingsAlert('success', t('messages.userDeleted', { username }));
|
|
loadUsers();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.deleteFailed', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
async function toggleUserActive(id, active) {
|
|
try {
|
|
await api('PUT', `/users/${id}`, { is_active: active });
|
|
loadUsers();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.updateFailed', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
async function resetUserPassword(id, username) {
|
|
if (!confirm(t('messages.confirmResetPassword', { username }))) return;
|
|
try {
|
|
const data = await api('POST', `/users/${id}/reset-password`);
|
|
alert(t('messages.newPasswordAlert', { username, password: data.new_password }));
|
|
showSettingsAlert('success', t('messages.passwordResetFor', { username }));
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.passwordResetFailed', { error: err.message }));
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Azure AD Settings
|
|
// ---------------------------------------------------------------------------
|
|
document.getElementById('settings-azure-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const payload = {
|
|
azure_enabled: document.getElementById('cfg-azure-enabled').checked,
|
|
azure_tenant_id: document.getElementById('cfg-azure-tenant').value || null,
|
|
azure_client_id: document.getElementById('cfg-azure-client-id').value || null,
|
|
};
|
|
const secret = document.getElementById('cfg-azure-client-secret').value;
|
|
if (secret) payload.azure_client_secret = secret;
|
|
|
|
try {
|
|
await api('PUT', '/settings/system', payload);
|
|
showSettingsAlert('success', t('messages.azureSettingsSaved'));
|
|
document.getElementById('cfg-azure-client-secret').value = '';
|
|
loadSettings();
|
|
await loadAzureLoginConfig();
|
|
} catch (err) {
|
|
showSettingsAlert('danger', t('errors.failed', { error: err.message }));
|
|
}
|
|
});
|
|
|
|
function togglePasswordVisibility(inputId) {
|
|
const input = document.getElementById(inputId);
|
|
if (!input) return;
|
|
const isHidden = input.type === 'password';
|
|
input.type = isHidden ? 'text' : 'password';
|
|
const btn = input.parentElement.querySelector('[data-toggle-pw]');
|
|
if (btn) {
|
|
const icon = btn.querySelector('i');
|
|
if (icon) icon.className = isHidden ? 'bi bi-eye-slash' : 'bi bi-eye';
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Monitoring
|
|
// ---------------------------------------------------------------------------
|
|
async function loadMonitoring() {
|
|
await Promise.all([loadResources(), loadAllCustomerStatuses()]);
|
|
}
|
|
|
|
async function loadResources() {
|
|
try {
|
|
const data = await api('GET', '/monitoring/resources');
|
|
document.getElementById('monitoring-resources').innerHTML = `
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="text-muted small">${t('monitoring.hostname')}</div>
|
|
<div class="fw-bold">${esc(data.hostname)}</div>
|
|
<div class="text-muted small">${esc(data.os)}</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-muted small">${t('monitoring.cpu', { count: data.cpu.count })}</div>
|
|
<div class="progress mt-1" style="height: 20px;">
|
|
<div class="progress-bar ${data.cpu.percent > 80 ? 'bg-danger' : data.cpu.percent > 50 ? 'bg-warning' : 'bg-success'}"
|
|
style="width: ${data.cpu.percent}%">${data.cpu.percent}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-muted small">${t('monitoring.memory', { used: data.memory.used_gb, total: data.memory.total_gb })}</div>
|
|
<div class="progress mt-1" style="height: 20px;">
|
|
<div class="progress-bar ${data.memory.percent > 80 ? 'bg-danger' : data.memory.percent > 50 ? 'bg-warning' : 'bg-success'}"
|
|
style="width: ${data.memory.percent}%">${data.memory.percent}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="text-muted small">${t('monitoring.disk', { used: data.disk.used_gb, total: data.disk.total_gb })}</div>
|
|
<div class="progress mt-1" style="height: 20px;">
|
|
<div class="progress-bar ${data.disk.percent > 80 ? 'bg-danger' : data.disk.percent > 50 ? 'bg-warning' : 'bg-success'}"
|
|
style="width: ${data.disk.percent}%">${data.disk.percent}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} catch (err) {
|
|
document.getElementById('monitoring-resources').innerHTML = `<div class="alert alert-danger">${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadAllCustomerStatuses() {
|
|
try {
|
|
const data = await api('GET', '/monitoring/customers');
|
|
const tbody = document.getElementById('monitoring-customers-body');
|
|
if (!data || data.length === 0) {
|
|
tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">${t('monitoring.noCustomers')}</td></tr>`;
|
|
return;
|
|
}
|
|
tbody.innerHTML = data.map(c => {
|
|
const containerInfo = c.containers.map(ct => `${ct.name}: ${ct.status}`).join(', ') || '-';
|
|
const dashPort = c.dashboard_port;
|
|
const dashLink = dashPort
|
|
? `<a href="${esc(c.setup_url || 'http://localhost:' + dashPort)}" target="_blank">:${dashPort}</a>`
|
|
: '-';
|
|
return `<tr>
|
|
<td>${c.id}</td>
|
|
<td>${esc(c.name)}</td>
|
|
<td><code>${esc(c.subdomain)}</code></td>
|
|
<td>${statusBadge(c.status)}</td>
|
|
<td>${c.deployment_status ? statusBadge(c.deployment_status) : '-'}</td>
|
|
<td>${dashLink}</td>
|
|
<td>${c.relay_udp_port || '-'}</td>
|
|
<td class="small">${esc(containerInfo)}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
} catch (err) {
|
|
document.getElementById('monitoring-customers-body').innerHTML = `<tr><td colspan="8" class="text-danger">${err.message}</td></tr>`;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
function statusBadge(status) {
|
|
const map = {
|
|
active: 'success', running: 'success',
|
|
inactive: 'secondary', stopped: 'secondary',
|
|
deploying: 'info', pending: 'info',
|
|
error: 'danger', failed: 'danger',
|
|
};
|
|
const color = map[status] || 'secondary';
|
|
return `<span class="badge bg-${color}">${status}</span>`;
|
|
}
|
|
|
|
function formatDate(isoStr) {
|
|
if (!isoStr) return '-';
|
|
const locale = getCurrentLanguage() === 'de' ? 'de-DE' : 'en-US';
|
|
const d = new Date(isoStr);
|
|
return d.toLocaleDateString(locale) + ' ' + d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function esc(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function debounce(fn, delay) {
|
|
let timer;
|
|
return function (...args) {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => fn.apply(this, args), delay);
|
|
};
|
|
}
|
|
|
|
function showToast(message) {
|
|
// Simple inline notification
|
|
const el = document.createElement('div');
|
|
el.className = 'toast-notification';
|
|
el.textContent = message;
|
|
document.body.appendChild(el);
|
|
setTimeout(() => el.remove(), 3000);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Init
|
|
// ---------------------------------------------------------------------------
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Check for Azure AD callback first
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.has('code')) {
|
|
await initI18n();
|
|
await loadBranding();
|
|
const handled = await handleAzureCallback();
|
|
if (handled) return;
|
|
}
|
|
initApp();
|
|
});
|