fix: improve auth

This commit is contained in:
nate 2026-04-09 07:55:38 +04:00
parent d8ecabe2e2
commit 59a29a1e63
4 changed files with 122 additions and 13 deletions

View File

@ -103,7 +103,11 @@ async function renderHtml(slug: string, request: Request): Promise<Response> {
const page = await loadStatusPage(slug);
if (!page) return notFound();
if (!isAuthorised(page, request)) {
return new Response(eta.render("password", { title: page.title, slug: page.slug, error: null }), {
// Do NOT pass page.title to the password template — that would let any
// OSINT scraper iterating slugs harvest the human-readable name of every
// private page without ever authenticating. Slug is fine: it's already
// in the URL the visitor typed.
return new Response(eta.render("password", { slug: page.slug, error: null }), {
status: 401,
headers: { "content-type": "text/html; charset=utf-8", ...NO_STORE_HEADERS },
});
@ -302,9 +306,9 @@ const app = new Elysia()
const password = String(form.get("password") ?? "");
const ok = await checkPassword(password, page.password_hash);
if (!ok) {
return new Response(eta.render("password", { title: page.title, slug: page.slug, error: "Wrong password" }), {
return new Response(eta.render("password", { slug: page.slug, error: "Wrong password" }), {
status: 401,
headers: { "content-type": "text/html; charset=utf-8" },
headers: { "content-type": "text/html; charset=utf-8", ...NO_STORE_HEADERS },
});
}
return new Response(null, {
@ -316,7 +320,32 @@ const app = new Elysia()
const port = Number(process.env.STATUS_PORT ?? 3003);
const server = Bun.serve({
port,
fetch(req) { return app.handle(req); },
// Wrap app.handle in a try/catch so any unexpected throw — Postgres
// connection blip, template render error, missing env var, etc. — turns
// into a generic 500 with an opaque body. Without this wrapper Bun's
// default error path may include framework details, file paths, or stack
// traces in the response, which would leak internal layout to anyone who
// could trigger an exception. We log the real reason server-side.
async fetch(req) {
try {
return await app.handle(req);
} catch (err) {
console.error("[fetch] unhandled error:", err);
return new Response("Internal server error", {
status: 500,
headers: { "content-type": "text/plain; charset=utf-8", ...NO_STORE_HEADERS },
});
}
},
error(err) {
// Belt-and-suspenders: even if Bun catches an error before our fetch
// wrapper sees it, return a generic body rather than the default page.
console.error("[server] error:", err);
return new Response("Internal server error", {
status: 500,
headers: { "content-type": "text/plain; charset=utf-8", ...NO_STORE_HEADERS },
});
},
});
console.log(`PingQL status service running at http://localhost:${server.port}`);

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title><%= it.title %> — Password required</title>
<title>Password required</title>
<style>
body { background: #0a0a0a; color: #f1f5f9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
.card { background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 2rem; max-width: 400px; width: 90%; }
@ -19,7 +19,7 @@
</head>
<body>
<div class="card">
<h1><%= it.title %></h1>
<h1>Password required</h1>
<p>This status page is password protected.</p>
<form method="POST" action="/<%= it.slug %>/auth">
<input type="password" name="password" placeholder="Password" autofocus required>

View File

@ -776,9 +776,14 @@ export const dashboard = new Elysia()
footer_text: b.footer_text || null,
monitors: monitorsForApi,
};
// Only send `password` if the user actually typed something. An empty box
// means "leave the existing password as-is" — sending null would clear it.
if (b.password) payload.password = b.password;
// Three cases for the password field:
// 1. user clicked Remove → hidden `remove_password=1` is set, send null
// (the API treats `password === null` as "clear the password_hash")
// 2. user typed a new password → send the string (API hashes + replaces)
// 3. neither → omit the field entirely so the API leaves password_hash
// alone. Empty string falls through to this branch on purpose.
if (b.remove_password) payload.password = null;
else if (b.password) payload.password = b.password;
await fetch(`${apiUrl}/status-pages/${params.id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${key}` },

View File

@ -175,11 +175,86 @@
</label>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1.5">Password <span class="text-gray-600">(optional, leave blank to remove)</span></label>
<%
// Three UI states for the password field:
// 1. New page or no password set → bare input, "leave blank for public"
// 2. Existing page with password set → "Password is set" badge + Change/Remove buttons
// 3. State (2), then user clicks Change → input revealed
// The hidden `remove_password` flag is set by the Remove button so the
// dashboard handler can forward an explicit `password: null` to the API.
// Without that flag, an empty input means "leave the existing password
// alone" (the form post handler drops empty strings on purpose).
const hasPassword = !it.isNew && p.password_hash;
%>
<div data-password-section>
<label class="block text-sm text-gray-400 mb-1.5">Password <span class="text-gray-600">(optional)</span></label>
<% if (hasPassword) { %>
<div data-password-locked class="flex items-center gap-3 bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5">
<span class="inline-flex items-center gap-2 text-sm text-gray-200">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
Password is set
</span>
<div class="ml-auto flex gap-2">
<button type="button" data-password-change class="text-xs px-2.5 py-1 rounded border border-border-subtle text-gray-300 hover:text-white hover:border-blue-500">Change</button>
<button type="button" data-password-remove class="text-xs px-2.5 py-1 rounded border border-border-subtle text-gray-400 hover:text-red-400 hover:border-red-500">Remove</button>
</div>
</div>
<div data-password-input-wrap class="hidden mt-2">
<input data-password-input name="password" type="password" placeholder="New password"
class="w-full bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
<button type="button" data-password-cancel class="mt-1 text-xs text-gray-500 hover:text-gray-300">Cancel — keep current password</button>
</div>
<div data-password-removing class="hidden mt-2 text-xs text-red-400">
Password will be removed when you save.
<button type="button" data-password-undo-remove class="ml-2 underline text-gray-400 hover:text-gray-200">Undo</button>
</div>
<input type="hidden" name="remove_password" data-remove-password-flag value="">
<% } else { %>
<input name="password" type="password" placeholder="Leave blank for public access"
class="w-full bg-surface-solid border border-border-subtle rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
<% } %>
</div>
<% if (hasPassword) { %>
<script>
(function() {
var section = document.querySelector('[data-password-section]');
if (!section) return;
var locked = section.querySelector('[data-password-locked]');
var inputWrap = section.querySelector('[data-password-input-wrap]');
var input = section.querySelector('[data-password-input]');
var removing = section.querySelector('[data-password-removing]');
var removeFlag = section.querySelector('[data-remove-password-flag]');
section.querySelector('[data-password-change]').addEventListener('click', function() {
locked.classList.add('hidden');
inputWrap.classList.remove('hidden');
removing.classList.add('hidden');
removeFlag.value = '';
input.focus();
});
section.querySelector('[data-password-cancel]').addEventListener('click', function() {
inputWrap.classList.add('hidden');
locked.classList.remove('hidden');
input.value = '';
});
section.querySelector('[data-password-remove]').addEventListener('click', function() {
locked.classList.add('hidden');
inputWrap.classList.add('hidden');
removing.classList.remove('hidden');
removeFlag.value = '1';
input.value = '';
});
section.querySelector('[data-password-undo-remove]').addEventListener('click', function() {
removing.classList.add('hidden');
locked.classList.remove('hidden');
removeFlag.value = '';
});
})();
</script>
<% } %>
<div>
<label class="block text-sm text-gray-400 mb-1.5">Custom CSS <span class="text-gray-600">(optional)</span></label>