Unify backup/restore into single v2.0 file with full state capture
Server export now includes encryption key, themes, and all config files. Client export bundles all DashCaddy localStorage keys (19 named + dynamic widget keys) as browserState. Restore handles both server and browser state in one operation. Legacy v1.0 import format still supported. Removed redundant Export/Import toolbar buttons — Backup modal is now the single entry point. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,94 @@
|
||||
// ========== BACKUP/RESTORE (Enhanced) ==========
|
||||
// ========== UNIFIED BACKUP/RESTORE v2.0 ==========
|
||||
// Single file captures everything: server config + browser state + themes + encryption key
|
||||
(function() {
|
||||
// All DashCaddy localStorage keys to include in backup
|
||||
var BROWSER_STATE_KEYS = [
|
||||
'dashcaddy_site_config', 'dashcaddy_onboarding', 'dashcaddy-encryption-key',
|
||||
'dashcaddy-setup', 'dashcaddy-config',
|
||||
'theme', 'user-themes', 'custom-theme',
|
||||
'custom-apps', 'custom-services', 'toolbar-sections',
|
||||
'weather-location', 'weather-zip', 'weather-geo', 'weather-unit',
|
||||
'clock-style', 'clock-chimes', 'clock-chime-volume'
|
||||
];
|
||||
|
||||
// Collect all DashCaddy browser state from localStorage
|
||||
function collectBrowserState() {
|
||||
var state = {};
|
||||
// Grab all whitelisted keys
|
||||
for (var i = 0; i < BROWSER_STATE_KEYS.length; i++) {
|
||||
var key = BROWSER_STATE_KEYS[i];
|
||||
var val = safeGet(key);
|
||||
if (val !== null && val !== undefined) state[key] = val;
|
||||
}
|
||||
// Grab dynamic widget-*-enabled keys
|
||||
try {
|
||||
for (var j = 0; j < localStorage.length; j++) {
|
||||
var k = localStorage.key(j);
|
||||
if (/^widget-.+-enabled$/.test(k)) {
|
||||
state[k] = localStorage.getItem(k);
|
||||
}
|
||||
}
|
||||
} catch (e) { /* private browsing */ }
|
||||
return state;
|
||||
}
|
||||
|
||||
// Restore browser state from backup into localStorage
|
||||
function restoreBrowserState(browserState) {
|
||||
if (!browserState || typeof browserState !== 'object') return 0;
|
||||
var count = 0;
|
||||
for (var key in browserState) {
|
||||
if (!browserState.hasOwnProperty(key)) continue;
|
||||
safeSet(key, browserState[key]);
|
||||
count++;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
// Handle legacy v1.0.0 import-export format (pre-backup modal)
|
||||
function isLegacyFormat(data) {
|
||||
return data.version && !data.files && data.services;
|
||||
}
|
||||
|
||||
function restoreLegacyFormat(data) {
|
||||
// Map the old flat keys into browserState for localStorage restore
|
||||
var browserState = {};
|
||||
if (data.customServices) browserState['custom-services'] = JSON.stringify(data.customServices);
|
||||
if (data.customApps) browserState['custom-apps'] = JSON.stringify(data.customApps);
|
||||
if (data.weatherZip) browserState['weather-zip'] = data.weatherZip;
|
||||
if (data.theme) browserState['theme'] = data.theme;
|
||||
if (data.userThemes && Object.keys(data.userThemes).length) browserState['user-themes'] = JSON.stringify(data.userThemes);
|
||||
restoreBrowserState(browserState);
|
||||
|
||||
// Push services to server if available
|
||||
if (data.services && Array.isArray(data.services)) {
|
||||
secureFetch('/api/v1/services', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data.services)
|
||||
}).catch(function() {});
|
||||
}
|
||||
|
||||
// Push themes to server if available
|
||||
if (data.userThemes) {
|
||||
Object.keys(data.userThemes).forEach(function(slug) {
|
||||
var t = data.userThemes[slug];
|
||||
var colors = {};
|
||||
(window.THEME_PROPS || []).forEach(function(p) { if (t[p]) colors[p] = t[p]; });
|
||||
secureFetch('/api/v1/themes/' + slug, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: t.name || slug, colors: colors })
|
||||
}).catch(function() {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Inject modal HTML
|
||||
injectModal('backup-modal', `<div id="backup-modal" class="weather-modal">
|
||||
<div class="weather-modal-content" style="min-width: 550px; max-width: 650px;">
|
||||
<h3>💾 Backup & Restore</h3>
|
||||
<p class="modal-subtitle">
|
||||
Manual and automated backups for your DashCaddy configuration.
|
||||
Full backup of your entire DashCaddy setup — server config, credentials, themes, and browser preferences in one file.
|
||||
</p>
|
||||
|
||||
<!-- Tab bar -->
|
||||
@@ -15,16 +98,16 @@
|
||||
<button class="panel-tab" data-panel="backup-history-tab">History</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Manual (existing export/import) -->
|
||||
<!-- Tab: Manual -->
|
||||
<div id="backup-manual" class="panel-section active">
|
||||
<!-- Export Section -->
|
||||
<div style="margin-bottom: 20px; padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, #27ae60 15%, transparent), color-mix(in srgb, #2ecc71 10%, transparent)); border-radius: 10px; border: 1px solid #27ae60;">
|
||||
<h4 style="margin: 0 0 8px; color: #2ecc71; font-size: 0.95rem;">📤 Export Backup</h4>
|
||||
<p style="font-size: 0.8rem; color: var(--muted); margin: 0 0 12px;">
|
||||
Download all your settings: services, Caddyfile, DNS credentials, notifications.
|
||||
Downloads everything — services, Caddyfile, credentials, encryption key, themes, and all browser preferences.
|
||||
</p>
|
||||
<button id="backup-export-btn" style="width: 100%; padding: 10px; background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); border: none; color: white; font-weight: 600; border-radius: 8px; cursor: pointer;">
|
||||
⬇️ Download Backup
|
||||
⬇️ Download Full Backup
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +115,7 @@
|
||||
<div style="padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, #3498db 15%, transparent), color-mix(in srgb, #2980b9 10%, transparent)); border-radius: 10px; border: 1px solid #3498db;">
|
||||
<h4 style="margin: 0 0 8px; color: #3498db; font-size: 0.95rem;">📥 Restore Backup</h4>
|
||||
<p style="font-size: 0.8rem; color: var(--muted); margin: 0 0 12px;">
|
||||
Upload a backup file to restore your configuration.
|
||||
Upload a backup file to restore your entire configuration — drag and drop ready.
|
||||
</p>
|
||||
<input type="file" id="backup-file-input" accept=".json" style="display: none;" />
|
||||
<button id="backup-select-file" style="width: 100%; padding: 10px; background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); border: none; color: white; font-weight: 600; border-radius: 8px; cursor: pointer;">
|
||||
@@ -52,7 +135,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<button id="backup-do-restore-btn" style="width: 100%; margin-top: 12px; padding: 10px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); border: none; color: white; font-weight: 600; border-radius: 8px; cursor: pointer;">
|
||||
⚡ Restore Configuration
|
||||
⚡ Restore Everything
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -87,24 +170,24 @@
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
const modal = document.getElementById('backup-modal');
|
||||
const openBtn = document.getElementById('backup-restore-btn');
|
||||
const cancelBtn = document.getElementById('backup-cancel');
|
||||
const exportBtn = document.getElementById('backup-export-btn');
|
||||
const selectFileBtn = document.getElementById('backup-select-file');
|
||||
const fileInput = document.getElementById('backup-file-input');
|
||||
const fileNameDiv = document.getElementById('backup-file-name');
|
||||
const previewDiv = document.getElementById('backup-preview');
|
||||
const previewContent = document.getElementById('backup-preview-content');
|
||||
const restoreBtn = document.getElementById('backup-do-restore-btn');
|
||||
const resultDiv = document.getElementById('backup-result');
|
||||
const scheduleContainer = document.getElementById('backup-schedule-container');
|
||||
const historyContainer = document.getElementById('backup-history-container');
|
||||
var modal = document.getElementById('backup-modal');
|
||||
var openBtn = document.getElementById('backup-restore-btn');
|
||||
var cancelBtn = document.getElementById('backup-cancel');
|
||||
var exportBtn = document.getElementById('backup-export-btn');
|
||||
var selectFileBtn = document.getElementById('backup-select-file');
|
||||
var fileInput = document.getElementById('backup-file-input');
|
||||
var fileNameDiv = document.getElementById('backup-file-name');
|
||||
var previewDiv = document.getElementById('backup-preview');
|
||||
var previewContent = document.getElementById('backup-preview-content');
|
||||
var restoreBtn = document.getElementById('backup-do-restore-btn');
|
||||
var resultDiv = document.getElementById('backup-result');
|
||||
var scheduleContainer = document.getElementById('backup-schedule-container');
|
||||
var historyContainer = document.getElementById('backup-history-container');
|
||||
|
||||
let selectedBackup = null;
|
||||
var selectedBackup = null;
|
||||
|
||||
// Open modal
|
||||
openBtn?.addEventListener('click', () => {
|
||||
openBtn?.addEventListener('click', function() {
|
||||
modal.classList.add('show');
|
||||
if (resultDiv) resultDiv.style.display = 'none';
|
||||
if (previewDiv) previewDiv.style.display = 'none';
|
||||
@@ -114,79 +197,122 @@
|
||||
|
||||
wireModal(modal, cancelBtn);
|
||||
|
||||
// Export backup
|
||||
exportBtn?.addEventListener('click', async () => {
|
||||
// === EXPORT: Server backup + browser state in one file ===
|
||||
exportBtn?.addEventListener('click', async function() {
|
||||
exportBtn.disabled = true;
|
||||
exportBtn.innerHTML = '<span class="brand-spinner"></span> Exporting...';
|
||||
try {
|
||||
const response = await fetch('/api/v1/backup/export');
|
||||
const data = await response.json();
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
// Fetch server-side backup (config, services, caddyfile, credentials, encryption key, themes, etc.)
|
||||
var response = await fetch('/api/v1/backup/export');
|
||||
var data = await response.json();
|
||||
|
||||
// Add all browser localStorage state
|
||||
data.browserState = collectBrowserState();
|
||||
|
||||
// Download unified backup
|
||||
var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `dashcaddy-backup-${new Date().toISOString().split('T')[0]}.json`;
|
||||
a.download = 'dashcaddy-backup-' + new Date().toISOString().split('T')[0] + '.json';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
resultDiv.innerHTML = '✅ Backup downloaded successfully!';
|
||||
|
||||
var stateCount = Object.keys(data.browserState).length;
|
||||
var themeCount = data.themes ? Object.keys(data.themes).length : 0;
|
||||
resultDiv.innerHTML = '✅ Full backup downloaded — server config + ' + stateCount + ' browser settings' + (themeCount ? ' + ' + themeCount + ' themes' : '');
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--ok-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--ok-fg)';
|
||||
} catch (e) {
|
||||
resultDiv.innerHTML = `❌ Export failed: ${escapeHtml(e.message)}`;
|
||||
resultDiv.innerHTML = '❌ Export failed: ' + escapeHtml(e.message);
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--bad-fg)';
|
||||
}
|
||||
exportBtn.disabled = false;
|
||||
exportBtn.innerHTML = '⬇️ Download Backup';
|
||||
exportBtn.innerHTML = '⬇️ Download Full Backup';
|
||||
});
|
||||
|
||||
// Select file button
|
||||
selectFileBtn?.addEventListener('click', () => fileInput.click());
|
||||
selectFileBtn?.addEventListener('click', function() { fileInput.click(); });
|
||||
|
||||
// File selected
|
||||
fileInput?.addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
// === FILE SELECTED: Preview contents ===
|
||||
fileInput?.addEventListener('change', async function(e) {
|
||||
var file = e.target.files[0];
|
||||
if (!file) return;
|
||||
fileNameDiv.textContent = `📄 ${file.name}`;
|
||||
fileNameDiv.textContent = '📄 ' + file.name;
|
||||
fileNameDiv.style.display = 'block';
|
||||
resultDiv.style.display = 'none';
|
||||
try {
|
||||
const text = await file.text();
|
||||
const backup = JSON.parse(text);
|
||||
const response = await secureFetch('/api/v1/backup/preview', {
|
||||
var text = await file.text();
|
||||
var backup = JSON.parse(text);
|
||||
|
||||
// Handle legacy v1.0.0 format (from old import-export.js)
|
||||
if (isLegacyFormat(backup)) {
|
||||
selectedBackup = backup;
|
||||
var html = '<div style="margin-bottom: 8px; color: var(--muted); font-size: 0.8rem;">Legacy format (v' + escapeHtml(backup.version) + ')</div>';
|
||||
html += '<div style="display: flex; flex-wrap: wrap; gap: 6px;">';
|
||||
if (backup.services?.length) html += '<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">📋 ' + backup.services.length + ' services</span>';
|
||||
if (backup.customApps?.length) html += '<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">📦 ' + backup.customApps.length + ' custom apps</span>';
|
||||
if (backup.theme) html += '<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">🎨 Theme: ' + escapeHtml(backup.theme) + '</span>';
|
||||
if (backup.userThemes) html += '<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">🎨 ' + Object.keys(backup.userThemes).length + ' custom themes</span>';
|
||||
html += '</div>';
|
||||
previewContent.innerHTML = html;
|
||||
previewDiv.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
// v1.1+ / v2.0 format — send to server for preview
|
||||
var response = await secureFetch('/api/v1/backup/preview', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(backup)
|
||||
});
|
||||
const preview = await response.json();
|
||||
var preview = await response.json();
|
||||
if (preview.success) {
|
||||
selectedBackup = backup;
|
||||
let html = `<div style="margin-bottom: 8px; color: var(--muted); font-size: 0.8rem;">
|
||||
Exported: ${new Date(backup.exportedAt).toLocaleString()}</div>`;
|
||||
html += '<div style="display: flex; flex-wrap: wrap; gap: 6px;">';
|
||||
for (const [key, info] of Object.entries(preview.preview.files)) {
|
||||
const icon = info.action === 'create' ? '🆕' : '📝';
|
||||
html += `<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">${icon} ${info.description}</span>`;
|
||||
var html = '<div style="margin-bottom: 8px; color: var(--muted); font-size: 0.8rem;">Exported: ' + new Date(backup.exportedAt).toLocaleString() + ' (v' + escapeHtml(backup.version) + ')</div>';
|
||||
|
||||
// Server files
|
||||
html += '<div style="margin-bottom: 6px; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;">Server Config</div>';
|
||||
html += '<div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;">';
|
||||
for (var key in preview.preview.files) {
|
||||
var info = preview.preview.files[key];
|
||||
var icon = info.action === 'create' ? '🆕' : '📝';
|
||||
html += '<span style="padding: 4px 8px; background: var(--base); border-radius: 4px; font-size: 0.8rem;">' + icon + ' ' + escapeHtml(info.description) + '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// Services count
|
||||
if (preview.preview.serviceCount) {
|
||||
html += `<div style="margin-top: 8px; font-size: 0.8rem; color: var(--accent);">${preview.preview.serviceCount} services in backup</div>`;
|
||||
html += '<div style="font-size: 0.8rem; color: var(--accent); margin-bottom: 6px;">' + preview.preview.serviceCount + ' services</div>';
|
||||
}
|
||||
|
||||
// Themes
|
||||
if (preview.preview.themeCount) {
|
||||
html += '<div style="font-size: 0.8rem; color: var(--accent); margin-bottom: 6px;">🎨 ' + preview.preview.themeCount + ' custom themes</div>';
|
||||
}
|
||||
|
||||
// Browser state
|
||||
if (preview.preview.browserStateCount) {
|
||||
html += '<div style="margin-top: 6px; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;">Browser Preferences</div>';
|
||||
html += '<div style="font-size: 0.8rem; color: var(--accent);">🖥️ ' + preview.preview.browserStateCount + ' saved settings (theme, weather, clock, widgets, etc.)</div>';
|
||||
}
|
||||
|
||||
previewContent.innerHTML = html;
|
||||
previewDiv.style.display = 'block';
|
||||
} else {
|
||||
resultDiv.innerHTML = `⚠️ Invalid backup file: ${escapeHtml(preview.error)}`;
|
||||
resultDiv.innerHTML = '⚠️ Invalid backup file: ' + escapeHtml(preview.error);
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.style.background = 'color-mix(in srgb, #f39c12 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid #f39c12';
|
||||
previewDiv.style.display = 'none';
|
||||
}
|
||||
} catch (e) {
|
||||
resultDiv.innerHTML = `❌ Could not read file: ${escapeHtml(e.message)}`;
|
||||
resultDiv.innerHTML = '❌ Could not read file: ' + escapeHtml(e.message);
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--bad-fg)';
|
||||
@@ -194,103 +320,126 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Restore from file backup
|
||||
restoreBtn?.addEventListener('click', async () => {
|
||||
// === RESTORE: Server + browser state ===
|
||||
restoreBtn?.addEventListener('click', async function() {
|
||||
if (!selectedBackup) return;
|
||||
if (!confirm('This will overwrite your current configuration. Continue?')) return;
|
||||
if (!confirm('This will overwrite your current configuration and browser preferences. Continue?')) return;
|
||||
restoreBtn.disabled = true;
|
||||
restoreBtn.innerHTML = '<span class="brand-spinner"></span> Restoring...';
|
||||
try {
|
||||
const reloadCaddy = document.getElementById('backup-reload-caddy')?.checked ?? true;
|
||||
const response = await secureFetch('/api/v1/backup/restore', {
|
||||
// Handle legacy format
|
||||
if (isLegacyFormat(selectedBackup)) {
|
||||
restoreLegacyFormat(selectedBackup);
|
||||
resultDiv.innerHTML = '✅ Legacy backup restored — browser settings and services imported.';
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--ok-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--ok-fg)';
|
||||
resultDiv.style.display = 'block';
|
||||
setTimeout(function() { location.reload(); }, 2000);
|
||||
restoreBtn.disabled = false;
|
||||
restoreBtn.innerHTML = '⚡ Restore Everything';
|
||||
return;
|
||||
}
|
||||
|
||||
// v1.1+ / v2.0 — restore server-side first
|
||||
var reloadCaddy = document.getElementById('backup-reload-caddy')?.checked ?? true;
|
||||
var response = await secureFetch('/api/v1/backup/restore', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ backup: selectedBackup, options: { reloadCaddy } })
|
||||
body: JSON.stringify({ backup: selectedBackup, options: { reloadCaddy: reloadCaddy } })
|
||||
});
|
||||
const data = await response.json();
|
||||
var data = await response.json();
|
||||
|
||||
// Then restore browser state
|
||||
var browserCount = 0;
|
||||
if (selectedBackup.browserState) {
|
||||
browserCount = restoreBrowserState(selectedBackup.browserState);
|
||||
}
|
||||
|
||||
if (data.success) {
|
||||
let msg = `✅ ${data.message}`;
|
||||
var msg = '✅ ' + data.message;
|
||||
if (browserCount > 0) msg += '<br><small style="color: var(--muted);">' + browserCount + ' browser settings restored</small>';
|
||||
if (data.results.caddyReloaded) msg += '<br><small style="color: var(--muted);">Caddy configuration reloaded</small>';
|
||||
resultDiv.innerHTML = msg;
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--ok-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--ok-fg)';
|
||||
setTimeout(() => location.reload(), 2000);
|
||||
setTimeout(function() { location.reload(); }, 2000);
|
||||
} else {
|
||||
resultDiv.innerHTML = `⚠️ ${escapeHtml(data.message)}`;
|
||||
resultDiv.innerHTML = '⚠️ ' + escapeHtml(data.message);
|
||||
if (browserCount > 0) resultDiv.innerHTML += '<br><small style="color: var(--muted);">' + browserCount + ' browser settings were restored</small>';
|
||||
if (data.results?.errors?.length > 0) {
|
||||
resultDiv.innerHTML += '<br><small>' + data.results.errors.map(e => `${escapeHtml(e.file)}: ${escapeHtml(e.error)}`).join(', ') + '</small>';
|
||||
resultDiv.innerHTML += '<br><small>' + data.results.errors.map(function(e) { return escapeHtml(e.file) + ': ' + escapeHtml(e.error); }).join(', ') + '</small>';
|
||||
}
|
||||
resultDiv.style.background = 'color-mix(in srgb, #f39c12 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid #f39c12';
|
||||
}
|
||||
resultDiv.style.display = 'block';
|
||||
} catch (e) {
|
||||
resultDiv.innerHTML = `❌ Restore failed: ${escapeHtml(e.message)}`;
|
||||
resultDiv.innerHTML = '❌ Restore failed: ' + escapeHtml(e.message);
|
||||
resultDiv.style.display = 'block';
|
||||
resultDiv.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultDiv.style.border = '1px solid var(--bad-fg)';
|
||||
}
|
||||
restoreBtn.disabled = false;
|
||||
restoreBtn.innerHTML = '⚡ Restore Configuration';
|
||||
restoreBtn.innerHTML = '⚡ Restore Everything';
|
||||
});
|
||||
|
||||
// === Automated Backups Tab ===
|
||||
async function loadBackupSchedule() {
|
||||
if (!scheduleContainer) return;
|
||||
try {
|
||||
const res = await fetch('/api/v1/backups/config');
|
||||
const data = await res.json();
|
||||
var res = await fetch('/api/v1/backups/config');
|
||||
var data = await res.json();
|
||||
if (!data.success) throw new Error(data.error || 'Failed to load config');
|
||||
const cfg = data.config?.backups || {};
|
||||
const autoKey = Object.keys(cfg)[0];
|
||||
const auto = autoKey ? cfg[autoKey] : null;
|
||||
var cfg = data.config?.backups || {};
|
||||
var autoKey = Object.keys(cfg)[0];
|
||||
var auto = autoKey ? cfg[autoKey] : null;
|
||||
|
||||
let html = `<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">`;
|
||||
html += `<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">⏰ Backup Schedule</h4>`;
|
||||
html += `<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">`;
|
||||
html += `<div><label style="font-size: 0.8rem; color: var(--muted);">Schedule:</label>
|
||||
<select id="backup-schedule-select" style="width: 100%;">
|
||||
<option value="disabled" ${!auto?.enabled ? 'selected' : ''}>Disabled</option>
|
||||
<option value="hourly" ${auto?.schedule === 'hourly' ? 'selected' : ''}>Hourly</option>
|
||||
<option value="daily" ${auto?.schedule === 'daily' ? 'selected' : ''}>Daily</option>
|
||||
<option value="weekly" ${auto?.schedule === 'weekly' ? 'selected' : ''}>Weekly</option>
|
||||
<option value="monthly" ${auto?.schedule === 'monthly' ? 'selected' : ''}>Monthly</option>
|
||||
</select></div>`;
|
||||
html += `<div><label style="font-size: 0.8rem; color: var(--muted);">Keep last:</label>
|
||||
<select id="backup-retention-select" style="width: 100%;">
|
||||
<option value="3" ${auto?.retention?.keep === 3 ? 'selected' : ''}>3 backups</option>
|
||||
<option value="5" ${!auto?.retention || auto?.retention?.keep === 5 ? 'selected' : ''}>5 backups</option>
|
||||
<option value="10" ${auto?.retention?.keep === 10 ? 'selected' : ''}>10 backups</option>
|
||||
<option value="30" ${auto?.retention?.keep === 30 ? 'selected' : ''}>30 backups</option>
|
||||
</select></div>`;
|
||||
html += `</div>`;
|
||||
html += `<div style="margin-top: 12px;">
|
||||
<label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer;">
|
||||
<input type="checkbox" id="backup-encrypt-toggle" ${auto?.encrypt !== false ? 'checked' : ''} />
|
||||
Encrypt backups
|
||||
</label></div>`;
|
||||
html += `<div style="display: flex; gap: 8px; margin-top: 12px;">
|
||||
<button id="backup-save-schedule" style="padding: 8px 16px; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; cursor: pointer; font-weight: 500;">Save Schedule</button>
|
||||
<button id="backup-run-now" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">▶️ Run Backup Now</button>
|
||||
</div>`;
|
||||
html += `</div>`;
|
||||
html += `<div id="backup-schedule-result" style="display: none; margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 0.85rem;"></div>`;
|
||||
var html = '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
|
||||
html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">⏰ Backup Schedule</h4>';
|
||||
html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">';
|
||||
html += '<div><label style="font-size: 0.8rem; color: var(--muted);">Schedule:</label>';
|
||||
html += ' <select id="backup-schedule-select" style="width: 100%;">';
|
||||
html += ' <option value="disabled"' + (!auto?.enabled ? ' selected' : '') + '>Disabled</option>';
|
||||
html += ' <option value="hourly"' + (auto?.schedule === 'hourly' ? ' selected' : '') + '>Hourly</option>';
|
||||
html += ' <option value="daily"' + (auto?.schedule === 'daily' ? ' selected' : '') + '>Daily</option>';
|
||||
html += ' <option value="weekly"' + (auto?.schedule === 'weekly' ? ' selected' : '') + '>Weekly</option>';
|
||||
html += ' <option value="monthly"' + (auto?.schedule === 'monthly' ? ' selected' : '') + '>Monthly</option>';
|
||||
html += ' </select></div>';
|
||||
html += '<div><label style="font-size: 0.8rem; color: var(--muted);">Keep last:</label>';
|
||||
html += ' <select id="backup-retention-select" style="width: 100%;">';
|
||||
html += ' <option value="3"' + (auto?.retention?.keep === 3 ? ' selected' : '') + '>3 backups</option>';
|
||||
html += ' <option value="5"' + (!auto?.retention || auto?.retention?.keep === 5 ? ' selected' : '') + '>5 backups</option>';
|
||||
html += ' <option value="10"' + (auto?.retention?.keep === 10 ? ' selected' : '') + '>10 backups</option>';
|
||||
html += ' <option value="30"' + (auto?.retention?.keep === 30 ? ' selected' : '') + '>30 backups</option>';
|
||||
html += ' </select></div>';
|
||||
html += '</div>';
|
||||
html += '<div style="margin-top: 12px;">';
|
||||
html += ' <label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer;">';
|
||||
html += ' <input type="checkbox" id="backup-encrypt-toggle"' + (auto?.encrypt !== false ? ' checked' : '') + ' />';
|
||||
html += ' Encrypt backups';
|
||||
html += ' </label></div>';
|
||||
html += '<div style="display: flex; gap: 8px; margin-top: 12px;">';
|
||||
html += ' <button id="backup-save-schedule" style="padding: 8px 16px; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; cursor: pointer; font-weight: 500;">Save Schedule</button>';
|
||||
html += ' <button id="backup-run-now" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">▶️ Run Backup Now</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '<div id="backup-schedule-result" style="display: none; margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 0.85rem;"></div>';
|
||||
scheduleContainer.innerHTML = html;
|
||||
|
||||
document.getElementById('backup-save-schedule')?.addEventListener('click', saveSchedule);
|
||||
document.getElementById('backup-run-now')?.addEventListener('click', runBackupNow);
|
||||
} catch (e) {
|
||||
scheduleContainer.innerHTML = `<div class="panel-empty" style="color: var(--bad-fg);">Failed to load schedule: ${escapeHtml(e.message)}</div>`;
|
||||
scheduleContainer.innerHTML = '<div class="panel-empty" style="color: var(--bad-fg);">Failed to load schedule: ' + escapeHtml(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSchedule() {
|
||||
const schedule = document.getElementById('backup-schedule-select')?.value;
|
||||
const retention = parseInt(document.getElementById('backup-retention-select')?.value) || 5;
|
||||
const encrypt = document.getElementById('backup-encrypt-toggle')?.checked ?? true;
|
||||
const resultEl = document.getElementById('backup-schedule-result');
|
||||
var schedule = document.getElementById('backup-schedule-select')?.value;
|
||||
var retention = parseInt(document.getElementById('backup-retention-select')?.value) || 5;
|
||||
var encrypt = document.getElementById('backup-encrypt-toggle')?.checked ?? true;
|
||||
var resultEl = document.getElementById('backup-schedule-result');
|
||||
try {
|
||||
const res = await secureFetch('/api/v1/backups/config', {
|
||||
var res = await secureFetch('/api/v1/backups/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
@@ -299,7 +448,7 @@
|
||||
enabled: schedule !== 'disabled',
|
||||
schedule: schedule === 'disabled' ? 'daily' : schedule,
|
||||
include: ['all'],
|
||||
encrypt,
|
||||
encrypt: encrypt,
|
||||
verify: true,
|
||||
retention: { keep: retention },
|
||||
destinations: [{ type: 'local' }]
|
||||
@@ -307,17 +456,17 @@
|
||||
}
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
var data = await res.json();
|
||||
if (resultEl) {
|
||||
resultEl.innerHTML = data.success ? '✅ Schedule saved' : `⚠️ ${escapeHtml(data.error)}`;
|
||||
resultEl.innerHTML = data.success ? '✅ Schedule saved' : '⚠️ ' + escapeHtml(data.error);
|
||||
resultEl.style.display = 'block';
|
||||
resultEl.style.background = data.success ? 'color-mix(in srgb, var(--ok-fg) 15%, transparent)' : 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultEl.style.border = data.success ? '1px solid var(--ok-fg)' : '1px solid var(--bad-fg)';
|
||||
setTimeout(() => { if (resultEl) resultEl.style.display = 'none'; }, 3000);
|
||||
setTimeout(function() { if (resultEl) resultEl.style.display = 'none'; }, 3000);
|
||||
}
|
||||
} catch (e) {
|
||||
if (resultEl) {
|
||||
resultEl.innerHTML = `❌ ${escapeHtml(e.message)}`;
|
||||
resultEl.innerHTML = '❌ ' + escapeHtml(e.message);
|
||||
resultEl.style.display = 'block';
|
||||
resultEl.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultEl.style.border = '1px solid var(--bad-fg)';
|
||||
@@ -326,24 +475,24 @@
|
||||
}
|
||||
|
||||
async function runBackupNow() {
|
||||
const btn = document.getElementById('backup-run-now');
|
||||
const resultEl = document.getElementById('backup-schedule-result');
|
||||
var btn = document.getElementById('backup-run-now');
|
||||
var resultEl = document.getElementById('backup-schedule-result');
|
||||
if (btn) { btn.disabled = true; btn.innerHTML = '<span class="brand-spinner"></span> Running...'; }
|
||||
try {
|
||||
const res = await secureFetch('/api/v1/backups/execute', {
|
||||
var res = await secureFetch('/api/v1/backups/execute', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ include: ['all'], destinations: [{ type: 'local' }] })
|
||||
});
|
||||
const data = await res.json();
|
||||
var data = await res.json();
|
||||
if (resultEl) {
|
||||
if (data.success) {
|
||||
const sizeMB = data.backup?.size ? (data.backup.size / 1024 / 1024).toFixed(2) : '?';
|
||||
resultEl.innerHTML = `✅ Backup complete (${sizeMB} MB)`;
|
||||
var sizeMB = data.backup?.size ? (data.backup.size / 1024 / 1024).toFixed(2) : '?';
|
||||
resultEl.innerHTML = '✅ Backup complete (' + sizeMB + ' MB)';
|
||||
resultEl.style.background = 'color-mix(in srgb, var(--ok-fg) 15%, transparent)';
|
||||
resultEl.style.border = '1px solid var(--ok-fg)';
|
||||
} else {
|
||||
resultEl.innerHTML = `⚠️ ${escapeHtml(data.error)}`;
|
||||
resultEl.innerHTML = '⚠️ ' + escapeHtml(data.error);
|
||||
resultEl.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultEl.style.border = '1px solid var(--bad-fg)';
|
||||
}
|
||||
@@ -352,7 +501,7 @@
|
||||
loadBackupHistory();
|
||||
} catch (e) {
|
||||
if (resultEl) {
|
||||
resultEl.innerHTML = `❌ ${escapeHtml(e.message)}`;
|
||||
resultEl.innerHTML = '❌ ' + escapeHtml(e.message);
|
||||
resultEl.style.display = 'block';
|
||||
resultEl.style.background = 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
|
||||
resultEl.style.border = '1px solid var(--bad-fg)';
|
||||
@@ -366,50 +515,49 @@
|
||||
if (!historyContainer) return;
|
||||
historyContainer.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading...</div>';
|
||||
try {
|
||||
const res = await fetch('/api/v1/backups/history?limit=50');
|
||||
const data = await res.json();
|
||||
var res = await fetch('/api/v1/backups/history?limit=50');
|
||||
var data = await res.json();
|
||||
if (!data.success || !data.history?.length) {
|
||||
historyContainer.innerHTML = '<div class="panel-empty"><span class="empty-icon">📋</span> No backup history yet</div>';
|
||||
return;
|
||||
}
|
||||
let html = '<div style="display: flex; flex-direction: column; gap: 6px;">';
|
||||
for (const bk of data.history) {
|
||||
const statusColor = bk.status === 'success' ? '#2ecc71' : '#e74c3c';
|
||||
const sizeMB = bk.size ? (bk.size / 1024 / 1024).toFixed(2) : '?';
|
||||
html += `<div style="padding: 10px 12px; background: var(--card-base); border-radius: 6px; border: 1px solid var(--border); font-size: 0.85rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
|
||||
<span style="font-weight: 500;">${escapeHtml(bk.name || 'backup')}</span>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="status-badge ${bk.status === 'success' ? 'success' : 'down'}">${escapeHtml(bk.status)}</span>
|
||||
${bk.status === 'success' ? `<button class="backup-restore-btn" data-backup-id="${escapeHtml(bk.id)}" style="padding: 3px 8px; font-size: 0.75rem;">Restore</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 0.75rem; color: var(--muted);">
|
||||
${new Date(bk.timestamp).toLocaleString()} | ${sizeMB} MB | ${bk.duration ? (bk.duration / 1000).toFixed(1) + 's' : '--'}
|
||||
${bk.encrypted ? ' | 🔒' : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
var html = '<div style="display: flex; flex-direction: column; gap: 6px;">';
|
||||
for (var i = 0; i < data.history.length; i++) {
|
||||
var bk = data.history[i];
|
||||
var sizeMB = bk.size ? (bk.size / 1024 / 1024).toFixed(2) : '?';
|
||||
html += '<div style="padding: 10px 12px; background: var(--card-base); border-radius: 6px; border: 1px solid var(--border); font-size: 0.85rem;">';
|
||||
html += ' <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">';
|
||||
html += ' <span style="font-weight: 500;">' + escapeHtml(bk.name || 'backup') + '</span>';
|
||||
html += ' <div style="display: flex; align-items: center; gap: 8px;">';
|
||||
html += ' <span class="status-badge ' + (bk.status === 'success' ? 'success' : 'down') + '">' + escapeHtml(bk.status) + '</span>';
|
||||
if (bk.status === 'success') html += ' <button class="backup-restore-btn" data-backup-id="' + escapeHtml(bk.id) + '" style="padding: 3px 8px; font-size: 0.75rem;">Restore</button>';
|
||||
html += ' </div>';
|
||||
html += ' </div>';
|
||||
html += ' <div style="font-size: 0.75rem; color: var(--muted);">';
|
||||
html += ' ' + new Date(bk.timestamp).toLocaleString() + ' | ' + sizeMB + ' MB | ' + (bk.duration ? (bk.duration / 1000).toFixed(1) + 's' : '--');
|
||||
if (bk.encrypted) html += ' | 🔒';
|
||||
html += ' </div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
historyContainer.innerHTML = html;
|
||||
// Wire restore buttons with addEventListener (not inline onclick — HTML entity decode bypass)
|
||||
historyContainer.querySelectorAll('.backup-restore-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => window.__restoreServerBackup(btn.dataset.backupId));
|
||||
historyContainer.querySelectorAll('.backup-restore-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() { window.__restoreServerBackup(btn.dataset.backupId); });
|
||||
});
|
||||
} catch (e) {
|
||||
historyContainer.innerHTML = `<div class="panel-empty" style="color: var(--bad-fg);">Failed: ${escapeHtml(e.message)}</div>`;
|
||||
historyContainer.innerHTML = '<div class="panel-empty" style="color: var(--bad-fg);">Failed: ' + escapeHtml(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
window.__restoreServerBackup = async function(backupId) {
|
||||
if (!confirm('Restore from this server backup? This will overwrite current configuration.')) return;
|
||||
try {
|
||||
const res = await secureFetch(`/api/v1/backups/restore/${backupId}`, {
|
||||
var res = await secureFetch('/api/v1/backups/restore/' + backupId, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ restoreServices: true, restoreConfig: true })
|
||||
});
|
||||
const data = await res.json();
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
showNotification('Restore completed successfully!', 'success');
|
||||
location.reload();
|
||||
|
||||
Reference in New Issue
Block a user