feat: add adoption receiver onboarding flow (v4.0.17)

@@ -0,0 +1,126 @@1+// @vitest-environment jsdom2+3+import type { JSX } from "solid-js";4+import { afterEach, describe, expect, it, vi } from "vitest";5+import { Onboarding } from "./Onboarding";6+import { AdoptVaultView } from "./AdoptVaultView";7+import { flushView, inputText, renderView } from "./view-test-utils";8+9+function button(container: HTMLElement, text: string): HTMLButtonElement {10+  const found = Array.from(container.querySelectorAll("button")).find((b) =>11+    (b.textContent ?? "").includes(text),12+  );13+  if (!found) throw new Error(`button not found: ${text}`);14+  return found as HTMLButtonElement;15+}16+17+async function enterStrongPassword(container: HTMLElement) {18+  inputText(container.querySelector("#adopt-password") as HTMLInputElement, "9xQ!vZ2pLm74Tr#Ke8Wd5Bn");19+  inputText(container.querySelector("#adopt-confirm-password") as HTMLInputElement, "9xQ!vZ2pLm74Tr#Ke8Wd5Bn");20+  await flushView();21+}22+23+describe("vault adoption onboarding", () => {24+  const cleanups: Array<() => void> = [];25+26+  afterEach(() => {27+    vi.useRealTimers();28+    while (cleanups.length) cleanups.pop()!();29+  });30+31+  function mounted(view: () => JSX.Element) {32+    const rendered = renderView(view);33+    cleanups.push(rendered.dispose);34+    return rendered;35+  }36+37+  it("T-A21: Onboarding offers Create vault, Restore from backup, and I already have Peach", () => {38+    vi.useFakeTimers();39+    const onComplete = vi.fn();40+    const onRestore = vi.fn();41+    const onAdopt = vi.fn();42+    const view = mounted(() => <Onboarding onComplete={onComplete} onRestore={onRestore} onAdopt={onAdopt} />);43+44+    button(view.container, "next").click();45+    vi.advanceTimersByTime(220);46+    button(view.container, "next").click();47+    vi.advanceTimersByTime(220);48+49+    expect(view.container.textContent).toContain("Create vault");50+    expect(view.container.textContent).toContain("Restore from backup");51+    expect(view.container.textContent).toContain("I already have Peach");52+    button(view.container, "I already have Peach").click();53+    expect(onAdopt).toHaveBeenCalledTimes(1);54+  });55+56+  it("T-A22: password screen uses the same minimum-length gate as create-vault", () => {57+    const view = mounted(() => <AdoptVaultView onCancel={() => {}} onDone={() => {}} startAdoption={vi.fn()} />);58+    const continueButton = button(view.container, "Continue");59+    expect(continueButton.disabled).toBe(true);60+    inputText(view.container.querySelector("#adopt-password") as HTMLInputElement, "short");61+    inputText(view.container.querySelector("#adopt-confirm-password") as HTMLInputElement, "short");62+    expect(view.container.textContent).toContain("need 7 more characters");63+    expect(continueButton.disabled).toBe(true);64+  });65+66+  it("T-A23: adoption flow reaches the SAS screen", async () => {67+    const startAdoption = vi.fn(async ({ confirmSAS }: { confirmSAS(sas: string): Promise<boolean> }) => {68+      await confirmSAS("895245");69+    });70+    const view = mounted(() => <AdoptVaultView onCancel={() => {}} onDone={() => {}} startAdoption={startAdoption} />);71+    await enterStrongPassword(view.container);72+    button(view.container, "Continue").click();73+    button(view.container, "Pair a device").click();74+    await flushView();75+76+    expect(view.container.textContent).toContain("Confirm this code matches");77+    expect(view.container.textContent).toContain("8 9 5 2 4 5");78+  });79+80+  it("T-A24: success leaves a vault and opens Peach", async () => {81+    const onDone = vi.fn();82+    const view = mounted(83+      () => (84+        <AdoptVaultView85+          onCancel={() => {}}86+          onDone={onDone}87+          startAdoption={vi.fn(async () => {})}88+        />89+      ),90+    );91+    await enterStrongPassword(view.container);92+    button(view.container, "Continue").click();93+    button(view.container, "Pair a device").click();94+    await flushView();95+96+    expect(view.container.textContent).toContain("Joined your vault.");97+    button(view.container, "Open Peach").click();98+    expect(onDone).toHaveBeenCalledTimes(1);99+  });100+101+  it("T-A25: SAS cancel keeps receiver vault-less and returns to the password step", async () => {102+    const createVault = vi.fn();103+    const view = mounted(104+      () => (105+        <AdoptVaultView106+          onCancel={() => {}}107+          onDone={() => {}}108+          startAdoption={vi.fn(async ({ confirmSAS }) => {109+            const ok = await confirmSAS("895245");110+            if (ok) await createVault();111+            else throw new Error("sas_rejected");112+          })}113+        />114+      ),115+    );116+    await enterStrongPassword(view.container);117+    button(view.container, "Continue").click();118+    button(view.container, "Pair a device").click();119+    await flushView();120+    button(view.container, "Cancel").click();121+    await flushView();122+123+    expect(createVault).not.toHaveBeenCalled();124+    expect(view.container.textContent).toContain("Set a password for this device.");125+  });126+});

@@ -0,0 +1,202 @@1+import { Match, Show, Switch, createMemo, createSignal } from "solid-js";2+import { sendMessage } from "../App";3+import { RuneBackground } from "../components/RuneBackground";4+5+type AdoptPhase = "password" | "pair" | "sas" | "success" | "error";6+7+export interface AdoptVaultViewProps {8+  onCancel(): void;9+  onDone(): void | Promise<void>;10+  startAdoption(args: {11+    password: string;12+    confirmSAS(sas: string): Promise<boolean>;13+    createVault(rootKeyHex: string): Promise<{ vaultId: string }>;14+  }): Promise<void>;15+}16+17+const MIN_LENGTH = 12;18+const MIN_ZXCVBN_SCORE = 2;19+20+let zxcvbnLoader: ((password: string) => { score: number }) | null = null;21+async function getZxcvbn() {22+  if (zxcvbnLoader) return zxcvbnLoader;23+  const [{ zxcvbn, zxcvbnOptions }, common, en] = await Promise.all([24+    import("@zxcvbn-ts/core"),25+    import("@zxcvbn-ts/language-common"),26+    import("@zxcvbn-ts/language-en"),27+  ]);28+  zxcvbnOptions.setOptions({29+    translations: en.translations,30+    graphs: common.adjacencyGraphs,31+    dictionary: { ...common.dictionary, ...en.dictionary },32+  });33+  zxcvbnLoader = (password: string) => zxcvbn(password);34+  return zxcvbnLoader;35+}36+37+export function AdoptVaultView(props: AdoptVaultViewProps) {38+  const [phase, setPhase] = createSignal<AdoptPhase>("password");39+  const [password, setPassword] = createSignal("");40+  const [confirmPassword, setConfirmPassword] = createSignal("");41+  const [strengthScore, setStrengthScore] = createSignal<number | null>(null);42+  const [sas, setSas] = createSignal("");43+  const [sasResolve, setSasResolve] = createSignal<((ok: boolean) => void) | null>(null);44+  const [error, setError] = createSignal("");45+46+  createMemo(() => {47+    const value = password();48+    if (!value) {49+      setStrengthScore(null);50+      return;51+    }52+    getZxcvbn().then((zxcvbn) => {53+      if (password() === value) setStrengthScore(zxcvbn(value).score);54+    }).catch(() => {55+      if (password() === value) setStrengthScore(value.length >= 16 ? 2 : 1);56+    });57+  });58+59+  const canContinue = createMemo(() =>60+    password().length >= MIN_LENGTH &&61+    confirmPassword().length >= MIN_LENGTH &&62+    password() === confirmPassword() &&63+    strengthScore() !== null &&64+    strengthScore()! >= MIN_ZXCVBN_SCORE65+  );66+67+  const createBlocker = createMemo(() => {68+    if (!password()) return null;69+    if (password().length < MIN_LENGTH) return `need ${MIN_LENGTH - password().length} more characters`;70+    if (!confirmPassword()) return "confirm your password";71+    if (password() !== confirmPassword()) return "passwords don't match";72+    if (strengthScore() === null) return "checking strength...";73+    if (strengthScore()! < MIN_ZXCVBN_SCORE) return "password too weak - use a longer passphrase";74+    return null;75+  });76+77+  async function beginPairing() {78+    setPhase("pair");79+    setError("");80+    try {81+      await props.startAdoption({82+        password: password(),83+        confirmSAS: (code) => new Promise<boolean>((resolve) => {84+          setSas(code);85+          setSasResolve(() => resolve);86+          setPhase("sas");87+        }),88+        createVault: async (rootKeyHex) => {89+          const res = await sendMessage({90+            type: "CREATE_VAULT_FROM_ROOT_KEY",91+            payload: { password: password(), rootKeyHex },92+          }) as { ok: boolean; vaultId?: string; error?: string };93+          if (!res.ok || !res.vaultId) throw new Error(res.error ?? "adoption_create_failed");94+          return { vaultId: res.vaultId };95+        },96+      });97+      setPhase("success");98+    } catch (err) {99+      if (err instanceof Error && err.message === "sas_rejected") return;100+      setError(err instanceof Error ? err.message : String(err));101+      setPhase("error");102+    }103+  }104+105+  function confirmSas(ok: boolean) {106+    const resolve = sasResolve();107+    setSasResolve(null);108+    resolve?.(ok);109+    if (!ok) {110+      setPhase("password");111+      setPassword("");112+      setConfirmPassword("");113+      setStrengthScore(null);114+    }115+  }116+117+  return (118+    <section class="peach-screen peach-theme peach-adopt-vault">119+      <RuneBackground opacity={0.07} />120+      <div class="peach-adopt-card">121+        <Switch>122+          <Match when={phase() === "password"}>123+            <h1>Set a password for this device.</h1>124+            <p>This protects your vault on this device only. It can be different from your other devices.</p>125+            <label class="peach-label" for="adopt-password">password</label>126+            <input127+              id="adopt-password"128+              class="peach-underline-input peach-adopt-input"129+              type="password"130+              autocomplete="new-password"131+              value={password()}132+              onInput={(event) => setPassword((event.target as HTMLInputElement).value)}133+            />134+            <label class="peach-label" for="adopt-confirm-password">confirm password</label>135+            <input136+              id="adopt-confirm-password"137+              class="peach-underline-input peach-adopt-input"138+              type="password"139+              autocomplete="new-password"140+              value={confirmPassword()}141+              onInput={(event) => setConfirmPassword((event.target as HTMLInputElement).value)}142+            />143+            <Show when={createBlocker()}>144+              <p class="peach-hint">{createBlocker()}</p>145+            </Show>146+            <div class="peach-adopt-actions">147+              <button class="peach-btn peach-btn--accent peach-btn--md" disabled={!canContinue()} onClick={() => setPhase("pair")}>148+                Continue149+              </button>150+              <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>151+            </div>152+          </Match>153+154+          <Match when={phase() === "pair"}>155+            <div class="peach-adopt-birds" aria-hidden="true">156+              <span />157+              <span />158+            </div>159+            <h1>Pair with your other device.</h1>160+            <p>Open Peach on the device that has your vault. Bring both devices close together.</p>161+            <div class="peach-adopt-actions">162+              <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => void beginPairing()}>163+                Pair a device164+              </button>165+              <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>166+            </div>167+          </Match>168+169+          <Match when={phase() === "sas"}>170+            <h1>Confirm this code matches on your other device.</h1>171+            <div class="peach-adopt-sas">{sas().replace(/(\d)(?=\d)/g, "$1 ")}</div>172+            <div class="peach-adopt-actions">173+              <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => confirmSas(true)}>Confirm</button>174+              <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={() => confirmSas(false)}>Cancel</button>175+            </div>176+          </Match>177+178+          <Match when={phase() === "success"}>179+            <div class="peach-adopt-birds" aria-hidden="true">180+              <span />181+              <span />182+            </div>183+            <h1>Joined your vault.</h1>184+            <p>Your passwords will sync shortly.</p>185+            <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => void props.onDone()}>186+              Open Peach187+            </button>188+          </Match>189+190+          <Match when={phase() === "error"}>191+            <h1>Could not join your vault.</h1>192+            <p class="peach-hint peach-hint-error">{error()}</p>193+            <div class="peach-adopt-actions">194+              <button class="peach-btn peach-btn--accent peach-btn--md" onClick={() => setPhase("password")}>Try again</button>195+              <button class="peach-btn peach-btn--ghost peach-btn--md" onClick={props.onCancel}>Cancel</button>196+            </div>197+          </Match>198+        </Switch>199+      </div>200+    </section>201+  );202+}