feat(ui): GitHub-style type-to-confirm on every delete (v2.1.21)

Every destructive action now requires typing a confirmation phrase before the
red button activates — a misclick can't delete the wrong thing.

- Single named resource (container/image/volume/network/server/key/registry/
  file/compose project) → retype that resource's own name/id.
- Bulk / prune / clear-all (no single name) → type the word 'delete'.

New shared showDeleteConfirm() helper in api.js; swept all 14 page files plus
edge-notifier-panel. Also gated 3 notification-settings clears that previously
deleted saved config with no confirmation at all, and replaced the notifier
agent's bare browser confirm() with the typed gate. Server-context banner still
shows where the delete lands. Non-destructive actions (start/stop/restart, grant,
update, save, hide) intentionally stay one-click.

Verified e2e in a container: keystone gate (disabled until exact match) and a
real Delete Server (keyed on the id) both pass.

Author: Ali7Zeynalli

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ---
 
+## [2.1.21] - 2026-06-25
+
+### Added — GitHub-style "type to confirm" on every delete
+- Every destructive action now requires you to **type a confirmation phrase** before the red button activates — the same safety pattern GitHub uses for deleting a repo. A misclick can no longer delete the wrong thing: the **Delete** button stays disabled until what you type matches.
+- **For a single named resource** (a container, image, volume, network, server, SSH key, registry, file, or compose project) you retype that resource's **own name/id** — so you literally confirm *which* one you're deleting. **For bulk / prune / clear-all** actions (no single name) you type the word **`delete`**.
+- New shared `showDeleteConfirm()` helper in the UI; all confirmation dialogs were swept to use it. Coverage: Remove Container (single + bulk), Remove/Force-Remove Image, Remove Volume(s), Remove Network(s), Delete Server (Servers list + Settings), Delete SSH key, Delete registry, Delete file(s), Compose **Down** and **Delete project** (the project-delete modal keeps its volumes/files options and the server banner, now gated on the project name), Build-record deletes / Clear-all / Prune build cache, Cleanup **Prune** and **Full System Prune**, Clear audit log, and the notifier-agent **Remove** (was a bare browser `confirm()` — now the typed gate, keyed on the server id). The notification-settings **Clear SMTP / Clear Telegram / Clear notification-log** buttons — which previously deleted saved config with *no* confirmation at all — are now gated too.
+- The existing **server-context banner** (🖥 Local / 🔐 remote host) still shows at the top of each dialog, so you also see *where* the delete will land. Non-destructive actions (Start/Stop/Restart, Grant Docker, Update, Save config, Hide-from-history) are intentionally left as one-click confirms.
+- Built and audited by a parallel sweep across all 14 page files plus a completeness pass; verified e2e in a container — the keystone gate (disabled → stays disabled on a wrong phrase → enables on exact match → fires → closes) and a real wired delete (Delete Server, keyed on the server id, actually removes the server) both pass.
+
+---
+
 ## [2.1.20] - 2026-06-25
 
 ### Added — Per-server access password (a 2nd gate to switch servers)

README.md

@@ -1,8 +1,8 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/DockGate-v2.1.20-00d4aa?style=for-the-badge&logo=docker&logoColor=white" alt="DockGate">
+  <img src="https://img.shields.io/badge/DockGate-v2.1.21-00d4aa?style=for-the-badge&logo=docker&logoColor=white" alt="DockGate">
   <img src="https://img.shields.io/badge/Node.js-18-339933?style=for-the-badge&logo=nodedotjs&logoColor=white" alt="Node.js">
   <img src="https://img.shields.io/badge/License-MIT-blue?style=for-the-badge" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/Changelog-v2.1.20-orange?style=for-the-badge" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/Changelog-v2.1.21-orange?style=for-the-badge" alt="Changelog"></a>
   <img src="https://img.shields.io/badge/CPU-≤0.5_core-brightgreen?style=for-the-badge" alt="CPU">
   <img src="https://img.shields.io/badge/RAM-<256MB-success?style=for-the-badge" alt="RAM">
 </p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockgate",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "DockGate — A lightweight, browser-based Docker control panel",
   "main": "server/index.js",
   "author": "Ali Zeynalli",

public/js/api.js

@@ -186,6 +186,43 @@ function showConfirm(title, message, onConfirm, danger = false) {
   ]);
 }
 
+// GitHub-style delete confirmation: the destructive button stays DISABLED until the user types the exact
+// confirmation phrase. A misclick can't delete the wrong thing — you must read and retype what's at stake.
+//   opts.message      — HTML describing what will be deleted (shown under the server-context banner)
+//   opts.phrase       — the exact text the user must type. For a single named resource pass its name/id
+//                       (true GitHub feel); for bulk/prune/clear (no single name) pass the literal 'delete'.
+//   opts.confirmLabel — destructive button text (default 'Delete')
+//   opts.onConfirm    — runs once the typed phrase matches and the button (or Enter) is pressed
+function showDeleteConfirm(title, opts = {}) {
+  const { message = '', phrase = 'delete', confirmLabel = 'Delete', onConfirm = () => {} } = opts;
+  const phraseStr = String(phrase).trim() || 'delete';
+  const m = showModal(title, `
+    ${serverContextBanner()}
+    <p style="color: var(--text-secondary)">${message}</p>
+    <label class="text-xs text-muted" style="display:block;margin-top:4px">Type <code style="background:var(--bg-primary);padding:1px 6px;border-radius:4px;border:1px solid var(--border);font-weight:600">${escapeHtml(phraseStr)}</code> to confirm:</label>
+    <input class="input" id="dg-del-confirm" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="${escapeHtml(phraseStr)}" style="width:100%;margin-top:6px" />
+  `, [{ label: 'Cancel', className: 'btn btn-secondary' }]);
+  // Scope queries to THIS overlay — modals can stack and ids repeat.
+  const scope = m.overlay;
+  const input = scope.querySelector('#dg-del-confirm');
+  const footer = scope.querySelector('#modal-footer');
+  const delBtn = document.createElement('button');
+  delBtn.className = 'btn btn-danger';
+  delBtn.textContent = confirmLabel;
+  delBtn.disabled = true;
+  delBtn.style.opacity = '0.5';
+  delBtn.style.cursor = 'not-allowed';
+  footer.appendChild(delBtn);
+  const matches = () => input.value.trim() === phraseStr;
+  const sync = () => { const ok = matches(); delBtn.disabled = !ok; delBtn.style.opacity = ok ? '1' : '0.5'; delBtn.style.cursor = ok ? 'pointer' : 'not-allowed'; };
+  const fire = () => { if (!matches()) return; m.close(); try { const r = onConfirm(); if (r && typeof r.catch === 'function') r.catch(e => showToast(e.message || String(e), 'error')); } catch (e) { showToast(e.message || String(e), 'error'); } };
+  input.addEventListener('input', sync);
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); fire(); } });
+  delBtn.addEventListener('click', fire);
+  setTimeout(() => input.focus(), 50);
+  return m;
+}
+
 // Utility functions
 function formatBytes(bytes, decimals = 1) {
   if (bytes === 0) return '0 B';

public/js/edge-notifier-panel.js

@@ -231,9 +231,15 @@
                 const { jobId } = await API.post('/agent/' + act, { serverId: sid });
                 openJobModal(jobId, load);
               } else if (act === 'remove') {
-                if (!confirm(`Remove the notifier agent from ${sid}? DockGate's central monitor will resume watching it.`)) return;
-                await API.post('/agent/remove', { serverId: sid });
-                showToast('Agent removed'); load();
+                showDeleteConfirm('Remove notifier agent', {
+                  message: `Remove the notifier agent from <strong>${escapeHtml(sid)}</strong>? DockGate's central monitor will resume watching it.`,
+                  phrase: sid, confirmLabel: 'Remove',
+                  onConfirm: async () => {
+                    try { await API.post('/agent/remove', { serverId: sid }); showToast('Agent removed'); load(); }
+                    catch (e) { showToast(e.message, 'error'); }
+                  },
+                });
+                return;
               } else if (act === 'start' || act === 'stop') {
                 await API.post('/agent/power', { serverId: sid, action: act });
                 showToast('Agent ' + (act === 'stop' ? 'stopped' : 'started')); load();

public/js/pages/audit.js

@@ -135,13 +135,13 @@ Router.register('audit', async (content) => {
     });
 
     document.getElementById('audit-clear')?.addEventListener('click', () => {
-      showConfirm('Clear audit log', 'All audit records will be deleted. Continue?', async () => {
+      showDeleteConfirm('Clear audit log', { message: 'All audit records will be deleted. Continue?', phrase: 'delete', onConfirm: async () => {
         try {
           await API.del('/meta/activity');
           showToast('Audit log cleared');
           render();
         } catch (err) { showToast(err.message, 'error'); }
-      }, true);
+      } });
     });
 
     await load();

public/js/pages/builds.js

@@ -195,13 +195,13 @@ Router.register('builds', async (content) => {
           // Delete button
           el.querySelector('.hide-docker-build')?.addEventListener('click', (e) => {
             e.stopPropagation();
-            showConfirm('Remove from History', `Remove "${img.tag}" from build history? (Image will not be deleted)`, async () => {
+            showDeleteConfirm('Remove from History', { message: `Remove "${img.tag}" from build history? (Image will not be deleted)`, phrase: 'delete', onConfirm: async () => {
               try {
                 await API.post('/builds/docker-history/hide', { imageId: img.imageId });
                 showToast('Removed from history', 'success');
                 render();
               } catch (err) { showToast(err.message, 'error'); }
-            }, true);
+            } });
           });
         });
 
@@ -257,32 +257,32 @@ Router.register('builds', async (content) => {
 
         // Bulk delete panel builds
         document.getElementById('bulk-delete-panel')?.addEventListener('click', () => {
-          showConfirm('Delete Selected', `Delete ${selectedPanelIds.size} build record(s)?`, async () => {
+          showDeleteConfirm('Delete Selected', { message: `Delete ${selectedPanelIds.size} build record(s)?`, phrase: 'delete', onConfirm: async () => {
             await bulkRun([...selectedPanelIds], (id) => API.del(`/builds/detail/${id}`), 'Deleted');
             selectedPanelIds.clear();
             render();
-          }, true);
+          } });
         });
         document.getElementById('bulk-clear-panel')?.addEventListener('click', () => { selectedPanelIds.clear(); render(); });
 
         listEl.querySelectorAll('.delete-build').forEach(btn => {
           btn.addEventListener('click', (e) => {
             e.stopPropagation();
-            showConfirm('Delete Build', 'Delete this build record?', async () => {
+            showDeleteConfirm('Delete Build', { message: 'Delete this build record?', phrase: 'delete', onConfirm: async () => {
               try {
                 await API.del(`/builds/detail/${btn.dataset.id}`);
                 showToast('Build deleted', 'success');
                 render();
               } catch (err) { showToast(err.message, 'error'); }
-            }, true);
+            } });
           });
         });
 
         document.getElementById('clear-history')?.addEventListener('click', () => {
-          showConfirm('Clear All', 'Delete all panel build history?', async () => {
+          showDeleteConfirm('Clear All', { message: 'Delete all panel build history?', phrase: 'delete', onConfirm: async () => {
             try { await API.del('/builds'); showToast('Cleared', 'success'); render(); }
             catch (err) { showToast(err.message, 'error'); }
-          }, true);
+          } });
         });
       }
 
@@ -338,13 +338,13 @@ Router.register('builds', async (content) => {
 
       document.getElementById('back-to-list')?.addEventListener('click', () => { selectedBuildId = null; render(); });
       document.getElementById('delete-this-build')?.addEventListener('click', () => {
-        showConfirm('Delete Build', 'Delete this build record?', async () => {
+        showDeleteConfirm('Delete Build', { message: 'Delete this build record?', phrase: 'delete', onConfirm: async () => {
           try {
             await API.del(`/builds/detail/${build.id}`);
             showToast('Build deleted', 'success');
             selectedBuildId = null; render();
           } catch (err) { showToast(err.message, 'error'); }
-        }, true);
+        } });
       });
 
       tabContent.querySelectorAll('.detail-tab').forEach(btn => {
@@ -716,15 +716,15 @@ Router.register('builds', async (content) => {
       });
 
       document.getElementById('prune-cache')?.addEventListener('click', () => {
-        showConfirm('Prune Build Cache', 'Remove all build cache? Next builds may take longer.', async () => {
+        showDeleteConfirm('Prune Build Cache', { message: 'Remove all build cache? Next builds may take longer.', phrase: 'delete', onConfirm: async () => {
           try {
             showToast('Pruning...', 'info');
             const res = await API.post('/builds/cache/prune');
             let space = res.SpaceReclaimedStr ? ` (${res.SpaceReclaimedStr.replace('Total reclaimed space:','').trim()})` : '';
             showToast(`Cache pruned${space}`, 'success');
             renderCache();
           } catch (err) { showToast(err.message, 'error'); }
-        }, true);
+        } });
       });
     } catch (err) {
       tabContent.innerHTML = `<div class="empty-state"><h3>Error</h3><p>${escapeHtml(err.message)}</p></div>`;

public/js/pages/cleanup.js

@@ -105,28 +105,28 @@ async function renderCleanupInto(content, { embedded = false } = {}) {
       content.querySelectorAll('[data-prune]').forEach(btn => {
         btn.addEventListener('click', () => {
           const type = btn.dataset.prune;
-          showConfirm(`Prune ${type}`, `Are you sure you want to remove all unused ${type}?`, async () => {
+          showDeleteConfirm(`Prune ${type}`, { message: `Are you sure you want to remove all unused ${type}?`, phrase: 'delete', onConfirm: async () => {
             try {
               showToast(`Cleaning ${type}...`, 'info');
               const res = await API.post(`/cleanup/${type}`);
               let space = res.SpaceReclaimed ? ` (${formatBytes(res.SpaceReclaimed)})` : (res.SpaceReclaimedStr ? ` (${res.SpaceReclaimedStr.replace('Total reclaimed space:', '').trim()})` : '');
               showToast(`Cleanup successful${space}`);
               render();
             } catch (err) { showToast(err.message, 'error'); }
-          }, type === 'volumes' || type === 'images');
+          } });
         });
       });
 
       document.getElementById('full-prune-btn').addEventListener('click', () => {
         const includeVols = document.getElementById('prune-volumes').checked;
-        showConfirm(`Full System Prune`, `Are you absolutely sure? This will delete ALL unused data${includeVols ? ' INCLUDING VOLUMES.' : '.'}`, async () => {
+        showDeleteConfirm(`Full System Prune`, { message: `Are you absolutely sure? This will delete ALL unused data${includeVols ? ' INCLUDING VOLUMES.' : '.'}`, phrase: 'delete', onConfirm: async () => {
           try {
              showToast(`Starting full system prune...`, 'warn');
              const res = await API.post(`/cleanup/system?volumes=${includeVols}`);
              showToast(`System pruned successfully`);
              render();
           } catch(err) { showToast(err.message, 'error'); }
-        }, true);
+        } });
       });
 
     } catch (err) { content.innerHTML = `<div class="empty-state"><h3>Error</h3><p>${escapeHtml(err.message)}</p></div>`; }

public/js/pages/compose.js

@@ -131,7 +131,7 @@ Router.register('compose', async (content) => {
             run(svc.length ? `?services=${encodeURIComponent(svc.join(','))}` : '');
           // down/restart are disruptive — confirm first (down removes containers; restart interrupts)
           } else if (action === 'down') {
-            showConfirm('Compose Down', `Stop and remove all containers in "${project}"?`, () => run(), true);
+            showDeleteConfirm('Compose Down', { message: `Stop and remove all containers in "${project}"?`, phrase: project, onConfirm: () => run() });
           } else if (action === 'restart') {
             showConfirm('Compose Restart', `Restart all services in "${project}"? They will be briefly interrupted.`, () => run(), true);
           } else {
@@ -402,12 +402,22 @@ Router.register('compose', async (content) => {
       <label style="display:flex;gap:8px;align-items:flex-start;font-weight:400"><input type="checkbox" id="del-down" checked disabled> Stop &amp; remove containers (<code>docker compose down</code>)</label>
       <label style="display:flex;gap:8px;align-items:flex-start;font-weight:400"><input type="checkbox" id="del-files" checked> Remove the project files ${isRemote ? '(the folder on the remote server)' : '(DockGate-managed files)'}</label>
       <label style="display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--danger,#f85149)"><input type="checkbox" id="del-vols"> Also delete data volumes — <strong>irreversible data loss</strong></label>
+      <label class="text-xs text-muted" style="display:block;margin-top:4px">Type <code style="background:var(--bg-primary);padding:1px 6px;border-radius:4px;border:1px solid var(--border);font-weight:600">${escapeHtml(project)}</code> to confirm:</label>
+      <input class="input" id="del-confirm" type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="${escapeHtml(project)}" style="width:100%;margin-top:6px" />
     </div>`;
     const m = showModal('Delete project', body, [{ label: 'Cancel', className: 'btn btn-secondary' }]);
     const root = m.overlay;
     const btn = document.createElement('button'); btn.className = 'btn btn-danger'; btn.textContent = 'Delete';
+    btn.disabled = true; btn.style.opacity = '0.5'; btn.style.cursor = 'not-allowed';
     root.querySelector('#modal-footer').appendChild(btn);
+    const delInput = root.querySelector('#del-confirm');
+    const delMatches = () => delInput.value.trim() === project;
+    const delSync = () => { const ok = delMatches(); btn.disabled = !ok; btn.style.opacity = ok ? '1' : '0.5'; btn.style.cursor = ok ? 'pointer' : 'not-allowed'; };
+    delInput.addEventListener('input', delSync);
+    delInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && delMatches()) { e.preventDefault(); btn.click(); } });
+    setTimeout(() => delInput.focus(), 50);
     btn.addEventListener('click', async () => {
+      if (!delMatches()) return;
       btn.disabled = true; btn.textContent = 'Deleting…';
       const vols = root.querySelector('#del-vols').checked ? 1 : 0;
       const files = root.querySelector('#del-files').checked ? 1 : 0;
@@ -506,10 +516,10 @@ Router.register('compose', async (content) => {
       el.querySelectorAll('[data-cd]').forEach(a => a.addEventListener('click', (ev) => { ev.preventDefault(); cwd = cwd ? cwd + '/' + a.dataset.cd : a.dataset.cd; list(); }));
       el.querySelectorAll('[data-edit-file]').forEach(b => b.addEventListener('click', () => editFileFromTree(project, b.dataset.editFile, list)));
       el.querySelectorAll('[data-del-file]').forEach(b => b.addEventListener('click', () => {
-        showConfirm('Delete file', `Delete "${escapeHtml(b.dataset.delFile)}"?`, async () => {
+        showDeleteConfirm('Delete file', { message: `Delete "${escapeHtml(b.dataset.delFile)}"?`, phrase: b.dataset.delFile, onConfirm: async () => {
           try { await API.del(`/compose/${project}/filecontent?path=${encodeURIComponent(b.dataset.delFile)}`); showToast('Deleted'); list(); }
           catch (e) { showToast(e.message, 'error'); }
-        }, true);
+        } });
       }));
     }
     list();

public/js/pages/container-detail.js

@@ -146,10 +146,10 @@ Router.register('container-detail', async (content, params) => {
         btn.addEventListener('click', async () => {
           const action = btn.dataset.action;
           if (action === 'remove') {
-            showConfirm('Remove Container', `Remove <strong>${escapeHtml(name)}</strong>?`, async () => {
+            showDeleteConfirm('Remove Container', { message: `Remove <strong>${escapeHtml(name)}</strong>?`, phrase: name, onConfirm: async () => {
               try { await API.post(`/containers/${id}/remove`, { force: true }); showToast(`Removed ${name}`); Router.navigate('resources',{tab:'containers'}); }
               catch (err) { showToast(err.message, 'error'); }
-            }, true);
+            } });
             return;
           }
           try { await API.post(`/containers/${id}/${action}`); showToast(`${action} → ${name}`); render(); }