Svorka/ponfw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix unsupported prompt() confirm; bluer neon theme + themed modal

Browse source 
Bug: the OLT flooding-mode and ONU-delete flows gated on window.prompt()
for the typed APPLY/DELETE confirmation, but Electron does not support
prompt() — it returns null and shows nothing, so clicking OK on the first
dialog silently fell through to "Cancelled." and nothing happened.

Fix: replace window.confirm + window.prompt with an in-app confirmTyped()
modal (Promise<boolean>). It combines the summary and the typed-word gate
into one dialog: the confirm button stays disabled until the operator
types the exact word; Enter confirms, Escape/backdrop cancels. Wired into
all three confirmations (OLT flood change, ONU delete, firmware execute).

Theme: shift the palette electric-blue, turn up the glow (stronger
multi-layer box/text shadows, bluer ambient vignette), and style the new
modal to match (neon border, red glow for destructive variant).

Verified: npm run check passes; rendered the login + modal offscreen and
functionally confirmed the typed-word gate enables the button and resolves
true on confirm.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon Vanvik 2026-06-23 13:13:42 +02:00
parent 49a0e1cba1
commit 7cc9649f03
2 changed files with 176 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

90
renderer/app.js
View file

@ -459,11 +459,15 @@ $('#btn-delete-selected').addEventListener('click', async () => {
`You're about to DELETE ${ids.length} ONU(s) from MCMS ` +
`(${downCount} currently down).\n\n` +
`This removes the ONU-CFG document and service configuration. ` +
`Physical ONUs that come back online will re-register from scratch.\n\n` +
`Click OK to continue to the final confirmation.`;
if (!confirm(summary)) return;
const typed = prompt(`Type DELETE to confirm removal of ${ids.length} ONU(s):`);
if (typed !== 'DELETE') {
`Physical ONUs that come back online will re-register from scratch.`;
const confirmed = await confirmTyped({
title: 'Delete ONUs from MCMS',
body: summary,
requireWord: 'DELETE',
confirmLabel: 'Delete',
danger: true,
});
if (!confirmed) {
$('#delete-status').textContent = 'Cancelled.';
return;
}
@ -696,12 +700,13 @@ $('#btn-execute').addEventListener('click', async () => {
);
}
const fecWarning = warnings.length ? `\n\nWARNING:\n • ${warnings.join('\n • ')}` : '';
if (!confirm(
`About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s). ` +
`Proceed?${fecWarning}`,
)) {
return;
}
const proceed = await confirmTyped({
title: 'Stage firmware upgrade',
body: `About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s).${fecWarning}`,
confirmLabel: 'Execute upgrade',
danger: true,
});
if (!proceed) return;
$('#btn-execute').disabled = true;
// Save the plan to CSV BEFORE writing anything to MCMS, so even if
@ -1284,6 +1289,56 @@ function escapeHtml(s) {
.replace(/'/g, '&#39;');
}
// Themed confirmation modal. Replaces window.confirm + window.prompt —
// the latter is NOT supported in Electron (it returns null and shows
// nothing, which silently aborted the delete/flood-change flows). When
// `requireWord` is set, the operator must type it exactly to enable the
// confirm button (the "are you really sure" gate for destructive ops).
// Resolves true only on an explicit confirm; false on cancel/Escape.
function confirmTyped({ title, body, requireWord, confirmLabel = 'Confirm', danger = false } = {}) {
return new Promise((resolve) => {
const needWord = !!requireWord;
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.innerHTML = `
<div class="modal ${danger ? 'modal-danger' : ''}" role="dialog" aria-modal="true">
<h3>${escapeHtml(title || 'Confirm')}</h3>
<div class="modal-body">${escapeHtml(body || '').replace(/\n/g, '<br>')}</div>
${needWord ? `<label class="modal-type">
<span class="modal-type-label">Type <code>${escapeHtml(requireWord)}</code> to confirm</span>
<input type="text" class="modal-input" autocomplete="off" autocapitalize="off" spellcheck="false" />
</label>` : ''}
<div class="modal-actions">
<button class="ghost modal-cancel" type="button">Cancel</button>
<button class="${danger ? 'danger' : 'primary'} modal-ok" type="button" ${needWord ? 'disabled' : ''}>${escapeHtml(confirmLabel)}</button>
</div>
</div>`;
document.body.appendChild(overlay);
const input = overlay.querySelector('.modal-input');
const okBtn = overlay.querySelector('.modal-ok');
const cancelBtn = overlay.querySelector('.modal-cancel');
const matches = () => !needWord || (input && input.value === requireWord);
const cleanup = (result) => {
document.removeEventListener('keydown', onKey, true);
overlay.remove();
resolve(result);
};
const onKey = (e) => {
if (e.key === 'Escape') { e.preventDefault(); cleanup(false); }
else if (e.key === 'Enter' && matches()) { e.preventDefault(); cleanup(true); }
};
if (input) input.addEventListener('input', () => { okBtn.disabled = !matches(); });
okBtn.addEventListener('click', () => { if (matches()) cleanup(true); });
cancelBtn.addEventListener('click', () => cleanup(false));
overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) cleanup(false); });
document.addEventListener('keydown', onKey, true);
(input || okBtn).focus();
});
}
// -------- OLT inspector: bulk PON flooding mode change --------
$('#btn-to-olts').addEventListener('click', () => {
@ -1392,10 +1447,15 @@ $('#btn-olt-execute').addEventListener('click', async () => {
`Apply "${fromMode} → ${targetMode}" to NNI services matching "${tagPattern}" ` +
`on ${ids.length} OLT(s).\n\nThis GETs each OLT-CFG, mutates the matching ` +
`NNI Networks entries, and PUTs the full document back. The operation is ` +
`irreversible from this app (no undo).\n\nClick OK to continue to the final confirmation.`;
if (!confirm(summary)) return;
const typed = prompt(`Type APPLY to confirm bulk mode change on ${ids.length} OLT(s):`);
if (typed !== 'APPLY') {
`irreversible from this app (no undo).`;
const confirmed = await confirmTyped({
title: 'Apply PON flooding-mode change',
body: summary,
requireWord: 'APPLY',
confirmLabel: 'Execute change',
danger: true,
});
if (!confirmed) {
$('#olt-exec-status').textContent = 'Cancelled.';
return;
}