From ea251c34983887e744c6afbbf68a6f8000e917af Mon Sep 17 00:00:00 2001 From: Jon Vanvik Date: Tue, 23 Jun 2026 16:49:54 +0200 Subject: [PATCH] Remove edge glow; prefill MCMS URL from env; drop self-signed-cert option MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove the animated neon edge-glow entirely (HTML element + CSS) — it couldn't be made to follow the border reliably on iOS Safari. - Add PFW_MCMS_URL: the web server prefills the login "Host URL" field with it (injected as the input's value in the served index; still editable). Documented in env.example + web README. - Remove the "Accept self-signed TLS certificate" option: the checkbox is gone and both backends now always use rejectUnauthorized:true — MCMS must present a valid certificate. Dropped the acceptSelfSigned plumbing from the renderer and both login handlers. Docs: CLAUDE.md (drop edge-glow section, update login note) + web README. Verified: node --check; no stale refs (in-self-signed / acceptSelfSigned / edge-glow / beamspin); served index carries value="…" only when PFW_MCMS_URL is set, and no self-signed checkbox. Co-Authored-By: Claude Opus 4.8 --- CLAUDE.md | 20 ++++------- main.js | 5 +-- renderer/app.css | 51 ---------------------------- renderer/app.js | 3 +- renderer/index.html | 7 ---- web/README.md | 6 ++-- web/deploy/pon-fleet-web.env.example | 4 +++ web/server.js | 13 +++++-- 8 files changed, 30 insertions(+), 79 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 3d62982..ee46429 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -143,8 +143,10 @@ stream progress events back to the renderer. ### Fleet view -- Login with email / password, accept-self-signed-TLS toggle (essential - for lab MCMS installs). +- Login with email / password. TLS to MCMS is always verified + (`rejectUnauthorized: true`); there is no accept-self-signed option — + MCMS must present a valid certificate. The web server can prefill the host + field from `PFW_MCMS_URL`. - Bulk fleet load: `listAllOnuConfigs` + `listAllOnuStates` + `listAllOltStates`, all paginated via the `next` cursor at page size 100 (see §5). @@ -777,17 +779,9 @@ The ONU-state rows drill down: clicking one sets `#filter-status` and jumps to the ONU tab (loading the fleet if needed). `fmtBps` in `app.js` is a port of the iOS `Format.bps`. -### Animated edge glow - -`#edge-glow` (fixed, pointer-events-none, full-viewport) holds a `.beam` -child masked to a 3px border ring (`mask` + `mask-composite: exclude`); the -ring contains a `::before` that is an oversized `conic-gradient` with a -white-hot core, spun with **`transform: rotate` 0→360°**, so the beam travels -around the screen edge. (It deliberately does *not* use an `@property`- -animated gradient angle — iOS Safari won't animate that, which left the beam -static on mobile.) The glow halo is a `drop-shadow` on the parent so it -survives the child's mask. Respects `prefers-reduced-motion`; z-index sits -below the scanline overlay (9999) and modals (10000). +(An animated neon edge-glow beam was tried and removed — it couldn't be made +to track the border reliably on iOS Safari. The static scanline overlay +remains.) --- diff --git a/main.js b/main.js index 9f8b083..d0af58c 100644 --- a/main.js +++ b/main.js @@ -63,11 +63,12 @@ function toWireError(err) { return { message: err?.message || String(err) }; } -ipcMain.handle('api:login', async (_ev, { baseUrl, username, password, acceptSelfSigned }) => { +ipcMain.handle('api:login', async (_ev, { baseUrl, username, password }) => { try { client = new McmsClient({ baseUrl, - rejectUnauthorized: !acceptSelfSigned, + // TLS is always verified — MCMS must present a valid certificate. + rejectUnauthorized: true, // Verbose logging goes to the Electron terminal (npm start output). // Turn off by setting PON_FLEET_VERBOSE=0 in the env. verbose: process.env.PON_FLEET_VERBOSE !== '0', diff --git a/renderer/app.css b/renderer/app.css index 269d273..f0598a0 100644 --- a/renderer/app.css +++ b/renderer/app.css @@ -416,57 +416,6 @@ button.danger:hover:not(:disabled) { .modal-type-label { display: block; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; } -/* -------- Animated neon edge glow (beam travels around the border) -------- - A rotating conic-gradient (transform: rotate — works on iOS Safari, unlike - an @property-animated gradient angle) clipped to a thin border ring. The - glow halo is a drop-shadow on the parent so it survives the child's mask. */ -#edge-glow { - position: fixed; - inset: 0; - z-index: 9998; - pointer-events: none; - filter: drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 16px var(--cyan)); -} -#edge-glow .beam { - position: absolute; - inset: 0; - padding: 3px; /* thickness of the glowing border band */ - overflow: hidden; - /* Keep only the padding ring (border band); punch out the interior. */ - -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); - -webkit-mask-composite: xor; - mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); - mask-composite: exclude; -} -#edge-glow .beam::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 200vmax; /* > viewport diagonal at any rotation */ - height: 200vmax; - transform: translate(-50%, -50%); - background: conic-gradient( - from 0deg, - transparent 0deg, - transparent 40deg, - var(--cyan) 66deg, - #ffffff 90deg, - var(--neon) 114deg, - transparent 140deg, - transparent 360deg - ); - animation: beamspin 7s linear infinite; - will-change: transform; -} -@keyframes beamspin { - from { transform: translate(-50%, -50%) rotate(0deg); } - to { transform: translate(-50%, -50%) rotate(360deg); } -} -@media (prefers-reduced-motion: reduce) { - #edge-glow .beam::before { animation: none; } -} - /* -------- Top tabs -------- */ .tabs { display: flex; gap: 4px; margin-left: 18px; align-self: stretch; align-items: flex-end; } .tabs .tab { diff --git a/renderer/app.js b/renderer/app.js index 9d0eb24..663a414 100644 --- a/renderer/app.js +++ b/renderer/app.js @@ -223,14 +223,13 @@ $('#btn-login').addEventListener('click', async () => { const baseUrl = $('#in-host').value.trim(); const username = $('#in-user').value.trim(); const password = $('#in-pass').value; - const acceptSelfSigned = $('#in-self-signed').checked; if (!baseUrl || !username || !password) { $('#login-error').textContent = 'Host, username and password are required.'; return; } $('#btn-login').disabled = true; $('#btn-login').textContent = 'Connecting…'; - const res = await window.api.login({ baseUrl, username, password, acceptSelfSigned }); + const res = await window.api.login({ baseUrl, username, password }); $('#btn-login').disabled = false; $('#btn-login').textContent = 'Connect'; if (!res.ok) { diff --git a/renderer/index.html b/renderer/index.html index 6e9fa67..ed7a7da 100644 --- a/renderer/index.html +++ b/renderer/index.html @@ -6,9 +6,6 @@ - - -
PON Fleet Upgrader