fix: improve auth
This commit is contained in:
parent
d8ecabe2e2
commit
59a29a1e63
|
|
@ -103,7 +103,11 @@ async function renderHtml(slug: string, request: Request): Promise<Response> {
|
||||||
const page = await loadStatusPage(slug);
|
const page = await loadStatusPage(slug);
|
||||||
if (!page) return notFound();
|
if (!page) return notFound();
|
||||||
if (!isAuthorised(page, request)) {
|
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,
|
status: 401,
|
||||||
headers: { "content-type": "text/html; charset=utf-8", ...NO_STORE_HEADERS },
|
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 password = String(form.get("password") ?? "");
|
||||||
const ok = await checkPassword(password, page.password_hash);
|
const ok = await checkPassword(password, page.password_hash);
|
||||||
if (!ok) {
|
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,
|
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, {
|
return new Response(null, {
|
||||||
|
|
@ -316,7 +320,32 @@ const app = new Elysia()
|
||||||
const port = Number(process.env.STATUS_PORT ?? 3003);
|
const port = Number(process.env.STATUS_PORT ?? 3003);
|
||||||
const server = Bun.serve({
|
const server = Bun.serve({
|
||||||
port,
|
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}`);
|
console.log(`PingQL status service running at http://localhost:${server.port}`);
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta name="robots" content="noindex,nofollow">
|
<meta name="robots" content="noindex,nofollow">
|
||||||
<title><%= it.title %> — Password required</title>
|
<title>Password required</title>
|
||||||
<style>
|
<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; }
|
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%; }
|
.card { background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 2rem; max-width: 400px; width: 90%; }
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h1><%= it.title %></h1>
|
<h1>Password required</h1>
|
||||||
<p>This status page is password protected.</p>
|
<p>This status page is password protected.</p>
|
||||||
<form method="POST" action="/<%= it.slug %>/auth">
|
<form method="POST" action="/<%= it.slug %>/auth">
|
||||||
<input type="password" name="password" placeholder="Password" autofocus required>
|
<input type="password" name="password" placeholder="Password" autofocus required>
|
||||||
|
|
|
||||||
|
|
@ -776,9 +776,14 @@ export const dashboard = new Elysia()
|
||||||
footer_text: b.footer_text || null,
|
footer_text: b.footer_text || null,
|
||||||
monitors: monitorsForApi,
|
monitors: monitorsForApi,
|
||||||
};
|
};
|
||||||
// Only send `password` if the user actually typed something. An empty box
|
// Three cases for the password field:
|
||||||
// means "leave the existing password as-is" — sending null would clear it.
|
// 1. user clicked Remove → hidden `remove_password=1` is set, send null
|
||||||
if (b.password) payload.password = b.password;
|
// (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}`, {
|
await fetch(`${apiUrl}/status-pages/${params.id}`, {
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${key}` },
|
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${key}` },
|
||||||
|
|
|
||||||
|
|
@ -175,11 +175,86 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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:
|
||||||
<input name="password" type="password" placeholder="Leave blank for public access"
|
// 1. New page or no password set → bare input, "leave blank for public"
|
||||||
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">
|
// 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>
|
</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>
|
<div>
|
||||||
<label class="block text-sm text-gray-400 mb-1.5">Custom CSS <span class="text-gray-600">(optional)</span></label>
|
<label class="block text-sm text-gray-400 mb-1.5">Custom CSS <span class="text-gray-600">(optional)</span></label>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue