@fonlan/dsh-web-auth 0.1.0

package/lib/handlers.js

@@ -0,0 +1,372 @@
+import { COOKIE_NAME, MIN_PASSWORD_LENGTH, SESSION_TTL_SECONDS, hashPassword, needsSessionRefresh, sanitizeNext, signSession, verifyPassword, verifySession } from "./auth-core.js";
+import { renderLoginPage } from "./login-page.js";
+import { ALLOWED_LISTEN_HOSTS, isAllowedListenHost } from "./profile-patch.js";
+/** Maximum accepted request body for the login form / API. */
+export const MAX_BODY_BYTES = 16 * 1024;
+// ── small request helpers ───────────────────────────────────────────────────
+export function pathnameOf(req) {
+    return new URL(req.url ?? '/', 'http://x').pathname;
+}
+/** Read one cookie by name from the Cookie header. */
+export function cookieValue(header, name) {
+    if (header === undefined)
+        return undefined;
+    for (const part of header.split(';')) {
+        const eq = part.indexOf('=');
+        if (eq <= 0)
+            continue;
+        if (part.slice(0, eq).trim() === name)
+            return part.slice(eq + 1).trim();
+    }
+    return undefined;
+}
+/**
+ * The client address for rate limiting. X-Forwarded-For is honored ONLY when
+ * the direct peer is loopback (the reverse proxy sits on the same host), so
+ * a remote attacker hitting dsh directly cannot forge a fresh identity.
+ */
+export function clientIp(req) {
+    const direct = req.socket.remoteAddress ?? 'unknown';
+    const loopback = direct === '127.0.0.1' || direct === '::1' || direct === '::ffff:127.0.0.1';
+    if (loopback) {
+        const xff = req.headers['x-forwarded-for'];
+        if (typeof xff === 'string') {
+            const first = xff.split(',')[0]?.trim();
+            if (first !== undefined && first.length > 0)
+                return first;
+        }
+    }
+    return direct;
+}
+/** Whether the browser's connection is HTTPS (reverse-proxied or direct). */
+export function isSecureRequest(req) {
+    return String(req.headers['x-forwarded-proto']).split(',')[0]?.trim() === 'https';
+}
+/** Collect the request body; undefined when it exceeds the cap (413). */
+export async function readBody(req, maxBytes = MAX_BODY_BYTES) {
+    const chunks = [];
+    let total = 0;
+    for await (const chunk of req) {
+        total += chunk.length;
+        if (total > maxBytes)
+            return undefined;
+        chunks.push(chunk);
+    }
+    return Buffer.concat(chunks).toString('utf8');
+}
+/** Parse application/x-www-form-urlencoded. */
+export function parseUrlEncoded(body) {
+    const out = {};
+    for (const pair of body.split('&')) {
+        if (pair.length === 0)
+            continue;
+        const eq = pair.indexOf('=');
+        const key = eq === -1 ? pair : pair.slice(0, eq);
+        const value = eq === -1 ? '' : pair.slice(eq + 1);
+        try {
+            out[decodeURIComponent(key.replace(/\+/g, ' '))] = decodeURIComponent(value.replace(/\+/g, ' '));
+        }
+        catch {
+            /* malformed pair — ignore */
+        }
+    }
+    return out;
+}
+function writeJson(res, status, body) {
+    const text = JSON.stringify(body);
+    res.writeHead(status, {
+        'content-type': 'application/json; charset=utf-8',
+        'cache-control': 'no-store'
+    });
+    res.end(text);
+}
+function redirect(res, location) {
+    res.writeHead(302, { location, 'cache-control': 'no-store' });
+    res.end();
+}
+/** Set (or refresh) the session cookie on a response. */
+export function setSessionCookie(res, secret, now, secure) {
+    const exp = Math.floor(now / 1000) + SESSION_TTL_SECONDS;
+    const value = signSession(secret, exp);
+    const parts = [
+        COOKIE_NAME + '=' + value,
+        'Path=/',
+        'HttpOnly',
+        'SameSite=Lax',
+        'Max-Age=' + String(SESSION_TTL_SECONDS)
+    ];
+    if (secure)
+        parts.push('Secure');
+    res.setHeader('set-cookie', parts.join('; '));
+}
+function clearCookie(res, secure) {
+    const parts = [COOKIE_NAME + '=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0'];
+    if (secure)
+        parts.push('Secure');
+    res.setHeader('set-cookie', parts.join('; '));
+}
+/**
+ * Build the gate used to wrap the HTTP server listeners. Whitelisted paths
+ * (login page/form, logout) pass through; everything else requires a valid
+ * session cookie. Page requests (GET/HEAD) are redirected to /login with the
+ * original URL as `next`; other methods get a plain 401 JSON. WebSocket
+ * upgrades without a session are rejected at the handshake.
+ */
+export function createGate(env) {
+    const now = env.now ?? Date.now;
+    const whitelisted = (method, pathname) => {
+        if (pathname === '/login')
+            return method === 'GET' || method === 'HEAD' || method === 'POST';
+        if (pathname === '/logout')
+            return method === 'GET' || method === 'POST';
+        return false;
+    };
+    const sessionOf = (req) => verifySession(cookieValue(req.headers.cookie, COOKIE_NAME), env.state.secret, now());
+    /**
+     * Present AUTHENTICATED traffic as loopback to every downstream
+     * browser-trust fence, without tracking plugin path prefixes. The /api
+     * gateway (dsh-client-connection) and any plugin surface that mirrors its
+     * fence (dsh-better-sidebar's /sidebar/* today, whatever prefix the next
+     * plugin picks) decide admission from the Host/Origin pair: loopback or
+     * the deployment's --trusted-host list. Rather than enumerating prefixes
+     * here, ANY request that passed the session check (whitelisted /login,
+     * /logout never reach this point) is presented as loopback: SameSite=Lax
+     * makes a valid session cookie same-origin by construction, so this is
+     * exactly the trust decision the /api rewrite already made, and the gate
+     * still refuses unauthenticated traffic before any fence is consulted
+     * (401/302). No dsh surface generates content or URLs from the request
+     * Host, and the browser builds its own URLs from window.location, so the
+     * rewrite is invisible to real behavior. The sec-fetch-site marker is
+     * deliberately NOT rewritten: cross-site requests stay refused by the
+     * fences even with a session.
+     */
+    const rewriteAsLoopback = (req) => {
+        const authority = env.loopbackAuthority;
+        if (authority === undefined)
+            return;
+        req.headers.host = authority;
+        if (req.headers.origin !== undefined) {
+            req.headers.origin = 'http://' + authority;
+        }
+    };
+    return {
+        allow(req, res) {
+            const pathname = pathnameOf(req);
+            const method = req.method ?? 'GET';
+            if (whitelisted(method, pathname))
+                return true;
+            const session = sessionOf(req);
+            if (session !== undefined) {
+                if (needsSessionRefresh(session, now())) {
+                    setSessionCookie(res, env.state.secret, now(), isSecureRequest(req));
+                }
+                rewriteAsLoopback(req);
+                return true;
+            }
+            if (method === 'GET' || method === 'HEAD') {
+                const next = sanitizeNext(req.url) ?? '/';
+                redirect(res, '/login?next=' + encodeURIComponent(next));
+            }
+            else {
+                writeJson(res, 401, { error: 'unauthorized' });
+            }
+            return false;
+        },
+        allowUpgrade(req) {
+            if (sessionOf(req) === undefined)
+                return false;
+            rewriteAsLoopback(req);
+            return true;
+        }
+    };
+}
+// ── /login GET — the page ───────────────────────────────────────────────────
+export function handleLoginPage(req, res, env) {
+    const now = env.now ?? Date.now;
+    const params = new URL(req.url ?? '/login', 'http://x').searchParams;
+    const next = sanitizeNext(params.get('next')) ?? undefined;
+    const error = params.get('error');
+    // Already authenticated? Send them where they were going.
+    if (verifySession(cookieValue(req.headers.cookie, COOKIE_NAME), env.state.secret, now()) !== undefined) {
+        redirect(res, next ?? '/');
+        return;
+    }
+    const setup = env.state.readHash() === undefined;
+    const errorText = error === 'rate-limited'
+        ? '尝试过于频繁，请稍后再试。'
+        : error === 'setup-failed'
+            ? '设置失败：请确认两次输入一致且不少于 8 位。'
+            : error === 'wrong-password'
+                ? '密码错误。'
+                : undefined;
+    const html = renderLoginPage({ setup, next, error: errorText, loggedOut: params.get('loggedOut') === '1' });
+    res.writeHead(200, {
+        'content-type': 'text/html; charset=utf-8',
+        'cache-control': 'no-store',
+        'content-security-policy': "default-src 'none'; style-src 'unsafe-inline'; form-action 'self'; base-uri 'none'",
+        'x-content-type-options': 'nosniff',
+        'referrer-policy': 'no-referrer'
+    });
+    res.end(html);
+}
+// ── /login POST — form processing ───────────────────────────────────────────
+export async function handleLoginPost(req, res, env) {
+    const now = env.now ?? Date.now;
+    const secure = isSecureRequest(req);
+    const ip = clientIp(req);
+    const key = 'login:' + ip;
+    const blocked = env.limiter.check(key, now());
+    if (!blocked.allowed) {
+        redirect(res, '/login?error=rate-limited&next=' + encodeURIComponent(sanitizeNext(queryNext(req)) ?? ''));
+        return;
+    }
+    const body = await readBody(req);
+    if (body === undefined) {
+        writeJson(res, 413, { error: 'payload-too-large' });
+        return;
+    }
+    const fields = parseUrlEncoded(body);
+    const password = fields.password ?? '';
+    const next = sanitizeNext(fields.next) ?? '/';
+    const hash = env.state.readHash();
+    if (hash === undefined) {
+        // First-password setup (bootstrap): anyone may claim it until set —
+        // the boot log warns about this window.
+        const confirm = fields.confirm ?? '';
+        if (password.length < MIN_PASSWORD_LENGTH || password !== confirm) {
+            env.limiter.recordFailure(key, now());
+            redirect(res, '/login?error=setup-failed&next=' + encodeURIComponent(next));
+            return;
+        }
+        env.state.writeHash(hashPassword(password));
+        const secret = env.state.rotateSecret();
+        env.limiter.reset(key);
+        setSessionCookie(res, secret, now(), secure);
+        redirect(res, next);
+        return;
+    }
+    if (!verifyPassword(password, hash)) {
+        env.limiter.recordFailure(key, now());
+        redirect(res, '/login?error=wrong-password&next=' + encodeURIComponent(next));
+        return;
+    }
+    env.limiter.reset(key);
+    setSessionCookie(res, env.state.secret, now(), secure);
+    redirect(res, next);
+}
+function queryNext(req) {
+    try {
+        return new URL(req.url ?? '/login', 'http://x').searchParams.get('next') ?? undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+// ── /logout ─────────────────────────────────────────────────────────────────
+export function handleLogout(req, res, env) {
+    clearCookie(res, isSecureRequest(req));
+    redirect(res, '/login?loggedOut=1');
+}
+// ── GET /api/web-auth/status — settings-card state ─────────────────────────
+export function handleStatus(req, res, env) {
+    const body = { configured: env.state.readHash() !== undefined };
+    const current = env.listen?.current();
+    if (current !== undefined)
+        body.host = current;
+    writeJson(res, 200, body);
+}
+export async function handleChangePassword(req, res, env) {
+    const now = env.now ?? Date.now;
+    const ip = clientIp(req);
+    const key = 'change:' + ip;
+    const blocked = env.limiter.check(key, now());
+    if (!blocked.allowed) {
+        writeJson(res, 429, { error: 'rate-limited', retryAfterSeconds: blocked.retryAfterSeconds });
+        return;
+    }
+    const body = await readBody(req);
+    if (body === undefined) {
+        writeJson(res, 413, { error: 'payload-too-large' });
+        return;
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(body);
+    }
+    catch {
+        writeJson(res, 400, { error: 'invalid-json' });
+        return;
+    }
+    const oldPassword = parsed.oldPassword ?? '';
+    const newPassword = parsed.newPassword ?? '';
+    const hash = env.state.readHash();
+    if (hash === undefined) {
+        writeJson(res, 409, { error: 'not-configured' });
+        return;
+    }
+    if (!verifyPassword(oldPassword, hash)) {
+        env.limiter.recordFailure(key, now());
+        writeJson(res, 401, { error: 'wrong-password' });
+        return;
+    }
+    if (newPassword.length < MIN_PASSWORD_LENGTH) {
+        writeJson(res, 400, { error: 'password-too-short', minLength: MIN_PASSWORD_LENGTH });
+        return;
+    }
+    env.state.writeHash(hashPassword(newPassword));
+    env.state.rotateSecret();
+    env.limiter.reset(key);
+    writeJson(res, 200, { ok: true, sessionsInvalidated: true });
+}
+/**
+ * Switch the web server's bind host between '127.0.0.1' and '0.0.0.0'.
+ *
+ * The change is applied to the owning patch layer (profile or home
+ * cordis.patch.yml); HMR then reloads the webserver row, which closes and
+ * rebinds the listener. The response is written BEFORE the patch file is
+ * committed — the reload tears down every connection, including this one —
+ * so the client gets its confirmation first and the write lands a beat
+ * later (see {@link ListenController}).
+ */
+export async function handleListenChange(req, res, env) {
+    const body = await readBody(req);
+    if (body === undefined) {
+        writeJson(res, 413, { error: 'payload-too-large' });
+        return;
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(body);
+    }
+    catch {
+        writeJson(res, 400, { error: 'invalid-json' });
+        return;
+    }
+    if (!isAllowedListenHost(parsed.host)) {
+        writeJson(res, 400, { error: 'invalid-host', allowed: [...ALLOWED_LISTEN_HOSTS] });
+        return;
+    }
+    const listen = env.listen;
+    if (listen === undefined) {
+        writeJson(res, 501, { error: 'unsupported' });
+        return;
+    }
+    const host = parsed.host;
+    if (listen.current() === host) {
+        writeJson(res, 200, { ok: true, host, unchanged: true });
+        return;
+    }
+    let next;
+    try {
+        next = listen.prepare(host);
+    }
+    catch (error) {
+        writeJson(res, 500, {
+            error: 'patch-prepare-failed',
+            message: error instanceof Error ? error.message : String(error)
+        });
+        return;
+    }
+    writeJson(res, 200, { ok: true, host, applying: true });
+    listen.commit(next);
+}

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+import type { PluginContext } from './context-types.ts';
+/** Stable Cordis plugin name. */
+export declare const name = "web-auth";
+/** Services required before the gate can be installed. */
+export declare const inject: string[];
+/**
+ * Mount the auth gate and its routes.
+ * @param ctx - plugin context carrying the webServer service (listening).
+ */
+export declare function apply(ctx: PluginContext): void;

package/lib/index.js

@@ -0,0 +1,165 @@
+/**
+ * dsh-web-auth — password gate for the dsh web surface.
+ *
+ * Host half: wraps the webserver's HTTP/upgrade listeners so every request
+ * (routes, static fallback, WebSocket upgrades) must carry a valid session
+ * cookie, serves the /login page (including first-password setup), /logout,
+ * and the JSON change-password API used by the settings card (client half).
+ *
+ * State lives under $DSH_HOME/web-auth/ (password.hash, secret) — see
+ * state.ts. Until a password is configured the gate is OPEN and a boot
+ * warning is logged; the login page then offers first-password setup.
+ *
+ * Install (bundle layer):  dsh plugin --profile web add ./dsh-web-auth
+ */
+import { installGate } from "./gate.js";
+import { RateLimiter } from "./auth-core.js";
+import { readSecret, readPasswordHash, resolveDshHome, rotateSecret, writePasswordHash } from "./state.js";
+import { createGate, handleChangePassword, handleListenChange, handleLoginPage, handleLoginPost, handleLogout, handleStatus } from "./handlers.js";
+import { LISTEN_APPLY_DELAY_MS, prepareWebserverHostPatch, resolveListenPatchPath, writeWebserverHostPatch } from "./profile-patch.js";
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+/** Stable Cordis plugin name. */
+export const name = 'web-auth';
+/** Services required before the gate can be installed. */
+export const inject = ['webServer'];
+/**
+ * Mount the auth gate and its routes.
+ * @param ctx - plugin context carrying the webServer service (listening).
+ */
+export function apply(ctx) {
+    const dshHome = resolveDshHome();
+    const state = {
+        secret: readSecret(dshHome),
+        readHash: () => readPasswordHash(dshHome),
+        writeHash: (hash) => writePasswordHash(dshHome, hash),
+        rotateSecret: () => {
+            const next = rotateSecret(dshHome);
+            state.secret = next;
+            return next;
+        }
+    };
+    const env = {
+        state,
+        limiter: new RateLimiter(),
+        // Authenticated /api requests are presented to the gateway's trust fence
+        // as loopback, so the privileged-method pinning (settings.*, credentials.*,
+        // discoverModels, …) passes through the reverse proxy. See handlers.ts.
+        loopbackAuthority: '127.0.0.1:' + String(ctx.webServer.port),
+        // Live listen-host switching: the webserver's bind host is composition
+        // config owned by the profile patch layer (or the home patch when it
+        // spells the webserver row), so the change is written there and the HMR
+        // watcher tails it — the webserver row reloads and rebinds. ctx.baseUrl
+        // is the profile directory the boot anchored on. commit() is deferred
+        // after the HTTP response so the reload (which destroys every
+        // connection, including the confirmation's) cannot tear the response
+        // away; failures are logged, never thrown — the client was confirmed.
+        listen: buildListenController(ctx)
+    };
+    if (state.readHash() === undefined) {
+        // console.error, not ctx.logger.warn: the cordis default logger level
+        // suppresses warn (level 2) unless the deployment raises it, and this
+        // warning matters — the first-password window is open to anyone.
+        console.error('[dsh-web-auth] WARNING: no password configured — web access is currently OPEN. ' +
+            'Anyone reaching this server can claim a password from the /login page. ' +
+            'Set one before exposing the service publicly.');
+    }
+    // ── the gate: wrap the server listeners once the socket is bound ──────────
+    const server = ctx.webServer.server;
+    const gate = createGate(env);
+    let disposeGate;
+    const install = () => {
+        disposeGate = installGate(server, gate);
+    };
+    if (server.listening)
+        install();
+    else
+        server.once('listening', install);
+    ctx.effect(() => {
+        return () => disposeGate?.();
+    }, 'web-auth: auth gate');
+    // ── routes (exact table; /api/web-auth/password wins over the /api prefix) ─
+    const routes = [
+        {
+            path: '/login',
+            handler: (req, res) => {
+                const method = req.method ?? 'GET';
+                if (method === 'POST') {
+                    void handleLoginPost(req, res, env);
+                    return;
+                }
+                if (method === 'GET' || method === 'HEAD') {
+                    handleLoginPage(req, res, env);
+                    return;
+                }
+                res.writeHead(405, { allow: 'GET, HEAD, POST' });
+                res.end();
+            }
+        },
+        {
+            path: '/logout',
+            handler: (req, res) => {
+                void handleLogout(req, res, env);
+            }
+        },
+        {
+            path: '/api/web-auth/password',
+            handler: (req, res) => {
+                void handleChangePassword(req, res, env);
+            }
+        },
+        {
+            path: '/api/web-auth/status',
+            handler: (req, res) => {
+                handleStatus(req, res, env);
+            }
+        },
+        {
+            path: '/api/web-auth/listen',
+            handler: (req, res) => {
+                void handleListenChange(req, res, env);
+            }
+        }
+    ];
+    for (const route of routes) {
+        ctx.effect(() => ctx.webServer.register({ kind: 'exact', path: route.path, handler: route.handler }), `web-auth: ${route.path} route`);
+    }
+}
+/**
+ * Bind the live listen-host controller to this deployment's patch layer.
+ * Resolves which layer owns the webserver row (home outranks the profile),
+ * then prepares/commits the host override there. Undefined baseUrl (an
+ * unusual embedding) yields a controller whose prepare refuses loudly —
+ * callers surface that as 501/500.
+ */
+function buildListenController(ctx) {
+    const resolvePatch = () => {
+        const profilePatch = join(fileURLToPath(ctx.baseUrl), 'cordis.patch.yml');
+        const homePatch = join(resolveDshHome(), 'cordis.patch.yml');
+        return resolveListenPatchPath(profilePatch, homePatch);
+    };
+    return {
+        current: () => ctx.webServer.host,
+        prepare: (host) => prepareWebserverHostPatch(resolvePatch(), host),
+        commit: (content) => {
+            // Everything below runs after the HTTP response was written; failures
+            // are logged, never thrown (the client was already confirmed).
+            let patchPath;
+            try {
+                patchPath = resolvePatch();
+            }
+            catch (error) {
+                console.error('[dsh-web-auth] listen patch path unresolvable:', error);
+                return;
+            }
+            setTimeout(() => {
+                try {
+                    writeWebserverHostPatch(patchPath, content);
+                }
+                catch (error) {
+                    console.error('[dsh-web-auth] failed to apply listen address:', error);
+                }
+            }, LISTEN_APPLY_DELAY_MS);
+        }
+    };
+}

package/lib/login-page.d.ts

@@ -0,0 +1,22 @@
+/**
+ * dsh-web-auth — server-rendered login / first-setup page.
+ *
+ * A single self-contained HTML document (inline CSS only, no external
+ * assets, dark theme matching the dsh shell). Two modes:
+ *   setup  — no password has been configured yet: the form sets the first
+ *            password (this is the bootstrap path — see README for the
+ *            window this opens on public deployments).
+ *   login  — a password exists: the form signs a session cookie.
+ */
+export interface LoginPageState {
+    setup: boolean;
+    error?: string;
+    next?: string;
+    /** True right after a successful logout. */
+    loggedOut?: boolean;
+}
+/**
+ * Render the login/setup page. `next` is the hidden form target; `error`
+ * renders the failure banner (kept generic for the login case).
+ */
+export declare function renderLoginPage(state: LoginPageState): string;

package/lib/login-page.js

@@ -0,0 +1,80 @@
+const PAGE_STYLE = `
+  :root { color-scheme: dark; }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
+    background: #0b0e14; color: #e6e6e6;
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
+  }
+  .card {
+    width: min(380px, calc(100vw - 40px)); background: #131722;
+    border: 1px solid #232a38; border-radius: 14px; padding: 28px 26px;
+    box-shadow: 0 12px 40px rgba(0,0,0,.45);
+  }
+  h1 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
+  .sub { margin: 0 0 20px; color: #8b93a7; font-size: 12.5px; line-height: 1.6; }
+  label { display: block; margin: 12px 0 6px; color: #aab2c5; font-size: 12px; font-weight: 600; }
+  input {
+    width: 100%; height: 38px; padding: 0 12px; border-radius: 9px; outline: none;
+    border: 1px solid #2a3346; background: #0d1017; color: #e6e6e6; font: inherit; font-size: 13.5px;
+  }
+  input:focus { border-color: #4f8cff; }
+  button {
+    width: 100%; height: 40px; margin-top: 20px; border: none; border-radius: 9px; cursor: pointer;
+    background: #4f8cff; color: #fff; font: inherit; font-size: 14px; font-weight: 600;
+  }
+  button:hover { background: #6b9dff; }
+  .error {
+    margin: 14px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
+    background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .35); color: #ff8f8f;
+  }
+  .info {
+    margin: 14px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
+    background: rgba(79, 140, 255, .1); border: 1px solid rgba(79, 140, 255, .3); color: #9dbdff;
+  }
+  .foot { margin: 18px 0 0; color: #5c657a; font-size: 11.5px; line-height: 1.6; }
+`;
+function esc(value) {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/**
+ * Render the login/setup page. `next` is the hidden form target; `error`
+ * renders the failure banner (kept generic for the login case).
+ */
+export function renderLoginPage(state) {
+    const title = state.setup ? '设置访问密码' : '访问认证';
+    const sub = state.setup
+        ? '首次使用 dsh web：设置一个访问密码（至少 8 位）。此后访问本服务需要输入该密码。'
+        : '此服务需要密码访问。请输入访问密码。';
+    const error = state.error === undefined ? '' : `<p class="error">${esc(state.error)}</p>`;
+    const loggedOut = state.loggedOut === true ? '<p class="info">已退出登录。</p>' : '';
+    const nextField = state.next === undefined ? '' : `<input type="hidden" name="next" value="${esc(state.next)}">`;
+    const confirmField = state.setup
+        ? `<label for="confirm">确认密码</label><input id="confirm" name="confirm" type="password" required minlength="8" autocomplete="new-password">`
+        : '';
+    return `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title} — DSH Web</title>
+<style>${PAGE_STYLE}</style>
+</head>
+<body>
+<main class="card">
+  <h1>${title}</h1>
+  <p class="sub">${sub}</p>
+  ${loggedOut}${error}
+  <form method="post" action="/login">
+    ${nextField}
+    <label for="password">${state.setup ? '新密码' : '密码'}</label>
+    <input id="password" name="password" type="password" required minlength="8"
+      autocomplete="${state.setup ? 'new-password' : 'current-password'}" autofocus>
+    ${confirmField}
+    <button type="submit">${state.setup ? '设置密码并进入' : '登录'}</button>
+  </form>
+  <p class="foot">DSH Web 访问认证 · 会话有效期 7 天（活动自动续期）</p>
+</main>
+</body>
+</html>`;
+}