feat(auth): first-run password setup via web panel

When `webPassword` is null and the daemon starts headless (systemd, piped
SSH), no longer auto-generate a random password. Instead:
  - Boot normally with the gate denying everything except /api/auth/setup
  - Panel UI eagerly probes new /api/auth/state on load and renders a
    first-run setup overlay (password + confirm) when needsSetup=true
  - POST /api/auth/setup writes the chosen password and issues the auth
    cookie in the same response, so the operator lands logged in

Interactive TTY behaviour (prompt at the console) is unchanged. The gate
middleware is now registered unconditionally so first-run mode is still
locked-down instead of wide-open.
This commit is contained in:
Matt Sijbers
2026-05-18 23:20:27 +01:00
parent 372b5090cd
commit bf53b65706
3 changed files with 175 additions and 42 deletions
+15
View File
@@ -374,6 +374,21 @@
</div>
</div>
<div id="setupOverlay" class="login-overlay" hidden>
<div class="login-box">
<h2>Brass &amp; Sigil</h2>
<p>First-run setup. Pick an admin password &mdash; this is the credential you'll use to sign in from now on.</p>
<div class="input-wrap">
<input id="setupPassword" type="password" autocomplete="new-password" placeholder="New password (min 8 chars)" />
</div>
<div class="input-wrap">
<input id="setupConfirm" type="password" autocomplete="new-password" placeholder="Confirm password" />
</div>
<button id="setupSubmit">Set password &amp; continue</button>
<div id="setupError" class="login-error"></div>
</div>
</div>
<script type="module" src="/app.js"></script>
</body>
</html>
+65 -6
View File
@@ -8,20 +8,42 @@
// own error messages and we want to surface them verbatim to the user.
let overlayShown = false;
function showOverlay() {
async function showOverlay(stateOverride) {
if (overlayShown) return;
overlayShown = true;
const overlay = document.getElementById("loginOverlay");
if (overlay) {
overlay.hidden = false;
document.getElementById("loginPassword")?.focus();
let state = stateOverride;
if (!state) {
try {
const res = await fetch("/api/auth/state");
if (res.ok) state = await res.json();
} catch { /* network blip -- fall through to login */ }
}
state = state || { needsSetup: false };
if (state.needsSetup) {
const overlay = document.getElementById("setupOverlay");
if (overlay) {
overlay.hidden = false;
document.getElementById("setupPassword")?.focus();
}
} else {
const overlay = document.getElementById("loginOverlay");
if (overlay) {
overlay.hidden = false;
document.getElementById("loginPassword")?.focus();
}
}
}
export function setupAuth() {
document.addEventListener("authrequired", showOverlay);
document.addEventListener("authrequired", () => showOverlay());
setupLoginForm();
setupAccountPanel();
setupSetupForm();
// Eager state probe so the right overlay appears before any API call fails.
fetch("/api/auth/state")
.then(r => r.ok ? r.json() : null)
.then(state => { if (state && !state.authed) showOverlay(state); })
.catch(() => { /* let authrequired handle it */ });
}
function setupLoginForm() {
@@ -59,6 +81,43 @@ function setupLoginForm() {
input.addEventListener("keydown", e => { if (e.key === "Enter") tryLogin(); });
}
function setupSetupForm() {
const overlay = document.getElementById("setupOverlay");
const pw1 = document.getElementById("setupPassword");
const pw2 = document.getElementById("setupConfirm");
const button = document.getElementById("setupSubmit");
const errorEl = document.getElementById("setupError");
if (!overlay || !pw1 || !pw2 || !button || !errorEl) return;
async function trySetup() {
errorEl.textContent = "";
if (pw1.value.length < 8) { errorEl.textContent = "Must be at least 8 characters."; pw1.select(); return; }
if (pw1.value !== pw2.value) { errorEl.textContent = "Passwords don't match."; pw2.select(); return; }
button.disabled = true;
try {
const res = await fetch("/api/auth/setup", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ password: pw1.value }),
});
if (res.status === 429) { errorEl.textContent = "Too many attempts. Wait a minute."; return; }
const body = await res.json().catch(() => ({}));
if (!res.ok) { errorEl.textContent = body.error || `Error ${res.status}`; return; }
// Server has set the cookie and saved the password -- reload to enter
// the panel as a freshly-authed session.
location.reload();
} catch (e) {
errorEl.textContent = e.message;
} finally {
button.disabled = false;
pw1.value = pw2.value = "";
}
}
button.addEventListener("click", trySetup);
pw2.addEventListener("keydown", e => { if (e.key === "Enter") trySetup(); });
}
function setupAccountPanel() {
const logoutBtn = document.getElementById("acctLogout");
const changeBtn = document.getElementById("acctChangePw");