Fix security reset UX: full-screen overlay, CSS class bug, and auto-reconnect

- Add security-reset-overlay HTML element to index.html that shows immediately
  when the user confirms "Erase & Reset", before the synchronous API call runs
- Add .security-reset-overlay CSS to security.css (reuses reboot-card styles,
  adds fade-in animation, z-index 1000 to sit above all other content)
- Fix reboot overlay class bug: classList.add("open") → classList.add("visible")
  so the overlay actually renders per the .reboot-overlay.visible CSS rule
- Show overlay step text "Erasing data and resetting credentials…" during wipe,
  update to "Reset complete. Rebooting now…" when API returns
- Call waitForServerReboot() (globally defined in update.js) after reset so the
  page auto-reloads when the system comes back online
- Hide the security-reset-overlay and re-enable the button on error

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/185d0b41-d54d-4ea2-93d6-bfb7c15b8aed

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-04-09 17:29:46 +00:00
committed by GitHub
parent 5bb2c67b1b
commit 0fb532d46f
3 changed files with 57 additions and 1 deletions

View File

@@ -215,6 +215,33 @@
min-width: 70px;
}
/* ── Security Reset full-screen overlay ──────────────────────────── */
.security-reset-overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(15, 15, 25, 0.94);
z-index: 1000;
align-items: center;
justify-content: center;
animation: security-reset-fade-in 0.35s ease-out;
}
.security-reset-overlay.visible {
display: flex;
}
@keyframes security-reset-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.security-reset-overlay-icon {
font-size: 3rem;
margin-bottom: 16px;
}
/* ── First-login security banner ─────────────────────────────────── */
.security-first-login-banner {