@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/device-pairing/device-pairing.tsx

@@ -1,461 +0,0 @@
-import { copyToClipboard, type DevicePairingState, parsePairingCode } from "@peers-app/peers-sdk";
-import { useEffect, useRef, useState } from "react";
-import QRCode from "react-qr-code";
-import { canScanQr, QrScanner } from "../../components/qr-scanner";
-import { identityTools } from "./identity-ipc";
-import { useDevicePairingState } from "./use-device-pairing-state";
-
-function isPairingCode(text: string): boolean {
-  try {
-    parsePairingCode(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-const TERMINAL_PHASES: DevicePairingState["phase"][] = ["complete", "rejected", "error"];
-
-function formatCountdown(expiresAt?: number): string {
-  if (!expiresAt) {
-    return "";
-  }
-  const seconds = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
-  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
-}
-
-function detectDeviceType(): string {
-  return /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "browser";
-}
-
-function useCountdownClock(expiresAt?: number) {
-  const [, setClock] = useState(0);
-  useEffect(() => {
-    if (!expiresAt) {
-      return;
-    }
-    const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
-    return () => window.clearInterval(timer);
-  }, [expiresAt]);
-}
-
-function PairingProgress(props: {
-  state: DevicePairingState;
-  messages: Partial<Record<string, string>>;
-}) {
-  return (
-    <output className="text-center py-4 d-block">
-      <div className="spinner-border text-primary mb-3" aria-hidden="true" />
-      <p className="text-muted mb-0">{props.messages[props.state.phase] ?? "Working…"}</p>
-    </output>
-  );
-}
-
-function ProgressWithCancel(props: {
-  state: DevicePairingState;
-  messages: Partial<Record<string, string>>;
-  onCancel: () => void;
-}) {
-  return (
-    <>
-      <PairingProgress state={props.state} messages={props.messages} />
-      <div className="text-center">
-        <button type="button" className="btn btn-outline-secondary" onClick={props.onCancel}>
-          Cancel
-        </button>
-      </div>
-    </>
-  );
-}
-
-function RemoteDeviceLabel({ state }: { state: DevicePairingState }) {
-  return (
-    <>
-      {state.remoteDevice?.deviceName || "Unnamed device"}
-      {state.remoteDevice?.deviceType ? ` (${state.remoteDevice.deviceType})` : ""}
-    </>
-  );
-}
-
-function SourceApproval(props: {
-  state: DevicePairingState;
-  approving: boolean;
-  onApprove: () => void;
-  onReject: () => void;
-  onCancel: () => void;
-}) {
-  return (
-    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-      <h4>Add this device?</h4>
-      <p className="text-muted">
-        The code matched. Approving sends your account credentials to this device so it can sign in
-        as you.
-      </p>
-      <p className="fs-5 mb-4">
-        <RemoteDeviceLabel state={props.state} />
-      </p>
-      <div className="d-flex gap-2 justify-content-center">
-        <button
-          type="button"
-          className="btn btn-primary"
-          disabled={props.approving}
-          onClick={props.onApprove}
-        >
-          {props.approving ? "Approving…" : "Approve"}
-        </button>
-        <button
-          type="button"
-          className="btn btn-outline-danger"
-          disabled={props.approving}
-          onClick={props.onReject}
-        >
-          Reject
-        </button>
-        <button
-          type="button"
-          className="btn btn-outline-secondary"
-          disabled={props.approving}
-          onClick={props.onCancel}
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function TerminalPanel(props: { state: DevicePairingState; onClose: () => void }) {
-  const complete = props.state.phase === "complete";
-  return (
-    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-      <output className={`alert d-block ${complete ? "alert-success" : "alert-warning"}`}>
-        {complete
-          ? "Device added successfully."
-          : props.state.phase === "rejected"
-            ? "Pairing was rejected. No credentials were installed."
-            : props.state.error || "Pairing could not be completed. No credentials were installed."}
-      </output>
-      <button type="button" className="btn btn-outline-secondary" onClick={props.onClose}>
-        {complete ? "Done" : "Back"}
-      </button>
-    </div>
-  );
-}
-
-function usePairingSessionLifecycle(state: DevicePairingState) {
-  const sessionId = useRef<string | undefined>(undefined);
-  const phase = useRef<DevicePairingState["phase"]>("idle");
-  const mounted = useRef(true);
-
-  useEffect(() => {
-    if (state.sessionId) {
-      // The host may rotate to a new session (destination code rotation); follow it.
-      sessionId.current = state.sessionId;
-      phase.current = state.phase;
-    }
-  }, [state.phase, state.sessionId]);
-
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-      const activeSessionId = sessionId.current;
-      if (activeSessionId && !["idle", ...TERMINAL_PHASES].includes(phase.current)) {
-        void identityTools()
-          .then((tools) => tools.cancel({ sessionId: activeSessionId }))
-          .catch(() => undefined);
-      }
-    };
-  }, []);
-
-  return { sessionId, phase, mounted };
-}
-
-function useCeremonyActions(
-  lifecycle: ReturnType<typeof usePairingSessionLifecycle>,
-  onLeave: () => void,
-  setLocalError: (value: string) => void,
-) {
-  const [approving, setApproving] = useState(false);
-
-  const act = async (action: "approve" | "reject") => {
-    const sessionId = lifecycle.sessionId.current;
-    if (!sessionId) {
-      return;
-    }
-    setApproving(true);
-    try {
-      const tools = await identityTools();
-      if (action === "approve") {
-        await tools.approve({ sessionId });
-      } else {
-        await tools.reject({ sessionId });
-      }
-    } catch {
-      setLocalError("Could not update the pairing ceremony.");
-    } finally {
-      setApproving(false);
-    }
-  };
-
-  const cancel = async () => {
-    const sessionId = lifecycle.sessionId.current;
-    lifecycle.phase.current = "idle";
-    if (sessionId) {
-      await identityTools()
-        .then((tools) => tools.cancel({ sessionId }))
-        .catch(() => undefined);
-    }
-    onLeave();
-  };
-
-  return { approving, act, cancel };
-}
-
-const SOURCE_PROGRESS_MESSAGES: Partial<Record<DevicePairingState["phase"], string>> = {
-  connecting: "Connecting to the new device…",
-  authenticating: "Verifying the pairing code…",
-  transferring: "Sending encrypted account credentials…",
-};
-
-/** Signed-in source flow opened from Settings: type the code shown on the new device, then approve. */
-export function SourceDevicePairing(props: { onClose: () => void }) {
-  const state = useDevicePairingState();
-  const lifecycle = usePairingSessionLifecycle(state);
-  const [code, setCode] = useState("");
-  const [scanning, setScanning] = useState(false);
-  const [starting, setStarting] = useState(false);
-  const [localError, setLocalError] = useState("");
-  const { approving, act, cancel } = useCeremonyActions(lifecycle, props.onClose, setLocalError);
-  useCountdownClock(state.expiresAt);
-
-  const start = async (rawCode: string = code) => {
-    setLocalError("");
-    setStarting(true);
-    try {
-      const tools = await identityTools();
-      const result = await tools.startSource({ code: rawCode.trim() });
-      lifecycle.sessionId.current = result.sessionId;
-      lifecycle.phase.current = result.phase;
-      if (!lifecycle.mounted.current && result.sessionId) {
-        await tools.cancel({ sessionId: result.sessionId }).catch(() => undefined);
-      }
-    } catch {
-      setLocalError("That code was not recognized or the new device is no longer waiting.");
-    } finally {
-      setStarting(false);
-    }
-  };
-
-  if (TERMINAL_PHASES.includes(state.phase)) {
-    return <TerminalPanel state={state} onClose={props.onClose} />;
-  }
-  if (state.phase === "waiting-for-approval") {
-    return (
-      <SourceApproval
-        state={state}
-        approving={approving}
-        onApprove={() => void act("approve")}
-        onReject={() => void act("reject")}
-        onCancel={() => void cancel()}
-      />
-    );
-  }
-  if (
-    state.phase === "connecting" ||
-    state.phase === "authenticating" ||
-    state.phase === "transferring"
-  ) {
-    return (
-      <ProgressWithCancel
-        state={state}
-        messages={SOURCE_PROGRESS_MESSAGES}
-        onCancel={() => void cancel()}
-      />
-    );
-  }
-  if (scanning) {
-    return (
-      <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-        <p className="text-muted">Point the camera at the code on the new device.</p>
-        <QrScanner
-          accept={isPairingCode}
-          onScan={(scanned) => {
-            setScanning(false);
-            setCode(scanned);
-            void start(scanned);
-          }}
-          onError={(message) => {
-            setScanning(false);
-            setLocalError(message);
-          }}
-        />
-        <button
-          type="button"
-          className="btn btn-outline-secondary mt-3"
-          onClick={() => setScanning(false)}
-        >
-          Type it instead
-        </button>
-      </div>
-    );
-  }
-  return (
-    <form
-      className="text-center"
-      style={{ maxWidth: 440, margin: "0 auto" }}
-      onSubmit={(event) => {
-        event.preventDefault();
-        void start();
-      }}
-    >
-      <p className="text-muted">
-        On the new device, open Peers and choose <strong>Sign in from another device</strong>. Scan
-        the code it shows, or type it here.
-      </p>
-      {canScanQr() ? (
-        <button
-          type="button"
-          className="btn btn-outline-primary mb-3"
-          disabled={starting}
-          onClick={() => setScanning(true)}
-        >
-          <i className="bi bi-qr-code-scan me-1" />
-          Scan code
-        </button>
-      ) : null}
-      <input
-        className="form-control form-control-lg font-monospace text-center mb-3"
-        placeholder="7-guitar-revenge-tunnel"
-        value={code}
-        onChange={(event) => setCode(event.target.value)}
-        autoComplete="off"
-        autoCapitalize="none"
-        spellCheck={false}
-        aria-label="Pairing code"
-        disabled={starting}
-      />
-      {localError ? <div className="alert alert-danger">{localError}</div> : null}
-      <div className="d-flex gap-2 justify-content-center">
-        <button
-          type="submit"
-          className="btn btn-primary"
-          disabled={starting || code.trim().split(/[\s-]+/).length < 4}
-        >
-          {starting ? "Connecting…" : "Connect"}
-        </button>
-        <button
-          type="button"
-          className="btn btn-outline-secondary"
-          disabled={starting}
-          onClick={props.onClose}
-        >
-          Cancel
-        </button>
-      </div>
-    </form>
-  );
-}
-
-const DESTINATION_PROGRESS_MESSAGES: Partial<Record<DevicePairingState["phase"], string>> = {
-  idle: "Preparing a pairing code…",
-  connecting: "Connecting to your other device…",
-  authenticating: "Verifying the pairing code…",
-  "waiting-for-approval": "Waiting for approval on your other device…",
-  transferring: "Installing encrypted account credentials…",
-};
-
-function ShowingCode(props: { state: DevicePairingState; onCancel: () => void }) {
-  const code = props.state.code ?? "";
-  return (
-    <div className="text-center" style={{ maxWidth: 480, margin: "0 auto" }}>
-      <h3>Sign in from another device</h3>
-      <p className="text-muted">
-        On a device already signed in to Peers, open{" "}
-        <strong>Identity → Devices → Add a device</strong> and type this code or scan it.
-      </p>
-      {props.state.notice ? <div className="alert alert-warning">{props.state.notice}</div> : null}
-      <output
-        className="d-block fs-3 font-monospace text-primary mb-3"
-        style={{ letterSpacing: "0.04em", wordBreak: "break-word" }}
-        aria-label="Pairing code"
-      >
-        {code}
-      </output>
-      <div className="d-inline-block bg-white rounded p-3 mb-3">
-        <QRCode value={code} size={200} aria-label="Pairing code QR" />
-      </div>
-      <p className="small text-muted">Expires in {formatCountdown(props.state.expiresAt)}</p>
-      <div className="d-flex gap-2 justify-content-center">
-        <button
-          type="button"
-          className="btn btn-outline-primary"
-          onClick={() => void copyToClipboard(code)}
-        >
-          Copy code
-        </button>
-        <button type="button" className="btn btn-outline-secondary" onClick={props.onCancel}>
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/** Signed-out destination flow: shows a code and QR, then installs credentials after approval. */
-export function DestinationDevicePairing(props: { onBack: () => void }) {
-  const state = useDevicePairingState();
-  const lifecycle = usePairingSessionLifecycle(state);
-  const [localError, setLocalError] = useState("");
-  const started = useRef(false);
-  const { cancel } = useCeremonyActions(lifecycle, props.onBack, setLocalError);
-  useCountdownClock(state.expiresAt);
-
-  useEffect(() => {
-    if (started.current) {
-      return;
-    }
-    started.current = true;
-    void identityTools()
-      .then(async (tools) => {
-        const result = await tools.startDestination({ deviceType: detectDeviceType() });
-        lifecycle.sessionId.current = result.sessionId;
-        lifecycle.phase.current = result.phase;
-        if (!lifecycle.mounted.current && result.sessionId) {
-          await tools.cancel({ sessionId: result.sessionId }).catch(() => undefined);
-        }
-      })
-      .catch(() => setLocalError("Could not reach the pairing service. Check your connection."));
-  }, []);
-
-  useEffect(() => {
-    if (state.phase !== "complete") {
-      return;
-    }
-    window.setTimeout(() => window.location.reload(), 750);
-  }, [state.phase]);
-
-  if (localError) {
-    return (
-      <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-        <div className="alert alert-danger">{localError}</div>
-        <button type="button" className="btn btn-outline-secondary" onClick={props.onBack}>
-          Back
-        </button>
-      </div>
-    );
-  }
-  if (TERMINAL_PHASES.includes(state.phase)) {
-    return <TerminalPanel state={state} onClose={props.onBack} />;
-  }
-  if (state.phase === "showing-code" && state.code) {
-    return <ShowingCode state={state} onCancel={() => void cancel()} />;
-  }
-  return (
-    <ProgressWithCancel
-      state={state}
-      messages={DESTINATION_PROGRESS_MESSAGES}
-      onCancel={() => void cancel()}
-    />
-  );
-}

package/src/screens/device-pairing/identity-ipc.ts

@@ -1,25 +0,0 @@
-import {
-  getIdentityContractDefinition,
-  hostContractConsumer,
-  type IHostContractConsumer,
-  type IIdentityConsumer,
-} from "@peers-app/peers-sdk";
-
-/**
- * Cached local-host consumer for System Identity.
- *
- * Pairing and session tools resolve before sign-in, so this handle passes no data context.
- */
-export const identityContract: IHostContractConsumer<IIdentityConsumer> = hostContractConsumer(
-  getIdentityContractDefinition(),
-);
-
-/** Return the typed local-host consumer for System Identity. */
-export async function getIdentityConsumer(): Promise<IIdentityConsumer> {
-  return identityContract.get();
-}
-
-/** Shorthand for `(await getIdentityConsumer()).tools`. */
-export async function identityTools(): Promise<IIdentityConsumer["tools"]> {
-  return (await getIdentityConsumer()).tools;
-}

package/src/screens/device-pairing/index.ts

@@ -1,2 +0,0 @@
-export * from "./device-pairing";
-export * from "./use-device-pairing-state";

package/src/screens/device-pairing/use-device-pairing-state.ts

@@ -1,15 +0,0 @@
-import type { DevicePairingState } from "@peers-app/peers-sdk";
-import { useObservable } from "../../hooks";
-import { useHostContract } from "../../hooks/use-host-contract";
-import { identityContract } from "./identity-ipc";
-
-const IDLE_PAIRING_STATE: DevicePairingState = { phase: "idle" };
-
-/** Subscribe to the host pairing ceremony. Idle until the identity consumer is ready. */
-export function useDevicePairingState(): DevicePairingState {
-  const { consumer } = useHostContract(identityContract);
-  const [state] = useObservable<DevicePairingState>(
-    consumer?.observables.state ?? IDLE_PAIRING_STATE,
-  );
-  return state ?? IDLE_PAIRING_STATE;
-}

package/src/screens/devices/devices-list.test.tsx

@@ -1,68 +0,0 @@
-import { type IDevice, TrustLevel } from "@peers-app/peers-sdk";
-import { render, screen } from "@testing-library/react";
-import { DeviceRow, devicesForUser } from "./devices-list";
-
-jest.mock("../../globals", () => ({
-  mainContentPath: jest.fn(),
-}));
-
-jest.mock("../../hooks", () => ({
-  useObservable: jest.fn(),
-  useObservableState: jest.fn(),
-  usePromise: jest.fn(),
-}));
-
-jest.mock("../device-pairing", () => ({
-  SourceDevicePairing: () => null,
-}));
-
-jest.mock("../invites/activity-view", () => ({
-  PendingWorkLink: () => null,
-}));
-
-jest.mock("../network-viewer/network-viewer-ipc", () => ({
-  getNetworkControlConsumer: jest.fn(),
-  getNetworkDiagnosticsConsumer: jest.fn(),
-}));
-
-function device(deviceId: string, userId: string, name: string): IDevice {
-  return {
-    deviceId,
-    userId,
-    name,
-    firstSeen: new Date("2026-01-01T00:00:00Z"),
-    lastSeen: new Date(),
-    trustLevel: TrustLevel.Trusted,
-  };
-}
-
-describe("Devices identity list", () => {
-  it("filters out devices owned by other users", () => {
-    const mine = device("abcdefghijklmnopqrstuvwxy", "mine000000000000000000001", "Laptop");
-    const theirs = device("zyxwvutsrqponmlkjihgfedcb", "theirs000000000000000001", "Other");
-
-    expect(devicesForUser([mine, theirs], mine.userId)).toEqual([mine]);
-  });
-
-  it("shows the current-device and connection context without a destructive row action", () => {
-    const mine = device("abcdefghijklmnopqrstuvwxy", "mine000000000000000000001", "Laptop");
-    render(
-      <DeviceRow
-        device={mine}
-        isThisDevice
-        connection={
-          {
-            deviceId: mine.deviceId,
-            connectionState: "connected",
-            pathType: "direct",
-          } as never
-        }
-      />,
-    );
-
-    expect(screen.getByText("Laptop")).toBeInTheDocument();
-    expect(screen.getByText("This device")).toBeInTheDocument();
-    expect(screen.getByText("Online")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /Forget/i })).not.toBeInTheDocument();
-  });
-});