feat: styled login page + structured JSONL audit logging

- Browser navigation now gets a self-contained login page (no JS, CSP
  hardened, XSS-escaped, cross-origin POST rejected) instead of the native
  Basic dialog; API clients keep 401 + WWW-Authenticate.
- Login/logout endpoints (/panel-auth/login, /panel-auth/logout) issue and
  revoke the signed cookie, then 303 back to the original target.
- Structured audit log (login-ok/login-fail/logout/challenge/reject with
  username, IP, UA, reason), default $DSH_HOME/panel-auth-audit.jsonl,
  5MB rotation; X-Forwarded-For honored behind the reverse proxy.
- Function-plugin form, per-request config, fail-open when unconfigured.
- Tests extended to 15 flows including login page, login POST, logout,
  audit assertions and XSS escaping.

index.js

@@ -3,11 +3,13 @@
 // A web-profile host plugin. It wraps the panel's node:http server
 // (the `webServer` service) and requires one of, on EVERY request and
 // WebSocket upgrade:
-//   1. a valid signed session cookie (dsh_panel), issued below, or
+//   1. a valid signed session cookie (dsh_panel), issued at login, or
 //   2. a valid HTTP Basic credential from `config.users`.
 //
-// The cookie exists because browser WebSocket handshakes always carry
-// cookies but do not reliably carry Authorization headers.
+// Browsers get a self-contained login page instead of the native Basic
+// dialog; API clients keep the classic 401 + WWW-Authenticate contract.
+// Login activity (success, failure, logout, rejected requests) is written
+// to a structured JSONL audit file.
 //
 // Fail-open by design: with no users or no secret configured the guard
 // passes everything through, so a broken config can never lock the panel
@@ -24,17 +26,56 @@
 //           secret: '<32+ chars of random text, keep private>'
 //           cookieName: dsh_panel
 //           cookieTtlSeconds: 2592000
+//           auditLogPath: '/root/.dsh/panel-auth-audit.jsonl'   # optional
+//           loginPath: '/panel-auth/login'                        # optional
+//           logoutPath: '/panel-auth/logout'                      # optional
 //           users:
 //             - username: admin
 //               passwordHash: '<output of: node panel-auth/hash.js admin <password>>'
+import { appendFileSync, renameSync, statSync } from 'node:fs'
+import { homedir } from 'node:os'
+import { resolve } from 'node:path'
 import { verifyPassword, signSession, verifySession } from './crypto.js'
 
 const DEFAULTS = {
   realm: 'DSH Panel',
   cookieName: 'dsh_panel',
   cookieTtlSeconds: 60 * 60 * 24 * 30, // 30 days
+  loginPath: '/panel-auth/login',
+  logoutPath: '/panel-auth/logout',
+  auditMaxBytes: 5 * 1024 * 1024,
 }
 
+// ── audit log ────────────────────────────────────────────────────────────────
+
+export function createAuditWriter(filePath) {
+  function rotateIfNeeded() {
+    try {
+      if (statSync(filePath).size > DEFAULTS.auditMaxBytes) renameSync(filePath, `${filePath}.1`)
+    } catch {
+      /* first write or concurrent rotation — ignore */
+    }
+  }
+  return {
+    path: filePath,
+    write(entry) {
+      try {
+        appendFileSync(filePath, JSON.stringify({ ts: new Date().toISOString(), ...entry }) + '\n', { mode: 0o600 })
+        rotateIfNeeded()
+      } catch (error) {
+        console.error('[panel-auth] audit write failed:', error && error.message ? error.message : error)
+      }
+    },
+  }
+}
+
+export function defaultAuditPath() {
+  const home = process.env.DSH_HOME || resolve(homedir(), '.dsh')
+  return resolve(home, 'panel-auth-audit.jsonl')
+}
+
+// ── guard ────────────────────────────────────────────────────────────────────
+
 export function createGuard({ getConfig, logger }) {
   function current() {
     const cfg = getConfig() ?? {}
@@ -103,6 +144,14 @@ export function createGuard({ getConfig, logger }) {
     return null
   }
 
+  function checkCredentials(username, password) {
+    const cfg = current()
+    if (!cfg.enabled) return false
+    const found = cfg.users.find((u) => u.username === username)
+    if (found === undefined) return false
+    return verifyPassword(password, found.passwordHash)
+  }
+
   function issueCookieValue(username) {
     const cfg = current()
     return signSession(cfg.secret, username, Math.floor(Date.now() / 1000) + cfg.ttl)
@@ -117,29 +166,359 @@ export function createGuard({ getConfig, logger }) {
     return current().realm
   }
 
-  return { authenticate, issueCookieValue, cookieSettings, realm }
+  return { authenticate, checkCredentials, issueCookieValue, cookieSettings, realm }
 }
 
+// ── login page ───────────────────────────────────────────────────────────────
+
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+export function renderLoginPage({ realm, next = '/', error = '', loginPath = DEFAULTS.loginPath }) {
+  const safeNext = escapeHtml(next)
+  const safeError = escapeHtml(error)
+  const safeRealm = escapeHtml(realm)
+  const safeAction = escapeHtml(loginPath)
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; form-action 'self'; base-uri 'none'">
+<meta name="referrer" content="no-referrer">
+<title>${safeRealm} · 登录</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%236d8dff'/%3E%3Cpath d='M16 8a5 5 0 0 0-5 5v3h-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-2v-3a5 5 0 0 0-5-5Zm-3 8v-3a3 3 0 1 1 6 0v3h-6Z' fill='white'/%3E%3C/svg%3E">
+<style>
+  :root {
+    --accent: #6d8dff;
+    --accent-2: #8b5cf6;
+    --danger: #f87171;
+    --text: #e8eaf2;
+    --text-dim: #9aa1b5;
+    --field-bg: rgba(255, 255, 255, 0.06);
+    --field-border: rgba(255, 255, 255, 0.12);
+    --card-bg: rgba(22, 26, 40, 0.82);
+    --card-border: rgba(255, 255, 255, 0.1);
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
+    color: var(--text);
+    display: grid;
+    place-items: center;
+    min-height: 100%;
+    padding: 24px;
+    background:
+      radial-gradient(1200px 600px at 15% -10%, rgba(109, 141, 255, 0.28), transparent 60%),
+      radial-gradient(1000px 700px at 110% 15%, rgba(139, 92, 246, 0.22), transparent 55%),
+      radial-gradient(900px 900px at 50% 120%, rgba(45, 55, 90, 0.9), transparent 60%),
+      #0d1020;
+    background-attachment: fixed;
+    animation: bg-breathe 14s ease-in-out infinite alternate;
+  }
+  @keyframes bg-breathe {
+    from { filter: saturate(1); }
+    to { filter: saturate(1.25); }
+  }
+  .card {
+    width: min(400px, 100%);
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 18px;
+    padding: 40px 36px 30px;
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(109, 141, 255, 0.06) inset;
+    animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  @keyframes card-in {
+    from { opacity: 0; transform: translateY(14px) scale(0.985); }
+    to { opacity: 1; transform: none; }
+  }
+  .logo {
+    width: 60px; height: 60px;
+    margin: 0 auto 18px;
+    border-radius: 17px;
+    display: grid; place-items: center;
+    background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    box-shadow: 0 10px 26px rgba(109, 141, 255, 0.35);
+  }
+  .logo svg { width: 30px; height: 30px; }
+  h1 {
+    font-size: 24px; font-weight: 650; text-align: center; letter-spacing: 0.02em;
+  }
+  .subtitle {
+    text-align: center; color: var(--text-dim);
+    font-size: 13.5px; margin: 8px 0 26px;
+  }
+  .error {
+    display: flex; align-items: center; gap: 8px;
+    background: rgba(248, 113, 113, 0.1);
+    border: 1px solid rgba(248, 113, 113, 0.35);
+    color: var(--danger);
+    border-radius: 10px;
+    padding: 10px 12px;
+    font-size: 13.5px;
+    margin-bottom: 18px;
+    animation: card-in 0.3s ease both;
+  }
+  .error svg { flex: none; width: 16px; height: 16px; }
+  label {
+    display: block;
+    font-size: 12px; color: var(--text-dim);
+    letter-spacing: 0.06em; text-transform: uppercase;
+    margin: 0 0 6px 2px;
+  }
+  .field { margin-bottom: 16px; }
+  input {
+    width: 100%;
+    background: var(--field-bg);
+    border: 1px solid var(--field-border);
+    border-radius: 11px;
+    color: var(--text);
+    font-size: 15px;
+    padding: 12px 14px;
+    outline: none;
+    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+  }
+  input::placeholder { color: #5a6178; }
+  input:hover { border-color: rgba(255, 255, 255, 0.22); }
+  input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(109, 141, 255, 0.22);
+    background: rgba(255, 255, 255, 0.08);
+  }
+  button {
+    width: 100%;
+    margin-top: 8px;
+    padding: 12px 0;
+    font-size: 15px; font-weight: 600; color: #fff;
+    border: none; border-radius: 11px; cursor: pointer;
+    background: linear-gradient(135deg, var(--accent), var(--accent-2));
+    box-shadow: 0 8px 22px rgba(109, 141, 255, 0.32);
+    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+  }
+  button:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 26px rgba(109, 141, 255, 0.4); }
+  button:active { transform: translateY(0); filter: brightness(0.96); }
+  .foot {
+    margin-top: 22px; text-align: center;
+    font-size: 12px; color: #565d73; line-height: 1.7;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; transition: none !important; }
+  }
+</style>
+</head>
+<body>
+  <form class="card" method="post" action="${safeAction}" autocomplete="off">
+    <div class="logo" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none">
+        <rect x="4" y="10" width="16" height="10" rx="2.5" stroke="white" stroke-width="1.8"/>
+        <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+        <circle cx="12" cy="15" r="1.6" fill="white"/>
+      </svg>
+    </div>
+    <h1>${safeRealm}</h1>
+    <p class="subtitle">登录以继续 · Sign in to continue</p>
+    ${safeError ? `<div class="error" role="alert">
+      <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.5v5.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="16.6" r="1.2" fill="currentColor"/></svg>
+      <span>${safeError}</span>
+    </div>` : ''}
+    <div class="field">
+      <label for="username">用户名</label>
+      <input id="username" name="username" type="text" placeholder="admin" required autofocus>
+    </div>
+    <div class="field">
+      <label for="password">密码</label>
+      <input id="password" name="password" type="password" placeholder="••••••••" required>
+    </div>
+    <input type="hidden" name="next" value="${safeNext}">
+    <button type="submit">登 录</button>
+    <p class="foot">登录活动将被记录<br>Protected by panel-auth</p>
+  </form>
+</body>
+</html>`
+}
+
+// ── request helpers ──────────────────────────────────────────────────────────
+
+function clientIp(req) {
+  const remote = req.socket?.remoteAddress ?? ''
+  const loopback = remote === '127.0.0.1' || remote === '::1' || remote === '::ffff:127.0.0.1'
+  if (loopback) {
+    const forwarded = req.headers['x-forwarded-for']
+    if (typeof forwarded === 'string' && forwarded.length > 0) {
+      const first = forwarded.split(',')[0].trim()
+      if (first.length > 0) return first
+    }
+  }
+  return remote
+}
+
+function acceptsHtml(req) {
+  const accept = req.headers.accept
+  return typeof accept === 'string' && accept.includes('text/html')
+}
+
+function sanitizeNext(next) {
+  if (typeof next !== 'string' || next.length === 0 || next.length > 2048) return '/'
+  if (!next.startsWith('/') || next.startsWith('//')) return '/'
+  return next
+}
+
+function readBody(req, maxBytes) {
+  return new Promise((resolveBody) => {
+    let size = 0
+    const chunks = []
+    let done = false
+    const finish = () => {
+      if (done) return
+      done = true
+      resolveBody(Buffer.concat(chunks).toString('utf8'))
+    }
+    req.on('data', (chunk) => {
+      size += chunk.length
+      if (size > maxBytes) {
+        done = true
+        resolveBody(null)
+        req.destroy()
+        return
+      }
+      chunks.push(chunk)
+    })
+    req.on('end', finish)
+    req.on('error', finish)
+  })
+}
+
+// ── server wrap ──────────────────────────────────────────────────────────────
+
 /**
  * Atomically wrap the panel's http.Server: replace its 'request' and
  * 'upgrade' listeners with an auth gate that forwards to the originals.
  * Returns a disposer that restores the exact original listeners.
  */
-export function installGuard(server, guard, { logger }) {
+export function installGuard(server, guard, { audit, loginPath, logoutPath }) {
   const origRequest = server.listeners('request')
   const origUpgrade = server.listeners('upgrade')
 
   const challenge = (res) => {
     res.statusCode = 401
     res.setHeader('WWW-Authenticate', `Basic realm="${guard.realm()}", charset="UTF-8"`)
+    res.setHeader('Content-Type', 'application/json; charset=utf-8')
+    res.setHeader('Cache-Control', 'no-store')
+    res.setHeader('Content-Length', String(Buffer.byteLength('{"error":"authentication required"}')))
+    res.end('{"error":"authentication required"}')
+  }
+
+  const serveLogin = (req, res, error, status = 200, next = '/') => {
+    const page = renderLoginPage({ realm: guard.realm(), next: sanitizeNext(next), error, loginPath })
+    res.statusCode = status
+    res.setHeader('Content-Type', 'text/html; charset=utf-8')
+    res.setHeader('Cache-Control', 'no-store')
+    res.setHeader('Content-Length', String(Buffer.byteLength(page)))
+    res.end(page)
+  }
+
+  const handleLogin = async (req, res) => {
+    let queryNext = '/'
+    try {
+      queryNext = new URL(req.url ?? '/', 'http://x').searchParams.get('next') ?? '/'
+    } catch {
+      /* malformed URL */
+    }
+    if (req.method !== 'POST') {
+      serveLogin(req, res, '', 200, queryNext)
+      return
+    }
+    // Cross-origin form posts are rejected: the login form must come from this host.
+    const origin = req.headers.origin
+    const host = req.headers.host
+    if (typeof origin === 'string' && typeof host === 'string') {
+      try {
+        if (new URL(origin).host !== host) {
+          audit.write({ event: 'login-fail', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', reason: 'cross-origin' })
+          serveLogin(req, res, '非法请求来源', 403, queryNext)
+          return
+        }
+      } catch {
+        audit.write({ event: 'login-fail', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', reason: 'cross-origin' })
+        serveLogin(req, res, '非法请求来源', 403, queryNext)
+        return
+      }
+    }
+    const body = await readBody(req, 8192)
+    if (body === null) {
+      audit.write({ event: 'login-fail', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', reason: 'body-too-large' })
+      serveLogin(req, res, '请求过大', 413, queryNext)
+      return
+    }
+    const fields = new URLSearchParams(body)
+    const username = fields.get('username') ?? ''
+    const password = fields.get('password') ?? ''
+    const next = sanitizeNext(fields.get('next') ?? queryNext)
+    const ip = clientIp(req)
+    const ua = req.headers['user-agent'] ?? ''
+    if (!username || !password) {
+      audit.write({ event: 'login-fail', username, ip, ua, reason: 'missing-fields' })
+      serveLogin(req, res, '请输入用户名和密码', 403, next)
+      return
+    }
+    if (guard.checkCredentials(username, password)) {
+      const value = guard.issueCookieValue(username)
+      const settings = guard.cookieSettings()
+      audit.write({ event: 'login-ok', username, ip, ua })
+      res.statusCode = 303
+      res.setHeader('Set-Cookie', `${settings.name}=${value}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${settings.ttl}`)
+      res.setHeader('Location', next)
+      res.setHeader('Content-Length', '0')
+      res.end()
+      return
+    }
+    audit.write({ event: 'login-fail', username, ip, ua, reason: 'bad-credentials' })
+    serveLogin(req, res, '用户名或密码错误', 403, next)
+  }
+
+  const handleLogout = (req, res) => {
+    const settings = guard.cookieSettings()
+    audit.write({ event: 'logout', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '' })
+    res.statusCode = 303
+    res.setHeader('Set-Cookie', `${settings.name}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`)
+    res.setHeader('Location', loginPath)
     res.setHeader('Content-Length', '0')
     res.end()
   }
 
   const onRequest = (req, res) => {
+    let pathname = '/'
+    try {
+      pathname = new URL(req.url ?? '/', 'http://x').pathname
+    } catch {
+      /* malformed URL → treat as anonymous */
+    }
+    if (pathname === loginPath) {
+      handleLogin(req, res)
+      return
+    }
+    if (pathname === logoutPath) {
+      handleLogout(req, res)
+      return
+    }
     const who = guard.authenticate(req)
     if (who === null) {
-      logger?.warn?.(`[panel-auth] rejected anonymous request ${req.method ?? '?'} ${req.url ?? ''} from ${req.socket?.remoteAddress ?? '?'}`)
+      if (acceptsHtml(req)) {
+        audit.write({ event: 'challenge', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', path: pathname })
+        serveLogin(req, res, '', 200, req.url ?? '/')
+        return
+      }
+      audit.write({ event: 'reject', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', method: req.method ?? '', path: pathname })
       challenge(res)
       return
     }
@@ -154,9 +533,20 @@ export function installGuard(server, guard, { logger }) {
   }
 
   const onUpgrade = (req, socket, head) => {
+    let pathname = '/'
+    try {
+      pathname = new URL(req.url ?? '/', 'http://x').pathname
+    } catch {
+      /* malformed URL → reject */
+    }
+    if (pathname === loginPath || pathname === logoutPath) {
+      socket.end('HTTP/1.1 405 Method Not Allowed\r\nConnection: close\r\nContent-Length: 0\r\n\r\n')
+      socket.destroy()
+      return
+    }
     const who = guard.authenticate(req)
     if (who === null) {
-      logger?.warn?.(`[panel-auth] rejected anonymous upgrade ${req.url ?? ''} from ${req.socket?.remoteAddress ?? '?'}`)
+      audit.write({ event: 'reject', username: '', ip: clientIp(req), ua: req.headers['user-agent'] ?? '', method: 'UPGRADE', path: pathname })
       socket.end('HTTP/1.1 401 Unauthorized\r\nConnection: close\r\nContent-Length: 0\r\n\r\n')
       socket.destroy()
       return
@@ -177,9 +567,16 @@ export function installGuard(server, guard, { logger }) {
   }
 }
 
+// ── plugin ───────────────────────────────────────────────────────────────────
+
 export default function panelAuth(ctx, config) {
   const cfg = config ?? {}
   const guard = createGuard({ getConfig: () => cfg, logger: null })
+  const auditPath = typeof cfg.auditLogPath === 'string' && cfg.auditLogPath.length > 0 ? cfg.auditLogPath : defaultAuditPath()
+  const audit = createAuditWriter(auditPath)
+  const loginPath = typeof cfg.loginPath === 'string' && cfg.loginPath.length > 0 ? cfg.loginPath : DEFAULTS.loginPath
+  const logoutPath = typeof cfg.logoutPath === 'string' && cfg.logoutPath.length > 0 ? cfg.logoutPath : DEFAULTS.logoutPath
+  console.log('[panel-auth] audit log: ' + auditPath)
   let disposer
   let timer
   let stopped = false
@@ -191,7 +588,7 @@ export default function panelAuth(ctx, config) {
   const tryWrap = () => {
     const server = ctx.webServer.server
     if (server === undefined) return false
-    disposer = installGuard(server, guard, { logger: null })
+    disposer = installGuard(server, guard, { audit, loginPath, logoutPath })
     console.log('[panel-auth] guard installed: panel now requires a password')
     return true
   }