Daniel Maksymilian Syrnicki
26f0424ae3
All checks were successful
Build ISO / build-iso (push) Successful in 17m14s
CI / lint (push) Successful in 26s
CI / test (push) Successful in 1m2s
CI / validate-json (push) Successful in 24s
CI / markdown-links (push) Successful in 15s
Release / release (push) Successful in 11m26s
Since 26.11 shipped login, two of the three nav pages were secretly
unauthenticated. The Caddyfile only reverse-proxied /api/*, /apps*,
/login*, /logout* to the Python auth-gated handler. Everything else —
including / (landing page) and /settings/ — fell through to Caddy's
catch-all file_server straight out of assets/www/, skipping the
session check entirely.
LAN visitor effect: they could read the box's hostname, IP, Furtka
version, uptime, and see all the Update-now / Reboot / HTTPS-toggle
buttons on /settings/. The API calls those buttons fired were
themselves 401-gated so nothing actually happened — but the info leak
plus "looks open" UX was real. Caught in the 26.13 SSH test session
when the user noticed Logout only appeared in the nav on /apps, and
not on / or /settings/.
Fix:
- Caddyfile: new `handle /settings*` and `handle /` blocks in the
shared `(furtka_routes)` snippet reverse-proxy to localhost:7000,
so both hit the Python auth-guard before the HTML goes out.
- api.py: new `_serve_static_www(relative_path)` helper reads
assets/www/{index.html, settings/index.html} with a path-traversal
clamp (resolved path must stay under static_www_dir). `do_GET`
routes `/` and `/settings[/]` to it. Removed the `/` branch from
the old combined-with-/apps line — those are different pages now.
- paths.py: new `static_www_dir()` helper with `FURTKA_STATIC_WWW`
env override for tests.
- assets/www/*.html: both nav bars get the Logout link + a shared
`doLogout()` inline script matching the _HTML pattern. Users never
see the link unauthed (the Python handler 302s them before the
page renders), but authed users get consistent navigation across
all three pages.
Tests: 5 new cases in test_api.py — unauth / redirects, unauth
/settings redirects (both trailing-slash and not), authed / serves
index.html, authed /settings serves settings/index.html,
regression guard that / and /apps serve different content.
Existing test updated (the one that used / as a proxy for /apps).
Static /style.css, /rootCA.crt, /status.json, /furtka.json,
/update-state.json stay served by Caddy's catch-all — those are
public by design (login page needs style.css, fresh users need the
CA to trust HTTPS, runtime JSON is metadata not creds).
272 tests pass, ruff check + format clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
447 lines
19 KiB
HTML
447 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Settings · Furtka</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<main class="wrap">
|
||
<nav class="nav">
|
||
<a class="brand" href="/">Furtka</a>
|
||
<div class="nav-links">
|
||
<a href="/">Home</a>
|
||
<a href="/apps">Apps</a>
|
||
<a href="/settings/" aria-current="page">Settings</a>
|
||
<a href="#" id="logout-link" onclick="return doLogout(event)">Logout</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<h1>Settings</h1>
|
||
<p class="lede">What this box knows about itself.</p>
|
||
|
||
<section>
|
||
<h2>About this box</h2>
|
||
<div class="card">
|
||
<dl class="kv">
|
||
<dt>Hostname</dt><dd id="set-hostname">—</dd>
|
||
<dt>IP address</dt><dd id="set-ip">—</dd>
|
||
<dt>Furtka version</dt><dd id="set-version">—</dd>
|
||
<dt>Kernel</dt><dd id="set-kernel">—</dd>
|
||
<dt>RAM</dt><dd id="set-ram">—</dd>
|
||
<dt>Docker</dt><dd id="set-docker">—</dd>
|
||
<dt>Uptime</dt><dd id="set-uptime">—</dd>
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Furtka updates</h2>
|
||
<div class="card">
|
||
<dl class="kv">
|
||
<dt>Installed</dt><dd id="upd-current">—</dd>
|
||
<dt>Latest available</dt><dd id="upd-latest">—</dd>
|
||
</dl>
|
||
<div class="update-actions">
|
||
<button id="check-updates-btn" class="secondary">Check for updates</button>
|
||
<button id="apply-update-btn" hidden>Update now</button>
|
||
</div>
|
||
<p id="update-status" class="hint"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Local HTTPS</h2>
|
||
<div class="card">
|
||
<p class="lede">
|
||
Serve this box over <code>https://<span id="https-host">—</span>/</code>
|
||
with a green padlock. Install the Furtka root CA once per device, then
|
||
optionally force every HTTP request to redirect.
|
||
</p>
|
||
<dl class="kv">
|
||
<dt>CA fingerprint (SHA-256)</dt><dd id="https-fingerprint">—</dd>
|
||
<dt>Reachable from this browser</dt><dd id="https-reachable">checking…</dd>
|
||
</dl>
|
||
<div class="update-actions">
|
||
<button id="https-download-btn" class="secondary">Download CA (.crt)</button>
|
||
<a href="/https-install/" class="inline-link">Per-OS install guide</a>
|
||
</div>
|
||
<label class="https-toggle" hidden id="https-force-wrap">
|
||
<input type="checkbox" id="https-force">
|
||
<span>Force HTTPS (redirect plain HTTP to HTTPS)</span>
|
||
</label>
|
||
<p class="hint" id="https-force-hint" hidden>
|
||
Enable this only after you've installed the CA and confirmed
|
||
<code>https://</code> works in this browser — otherwise the redirect
|
||
will leave you with a scary certificate warning.
|
||
</p>
|
||
<p id="https-status" class="hint"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Appearance</h2>
|
||
<div class="card">
|
||
<dl class="kv">
|
||
<dt>Theme</dt><dd>Follows your system setting</dd>
|
||
<dt>Language</dt><dd>English</dd>
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Power</h2>
|
||
<div class="card">
|
||
<p class="lede">
|
||
Reboot or shut down the whole Furtka box. Takes a few seconds to
|
||
finish; the UI will reconnect itself after a reboot.
|
||
</p>
|
||
<div class="power-actions">
|
||
<button type="button" id="power-reboot" class="secondary">Reboot</button>
|
||
<button type="button" id="power-poweroff" class="danger">Shut down</button>
|
||
</div>
|
||
<p id="power-status" class="hint"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Coming next</h2>
|
||
<div class="coming">
|
||
<p class="hint">Controls we're building — follow progress on <a href="https://furtka.org">furtka.org</a>.</p>
|
||
<a href="https://furtka.org/#planned">Change hostname</a>
|
||
<a href="https://furtka.org/#planned">Backup</a>
|
||
<a href="https://furtka.org/#planned">User accounts</a>
|
||
<a href="https://furtka.org/#planned">Remote access</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Furtka · <a href="https://furtka.org">furtka.org</a></p>
|
||
</footer>
|
||
</main>
|
||
|
||
<script>
|
||
// Logout button in the nav — same shape as /apps and / pages.
|
||
async function doLogout(ev) {
|
||
ev.preventDefault();
|
||
try { await fetch('/logout', { method: 'POST', credentials: 'same-origin' }); }
|
||
catch (e) { /* server may already be down */ }
|
||
window.location.href = '/login';
|
||
return false;
|
||
}
|
||
|
||
async function refresh() {
|
||
try {
|
||
const r = await fetch('/status.json', { cache: 'no-store' });
|
||
if (!r.ok) return;
|
||
const s = await r.json();
|
||
document.getElementById('set-hostname').textContent = s.hostname || '—';
|
||
document.getElementById('set-ip').textContent = s.ip_primary || '—';
|
||
document.getElementById('set-version').textContent = s.furtka_version || '—';
|
||
document.getElementById('set-kernel').textContent = s.kernel || '—';
|
||
document.getElementById('set-ram').textContent = s.ram_total || '—';
|
||
document.getElementById('set-docker').textContent = s.docker_version || '—';
|
||
document.getElementById('set-uptime').textContent = s.uptime || '—';
|
||
document.getElementById('upd-current').textContent = s.furtka_version || '—';
|
||
} catch (e) {
|
||
/* next tick will retry */
|
||
}
|
||
}
|
||
refresh();
|
||
setInterval(refresh, 15000);
|
||
|
||
// --- Furtka updates -----------------------------------------------
|
||
|
||
const STAGE_LABELS = {
|
||
downloading: 'Downloading release…',
|
||
verifying: 'Verifying signature…',
|
||
extracting: 'Unpacking update…',
|
||
swapping: 'Switching to new version…',
|
||
restarting: 'Restarting services…',
|
||
done: 'Update complete — reloading…',
|
||
rolled_back: 'Update failed, rolled back to the previous version',
|
||
rolled_back_manual: 'Rolled back manually',
|
||
};
|
||
|
||
let pollHandle = null;
|
||
let fallbackReloadHandle = null;
|
||
const statusEl = document.getElementById('update-status');
|
||
const checkBtn = document.getElementById('check-updates-btn');
|
||
const applyBtn = document.getElementById('apply-update-btn');
|
||
|
||
function setStatus(msg, isError = false) {
|
||
statusEl.textContent = msg;
|
||
statusEl.style.color = isError ? 'var(--danger)' : 'var(--muted)';
|
||
}
|
||
|
||
checkBtn.addEventListener('click', async () => {
|
||
checkBtn.disabled = true;
|
||
const original = checkBtn.textContent;
|
||
checkBtn.textContent = 'Checking…';
|
||
setStatus('');
|
||
try {
|
||
const r = await fetch('/api/furtka/update/check', { method: 'POST' });
|
||
const data = await r.json();
|
||
if (!r.ok) {
|
||
setStatus(data.error || `HTTP ${r.status}`, true);
|
||
return;
|
||
}
|
||
document.getElementById('upd-latest').textContent = data.latest || '—';
|
||
document.getElementById('upd-current').textContent = data.current || '—';
|
||
if (data.update_available) {
|
||
applyBtn.hidden = false;
|
||
applyBtn.textContent = `Update to ${data.latest}`;
|
||
setStatus(`Update available: ${data.current} → ${data.latest}`);
|
||
} else {
|
||
applyBtn.hidden = true;
|
||
setStatus('Already up to date');
|
||
}
|
||
} catch (e) {
|
||
setStatus(`Network error: ${e.message}`, true);
|
||
} finally {
|
||
checkBtn.disabled = false;
|
||
checkBtn.textContent = original;
|
||
}
|
||
});
|
||
|
||
applyBtn.addEventListener('click', async () => {
|
||
applyBtn.disabled = true;
|
||
checkBtn.disabled = true;
|
||
setStatus('Starting update…');
|
||
try {
|
||
const r = await fetch('/api/furtka/update/apply', { method: 'POST' });
|
||
const data = await r.json();
|
||
if (r.status === 409) {
|
||
setStatus('Another update is already running — watching it', true);
|
||
} else if (!r.ok) {
|
||
setStatus(data.error || `HTTP ${r.status}`, true);
|
||
applyBtn.disabled = false;
|
||
checkBtn.disabled = false;
|
||
return;
|
||
}
|
||
// Poll /update-state.json (served by Caddy, unaffected by the
|
||
// API restart the updater is about to trigger) every 2s.
|
||
pollHandle = setInterval(pollUpdateState, 2000);
|
||
// Fallback: reload regardless of whether polling observes 'done'.
|
||
// The mid-apply API restart can drop the poll connection before
|
||
// the terminal state is ever seen by this page.
|
||
fallbackReloadHandle = setTimeout(() => location.reload(), 45000);
|
||
} catch (e) {
|
||
setStatus(`Network error: ${e.message}`, true);
|
||
applyBtn.disabled = false;
|
||
checkBtn.disabled = false;
|
||
}
|
||
});
|
||
|
||
// --- Local HTTPS --------------------------------------------------
|
||
|
||
const httpsFingerprintEl = document.getElementById('https-fingerprint');
|
||
const httpsReachableEl = document.getElementById('https-reachable');
|
||
const httpsHostEl = document.getElementById('https-host');
|
||
const httpsDownloadBtn = document.getElementById('https-download-btn');
|
||
const httpsForceWrap = document.getElementById('https-force-wrap');
|
||
const httpsForceHint = document.getElementById('https-force-hint');
|
||
const httpsForce = document.getElementById('https-force');
|
||
const httpsStatusEl = document.getElementById('https-status');
|
||
|
||
httpsHostEl.textContent = location.hostname;
|
||
|
||
httpsDownloadBtn.addEventListener('click', () => {
|
||
// Use an anchor with the download attr so the browser treats
|
||
// the cert as a download rather than rendering it.
|
||
const a = document.createElement('a');
|
||
a.href = '/rootCA.crt';
|
||
a.download = 'furtka-local-rootCA.crt';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
a.remove();
|
||
});
|
||
|
||
async function refreshHttpsStatus() {
|
||
try {
|
||
const r = await fetch('/api/furtka/https/status', { cache: 'no-store' });
|
||
if (!r.ok) return;
|
||
const s = await r.json();
|
||
httpsFingerprintEl.textContent = s.fingerprint_sha256 || 'waiting for Caddy…';
|
||
httpsDownloadBtn.disabled = !s.ca_available;
|
||
httpsForce.checked = !!s.force_https;
|
||
updateForceToggleVisibility(s);
|
||
} catch (e) {
|
||
/* next refresh will retry */
|
||
}
|
||
}
|
||
|
||
async function probeHttpsReachable() {
|
||
if (location.protocol === 'https:') {
|
||
httpsReachableEl.textContent = 'yes — you are on HTTPS now';
|
||
return true;
|
||
}
|
||
try {
|
||
// no-cors: we don't need the response body, just whether the
|
||
// TLS handshake + fetch succeed. Browsers reject on untrusted
|
||
// cert with a TypeError, which is exactly the signal we want.
|
||
await fetch('https://' + location.hostname + '/furtka.json',
|
||
{ cache: 'no-store', mode: 'no-cors' });
|
||
httpsReachableEl.textContent = 'yes — CA already trusted';
|
||
return true;
|
||
} catch (e) {
|
||
httpsReachableEl.textContent = 'no — install the CA first';
|
||
return false;
|
||
}
|
||
}
|
||
|
||
let httpsReachableCache = false;
|
||
function updateForceToggleVisibility(status) {
|
||
// Show the force-redirect toggle only when both:
|
||
// - Caddy's CA exists (otherwise there's no HTTPS to redirect to)
|
||
// - the current browser already trusts the cert (otherwise the
|
||
// user would lock themselves out of this very page)
|
||
const show = status.ca_available && httpsReachableCache;
|
||
httpsForceWrap.hidden = !show;
|
||
httpsForceHint.hidden = !show;
|
||
}
|
||
|
||
httpsForce.addEventListener('change', async () => {
|
||
httpsForce.disabled = true;
|
||
const desired = httpsForce.checked;
|
||
httpsStatusEl.textContent = desired
|
||
? 'Enabling HTTP→HTTPS redirect…'
|
||
: 'Disabling HTTP→HTTPS redirect…';
|
||
httpsStatusEl.style.color = 'var(--muted)';
|
||
try {
|
||
const r = await fetch('/api/furtka/https/force', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ enabled: desired }),
|
||
});
|
||
const data = await r.json();
|
||
if (!r.ok) {
|
||
httpsStatusEl.textContent = data.error || `HTTP ${r.status}`;
|
||
httpsStatusEl.style.color = 'var(--danger)';
|
||
httpsForce.checked = !desired;
|
||
} else {
|
||
httpsStatusEl.textContent = data.force_https
|
||
? 'Redirect on — new HTTP requests will jump to HTTPS.'
|
||
: 'Redirect off — HTTP serves the content directly.';
|
||
}
|
||
} catch (e) {
|
||
httpsStatusEl.textContent = `Network error: ${e.message}`;
|
||
httpsStatusEl.style.color = 'var(--danger)';
|
||
httpsForce.checked = !desired;
|
||
} finally {
|
||
httpsForce.disabled = false;
|
||
}
|
||
});
|
||
|
||
(async () => {
|
||
httpsReachableCache = await probeHttpsReachable();
|
||
await refreshHttpsStatus();
|
||
})();
|
||
|
||
async function pollUpdateState() {
|
||
try {
|
||
const r = await fetch('/update-state.json', { cache: 'no-store' });
|
||
if (!r.ok) return;
|
||
const s = await r.json();
|
||
const label = STAGE_LABELS[s.stage] || `Stage: ${s.stage}`;
|
||
setStatus(label, s.stage === 'rolled_back');
|
||
if (s.stage === 'done') {
|
||
clearInterval(pollHandle);
|
||
clearTimeout(fallbackReloadHandle);
|
||
setTimeout(() => location.reload(), 5000);
|
||
} else if (s.stage === 'rolled_back') {
|
||
clearInterval(pollHandle);
|
||
clearTimeout(fallbackReloadHandle);
|
||
if (s.reason) {
|
||
setStatus(`${label} — ${s.reason}`, true);
|
||
}
|
||
applyBtn.disabled = false;
|
||
checkBtn.disabled = false;
|
||
}
|
||
} catch (e) {
|
||
/* keep polling; restart blip expected */
|
||
}
|
||
}
|
||
|
||
// Power buttons: confirm, POST, then swap the whole card into a
|
||
// "going down" state so the user doesn't keep clicking. After a
|
||
// reboot we try to reconnect after ~45s; for shutdown we just
|
||
// tell the user the box is off — no auto-reconnect attempt.
|
||
const powerStatusEl = document.getElementById('power-status');
|
||
const rebootBtn = document.getElementById('power-reboot');
|
||
const poweroffBtn = document.getElementById('power-poweroff');
|
||
|
||
function setPowerStatus(msg, tone = 'muted') {
|
||
powerStatusEl.textContent = msg;
|
||
powerStatusEl.style.color =
|
||
tone === 'error' ? 'var(--danger)' : 'var(--muted)';
|
||
}
|
||
|
||
async function triggerPower(action, confirmMsg, inflightLabel) {
|
||
if (!confirm(confirmMsg)) return;
|
||
rebootBtn.disabled = true;
|
||
poweroffBtn.disabled = true;
|
||
setPowerStatus(inflightLabel);
|
||
try {
|
||
const r = await fetch('/api/furtka/power', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ action }),
|
||
});
|
||
if (!r.ok) {
|
||
const data = await r.json().catch(() => ({}));
|
||
setPowerStatus(data.error || `HTTP ${r.status}`, 'error');
|
||
rebootBtn.disabled = false;
|
||
poweroffBtn.disabled = false;
|
||
return;
|
||
}
|
||
if (action === 'reboot') {
|
||
setPowerStatus('Rebooting… this page will reload when the box is back.');
|
||
// Try reconnecting after a generous delay. archinstall
|
||
// + boot + services typically takes 30–45 s; give it 30
|
||
// before the first poke so we don't just spin against
|
||
// a down kernel.
|
||
setTimeout(pollForReconnect, 30000);
|
||
} else {
|
||
setPowerStatus(
|
||
'Shutdown scheduled. Press the physical power button to turn it back on.'
|
||
);
|
||
}
|
||
} catch (e) {
|
||
setPowerStatus(`Network error: ${e.message}`, 'error');
|
||
rebootBtn.disabled = false;
|
||
poweroffBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function pollForReconnect() {
|
||
// Fetch a tiny static file; when it comes back 200 the box is up.
|
||
try {
|
||
const r = await fetch('/furtka.json', { cache: 'no-store' });
|
||
if (r.ok) {
|
||
setPowerStatus('Back up — reloading…');
|
||
setTimeout(() => location.reload(), 1500);
|
||
return;
|
||
}
|
||
} catch (e) { /* still down */ }
|
||
setTimeout(pollForReconnect, 3000);
|
||
}
|
||
|
||
rebootBtn.addEventListener('click', () =>
|
||
triggerPower(
|
||
'reboot',
|
||
"Wirklich neu starten? Die Box ist für ~30 Sekunden nicht erreichbar.",
|
||
'Rebooting…'
|
||
)
|
||
);
|
||
poweroffBtn.addEventListener('click', () =>
|
||
triggerPower(
|
||
'poweroff',
|
||
"Wirklich ausschalten? Du kannst die Box erst wieder starten, wenn du den physischen Power-Knopf drückst.",
|
||
'Shutting down…'
|
||
)
|
||
);
|
||
</script>
|
||
</body>
|
||
</html>
|