import { For, Match, Show, Switch, createMemo, createSignal, onCleanup, onMount } from "solid-js"; import { sendMessage } from "../App"; import { LockRuneCanvas } from "../components/LockRuneCanvas"; import { PeachMark, PeachWordmark } from "../components/PeachMark"; import { RecoveryWordEntryView } from "./RecoveryWordEntry"; import { RecoveryWordDisplayView } from "./RecoveryWordDisplay"; import { RuneBackground } from "../components/RuneBackground"; import { storageGet, storageSet } from "../../shared/storage"; import { isPeachScript, decodePeachScript, normalisePeachScript } from "../../crypto/peachScript"; import { parsePayload } from "../../crypto/peachPayload"; import { parseImportSource } from "../../shared/import"; import { isNativePlatform, nativePlugin } from "../../shared/native"; const peachMarkImg = new Image(); peachMarkImg.src = `data:image/svg+xml,${encodeURIComponent( '' + '' + '' + '' + '' + '' + '' )}`; // Lazy-load @zxcvbn-ts — heavy (dictionaries ~700 kB) and only needed during // vault creation. Replaces the unmaintained zxcvbn@4.4.2 (LV-8); result.score // keeps the same 0-4 scale so downstream UI is unchanged. let _zxcvbn: ((password: string) => { score: number }) | null = null; async function getZxcvbn() { if (_zxcvbn) return _zxcvbn; const [{ zxcvbn, zxcvbnOptions }, common, en] = await Promise.all([ import("@zxcvbn-ts/core"), import("@zxcvbn-ts/language-common"), import("@zxcvbn-ts/language-en"), ]); zxcvbnOptions.setOptions({ translations: en.translations, graphs: common.adjacencyGraphs, dictionary: { ...common.dictionary, ...en.dictionary }, }); _zxcvbn = (password: string) => zxcvbn(password); return _zxcvbn; } interface LockProps { hasVault: boolean; ready: boolean; isPro?: boolean; /** When true, render the recovery-words display directly instead of the * unlock UI. Used after a popup close+reopen during the create-vault * recovery confirmation flow (peach_recovery_pending flag). */ forceRecoveryWords?: boolean; onUnlock: () => void | Promise; /** Optional escape hatch: rewind from the create-vault screen back to * Onboarding. Only meaningful when the user reached create-vault from * Onboarding in the first place. */ onBackToOnboarding?: () => void; /** Optional: open the Peach Codex restore flow (camera scan of printed * Codex pages). Surfaced as a small footer link on the new-vault screen. */ onOpenCodexRestore?: () => void; /** Open directly on backup restore when onboarding routed the user there. */ initialRestore?: boolean; } type RestoreSurface = "restore" | null; type RecoverSurface = "words" | "new-password" | null; export function LockView(props: LockProps) { const [password, setPassword] = createSignal(""); const [confirmPassword, setConfirmPassword] = createSignal(""); const [error, setError] = createSignal(""); const [loading, setLoading] = createSignal(false); const [restoreSurface, setRestoreSurface] = createSignal( props.initialRestore ? "restore" : null, ); const [showPassword, setShowPassword] = createSignal(false); const [recoverSurface, setRecoverSurface] = createSignal(null); // After vault creation succeeds, set this to show the recovery words screen. // Only meaningful when hasVault === false. const [showRecoveryWords, setShowRecoveryWords] = createSignal(props.forceRecoveryWords ?? false); const MIN_LENGTH = 12; const MIN_ZXCVBN_SCORE = 2; const [strengthScore, setStrengthScore] = createSignal(null); const [biometricAvailable, setBiometricAvailable] = createSignal(false); const [biometricBusy, setBiometricBusy] = createSignal(false); const canCreate = createMemo( () => password().length >= MIN_LENGTH && confirmPassword().length >= MIN_LENGTH && password() === confirmPassword() && strengthScore() !== null && strengthScore()! >= MIN_ZXCVBN_SCORE ); const passwordStrength = createMemo(() => { const score = strengthScore(); if (score === null) return null; if (score <= 1) return "weak"; if (score === 2) return "fair"; if (score === 3) return "good"; return "strong"; }); const createBlockerMessage = createMemo(() => { if (!password()) return null; if (password().length < MIN_LENGTH) return `need ${MIN_LENGTH - password().length} more characters`; if (!confirmPassword()) return "confirm your password"; if (password() !== confirmPassword()) return "passwords don't match"; if (strengthScore() === null) return "checking strength…"; if (strengthScore()! < MIN_ZXCVBN_SCORE) return "password too weak — use a longer passphrase"; return null; }); // Update strength asynchronously when password changes createMemo(() => { const value = password(); if (!value) { setStrengthScore(null); return; } getZxcvbn().then((zxcvbn) => { if (password() === value) setStrengthScore(zxcvbn(value).score); }).catch(() => { // zxcvbn unavailable — fall back to length-only heuristic if (password() === value) setStrengthScore(value.length >= 16 ? 3 : value.length >= 12 ? 2 : 1); }); }); async function handleUnlock() { if (!password().trim()) return; setLoading(true); setError(""); const response = await sendMessage({ type: "UNLOCK", payload: { password: password() }, }); const result = response as { ok: boolean; error?: string }; if (result.ok) { await props.onUnlock(); setLoading(false); return; } setError(getDisplayError(result.error, "incorrect password")); setPassword(""); const passwordField = document.querySelector(".lock-password-input") as HTMLInputElement | undefined; passwordField?.classList.add("shake"); setTimeout(() => passwordField?.classList.remove("shake"), 300); setLoading(false); } async function checkBiometricAvailable(): Promise { if (!props.hasVault || !isNativePlatform()) return; const keystore = nativePlugin<{ hasMasterKey: () => Promise<{ exists: boolean }> }>("KeystorePlugin"); const biometric = nativePlugin<{ isAvailable: () => Promise<{ available: boolean }> }>("BiometricPlugin"); if (!keystore || !biometric) return; try { const stored = await keystore.hasMasterKey(); if (!stored.exists) return; const avail = await biometric.isAvailable(); if (!avail.available) return; setBiometricAvailable(true); window.setTimeout(() => { void handleBiometricUnlock(); }, 400); } catch { /* missing plugins or runtime error — silently skip */ } } async function handleBiometricUnlock(): Promise { if (biometricBusy()) return; const biometric = nativePlugin<{ authenticate: (opts: Record) => Promise }>("BiometricPlugin"); const keystore = nativePlugin<{ retrieveMasterKey: () => Promise<{ masterKeyHex: string }> }>("KeystorePlugin"); if (!biometric || !keystore) return; setBiometricBusy(true); setError(""); try { await biometric.authenticate({ title: "Unlock Peach", subtitle: "Use biometrics to access your vault", negativeButtonText: "Use Password", }); const { masterKeyHex } = await keystore.retrieveMasterKey(); const res = (await sendMessage({ type: "UNLOCK_WITH_KEY", payload: { masterKeyHex }, })) as { ok: boolean; error?: string }; if (res.ok) { await props.onUnlock(); return; } if (res.error === "biometric_key_invalidated") { await sendMessage({ type: "UPDATE_SETTINGS", payload: { biometricsEnabled: false }, }); setBiometricAvailable(false); setError("biometric key expired — re-enable in settings"); } else { setError("biometric unlock failed"); } } catch (e) { const reason = e instanceof Error ? e.message : String(e); if (reason.includes("user_cancelled")) return; if (reason.includes("biometric_key_invalidated")) { await sendMessage({ type: "UPDATE_SETTINGS", payload: { biometricsEnabled: false }, }); setBiometricAvailable(false); setError("biometric key expired — re-enable in settings"); return; } if (reason.includes("biometric_lockout")) { setError("biometric locked out — use your password"); } } finally { setBiometricBusy(false); } } onMount(() => { void checkBiometricAvailable(); }); async function handleCreate() { if (!password().trim()) return; if (password().length < MIN_LENGTH) { setError(`password must be at least ${MIN_LENGTH} characters`); return; } if (password() !== confirmPassword()) { setError("passwords do not match"); return; } const score = strengthScore(); if (score === null || score < MIN_ZXCVBN_SCORE) { setError("password is too weak — use a longer passphrase"); return; } setLoading(true); setError(""); const response = await sendMessage({ type: "CREATE_VAULT", payload: { password: password() }, }); const result = response as { ok: boolean; error?: string }; if (result.ok) { // Don't unlock yet — show the recovery words screen first. Mark the // confirmation as pending in chrome.storage.local so it survives both // popup close (lock-on-close skips while set) and full browser restart // (next unlock re-routes to the recovery surface). Cleared when the // user types the 3 confirmation words successfully. try { await chrome.storage.local?.set({ peach_recovery_pending: "1" }); } catch { /* best-effort */ } setShowRecoveryWords(true); setLoading(false); return; } setError(getDisplayError(result.error, "failed to create vault")); setLoading(false); } // ── All surfaces routed reactively via Switch/Match ─────────────────── return ( {/* ── Restore tab view ──────────────────────────────────────── */} setRestoreSurface(null)} onUnlock={async () => { setRestoreSurface(null); await props.onUnlock(); }} /> {/* ── Recovery words display after fresh vault creation ────────── */} {/* ── Recovery word entry ─────────────────────────────────────── */} setRecoverSurface(null)} onRecoveryComplete={props.onUnlock} /> {/* ── Unlock (hasVault = true) ───────────────────────────────── */}
pro
vault locked

unlock
your vault.

{ if (props.ready) setTimeout(() => el.focus(), 80); }} onInput={(event) => setPassword((event.target as HTMLInputElement).value)} onKeyDown={(event) => { if (event.key !== "Enter" || !props.ready) return; void handleUnlock(); }} />

{error()}

{/* ── Onboarding (hasVault = false) ─────────────────────────── */}
pro

{"keep your\nsecrets."}


setPassword((event.target as HTMLInputElement).value)} onKeyDown={(event) => { if (event.key !== "Enter" || !props.ready) return; void handleCreate(); }} /> 0 && passwordStrength() !== null} fallback={

At least 12 characters. The vault is created once both fields match and pass the strength check.

} >
{passwordStrength()}
setConfirmPassword((event.target as HTMLInputElement).value)} onKeyDown={(event) => { if (event.key === "Enter" && props.ready) void handleCreate(); }} />

{error()}

Save your 12 recovery words after creating — they're the only way back in if you forget your password.

); } // ── Restore tab view ─────────────────────────────────────────────────────── type RestoreTab = "symbols" | "codex" | "csv"; function tabLabel(tab: RestoreTab): string { return ( { symbols: "PeachScript", codex: "Codex", csv: "CSV" }[tab] ); } function RestoreTabView(props: { hasVault: boolean; onOpenCodexRestore?: () => void; onBack: () => void; onUnlock: () => void | Promise; }) { const [activeTab, setActiveTab] = createSignal("symbols"); const [showIntro, setShowIntro] = createSignal(false); const [pendingUnlock] = createSignal(false); async function handleRestoreSuccess() { const seen = await storageGet("peach_shown_restore_intro").catch(() => null); if (!seen) { setShowIntro(true); } else { await props.onUnlock(); } } async function dismissIntro() { await storageSet("peach_shown_restore_intro", "true").catch(() => {}); setShowIntro(false); await props.onUnlock(); } return (
{(tab) => ( )}
props.onOpenCodexRestore?.()} />
{/* One-time intro popup after first restore */}

welcome to peach.

Your vault lives only on this device. No server has a copy.

The inline bubble fills passwords automatically when you visit sites.

Export your vault from Settings before switching devices.

); } // ── Peach Codex tab ──────────────────────────────────────────────────────── function RestoreCodex(props: { onOpen: () => void }) { return (

Restore from Peach Codex

Scan printed Codex pages or import the Codex PDF. Codex restore is always available, even before you create a vault.

); } // ── PeachScript tab ──────────────────────────────────────────────────────── function RestoreSymbols(props: { hasVault: boolean; onSuccess: () => void | Promise }) { const [scriptInput, setScriptInput] = createSignal(""); const [backupPass, setBackupPass] = createSignal(""); const [working, setWorking] = createSignal(false); const [animating, setAnimating] = createSignal<"chaos" | "snap" | "bloom" | null>(null); const [error, setError] = createSignal(null); let canvasRef: HTMLCanvasElement | undefined; let animFrameId = 0; let runes: { x: number; y: number; vx: number; vy: number; char: string; size: number; angle: number; va: number }[] = []; const scriptValid = createMemo(() => isPeachScript(scriptInput())); function stopAnim() { cancelAnimationFrame(animFrameId); animFrameId = 0; } function startChaos(canvas: HTMLCanvasElement) { const ctx = canvas.getContext("2d")!; const W = canvas.width; const H = canvas.height; const RUNE_CHARS = Array.from({ length: 40 }, (_, i) => String.fromCodePoint(0xe000 + i) ); if (runes.length === 0) { runes = Array.from({ length: 60 }, () => ({ x: Math.random() * W, y: Math.random() * H, vx: (Math.random() - 0.5) * 3, vy: (Math.random() - 0.5) * 3, char: RUNE_CHARS[Math.floor(Math.random() * RUNE_CHARS.length)]!, size: 14 + Math.random() * 20, angle: Math.random() * Math.PI * 2, va: (Math.random() - 0.5) * 0.1, })); } function draw() { ctx.clearRect(0, 0, W, H); for (const r of runes) { r.x = (r.x + r.vx + W) % W; r.y = (r.y + r.vy + H) % H; r.angle += r.va; ctx.save(); ctx.translate(r.x, r.y); ctx.rotate(r.angle); ctx.font = `${r.size}px PeachScript, monospace`; const alpha = 0.5 + 0.5 * Math.sin(Date.now() / 400 + r.x); ctx.fillStyle = `rgba(232, 149, 109, ${alpha})`; ctx.shadowColor = "rgba(232, 149, 109, 0.7)"; ctx.shadowBlur = 8; ctx.fillText(r.char, 0, 0); ctx.restore(); } animFrameId = requestAnimationFrame(draw); } draw(); } function snapToGrid(canvas: HTMLCanvasElement, onDone: () => void) { stopAnim(); const ctx = canvas.getContext("2d")!; const W = canvas.width; const H = canvas.height; const cols = 8; const rows = 6; const cellW = W / cols; const cellH = H / rows; const targets = runes.slice(0, cols * rows).map((_, i) => ({ x: (i % cols) * cellW + cellW / 2, y: Math.floor(i / cols) * cellH + cellH / 2, })); const start = performance.now(); const DURATION = 400; function drawSnap(now: number) { const t = Math.min((now - start) / DURATION, 1); const ease = t < 1 ? 1 - Math.pow(1 - t, 3) : 1; ctx.clearRect(0, 0, W, H); runes.slice(0, targets.length).forEach((r, i) => { const tx = targets[i]!.x; const ty = targets[i]!.y; const cx = r.x + (tx - r.x) * ease; const cy = r.y + (ty - r.y) * ease; ctx.font = `16px PeachScript, monospace`; ctx.fillStyle = `rgba(232, 149, 109, ${0.8 * ease})`; ctx.shadowColor = "rgba(232, 149, 109, 0.6)"; ctx.shadowBlur = 6; ctx.fillText(r.char, cx - 8, cy + 8); }); if (t < 1) { animFrameId = requestAnimationFrame(drawSnap); } else { onDone(); } } animFrameId = requestAnimationFrame(drawSnap); } function bloom(canvas: HTMLCanvasElement, onDone: () => void) { stopAnim(); const ctx = canvas.getContext("2d")!; const W = canvas.width; const H = canvas.height; const start = performance.now(); const DURATION = 900; function drawBloom(now: number) { const t = Math.min((now - start) / DURATION, 1); ctx.clearRect(0, 0, W, H); // Runes dissolve const runeAlpha = 1 - Math.min(t / 0.4, 1); if (runeAlpha > 0) { for (const r of runes.slice(0, 48)) { ctx.font = `16px PeachScript, monospace`; ctx.fillStyle = `rgba(232, 149, 109, ${runeAlpha * 0.8})`; ctx.fillText(r.char, r.x - 8, r.y + 8); } } // Peach mark bloom const markT = Math.max(0, (t - 0.2) / 0.5); const markScale = Math.min(markT * 1.2, 1); const markAlpha = markT < 0.5 ? markT * 2 : 2 - markT * 2; if (markAlpha > 0) { ctx.save(); ctx.globalAlpha = markAlpha; ctx.shadowColor = `rgba(217, 104, 48, ${markAlpha * 0.8})`; ctx.shadowBlur = 30; ctx.translate(W / 2, H / 2); ctx.scale(markScale, markScale); ctx.drawImage(peachMarkImg, -32, -32, 64, 64); ctx.restore(); } if (t < 1) { animFrameId = requestAnimationFrame(drawBloom); } else { onDone(); } } animFrameId = requestAnimationFrame(drawBloom); } onCleanup(() => stopAnim()); async function handleRestore() { if (!scriptValid() || !backupPass().trim() || working()) return; setError(null); setWorking(true); setAnimating("chaos"); const canvas = canvasRef; if (canvas) startChaos(canvas); try { const bytes = decodePeachScript(normalisePeachScript(scriptInput())); const payload = await parsePayload(bytes, backupPass()); if (!props.hasVault) { const cr = await sendMessage({ type: "CREATE_VAULT", payload: { password: backupPass() } }); if (!(cr as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED"); } const rr = await sendMessage({ type: "RESTORE_ENTRIES", payload: { entries: payload.entries, mode: "merge", settings: payload.settings }, }); if (!(rr as { ok: boolean }).ok) throw new Error((rr as { error?: string }).error ?? "RESTORE_FAILED"); if (payload.license?.key) { await sendMessage({ type: "ACTIVATE_LICENSE", payload: { key: payload.license.key } }).catch(() => {}); } setAnimating("snap"); stopAnim(); if (canvas) { snapToGrid(canvas, () => { setAnimating("bloom"); bloom(canvas, async () => { setAnimating(null); await props.onSuccess(); }); }); } else { await props.onSuccess(); } } catch (err) { stopAnim(); setAnimating(null); const code = err instanceof Error ? err.message : String(err); setError( code === "INVALID_PASSPHRASE" || code === "INVALID_EXPORT_PASSWORD" ? "That passphrase didn't work." : code === "CREATE_VAULT_FAILED" ? "Couldn't create a new local vault." : "Could not read this backup.", ); } finally { setWorking(false); } } return (
{ canvasRef = el; }} class="peach-rt-anim-canvas" width={280} height={200} />