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

Remove edge glow; prefill MCMS URL from env; drop self-signed-cert option

Browse source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Jon Vanvik 2026-06-23 16:49:54 +02:00
parent 6f4a315947
commit ea251c3498
8 changed files with 30 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

51
renderer/app.css
View file

@ -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 {

3
renderer/app.js
View file

@ -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) {

7
renderer/index.html
View file

@ -6,9 +6,6 @@
<link rel="stylesheet" href="app.css" />
</head>
<body>
<!-- Animated neon beam that travels around the screen edge. -->
<div id="edge-glow" aria-hidden="true"><div class="beam"></div></div>
<header class="topbar">
<div class="brand">PON Fleet Upgrader</div>
<nav id="tabs" class="tabs hidden">
@ -32,10 +29,6 @@
<label>Host URL<input id="in-host" type="url" placeholder="https://mcms.example.net" /></label>
<label>Email / username<input id="in-user" type="text" autocomplete="username" /></label>
<label>Password<input id="in-pass" type="password" autocomplete="current-password" /></label>
<label class="inline">
<input id="in-self-signed" type="checkbox" checked />
Accept self-signed TLS certificate
</label>
<div class="row">
<button id="btn-login" class="primary">Connect</button>
<span id="login-error" class="error"></span>