Honey/MicroNAS
0
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Fix broken action buttons and add delete confirmation modal

Browse Source 
- shares.js, users.js: JSON.stringify() inside onclick="..." attributes
  produced unescaped " chars that broke HTML attribute parsing — all
  dynamic onclick JSON now passed through esc() so the browser decodes
  " back to " before executing the handler
- Replace browser confirm() dialogs with a styled Bootstrap modal
  (#deleteModal) for share and user deletion — reusable across all tabs
- users.js: rename shadow variable 'confirm' → 'pwConfirm' to avoid
  shadowing the now-removed confirm() call
- main.js: auto-refresh now reloads shares and users every 30 s,
  not just the dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Sonnet 4.6 committed 2026-06-19 22:33:37 +02:00
1 parent 67dacd4044
commit 74737568b0
4 files changed
+92 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/js/shares.js
+44 -29
View File
@@ -9,21 +9,26 @@ async function loadShares() {
} else {
sb.innerHTML = shares.smb.map(s => {
const enabled = s.enabled !== false;
const statusDot = `<span class="dot ${enabled ? 'dot-green' : 'dot-red'}" style="margin-right:0"></span>`;
const dot = `<span class="dot ${enabled ? 'dot-green' : 'dot-red'}" style="margin-right:0"></span>`;
// esc() HTML-encodes JSON so " inside onclick="..." doesn't break the attribute
const shareJson = esc(JSON.stringify(s));
const nameJson = esc(JSON.stringify(s.name));
const pathJson = esc(JSON.stringify(s.path));
const usersJson = esc(JSON.stringify(s.valid_users));
return `<tr style="${enabled ? '' : 'opacity:.55'}">
<td>${esc(s.name)}</td>
<td><code>${esc(s.path)}</code></td>
<td style="color:var(--muted); font-size:.87em">${esc(s.valid_users || '—')}</td>
<td>${statusDot}</td>
<td>${dot}</td>
<td>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="openEditModal('smb',${JSON.stringify(s)})">Edit</button>
onclick="openEditModal('smb',${shareJson})">Edit</button>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="openQuotaModal('smb',${JSON.stringify(s.name)},${JSON.stringify(s.path)},${JSON.stringify(s.valid_users)})">Quota</button>
onclick="openQuotaModal('smb',${nameJson},${pathJson},${usersJson})">Quota</button>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="toggleShare('smb',${JSON.stringify(s.name)},${!enabled})">${enabled ? 'Disable' : 'Enable'}</button>
onclick="toggleShare('smb',${nameJson},${!enabled})">${enabled ? 'Disable' : 'Enable'}</button>
<button class="btn btn-sm btn-danger"
onclick="deleteShare('smb',${JSON.stringify(s.name)})">Delete</button>
onclick="deleteShare('smb',${nameJson})">Delete</button>
</td>
</tr>`;
}).join('');
@@ -35,20 +40,22 @@ async function loadShares() {
} else {
nb.innerHTML = shares.nfs.map(s => {
const enabled = s.enabled !== false;
const statusDot = `<span class="dot ${enabled ? 'dot-green' : 'dot-red'}" style="margin-right:0"></span>`;
const dot = `<span class="dot ${enabled ? 'dot-green' : 'dot-red'}" style="margin-right:0"></span>`;
const shareJson = esc(JSON.stringify(s));
const pathJson = esc(JSON.stringify(s.path));
return `<tr style="${enabled ? '' : 'opacity:.55'}">
<td><code>${esc(s.path)}</code></td>
<td style="color:var(--muted); font-size:.87em">${esc(s.clients)}</td>
<td>${statusDot}</td>
<td>${dot}</td>
<td>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="openEditModal('nfs',${JSON.stringify(s)})">Edit</button>
onclick="openEditModal('nfs',${shareJson})">Edit</button>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="openQuotaModal('nfs',null,${JSON.stringify(s.path)},null)">Quota</button>
onclick="openQuotaModal('nfs',null,${pathJson},null)">Quota</button>
<button class="btn btn-sm me-1" style="border:1px solid var(--border); color:var(--muted)"
onclick="toggleShare('nfs',${JSON.stringify(s.path)},${!enabled})">${enabled ? 'Disable' : 'Enable'}</button>
onclick="toggleShare('nfs',${pathJson},${!enabled})">${enabled ? 'Disable' : 'Enable'}</button>
<button class="btn btn-sm btn-danger"
onclick="deleteShare('nfs',${JSON.stringify(s.path)})">Delete</button>
onclick="deleteShare('nfs',${pathJson})">Delete</button>
</td>
</tr>`;
}).join('');
@@ -173,25 +180,33 @@ async function submitEdit() {
// ===== DELETE =====
async function deleteShare(type, identifier) {
function deleteShare(type, identifier) {
const label = type === 'smb' ? `SMB share "${identifier}"` : `NFS export "${identifier}"`;
if (!confirm(`Delete ${label}? This cannot be undone.`)) return;
document.getElementById('deleteModalMsg').textContent =
`Are you sure you want to delete ${label}? This cannot be undone.`;
let res;
if (type === 'smb') {
res = await apiFetch(`/api/share/smb/${encodeURIComponent(identifier)}`, { method: 'DELETE' });
} else {
res = await apiFetch('/api/share/nfs', {
method: 'DELETE', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({path: identifier}),
});
}
if (!res) return;
const data = await res.json();
if (!res.ok) return showToast('Error: ' + (data.error || res.status), 'danger');
showToast(`${label} deleted.`);
loadShares(); loadDashboard();
const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
const btn = document.getElementById('deleteModalConfirm');
const handler = async () => {
btn.removeEventListener('click', handler);
modal.hide();
let res;
if (type === 'smb') {
res = await apiFetch(`/api/share/smb/${encodeURIComponent(identifier)}`, { method: 'DELETE' });
} else {
res = await apiFetch('/api/share/nfs', {
method: 'DELETE', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({path: identifier}),
});
}
if (!res) return;
const data = await res.json();
if (!res.ok) return showToast('Error: ' + (data.error || res.status), 'danger');
showToast(`${label} deleted.`);
loadShares(); loadDashboard();
};
btn.addEventListener('click', handler);
modal.show();
}
// ===== TOGGLE =====