dcstephenson/Calix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update firmware-pusher UI: fixed projection query, metadata.version field, improved UX

Browse Source
This commit is contained in:
astromech73
2026-05-21 11:09:51 -05:00
parent 14d2d2303a
commit 486d5e123f
1 changed files with 148 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
firmware-pusher/index.html
+147 -297
View File
@@ -5,243 +5,122 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GenieACS Firmware Pusher</title> <title>GenieACS Firmware Pusher</title>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--bg: #0f1117; --bg: #0d1117; --surface: #161b22; --border: #30363d;
--surface: #1a1d27; --text: #e6edf3; --muted: #8b949e; --accent: #58a6ff;
--border: #2a2d3a; --ok: #3fb950; --err: #f85149; --warn: #d29922;
--text: #e4e4e7; --radius: 8px;
--text-dim: #71717a;
--accent: #3b82f6;
--accent-hover: #2563eb;
--success: #22c55e;
--error: #ef4444;
--warning: #f59e0b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
width: 100%;
max-width: 480px;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--accent);
}
.subtitle {
color: var(--text-dim);
font-size: 0.875rem;
margin-bottom: 2rem;
}
.field {
margin-bottom: 1.25rem;
}
label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-dim);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
select, input {
width: 100%;
padding: 0.625rem 0.875rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 0.9rem;
transition: border-color 0.15s;
appearance: none;
}
select:focus, input:focus {
outline: none;
border-color: var(--accent);
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
padding-right: 2.5rem;
cursor: pointer;
}
.btn {
width: 100%;
padding: 0.75rem 1rem;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.loading { position: relative; }
.btn.loading::after {
content: '';
display: inline-block;
width: 1em; height: 1em;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-left: 0.5em;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status {
margin-top: 1.25rem;
padding: 0.875rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
line-height: 1.5;
display: none;
}
.status.show { display: block; }
.status.ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
.status.err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--error); }
.status.info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--accent); }
.status .task-id { font-family: monospace; font-size: 0.8em; color: var(--text-dim); }
.version-tag {
position: fixed;
bottom: 0.75rem;
right: 1rem;
font-size: 0.7rem;
color: var(--text-dim);
} }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.container { width: 100%; max-width: 720px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.card h1 { font-size: 1.4rem; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
.version-tag { background: var(--border); color: var(--muted); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 20px; }
/* Login screen */ /* ── Login ─────────────────────────────────────────────── */
.login-screen .main-ui { display: none; } .login-screen { display: flex; flex-direction: column; gap: 14px; }
.main-ui .login-screen { display: none; } .login-screen h2 { font-size: 1.1rem; }
.login-screen { label { font-size: 0.8rem; color: var(--muted); display: block; margin-bottom: 6px; }
text-align: center; input { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; outline: none; }
} input:focus { border-color: var(--accent); }
.login-screen .logo { font-size: 2rem; margin-bottom: 0.5rem; } button { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.login-screen .subtitle { margin-bottom: 2rem; } button:hover { opacity: 0.85; }
.login-screen .field { text-align: left; } button:disabled { opacity: 0.4; cursor: not-allowed; }
.lock-icon { button.loading { position: relative; color: transparent; }
font-size: 2.5rem; button.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.3) 50%, transparent 75%); background-size: 200% 100%; animation: shimmer 1s infinite; }
margin-bottom: 1rem; @keyframes shimmer { to { background-position: -200% 0; } }
}
/* Device / firmware info badges */ /* ── Main UI ───────────────────────────────────────────── */
.badge { .main-ui { display: none; }
display: inline-block; .main-ui.visible { display: block; }
font-size: 0.7rem; .connected-as { font-size: 0.8rem; color: var(--muted); margin-bottom: 20px; }
padding: 0.15rem 0.4rem; .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
border-radius: 4px; .box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
background: rgba(59,130,246,0.15); .box h3 { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
color: var(--accent); select { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; }
margin-left: 0.5rem; select option { background: var(--surface); }
vertical-align: middle; .box-meta { font-size: 0.75rem; color: var(--muted); margin-top: 8px; min-height: 18px; }
font-family: monospace; .status-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
} #fwCount { font-size: 0.8rem; color: var(--muted); }
.fw-info { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; } .btn-row { display: flex; gap: 10px; align-items: center; }
hr.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } #btnPush { background: var(--ok); flex: 1; }
.inline-field { display: flex; gap: 0.75rem; } #btnPush:hover:not(:disabled) { background: #2ea043; }
.inline-field .field { flex: 1; } #btnLogout { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 10px 16px; }
.status-box { font-size: 0.8rem; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); word-break: break-all; }
.status-box.ok { border-color: rgba(63,185,80,0.4); color: var(--ok); }
.status-box.err { border-color: rgba(248,81,73,0.4); color: var(--err); }
#statusBox { display: none; }
#statusBox.visible { display: block; }
@media (max-width: 540px) { .grid { grid-template-columns: 1fr; } }
</style> </style>
</head> </head>
<body> <body>
<div class="container">
<div class="card">
<!-- LOGIN SCREEN --> <!-- Login screen -->
<div class="card login-screen" id="loginScreen"> <div id="loginScreen" class="login-screen">
<div class="lock-icon">🔐</div> <div class="version-tag">GenieACS Firmware Pusher v1.0</div>
<div class="logo">GenieACS Firmware Pusher</div> <h2>Sign in</h2>
<div class="subtitle">Enter your GenieACS credentials to continue</div> <div id="loginStatus"></div>
<div class="field"> <div>
<label>Username</label> <label for="inUser">Username</label>
<input type="text" id="inUser" value="admin" autocomplete="username" spellcheck="false" /> <input id="inUser" type="text" placeholder="admin" value="admin" autocomplete="username">
</div> </div>
<div class="field"> <div>
<label>Password</label> <label for="inPass">Password</label>
<input type="password" id="inPass" autocomplete="current-password" spellcheck="false" /> <input id="inPass" type="password" placeholder="GenieACS password" autocomplete="current-password">
</div> </div>
<button class="btn" id="btnConnect" onclick="connect()">Connect</button> <button id="btnConnect" onclick="connect()">Connect</button>
<div class="status" id="loginStatus"></div>
</div>
<!-- MAIN UI -->
<div class="card main-ui" id="mainUI">
<div class="logo">GenieACS Firmware Pusher</div>
<div class="subtitle">
<span id="connectedAs">Connected</span>
<button onclick="logout()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.75rem;margin-left:0.5rem;text-decoration:underline;">disconnect</button>
</div>
<hr class="divider">
<div class="inline-field">
<div class="field">
<label>Device</label>
<select id="selDevice">
<option value="">— Loading devices… —</option>
</select>
<div class="fw-info" id="devInfo"></div>
</div> </div>
<!-- Main UI -->
<div id="mainUI" class="main-ui">
<div class="version-tag">GenieACS Firmware Pusher v1.0</div>
<div class="connected-as" id="connectedAs"></div>
<div id="statusBox"></div>
<div class="grid">
<div class="box">
<h3>Device</h3>
<select id="selDevice"><option value="">Loading…</option></select>
<div class="box-meta" id="devInfo"></div>
</div>
<div class="box">
<h3>Firmware <span id="fwCount"></span></h3>
<select id="selFw"><option value="">Loading…</option></select>
<div class="box-meta" id="fwInfo"></div>
</div>
</div>
<div class="status-line">
<button id="btnPush" disabled onclick="pushFirmware()">Push Firmware</button>
<button id="btnLogout" onclick="logout()">Logout</button>
</div>
</div>
</div> </div>
<div class="field">
<label>
Firmware
<span class="badge" id="fwCount"></span>
</label>
<select id="selFw">
<option value="">— Loading files… —</option>
</select>
<div class="fw-info" id="fwInfo"></div>
</div>
<button class="btn" id="btnPush" onclick="pushFirmware()" disabled>
Push Firmware
</button>
<div class="status" id="statusBox"></div>
</div> </div>
<div class="version-tag">GenieACS Firmware Pusher v1.0</div>
<script> <script>
const NBI = 'https://nbi.yoda.ddnsgeek.com'; // ── Config ───────────────────────────────────────────────
// NBI is empty string → all API calls go through nginx on the same host (no CORS, no external auth)
const NBI = '';
// ── Auth helpers ─────────────────────────────────────────── // ── Auth helpers ───────────────────────────────────────────
function getCreds() { function getCreds() {
return { user: sessionStorage.getItem('nbi_user'), pass: sessionStorage.getItem('nbi_pass') }; return { user: sessionStorage.getItem('nbi_user'), pass: sessionStorage.getItem('nbi_pass') };
} }
function b64auth() { function b64auth() {
const { user, pass } = getCreds(); const { user, pass } = getCreds();
return 'Basic ' + btoa(user + ':' + pass); return 'Basic ' + btoa(user + ':' + pass);
} }
function logout() { function logout() {
sessionStorage.removeItem('nbi_user'); sessionStorage.removeItem('nbi_user');
sessionStorage.removeItem('nbi_pass'); sessionStorage.removeItem('nbi_pass');
document.getElementById('mainUI').classList.remove('main-ui'); location.reload();
document.getElementById('mainUI').classList.add('login-screen');
document.getElementById('loginScreen').classList.add('login-screen');
document.getElementById('loginScreen').style.display = '';
document.getElementById('inPass').value = '';
clearStatus();
} }
// ── API helpers ──────────────────────────────────────────── // ── API helpers ────────────────────────────────────────────
@@ -262,26 +141,21 @@
const user = document.getElementById('inUser').value.trim(); const user = document.getElementById('inUser').value.trim();
const pass = document.getElementById('inPass').value; const pass = document.getElementById('inPass').value;
if (!user || !pass) { showStatus('loginStatus', 'Please enter username and password.', 'err'); return; } if (!user || !pass) { showStatus('loginStatus', 'Please enter username and password.', 'err'); return; }
const btn = document.getElementById('btnConnect'); const btn = document.getElementById('btnConnect');
btn.classList.add('loading'); btn.disabled = true; btn.classList.add('loading'); btn.disabled = true;
clearStatus('loginStatus'); clearStatus('loginStatus');
try { try {
// Test auth by fetching devices // Test auth
const test = await fetch(NBI + '/devices?projection=_id', { const test = await fetch(NBI + '/devices?projection=_id', {
headers: { 'Authorization': 'Basic ' + btoa(user + ':' + pass) } headers: { 'Authorization': 'Basic ' + btoa(user + ':' + pass) }
}); });
if (test.status === 401) throw new Error('Invalid credentials'); if (test.status === 401) throw new Error('Invalid credentials');
if (!test.ok) throw new Error('Server error: ' + test.status); if (!test.ok) throw new Error('Server error: ' + test.status);
sessionStorage.setItem('nbi_user', user); sessionStorage.setItem('nbi_user', user);
sessionStorage.setItem('nbi_pass', pass); sessionStorage.setItem('nbi_pass', pass);
document.getElementById('loginScreen').style.display = 'none'; document.getElementById('loginScreen').style.display = 'none';
document.getElementById('mainUI').classList.add('main-ui'); document.getElementById('mainUI').classList.add('visible');
document.getElementById('connectedAs').textContent = 'Connected as ' + user; document.getElementById('connectedAs').textContent = 'Connected as ' + user;
await loadDevices(); await loadDevices();
await loadFiles(); await loadFiles();
} catch(e) { } catch(e) {
@@ -301,22 +175,17 @@
const info = document.getElementById('devInfo'); const info = document.getElementById('devInfo');
sel.innerHTML = '<option value="">Loading…</option>'; sel.innerHTML = '<option value="">Loading…</option>';
try { try {
const devs = await api('/devices?projection=InternetGatewayDevice.'); const devs = await api('/devices?projection=_id,InternetGatewayDevice.DeviceInfo.SoftwareVersion,InternetGatewayDevice.ManagementServer.ConnectionRequestURL');
sel.innerHTML = ''; sel.innerHTML = '';
if (!devs || devs.length === 0) { if (!devs || devs.length === 0) {
sel.innerHTML = '<option value="">No devices found</option>'; sel.innerHTML = '<option value="">No devices found</option>';
return; return;
} }
// Sort: online first, then by ID devs.sort((a, b) => a._id.toLowerCase().localeCompare(b._id.toLowerCase()));
devs.sort((a, b) => {
const ia = a._id.toLowerCase(), ib = b._id.toLowerCase();
return ia.localeCompare(ib);
});
for (const d of devs) { for (const d of devs) {
const serial = d._id.includes('-') ? d._id.split('-').pop() : d._id; const serial = d._id.includes('-') ? d._id.split('-').pop() : d._id;
const igd = d.InternetGatewayDevice || {}; const sw = d.InternetGatewayDevice?.DeviceInfo?.SoftwareVersion?._value || '—';
const sw = igd.DeviceInfo?.SoftwareVersion?._value || '—'; const url = d.InternetGatewayDevice?.ManagementServer?.ConnectionRequestURL?._value || '';
const url = igd.ManagementServer?.ConnectionRequestURL?._value || '';
const online = url && !url.includes('://0.') ? '🟢' : '⚫'; const online = url && !url.includes('://0.') ? '🟢' : '⚫';
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = d._id; opt.value = d._id;
@@ -340,7 +209,7 @@
btn.disabled = !sel.value || !fw.value; btn.disabled = !sel.value || !fw.value;
} }
// ── Load firmware files ───────────────────────────────────── // ── Load firmware files ───────────────────────────────────
async function loadFiles() { async function loadFiles() {
const sel = document.getElementById('selFw'); const sel = document.getElementById('selFw');
const count = document.getElementById('fwCount'); const count = document.getElementById('fwCount');
@@ -355,10 +224,10 @@
return; return;
} }
count.textContent = files.length + ' file' + (files.length !== 1 ? 's' : ''); count.textContent = files.length + ' file' + (files.length !== 1 ? 's' : '');
// Sort by version descending // Sort by version descending (use metadata.version or fall back to filename)
files.sort((a, b) => { files.sort((a, b) => {
const va = (a.version || '0').split('.').map(Number); const va = (a.metadata?.version || a.filename || '').split('.').map(Number);
const vb = (b.version || '0').split('.').map(Number); const vb = (b.metadata?.version || b.filename || '').split('.').map(Number);
for (let i = 0; i < Math.max(va.length, vb.length); i++) { for (let i = 0; i < Math.max(va.length, vb.length); i++) {
const na = va[i] || 0, nb = vb[i] || 0; const na = va[i] || 0, nb = vb[i] || 0;
if (na !== nb) return nb - na; if (na !== nb) return nb - na;
@@ -366,13 +235,14 @@
return 0; return 0;
}); });
for (const f of files) { for (const f of files) {
const ver = f.metadata?.version || '';
const fname = f.filename || f._id || '';
const sz = f.length ? fmtSize(f.length) : '';
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = f.fileName; opt.value = fname;
const ver = f.version || f.fileName.match(/R(\d+[\d.]*)/)?.[1] || '—'; opt.textContent = ver ? `R${ver}${sz ? ' (' + sz + ')' : ''}` : fname;
const sz = f.size ? fmtSize(f.size) : ''; opt.dataset.version = ver;
opt.textContent = f.version ? `R${f.version}${sz ? ' (' + sz + ')' : ''}` : f.fileName; opt.dataset.size = f.length || '';
opt.dataset.version = f.version || '';
opt.dataset.size = f.size || '';
sel.appendChild(opt); sel.appendChild(opt);
} }
sel.addEventListener('change', onFwChange); sel.addEventListener('change', onFwChange);
@@ -384,93 +254,73 @@
} }
function onFwChange() { function onFwChange() {
const sel = document.getElementById('selFw');
const btn = document.getElementById('btnPush'); const btn = document.getElementById('btnPush');
const sel = document.getElementById('selDevice');
const fw = document.getElementById('selFw');
const info = document.getElementById('fwInfo'); const info = document.getElementById('fwInfo');
const opt = sel.options[sel.selectedIndex]; info.textContent = '';
if (opt && opt.value) { btn.disabled = !sel.value || !fw.value;
const sz = opt.dataset.size ? fmtSize(parseInt(opt.dataset.size)) : ''; if (fw.value) {
info.textContent = opt.value + (sz ? ' · ' + sz : ''); const opt = fw.options[fw.selectedIndex];
} else { if (opt && opt.dataset.version) info.textContent = 'Version: ' + opt.dataset.version;
info.textContent = '';
} }
btn.disabled = !document.getElementById('selDevice').value || !sel.value;
} }
// ── Push firmware ────────────────────────────────────────── // ── Push firmware ─────────────────────────────────────────
async function pushFirmware() { async function pushFirmware() {
const devId = document.getElementById('selDevice').value; const devId = document.getElementById('selDevice').value;
const fileName = document.getElementById('selFw').value; const fwFile = document.getElementById('selFw').value;
const btn = document.getElementById('btnPush'); const btn = document.getElementById('btnPush');
const status = document.getElementById('statusBox'); const status = document.getElementById('statusBox');
if (!devId || !fwFile) return;
if (!devId || !fileName) return; btn.disabled = true; btn.textContent = 'Pushing…';
status.className = 'status-box'; status.textContent = '';
clearStatus(); status.classList.add('visible');
btn.classList.add('loading'); btn.disabled = true;
try { try {
const task = await api('/devices/' + encodeURIComponent(devId) + '/tasks', 'POST', { const task = await api('/devices/' + encodeURIComponent(devId) + '/tasks', 'POST', {
name: 'download', name: 'FirmwareDownloadImage',
fileType: '1 Firmware Upgrade Image', arguments: { File: fwFile }
fileName: fileName,
productClass: 'GigaSpire'
}); });
status.innerHTML = `✓ Task created — refresh device list after 1–2 min to see new version`;
if (task && task.name === 'download') { status.className = 'status-box ok';
showStatus('statusBox', setTimeout(() => { status.classList.remove('visible'); }, 8000);
`✓ Firmware push queued successfully. Task ID: <span class="task-id">${task.id}</span>`,
'ok');
} else {
showStatus('statusBox', '✓ Task created: ' + JSON.stringify(task).slice(0, 100), 'ok');
}
} catch(e) { } catch(e) {
if (e.message === 'AUTH') { if (e.message === 'AUTH') {
showStatus('statusBox', 'Session expired. Please reconnect.', 'err'); status.textContent = 'Session expired. Please reconnect.';
setTimeout(logout, 1500); status.className = 'status-box err';
setTimeout(() => logout(), 2000);
} else { } else {
showStatus('statusBox', 'Failed to push firmware: ' + e.message, 'err'); status.textContent = 'Failed to push firmware: ' + e.message;
status.className = 'status-box err';
} }
} finally { } finally {
btn.classList.remove('loading'); btn.disabled = false; btn.disabled = false; btn.textContent = 'Push Firmware';
} }
} }
// ── UI helpers ───────────────────────────────────────────── // ── Status helpers ─────────────────────────────────────────
function showStatus(id, html, type) { function showStatus(id, html, type) {
const el = document.getElementById(id); const el = document.getElementById(id);
if (!el) return;
el.innerHTML = html; el.innerHTML = html;
el.className = 'status show ' + type; el.style.color = type === 'err' ? 'var(--err)' : type === 'ok' ? 'var(--ok)' : '';
}
function clearStatus(id = 'statusBox') {
const el = document.getElementById(id);
if (el) { el.className = 'status'; el.innerHTML = ''; }
} }
function clearStatus(id) { showStatus(id, '', ''); }
function fmtSize(bytes) { function fmtSize(bytes) {
if (!bytes) return ''; if (!bytes) return '';
if (bytes >= 1e9) return (bytes/1e9).toFixed(1) + ' GB'; const units = ['B','KB','MB','GB'];
if (bytes >= 1e6) return (bytes/1e6).toFixed(0) + ' MB'; let i = 0;
return (bytes/1e3).toFixed(0) + ' KB'; while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; }
return bytes.toFixed(1) + ' ' + units[i];
} }
// ── Boot ────────────────────────────────────────────────── // ── Init: re-attach if already logged in ───────────────────
(function init() { if (sessionStorage.getItem('nbi_user')) {
const { user, pass } = getCreds(); document.getElementById('loginScreen').style.display = 'none';
if (user && pass) { document.getElementById('mainUI').classList.add('visible');
// Restore session document.getElementById('connectedAs').textContent = 'Connected as ' + sessionStorage.getItem('nbi_user');
document.getElementById('inUser').value = user; loadDevices().then(loadFiles).catch(() => logout());
document.getElementById('loginScreen').style.display = 'none'; }
document.getElementById('mainUI').classList.add('main-ui');
document.getElementById('connectedAs').textContent = 'Connected as ' + user;
loadDevices().then(loadFiles).catch(() => logout());
} else {
document.getElementById('loginScreen').classList.add('login-screen');
}
// Enter key on password field
document.getElementById('inPass').addEventListener('keydown', e => {
if (e.key === 'Enter') connect();
});
})();
</script> </script>
</body> </body>
</html> </html>