Files
VoxVera/site/board.html
T
thePR0M3TH3ANandClaude Opus 4.8 1297a73332 Bulletin board: login gate, web-of-trust filter, and key connect methods
Gate the board behind a connected Nostr identity and filter what it shows
to the viewer's web of trust, so it is no longer an unmoderated firehose.

- Login gate: the board shows a Connect prompt instead of the table until a
  Nostr identity is connected; the connected npub is surfaced with a
  Disconnect control and remembered (pubkey only) for silent reconnect.
- Connect methods: NIP-07 extension, pasting an nsec (decoded in-page to a
  pubkey, then discarded — the board reads, never signs), or creating a new
  key (reveals the nsec to save, reuses the device key if present).
- Web-of-trust filter (NIP-02): defaults to flyers from authors in the
  viewer's follow graph, with a "Show all" opt-out. A fresh key with no
  follows is seeded from a pinned curator account so new viewers still get a
  curated board; if no trust data loads at all, it shows everything.
- Localized across all 14 languages (gate, filter, and connect strings),
  RTL included.

Covered by the cross-engine Playwright suite (gate shown/hidden, connect via
each method, pubkey-only persistence, web-of-trust filtering + show-all, and
the curator-seeded fallback).

Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-06-10 10:16:24 -04:00

83 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VoxVera — Bulletin Board</title>
<!-- Root-absolute asset paths: with Vercel cleanUrls + trailingSlash this
page is served at /board/, so relative paths would resolve to
/board/... and 404. -->
<link rel="stylesheet" href="/nostr-client.css">
</head>
<body class="board-page">
<header class="topbar">
<div>
<h1 id="board-title">Bulletin Board</h1>
<p id="board-subtitle">Most recent flyers published to the relays.</p>
</div>
<div class="topbar-controls">
<a id="board-back" class="board-back" href="/">Back to VoxVera</a>
<span id="board-identity" class="board-identity" hidden>
<span id="board-identity-npub" class="board-npub"></span>
<button id="board-disconnect" type="button" class="board-disconnect">Disconnect</button>
</span>
<select id="board-lang" aria-label="Language"></select>
</div>
</header>
<main class="board-main">
<!-- Login gate: the board is visible only to a connected Nostr identity.
The data itself is public on the relays, so this is not access
control — it supplies the viewer's identity so a later web-of-trust
filter can show them a trustworthy board (see docs/roadmap.md). -->
<section id="board-gate" class="board-gate">
<h2 id="board-gate-title">Connect to view the board</h2>
<p id="board-gate-body">Connect a Nostr identity to view the bulletin board.</p>
<div class="board-connect-methods">
<button id="board-connect" type="button" class="board-connect">Browser extension (NIP-07)</button>
<button id="board-connect-nsec-toggle" type="button" class="board-connect-alt">Use a private key (nsec)</button>
<button id="board-generate" type="button" class="board-connect-alt">Create a new key</button>
</div>
<!-- nsec import: the key is decoded in-page to derive the pubkey, then
discarded. Only the pubkey is persisted (board never signs). -->
<div id="board-nsec-row" class="board-nsec-row" hidden>
<input id="board-nsec-input" type="password" autocomplete="off" spellcheck="false" placeholder="nsec1…">
<button id="board-nsec-submit" type="button" class="board-connect">Connect</button>
<p id="board-nsec-note" class="board-key-note"></p>
</div>
<!-- Generated key reveal: shown once so the user can save the secret. -->
<div id="board-generated" class="board-generated" hidden>
<p id="board-gen-warning" class="board-key-warning"></p>
<label class="board-key-field">npub
<input id="board-gen-npub" readonly>
</label>
<label class="board-key-field">nsec
<span class="board-key-secret">
<input id="board-gen-nsec" type="password" readonly>
<button id="board-gen-copy" type="button" class="board-disconnect">Copy</button>
</span>
</label>
<button id="board-gen-continue" type="button" class="board-connect">Continue</button>
</div>
<p id="board-gate-error" class="board-gate-error" role="alert" hidden></p>
</section>
<div id="board-content" hidden>
<div class="board-filter">
<span id="board-filter-note" class="board-filter-note"></span>
<label class="board-show-all">
<input type="checkbox" id="board-show-all">
<span id="board-show-all-label">Show all flyers</span>
</label>
</div>
<p id="board-status">Loading…</p>
<table class="board-table" id="board-table">
<thead><tr id="board-head"></tr></thead>
<tbody id="board-rows"></tbody>
</table>
</div>
</main>
<script src="/locales.js"></script>
<script src="/vendor/nostr-tools/nostr.bundle.js"></script>
<script src="/board.js"></script>
</body>
</html>