Prevent stale WebGUI assets

webgui/Backupper.page

@@ -9,10 +9,10 @@ Tag="backup restic snapshots restore"
 <?php
 $pluginRoot = '/plugins/backupper';
 ?>
-<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/backupper.css?v=7">
+<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/backupper.css?v=8">
 <div id="backupper-app" data-api="<?= $pluginRoot ?>/api.php">
   <header class="bu-header">
-    <div><h1>Backupper</h1><p>Encrypted Restic backups for Unraid</p></div>
+    <div><h1>Backupper <span class="bu-version">0.1.8</span></h1><p>Encrypted Restic backups for Unraid</p></div>
     <div id="bu-health" class="bu-health" tabindex="0" data-tooltip="Zeigt, ob die Backupper-Hintergrundkomponente erreichbar ist. Beispiel: 'Daemon online' bedeutet, dass Jobs gestartet werden können.">Connecting...</div>
   </header>
   <nav class="bu-tabs" aria-label="Backupper sections">
@@ -29,4 +29,4 @@ $pluginRoot = '/plugins/backupper';
   <div id="bu-tooltip" role="tooltip" aria-hidden="true"></div>
 </div>
 <script>window.BACKUPPER_CSRF = <?= json_encode($var['csrf_token'] ?? '') ?>;</script>
-<script src="<?= $pluginRoot ?>/assets/backupper.js?v=7"></script>
+<script src="<?= $pluginRoot ?>/assets/backupper-0.1.8.js"></script>

webgui/assets/backupper.css

@@ -22,6 +22,7 @@
 
 .bu-header { align-items: center; display: flex; justify-content: space-between; margin: 6px 0 22px; }
 #backupper-app .bu-header h1 { color: var(--bu-text) !important; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0; }
+.bu-version { border: 1px solid var(--bu-border); border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 7px; vertical-align: middle; }
 #backupper-app .bu-header p { color: var(--bu-muted) !important; font-size: 16px; margin: 5px 0 0; opacity: .78; }
 .bu-health { background: var(--bu-panel); border: 1px solid var(--bu-border); border-radius: 999px; color: var(--bu-text); font-weight: 600; padding: 9px 15px; }
 .bu-health.ok { color: var(--bu-good); }
@@ -59,6 +60,7 @@
 #backupper-app .bu-muted { color: var(--bu-muted) !important; opacity: .72; }
 .bu-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 14px; }
 .bu-actions { display: flex; flex-wrap: wrap; gap: 7px; }
+.bu-warning { color: var(--bu-bad) !important; display: block; font-size: 13px; font-weight: 700; margin-top: 5px; }
 
 #backupper-app .bu-button {
   appearance: none;

webgui/assets/backupper.js

@@ -79,6 +79,7 @@
   };
   const id = (prefix) => `${prefix}-${crypto.randomUUID()}`;
   const repoName = (repoId) => state.config.repositories.find(r => r.id === repoId)?.name || repoId;
+  const volatileLocation = (repo) => repo.type === 'local' && (/^\/tmp(?:\/|$)/.test(repo.location) || /^\/run(?:\/|$)/.test(repo.location));
   const tipAttr = (text) => text ? ` data-tooltip="${esc(text)}"` : '';
   const actionTooltip = (action, label) => {
     const [name] = action.split(':');
@@ -227,7 +228,7 @@
   }
 
   function renderRepositories() {
-    const rows = state.config.repositories.map(r => `<tr><td><strong>${esc(r.name)}</strong><br><span class="bu-muted">${esc(r.id)}</span></td><td>${esc(r.type)}</td><td>${esc(r.location)}</td><td>${r.mount?.managed?'Managed':'Direct / external'}</td><td class="bu-actions">${button('Initialize',`init-repo:${r.id}`,'primary')}${button('Test',`test-repo:${r.id}`)}${button('Snapshots',`repo-snapshots:${r.id}`)}${button('Check',`maint:check:${r.id}`)}${button('Prune',`maint:prune:${r.id}`)}${button('Edit',`edit-repo:${r.id}`)}${button('Delete',`delete-repo:${r.id}`,'danger')}</td></tr>`).join('');
+    const rows = state.config.repositories.map(r => `<tr><td><strong>${esc(r.name)}</strong><br><span class="bu-muted">${esc(r.id)}</span></td><td>${esc(r.type)}</td><td>${esc(r.location)}${volatileLocation(r)?'<span class="bu-warning">Volatile path: data is lost after reboot. Use /mnt/user/...</span>':''}</td><td>${r.mount?.managed?'Managed':'Direct / external'}</td><td class="bu-actions">${button('Initialize',`init-repo:${r.id}`,'primary')}${button('Test',`test-repo:${r.id}`)}${button('Snapshots',`repo-snapshots:${r.id}`)}${button('Check',`maint:check:${r.id}`)}${button('Prune',`maint:prune:${r.id}`)}${button('Edit',`edit-repo:${r.id}`)}${button('Delete',`delete-repo:${r.id}`,'danger')}</td></tr>`).join('');
     return `<div class="bu-toolbar"><div><h2>Repositories</h2><div class="bu-muted">Local, SMB, NFS and SFTP destinations.</div></div>${button('New repository','new-repo','primary')}</div><section class="bu-card">${rows ? `<table class="bu-table"><thead><tr><th>Name</th><th>Type</th><th>Location</th><th>Mount</th><th>Actions</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="bu-empty">No repositories configured.</div>'}</section>`;
   }
 
@@ -311,6 +312,7 @@
     }
     if (kind === 'submit-repo') {
       const f=new FormData(document.getElementById('bu-repo-form')); const repo={schemaVersion:1,id:f.get('id')||id('repo'),name:f.get('name'),type:f.get('type'),location:f.get('location'),passwordRef:f.get('passwordRef'),credentialRef:f.get('credentialRef')||'',mount:f.get('managed')==='on'?{managed:true,remote:f.get('remote'),mountPoint:f.get('mountPoint')}:null,options:f.get('type')==='sftp'?{knownHostsPath:f.get('knownHostsPath')}:{}};
+      if (volatileLocation(repo) && !confirm('WARNING: This destination is under /tmp or /run and will be lost after an Unraid reboot. Save it anyway?')) return;
       if(f.get('password')) await api(`/v1/secrets/${encodeURIComponent(repo.passwordRef)}`,{method:'PUT',body:JSON.stringify({type:'restic-password',value:f.get('password')})});
       if(f.get('credential')) { if(!repo.credentialRef) repo.credentialRef=id('mount-credential'); await api(`/v1/secrets/${encodeURIComponent(repo.credentialRef)}`,{method:'PUT',body:JSON.stringify({type:'mount-credential',value:f.get('credential')})}); }
       state.config.repositories=state.config.repositories.filter(r=>r.id!==repo.id).concat(repo); await saveConfig(); render();