fix admin panel
This commit is contained in:
763
internal/server/admin_html.go
Normal file
763
internal/server/admin_html.go
Normal file
@@ -0,0 +1,763 @@
|
||||
package server
|
||||
|
||||
// adminPanelHTML is the embedded admin panel UI
|
||||
const adminPanelHTML = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ZFS Backup Admin Panel</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: #f5f5f5; min-height: 100vh; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||||
.header { background: #2c3e50; color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.header h1 { font-size: 24px; }
|
||||
.header button { background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
|
||||
.header button:hover { background: #c0392b; }
|
||||
.login-container { max-width: 400px; margin: 100px auto; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
|
||||
.login-container h2 { text-align: center; margin-bottom: 30px; color: #2c3e50; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label { display: block; margin-bottom: 5px; color: #666; }
|
||||
.form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
|
||||
.btn { background: #3498db; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 14px; }
|
||||
.btn:hover { background: #2980b9; }
|
||||
.btn-danger { background: #e74c3c; }
|
||||
.btn-danger:hover { background: #c0392b; }
|
||||
.btn-success { background: #27ae60; }
|
||||
.btn-success:hover { background: #229954; }
|
||||
.btn-warning { background: #f39c12; }
|
||||
.btn-warning:hover { background: #d68910; }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; margin: 2px; }
|
||||
.error { color: #e74c3c; margin-bottom: 20px; text-align: center; }
|
||||
.success { color: #27ae60; margin-bottom: 20px; text-align: center; }
|
||||
.hidden { display: none !important; }
|
||||
.card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
|
||||
.card-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-header h3 { color: #2c3e50; }
|
||||
.card-body { padding: 20px; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
|
||||
th { background: #f8f9fa; font-weight: 600; color: #666; }
|
||||
tr:hover { background: #f8f9fa; }
|
||||
.badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
|
||||
.badge-success { background: #d4edda; color: #155724; }
|
||||
.badge-danger { background: #f8d7da; color: #721c24; }
|
||||
.badge-info { background: #d1ecf1; color: #0c5460; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
|
||||
.stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; }
|
||||
.stat-card h4 { color: #666; font-size: 14px; margin-bottom: 10px; }
|
||||
.stat-card .value { font-size: 32px; font-weight: bold; color: #2c3e50; }
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
||||
.modal-content { background: white; padding: 30px; border-radius: 8px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
|
||||
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.modal-header h3 { color: #2c3e50; }
|
||||
.close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; line-height: 1; }
|
||||
.close-btn:hover { color: #333; }
|
||||
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 20px; background: white; border: none; border-radius: 4px; cursor: pointer; color: #666; }
|
||||
.tab.active { background: #3498db; color: white; }
|
||||
.progress { background: #ecf0f1; border-radius: 4px; height: 8px; overflow: hidden; }
|
||||
.progress-bar { background: #3498db; height: 100%; transition: width 0.3s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="login-page" class="login-container">
|
||||
<h2>Admin Login</h2>
|
||||
<div id="login-error" class="error hidden"></div>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" id="username" required autocomplete="username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" id="password" required autocomplete="current-password">
|
||||
</div>
|
||||
<button type="submit" class="btn" style="width: 100%;">Login</button>
|
||||
</form>
|
||||
<p style="margin-top: 20px; text-align: center; color: #666; font-size: 12px;">Default: admin / admin123</p>
|
||||
</div>
|
||||
|
||||
<div id="admin-page" class="container hidden">
|
||||
<div class="header">
|
||||
<h1>ZFS Backup Admin Panel</h1>
|
||||
<div>
|
||||
<span id="admin-user" style="margin-right: 15px;"></span>
|
||||
<button onclick="logout()">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid" id="stats-grid"></div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" data-tab="clients" onclick="showTab('clients')">Clients</button>
|
||||
<button class="tab" data-tab="snapshots" onclick="showTab('snapshots')">Snapshots</button>
|
||||
<button class="tab" data-tab="admins" onclick="showTab('admins')">Admins</button>
|
||||
</div>
|
||||
|
||||
<div id="clients-tab">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Clients</h3>
|
||||
<button class="btn btn-success" onclick="showModal('add-client-modal')">+ Add Client</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client ID</th>
|
||||
<th>Storage Type</th>
|
||||
<th>Quota</th>
|
||||
<th>Used</th>
|
||||
<th>Snapshots</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="clients-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="snapshots-tab" class="hidden">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Snapshots</h3>
|
||||
<select id="snapshot-client-filter" onchange="loadSnapshots()">
|
||||
<option value="">All Clients</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client</th>
|
||||
<th>Snapshot ID</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Size</th>
|
||||
<th>Type</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="snapshots-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="admins-tab" class="hidden">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Admin Users</h3>
|
||||
<button class="btn btn-success" onclick="showModal('add-admin-modal')">+ Add Admin</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Username</th>
|
||||
<th>Role</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="admins-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Client Modal -->
|
||||
<div id="add-client-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'add-client-modal')">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3>Add New Client</h3>
|
||||
<button type="button" class="close-btn" onclick="closeModal('add-client-modal')">×</button>
|
||||
</div>
|
||||
<form id="add-client-form">
|
||||
<div class="form-group">
|
||||
<label>Client ID</label>
|
||||
<input type="text" id="new-client-id" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>API Key</label>
|
||||
<input type="text" id="new-client-apikey" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Storage Type</label>
|
||||
<select id="new-client-storage">
|
||||
<option value="s3">S3</option>
|
||||
<option value="local">Local ZFS</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Target Dataset (for local storage)</label>
|
||||
<input type="text" id="new-client-dataset" placeholder="backup/client1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Quota (GB)</label>
|
||||
<input type="number" id="new-client-quota" value="100" min="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Enabled</label>
|
||||
<input type="checkbox" id="new-client-enabled" checked>
|
||||
</div>
|
||||
<h4 style="margin: 20px 0 10px; color: #666;">Rotation Policy</h4>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
||||
<div class="form-group">
|
||||
<label>Keep Hourly</label>
|
||||
<input type="number" id="new-client-hourly" value="24" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Daily</label>
|
||||
<input type="number" id="new-client-daily" value="7" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Weekly</label>
|
||||
<input type="number" id="new-client-weekly" value="4" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Monthly</label>
|
||||
<input type="number" id="new-client-monthly" value="12" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Create Client</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Client Modal -->
|
||||
<div id="edit-client-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'edit-client-modal')">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3>Edit Client</h3>
|
||||
<button type="button" class="close-btn" onclick="closeModal('edit-client-modal')">×</button>
|
||||
</div>
|
||||
<form id="edit-client-form">
|
||||
<input type="hidden" id="edit-client-id">
|
||||
<div class="form-group">
|
||||
<label>New API Key (leave empty to keep current)</label>
|
||||
<input type="text" id="edit-client-apikey" placeholder="Leave empty to keep current">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Storage Type</label>
|
||||
<select id="edit-client-storage">
|
||||
<option value="s3">S3</option>
|
||||
<option value="local">Local ZFS</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Target Dataset</label>
|
||||
<input type="text" id="edit-client-dataset">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Quota (GB)</label>
|
||||
<input type="number" id="edit-client-quota" min="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Enabled</label>
|
||||
<input type="checkbox" id="edit-client-enabled">
|
||||
</div>
|
||||
<h4 style="margin: 20px 0 10px; color: #666;">Rotation Policy</h4>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
||||
<div class="form-group">
|
||||
<label>Keep Hourly</label>
|
||||
<input type="number" id="edit-client-hourly" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Daily</label>
|
||||
<input type="number" id="edit-client-daily" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Weekly</label>
|
||||
<input type="number" id="edit-client-weekly" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Keep Monthly</label>
|
||||
<input type="number" id="edit-client-monthly" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Update Client</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Admin Modal -->
|
||||
<div id="add-admin-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'add-admin-modal')">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3>Add New Admin</h3>
|
||||
<button type="button" class="close-btn" onclick="closeModal('add-admin-modal')">×</button>
|
||||
</div>
|
||||
<form id="add-admin-form">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" id="new-admin-username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" id="new-admin-password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Role</label>
|
||||
<select id="new-admin-role">
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Create Admin</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div id="change-password-modal" class="modal-overlay hidden" onclick="closeModalOnOverlay(event, 'change-password-modal')">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<h3>Change Password</h3>
|
||||
<button type="button" class="close-btn" onclick="closeModal('change-password-modal')">×</button>
|
||||
</div>
|
||||
<form id="change-password-form">
|
||||
<input type="hidden" id="change-password-admin-id">
|
||||
<div class="form-group">
|
||||
<label>Admin Username</label>
|
||||
<input type="text" id="change-password-username" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Password</label>
|
||||
<input type="password" id="change-password-new" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Confirm New Password</label>
|
||||
<input type="password" id="change-password-confirm" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success" style="width: 100%; margin-top: 20px;">Change Password</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentTab = 'clients';
|
||||
|
||||
// Check authentication on load
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const res = await fetch('/admin/check');
|
||||
const data = await res.json();
|
||||
if (data.authenticated) {
|
||||
document.getElementById('login-page').classList.add('hidden');
|
||||
document.getElementById('admin-page').classList.remove('hidden');
|
||||
document.getElementById('admin-user').textContent = data.username;
|
||||
loadStats();
|
||||
loadClients();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Auth check failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Login
|
||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
document.getElementById('login-page').classList.add('hidden');
|
||||
document.getElementById('admin-page').classList.remove('hidden');
|
||||
document.getElementById('admin-user').textContent = username;
|
||||
loadStats();
|
||||
loadClients();
|
||||
} else {
|
||||
document.getElementById('login-error').textContent = data.message || 'Login failed';
|
||||
document.getElementById('login-error').classList.remove('hidden');
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('login-error').textContent = 'Connection error';
|
||||
document.getElementById('login-error').classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Logout
|
||||
async function logout() {
|
||||
await fetch('/admin/logout', { method: 'POST' });
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// Load stats
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await fetch('/admin/stats');
|
||||
const data = await res.json();
|
||||
document.getElementById('stats-grid').innerHTML =
|
||||
'<div class="stat-card"><h4>Clients</h4><div class="value">' + data.client_count + '</div></div>' +
|
||||
'<div class="stat-card"><h4>Total Snapshots</h4><div class="value">' + data.total_snapshots + '</div></div>' +
|
||||
'<div class="stat-card"><h4>Total Storage</h4><div class="value">' + data.total_storage_gb.toFixed(2) + ' GB</div></div>';
|
||||
} catch (e) {
|
||||
console.error('Failed to load stats:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Load clients
|
||||
async function loadClients() {
|
||||
try {
|
||||
const res = await fetch('/admin/clients');
|
||||
const clients = await res.json();
|
||||
|
||||
const tbody = document.getElementById('clients-table');
|
||||
tbody.innerHTML = clients.map(c => {
|
||||
const usedPercent = c.max_size_bytes > 0 ? (c.current_usage / c.max_size_bytes * 100).toFixed(1) : 0;
|
||||
const usedGB = (c.current_usage / (1024*1024*1024)).toFixed(2);
|
||||
const maxGB = (c.max_size_bytes / (1024*1024*1024)).toFixed(0);
|
||||
return '<tr>' +
|
||||
'<td><strong>' + c.client_id + '</strong></td>' +
|
||||
'<td><span class="badge badge-info">' + c.storage_type + '</span></td>' +
|
||||
'<td>' + maxGB + ' GB</td>' +
|
||||
'<td>' +
|
||||
'<div>' + usedGB + ' GB (' + usedPercent + '%)</div>' +
|
||||
'<div class="progress" style="width: 100px; margin-top: 4px;"><div class="progress-bar" style="width: ' + Math.min(usedPercent, 100) + '%;"></div></div>' +
|
||||
'</td>' +
|
||||
'<td>' + c.snapshot_count + '</td>' +
|
||||
'<td>' + (c.enabled ? '<span class="badge badge-success">Enabled</span>' : '<span class="badge badge-danger">Disabled</span>') + '</td>' +
|
||||
'<td>' +
|
||||
'<button class="btn btn-sm btn-warning" onclick="editClient(\'' + c.client_id + '\')">Edit</button>' +
|
||||
'<button class="btn btn-sm btn-danger" onclick="deleteClient(\'' + c.client_id + '\')">Delete</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
}).join('');
|
||||
|
||||
// Update snapshot filter
|
||||
const filter = document.getElementById('snapshot-client-filter');
|
||||
filter.innerHTML = '<option value="">All Clients</option>' +
|
||||
clients.map(c => '<option value="' + c.client_id + '">' + c.client_id + '</option>').join('');
|
||||
} catch (e) {
|
||||
console.error('Failed to load clients:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Load snapshots
|
||||
async function loadSnapshots() {
|
||||
const clientId = document.getElementById('snapshot-client-filter').value;
|
||||
const url = '/admin/snapshots' + (clientId ? '?client_id=' + clientId : '');
|
||||
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const snapshots = await res.json();
|
||||
|
||||
const tbody = document.getElementById('snapshots-table');
|
||||
tbody.innerHTML = snapshots.map(s => {
|
||||
const sizeGB = (s.size_bytes / (1024*1024*1024)).toFixed(2);
|
||||
return '<tr>' +
|
||||
'<td>' + s.client_id + '</td>' +
|
||||
'<td>' + s.snapshot_id + '</td>' +
|
||||
'<td>' + new Date(s.timestamp).toLocaleString() + '</td>' +
|
||||
'<td>' + sizeGB + ' GB</td>' +
|
||||
'<td>' +
|
||||
(s.incremental ? '<span class="badge badge-info">Incremental</span>' : '<span class="badge badge-success">Full</span>') +
|
||||
(s.compressed ? ' <span class="badge badge-info">Compressed</span>' : '') +
|
||||
'</td>' +
|
||||
'<td><button class="btn btn-sm btn-danger" onclick="deleteSnapshot(\'' + s.client_id + '\', \'' + s.snapshot_id + '\')">Delete</button></td>' +
|
||||
'</tr>';
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
console.error('Failed to load snapshots:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Load admins
|
||||
async function loadAdmins() {
|
||||
try {
|
||||
const res = await fetch('/admin/admins');
|
||||
const admins = await res.json();
|
||||
|
||||
const tbody = document.getElementById('admins-table');
|
||||
tbody.innerHTML = admins.map(a =>
|
||||
'<tr>' +
|
||||
'<td>' + a.id + '</td>' +
|
||||
'<td><strong>' + a.username + '</strong></td>' +
|
||||
'<td><span class="badge badge-info">' + a.role + '</span></td>' +
|
||||
'<td>' + new Date(a.created_at).toLocaleDateString() + '</td>' +
|
||||
'<td>' +
|
||||
'<button class="btn btn-sm btn-warning" onclick="showChangePassword(' + a.id + ', \'' + a.username + '\')">Change Password</button>' +
|
||||
'<button class="btn btn-sm btn-danger" onclick="deleteAdmin(' + a.id + ')">Delete</button>' +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
).join('');
|
||||
} catch (e) {
|
||||
console.error('Failed to load admins:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Tab switching
|
||||
function showTab(tab) {
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelector('.tab[data-tab="' + tab + '"]').classList.add('active');
|
||||
|
||||
document.getElementById('clients-tab').classList.add('hidden');
|
||||
document.getElementById('snapshots-tab').classList.add('hidden');
|
||||
document.getElementById('admins-tab').classList.add('hidden');
|
||||
document.getElementById(tab + '-tab').classList.remove('hidden');
|
||||
|
||||
if (tab === 'snapshots') loadSnapshots();
|
||||
if (tab === 'admins') loadAdmins();
|
||||
}
|
||||
|
||||
// Modal functions
|
||||
function showModal(id) {
|
||||
document.getElementById(id).classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
document.getElementById(id).classList.add('hidden');
|
||||
}
|
||||
|
||||
function closeModalOnOverlay(event, id) {
|
||||
if (event.target === event.currentTarget) {
|
||||
closeModal(id);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit client
|
||||
async function editClient(clientId) {
|
||||
try {
|
||||
const res = await fetch('/admin/client?client_id=' + clientId);
|
||||
const data = await res.json();
|
||||
const c = data.client;
|
||||
|
||||
document.getElementById('edit-client-id').value = c.client_id;
|
||||
document.getElementById('edit-client-apikey').value = '';
|
||||
document.getElementById('edit-client-storage').value = c.storage_type;
|
||||
document.getElementById('edit-client-dataset').value = c.dataset;
|
||||
document.getElementById('edit-client-quota').value = Math.round(c.max_size_bytes / (1024*1024*1024));
|
||||
document.getElementById('edit-client-enabled').checked = c.enabled;
|
||||
|
||||
if (c.rotation_policy) {
|
||||
document.getElementById('edit-client-hourly').value = c.rotation_policy.keep_hourly || 0;
|
||||
document.getElementById('edit-client-daily').value = c.rotation_policy.keep_daily || 0;
|
||||
document.getElementById('edit-client-weekly').value = c.rotation_policy.keep_weekly || 0;
|
||||
document.getElementById('edit-client-monthly').value = c.rotation_policy.keep_monthly || 0;
|
||||
}
|
||||
|
||||
showModal('edit-client-modal');
|
||||
} catch (e) {
|
||||
alert('Failed to load client data');
|
||||
}
|
||||
}
|
||||
|
||||
// Add client
|
||||
document.getElementById('add-client-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const client = {
|
||||
client_id: document.getElementById('new-client-id').value,
|
||||
api_key: document.getElementById('new-client-apikey').value,
|
||||
storage_type: document.getElementById('new-client-storage').value,
|
||||
dataset: document.getElementById('new-client-dataset').value,
|
||||
max_size_bytes: parseInt(document.getElementById('new-client-quota').value) * 1024 * 1024 * 1024,
|
||||
enabled: document.getElementById('new-client-enabled').checked,
|
||||
rotation_policy: {
|
||||
keep_hourly: parseInt(document.getElementById('new-client-hourly').value) || 0,
|
||||
keep_daily: parseInt(document.getElementById('new-client-daily').value) || 0,
|
||||
keep_weekly: parseInt(document.getElementById('new-client-weekly').value) || 0,
|
||||
keep_monthly: parseInt(document.getElementById('new-client-monthly').value) || 0
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/client/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(client)
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
closeModal('add-client-modal');
|
||||
document.getElementById('add-client-form').reset();
|
||||
loadClients();
|
||||
loadStats();
|
||||
} else {
|
||||
alert(data.message || 'Failed to create client');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to create client');
|
||||
}
|
||||
});
|
||||
|
||||
// Edit client form
|
||||
document.getElementById('edit-client-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const client = {
|
||||
client_id: document.getElementById('edit-client-id').value,
|
||||
api_key: document.getElementById('edit-client-apikey').value,
|
||||
storage_type: document.getElementById('edit-client-storage').value,
|
||||
dataset: document.getElementById('edit-client-dataset').value,
|
||||
max_size_bytes: parseInt(document.getElementById('edit-client-quota').value) * 1024 * 1024 * 1024,
|
||||
enabled: document.getElementById('edit-client-enabled').checked,
|
||||
rotation_policy: {
|
||||
keep_hourly: parseInt(document.getElementById('edit-client-hourly').value) || 0,
|
||||
keep_daily: parseInt(document.getElementById('edit-client-daily').value) || 0,
|
||||
keep_weekly: parseInt(document.getElementById('edit-client-weekly').value) || 0,
|
||||
keep_monthly: parseInt(document.getElementById('edit-client-monthly').value) || 0
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/client/update', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(client)
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
closeModal('edit-client-modal');
|
||||
loadClients();
|
||||
loadStats();
|
||||
} else {
|
||||
alert(data.message || 'Failed to update client');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to update client');
|
||||
}
|
||||
});
|
||||
|
||||
// Add admin
|
||||
document.getElementById('add-admin-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const admin = {
|
||||
username: document.getElementById('new-admin-username').value,
|
||||
password: document.getElementById('new-admin-password').value,
|
||||
role: document.getElementById('new-admin-role').value
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/admin/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(admin)
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
closeModal('add-admin-modal');
|
||||
document.getElementById('add-admin-form').reset();
|
||||
loadAdmins();
|
||||
} else {
|
||||
alert(data.message || 'Failed to create admin');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to create admin');
|
||||
}
|
||||
});
|
||||
|
||||
// Change password
|
||||
function showChangePassword(adminId, username) {
|
||||
document.getElementById('change-password-admin-id').value = adminId;
|
||||
document.getElementById('change-password-username').value = username;
|
||||
document.getElementById('change-password-new').value = '';
|
||||
document.getElementById('change-password-confirm').value = '';
|
||||
showModal('change-password-modal');
|
||||
}
|
||||
|
||||
document.getElementById('change-password-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const adminId = document.getElementById('change-password-admin-id').value;
|
||||
const newPassword = document.getElementById('change-password-new').value;
|
||||
const confirmPassword = document.getElementById('change-password-confirm').value;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/admin/password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id: parseInt(adminId), password: newPassword })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
closeModal('change-password-modal');
|
||||
alert('Password changed successfully');
|
||||
} else {
|
||||
alert(data.message || 'Failed to change password');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to change password');
|
||||
}
|
||||
});
|
||||
|
||||
// Delete functions
|
||||
async function deleteClient(clientId) {
|
||||
if (!confirm('Are you sure you want to delete client "' + clientId + '" and all its snapshots?')) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/client/delete?client_id=' + clientId, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
loadClients();
|
||||
loadStats();
|
||||
} else {
|
||||
alert(data.message || 'Failed to delete client');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to delete client');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSnapshot(clientId, snapshotId) {
|
||||
if (!confirm('Are you sure you want to delete snapshot "' + snapshotId + '"?')) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/snapshot/delete?client_id=' + clientId + '&snapshot_id=' + snapshotId, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
loadSnapshots();
|
||||
loadStats();
|
||||
} else {
|
||||
alert(data.message || 'Failed to delete snapshot');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to delete snapshot');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteAdmin(id) {
|
||||
if (!confirm('Are you sure you want to delete this admin?')) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/admin/admin/delete?id=' + id, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
loadAdmins();
|
||||
} else {
|
||||
alert(data.message || 'Failed to delete admin');
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Failed to delete admin');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
checkAuth();
|
||||
</script>
|
||||
</body>
|
||||
</html>`
|
||||
Reference in New Issue
Block a user