a9feb1b5b2
First real UI for kez-chat. Served by the chat-server as static
files; uses the same HTTP API a native client would (dogfoods the
contract).
Stack: Svelte 5 + TypeScript + Vite + Tailwind 4 + @noble/curves +
@scure/base + canonicalize + idb-keyval + svelte-spa-router.
Bundle: 113 KB JS / 14 KB CSS (gzip: 42 KB / 4 KB).
Pages (all behind hash routing):
/ Landing — sign up or restore from seed
/create Account creation flow:
1. Pick handle, set passphrase
2. Show seed for paper backup, require ack
3. Confirm
4. POST /v1/register, save passphrase-encrypted seed
to IndexedDB
/restore Stub for restore-from-seed (v0.2: needs
GET /v1/by-primary endpoint on the server)
/unlock Enter passphrase to derive the AES-GCM key,
decrypt the seed, populate session state
/dashboard Show handle, primary, registered_at, sigchain URL
/claims List locally-cached claims (with publication status)
/claims/add Add-a-claim wizard:
1. Pick channel (github/dns/web/nostr/bluesky/ap)
2. Enter identifier
3. SignedClaimEnvelope built + signed in-browser
using Ed25519 + JCS, matching the spec exactly
4. Show channel-appropriate publish instructions +
copyable markdown or JSON artifact
5. User marks it published (purely a local note —
actual verification is the verifier's job)
Crypto / KEZ helpers (src/lib/kez.ts):
- generateIdentity / identityFromSeed (32-byte Ed25519)
- canonicalBytes (RFC 8785 JCS via the `canonicalize` package — same
one our Node port uses; produces byte-identical output to Rust)
- signClaim, signRegistration (build envelopes; sign with
ed25519-sha512-jcs; same alg / key / sig shape as kez-core)
- toPrettyJson, toMarkdown (the same wire encodings the CLI emits)
Key storage (src/lib/identity-store.ts):
- IndexedDB via idb-keyval
- Seed encrypted under user passphrase: PBKDF2-SHA256
(600,000 iterations, OWASP 2024 guidance) → AES-GCM-256
- Documented limitation: browsers don't have an OS-keychain
equivalent. Native clients (future CLI/Tauri) will use the OS
keychain for better protection.
Bundle includes:
- Workaround for TS 5.6+ Uint8Array<ArrayBufferLike> vs ArrayBuffer
strictness (small asBuffer() helper that copies into a plain
ArrayBuffer for WebCrypto + Response calls).
Dockerfile updated: now multi-stage with a Node `webbuild` stage
that runs `npm run build` before the Rust binary stage. SPA dist
is copied into the runtime image at /app/web; chat-server's
KEZ_CHAT_WEB_DIR points at it so the SPA is served at /.
What works against the LIVE deployment right now (https://kez.lat):
- Open https://kez.lat → SPA loads (113 KB JS, 14 KB CSS)
- Create account → key gen happens in browser, seed shown for
backup, encrypted under passphrase, POSTed to /v1/register
- Dashboard → shows registered handle + primary + sigchain URL
- Claims wizard → sign for any of the 6 channels, get publish
instructions + the right wire format to copy
- Lock / unlock — passphrase-derived AES-GCM, no roundtrips
What's still TODO (v0.2):
- Restore-from-seed: needs GET /v1/by-primary on the server so the
SPA can discover the handle from a seed
- Actual NATS chat: needs server's auth callout (currently 501) +
nats.ws client (browser side; package is in deps but not used yet)
- Sigchain integration: append `add` event when user publishes a
claim, upload to sig-server (needs sig.kez.lat tunnel)
- Verification: in-browser channel fetches (some channels are
CORS-friendly, others need a server-side proxy)
- Compact (kez:z1:) form: the spec uses zstd, browsers don't have
native zstd CompressionStream support yet. Workaround in code
uses deflate-raw with a `kez:zd1:` prefix to make it obvious the
output isn't spec-compliant; replace with @bokuweb/zstd-wasm or
similar when we need true compact form in the SPA.
83 lines
2.2 KiB
Svelte
83 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { push } from "svelte-spa-router";
|
|
import { loadStoredIdentityMeta, unlockIdentity, deleteStoredIdentity } from "../lib/identity-store.js";
|
|
import { session } from "../lib/store.svelte.js";
|
|
|
|
let meta = $state<{ handle: string; server: string; primary: string; created_at: string } | null>(null);
|
|
let passphrase = $state("");
|
|
let error = $state<string | null>(null);
|
|
let working = $state(false);
|
|
|
|
onMount(async () => {
|
|
meta = await loadStoredIdentityMeta();
|
|
if (!meta) push("/");
|
|
});
|
|
|
|
async function submit() {
|
|
working = true;
|
|
error = null;
|
|
try {
|
|
const id = await unlockIdentity(passphrase);
|
|
session.setUnlocked(id);
|
|
passphrase = "";
|
|
push("/dashboard");
|
|
} catch (e) {
|
|
error = (e as Error).message;
|
|
} finally {
|
|
working = false;
|
|
}
|
|
}
|
|
|
|
async function forget() {
|
|
if (!confirm("Delete the local copy of this account? You'll need your seed to restore.")) return;
|
|
await deleteStoredIdentity();
|
|
session.lock();
|
|
push("/");
|
|
}
|
|
</script>
|
|
|
|
<div class="space-y-6 max-w-md">
|
|
<h1 class="text-2xl font-bold text-gray-900">Unlock</h1>
|
|
|
|
{#if meta}
|
|
<p class="text-sm text-gray-600">
|
|
Unlocking <span class="font-mono font-semibold">{meta.handle}@{meta.server}</span>
|
|
</p>
|
|
|
|
<form
|
|
class="space-y-3"
|
|
onsubmit={(e) => { e.preventDefault(); submit(); }}
|
|
>
|
|
<input
|
|
type="password"
|
|
bind:value={passphrase}
|
|
placeholder="passphrase"
|
|
autocomplete="current-password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md"
|
|
/>
|
|
|
|
{#if error}
|
|
<p class="text-sm text-red-700 bg-red-50 border border-red-200 rounded p-3">
|
|
{error}
|
|
</p>
|
|
{/if}
|
|
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
|
|
disabled={working || passphrase.length === 0}
|
|
>
|
|
{working ? "Unlocking…" : "Unlock"}
|
|
</button>
|
|
</form>
|
|
|
|
<button
|
|
class="text-xs text-gray-500 hover:text-red-700 underline"
|
|
onclick={forget}
|
|
>
|
|
Forget this account on this device
|
|
</button>
|
|
{/if}
|
|
</div>
|