From 59a29a1e63de0c0026a2880947ead016937094ae Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Thu, 9 Apr 2026 07:55:38 +0400
Subject: [PATCH] fix: improve auth

---
 apps/status/src/index.ts                | 37 +++++++++--
 apps/status/src/views/password.ejs      |  4 +-
 apps/web/src/routes/dashboard.ts        | 11 +++-
 apps/web/src/views/status-page-edit.ejs | 83 +++++++++++++++++++++++--
 4 files changed, 122 insertions(+), 13 deletions(-)

diff --git a/apps/status/src/index.ts b/apps/status/src/index.ts
index ba2821f..e482e51 100644
--- a/apps/status/src/index.ts
+++ b/apps/status/src/index.ts
@@ -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}`);
diff --git a/apps/status/src/views/password.ejs b/apps/status/src/views/password.ejs
index fd6869a..b7e7d5f 100644
--- a/apps/status/src/views/password.ejs
+++ b/apps/status/src/views/password.ejs
@@ -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>
diff --git a/apps/web/src/routes/dashboard.ts b/apps/web/src/routes/dashboard.ts
index c945350..9e28850 100644
--- a/apps/web/src/routes/dashboard.ts
+++ b/apps/web/src/routes/dashboard.ts
@@ -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}` },
diff --git a/apps/web/src/views/status-page-edit.ejs b/apps/web/src/views/status-page-edit.ejs
index d091d93..36874a3 100644
--- a/apps/web/src/views/status-page-edit.ejs
+++ b/apps/web/src/views/status-page-edit.ejs
@@ -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>
-      <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">
+    <%
+      // 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>