@peers-app/peers-ui 0.23.13 → 0.24.0

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

@@ -1,8 +1,25 @@
-import { copyToClipboard, type DevicePairingState, rpcServerCalls } from "@peers-app/peers-sdk";
+import {
+  copyToClipboard,
+  type DevicePairingState,
+  parsePairingCode,
+  rpcServerCalls,
+} 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 { 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 "";
@@ -11,22 +28,60 @@ function formatCountdown(expiresAt?: number): string {
   return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
 }
 
-function PairingProgress({ state }: { state: DevicePairingState }) {
-  const messages: Partial<Record<DevicePairingState["phase"], string>> = {
-    inviting: "Waiting for the new device…",
-    connecting: "Establishing a secure connection…",
-    "waiting-for-approval": "Waiting for approval on the other device…",
-    transferring: "Installing encrypted account credentials…",
-  };
+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">{messages[state.phase] ?? "Working…"}</p>
+      <p className="text-muted mb-0">{props.messages[props.state.phase] ?? "Working…"}</p>
     </output>
   );
 }
 
-function PairingComparison(props: {
+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;
@@ -35,19 +90,13 @@ function PairingComparison(props: {
 }) {
   return (
     <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-      <h4>Compare these numbers</h4>
+      <h4>Add this device?</h4>
       <p className="text-muted">
-        Confirm that both devices show the same number and the expected device before approving.
+        The code matched. Approving sends your account credentials to this device so it can sign in
+        as you.
       </p>
-      <div
-        className="display-4 font-monospace text-primary mb-3"
-        style={{ letterSpacing: "0.12em" }}
-      >
-        {props.state.sas}
-      </div>
-      <p className="mb-4">
-        {props.state.remoteDevice?.deviceName || "Unnamed device"}
-        {props.state.remoteDevice?.deviceType ? ` (${props.state.remoteDevice.deviceType})` : ""}
+      <p className="fs-5 mb-4">
+        <RemoteDeviceLabel state={props.state} />
       </p>
       <div className="d-flex gap-2 justify-content-center">
         <button
@@ -56,7 +105,7 @@ function PairingComparison(props: {
           disabled={props.approving}
           onClick={props.onApprove}
         >
-          {props.approving ? "Approving…" : "Numbers match — approve"}
+          {props.approving ? "Approving…" : "Approve"}
         </button>
         <button
           type="button"
@@ -97,26 +146,15 @@ function TerminalPanel(props: { state: DevicePairingState; onClose: () => void }
   );
 }
 
-function ProgressWithCancel(props: { state: DevicePairingState; onCancel: () => void }) {
-  return (
-    <>
-      <PairingProgress state={props.state} />
-      <div className="text-center">
-        <button type="button" className="btn btn-outline-secondary" onClick={props.onCancel}>
-          Cancel
-        </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 && state.sessionId === sessionId.current) {
+    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]);
@@ -126,7 +164,7 @@ function usePairingSessionLifecycle(state: DevicePairingState) {
     return () => {
       mounted.current = false;
       const activeSessionId = sessionId.current;
-      if (activeSessionId && !["idle", "complete", "rejected", "error"].includes(phase.current)) {
+      if (activeSessionId && !["idle", ...TERMINAL_PHASES].includes(phase.current)) {
         void rpcServerCalls
           .devicePairingCancel({ sessionId: activeSessionId })
           .catch(() => undefined);
@@ -137,50 +175,12 @@ function usePairingSessionLifecycle(state: DevicePairingState) {
   return { sessionId, phase, mounted };
 }
 
-/** Signed-in source flow opened from Settings. */
-export function SourceDevicePairing(props: { onClose: () => void }) {
-  const state = useDevicePairingState();
-  const lifecycle = usePairingSessionLifecycle(state);
-  const started = useRef(false);
-  const [invitationUrl, setInvitationUrl] = useState("");
-  const [localError, setLocalError] = useState("");
+function useCeremonyActions(
+  lifecycle: ReturnType<typeof usePairingSessionLifecycle>,
+  onLeave: () => void,
+  setLocalError: (value: string) => void,
+) {
   const [approving, setApproving] = useState(false);
-  const [, setClock] = useState(0);
-
-  useEffect(() => {
-    if (started.current) {
-      return;
-    }
-    started.current = true;
-    void rpcServerCalls
-      .devicePairingStartSource()
-      .then(async (result) => {
-        lifecycle.sessionId.current = result.state.sessionId;
-        lifecycle.phase.current = result.state.phase;
-        if (!lifecycle.mounted.current && result.state.sessionId) {
-          await rpcServerCalls
-            .devicePairingCancel({ sessionId: result.state.sessionId })
-            .catch(() => undefined);
-          return;
-        }
-        setInvitationUrl(result.invitationUrl);
-      })
-      .catch(() => setLocalError("Could not create a pairing invitation."));
-  }, []);
-
-  useEffect(() => {
-    if (!state.expiresAt) {
-      return;
-    }
-    const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
-    return () => window.clearInterval(timer);
-  }, [state.expiresAt]);
-
-  useEffect(() => {
-    if (state.phase !== "inviting") {
-      setInvitationUrl("");
-    }
-  }, [state.phase]);
 
   const act = async (action: "approve" | "reject") => {
     const sessionId = lifecycle.sessionId.current;
@@ -207,139 +207,54 @@ export function SourceDevicePairing(props: { onClose: () => void }) {
     if (sessionId) {
       await rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
     }
-    props.onClose();
+    onLeave();
   };
 
-  if (localError) {
-    return <div className="alert alert-danger">{localError}</div>;
-  }
-  if (["complete", "rejected", "error"].includes(state.phase)) {
-    return <TerminalPanel state={state} onClose={props.onClose} />;
-  }
-  if (state.phase === "comparing" && state.sas) {
-    return (
-      <PairingComparison
-        state={state}
-        approving={approving}
-        onApprove={() => void act("approve")}
-        onReject={() => void act("reject")}
-        onCancel={() => void cancel()}
-      />
-    );
-  }
-  if (state.phase === "waiting-for-approval" || state.phase === "transferring") {
-    return <ProgressWithCancel state={state} onCancel={() => void cancel()} />;
-  }
-  if (invitationUrl) {
-    return (
-      <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
-        <p className="text-muted">Scan this on the signed-out device you want to add.</p>
-        <div className="d-inline-block bg-white rounded p-3 mb-3">
-          <QRCode value={invitationUrl} size={220} aria-label="Device pairing QR code" />
-        </div>
-        <p className="small text-muted">Expires in {formatCountdown(state.expiresAt)}</p>
-        <div className="d-flex gap-2 justify-content-center">
-          <button
-            type="button"
-            className="btn btn-outline-primary"
-            onClick={() => void copyToClipboard(invitationUrl)}
-          >
-            Copy pairing link
-          </button>
-          <button type="button" className="btn btn-outline-secondary" onClick={() => void cancel()}>
-            Cancel
-          </button>
-        </div>
-      </div>
-    );
-  }
-  return <PairingProgress state={state} />;
+  return { approving, act, cancel };
 }
 
-/** Signed-out destination flow opened by a QR link or manual invitation paste. */
-export function DestinationDevicePairing(props: {
-  initialInvitation?: string;
-  onInvitationConsumed?: () => void;
-  onBack: () => void;
-}) {
+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 [invitation, setInvitation] = useState(props.initialInvitation ?? "");
+  const [code, setCode] = useState("");
+  const [scanning, setScanning] = useState(false);
+  const [starting, setStarting] = useState(false);
   const [localError, setLocalError] = useState("");
-  const [approving, setApproving] = useState(false);
-  const autoStarted = useRef(false);
+  const { approving, act, cancel } = useCeremonyActions(lifecycle, props.onClose, setLocalError);
+  useCountdownClock(state.expiresAt);
 
-  const start = async (value = invitation) => {
+  const start = async (rawCode: string = code) => {
     setLocalError("");
+    setStarting(true);
     try {
-      const result = await rpcServerCalls.devicePairingStartDestination({
-        invitation: value.trim(),
-        deviceType: /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "browser",
-      });
+      const result = await rpcServerCalls.devicePairingStartSource({ code: rawCode.trim() });
       lifecycle.sessionId.current = result.sessionId;
       lifecycle.phase.current = result.phase;
       if (!lifecycle.mounted.current && result.sessionId) {
         await rpcServerCalls
           .devicePairingCancel({ sessionId: result.sessionId })
           .catch(() => undefined);
-        return;
       }
-      setInvitation("");
-      props.onInvitationConsumed?.();
     } catch {
-      setLocalError("That pairing invitation is invalid, expired, or unavailable.");
-    }
-  };
-
-  useEffect(() => {
-    if (!props.initialInvitation || autoStarted.current) {
-      return;
-    }
-    autoStarted.current = true;
-    void start(props.initialInvitation);
-  }, [props.initialInvitation]);
-
-  useEffect(() => {
-    if (state.phase !== "complete") {
-      return;
-    }
-    window.setTimeout(() => window.location.reload(), 750);
-  }, [state.phase]);
-
-  const act = async (action: "approve" | "reject") => {
-    const sessionId = lifecycle.sessionId.current;
-    if (!sessionId) {
-      return;
-    }
-    setApproving(true);
-    try {
-      if (action === "approve") {
-        await rpcServerCalls.devicePairingApprove({ sessionId });
-      } else {
-        await rpcServerCalls.devicePairingReject({ sessionId });
-      }
-    } catch {
-      setLocalError("Could not update the pairing ceremony.");
+      setLocalError("That code was not recognized or the new device is no longer waiting.");
     } finally {
-      setApproving(false);
-    }
-  };
-
-  const cancel = async () => {
-    const sessionId = lifecycle.sessionId.current;
-    lifecycle.phase.current = "idle";
-    if (sessionId) {
-      await rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
+      setStarting(false);
     }
-    props.onBack();
   };
 
-  if (["complete", "rejected", "error"].includes(state.phase)) {
-    return <TerminalPanel state={state} onClose={props.onBack} />;
+  if (TERMINAL_PHASES.includes(state.phase)) {
+    return <TerminalPanel state={state} onClose={props.onClose} />;
   }
-  if (state.phase === "comparing" && state.sas) {
+  if (state.phase === "waiting-for-approval") {
     return (
-      <PairingComparison
+      <SourceApproval
         state={state}
         approving={approving}
         onApprove={() => void act("approve")}
@@ -350,41 +265,201 @@ export function DestinationDevicePairing(props: {
   }
   if (
     state.phase === "connecting" ||
-    state.phase === "waiting-for-approval" ||
+    state.phase === "authenticating" ||
     state.phase === "transferring"
   ) {
-    return <ProgressWithCancel state={state} onCancel={() => void cancel()} />;
+    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 (
-    <div className="text-center" style={{ maxWidth: 500, margin: "0 auto" }}>
-      <h3>Sign in using another device</h3>
+    <form
+      className="text-center"
+      style={{ maxWidth: 440, margin: "0 auto" }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void start();
+      }}
+    >
       <p className="text-muted">
-        On a device already signed in to Peers, choose Add another device. Scan its QR code, or
-        paste the complete pairing link or token below.
+        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>
-      <textarea
-        className="form-control font-monospace mb-3"
-        rows={4}
-        placeholder="Paste pairing link or token"
-        value={invitation}
-        onChange={(event) => setInvitation(event.target.value)}
+      {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"
-        aria-label="Device pairing invitation"
+        autoCapitalize="none"
+        spellCheck={false}
+        aria-label="Pairing code"
+        disabled={starting}
       />
       {localError ? <div className="alert alert-danger">{localError}</div> : null}
-      <div className="d-grid gap-2">
+      <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 Settings → <strong>Add another 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-primary btn-lg"
-          disabled={!invitation.trim()}
-          onClick={() => void start()}
+          className="btn btn-outline-primary"
+          onClick={() => void copyToClipboard(code)}
         >
-          Connect securely
+          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 rpcServerCalls
+      .devicePairingStartDestination({ deviceType: detectDeviceType() })
+      .then(async (result) => {
+        lifecycle.sessionId.current = result.sessionId;
+        lifecycle.phase.current = result.phase;
+        if (!lifecycle.mounted.current && result.sessionId) {
+          await rpcServerCalls
+            .devicePairingCancel({ 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>
-    </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/index.ts

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