@peers-app/peers-ui 0.23.14 → 0.24.0

package/src/screens/invites/accept-invite.tsx

@@ -0,0 +1,271 @@
+import {
+  getRoleLabel,
+  type IAcceptInviteResult,
+  type IInvitePreview,
+  TrustLevel,
+} from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useState } from "react";
+import { canScanQr, QrScanner } from "../../components/qr-scanner";
+import { mainContentPath } from "../../globals";
+import { consumePendingInvite, inviteCaptured } from "./invite-capture";
+import { inviteTools } from "./invites-ipc";
+
+/** Props for {@link AcceptInvite}. */
+export interface AcceptInviteProps {
+  /** Token to preview immediately (e.g. from a deep link); otherwise the paste box is shown. */
+  initialToken?: string;
+  onDone?: () => void;
+}
+
+const TRUST_OPTIONS: Array<{ value: TrustLevel; label: string }> = [
+  { value: TrustLevel.NewUser, label: "New user (default)" },
+  { value: TrustLevel.Known, label: "Known" },
+  { value: TrustLevel.Trusted, label: "Trusted" },
+];
+
+function PreviewCard(props: { preview: IInvitePreview }) {
+  const { preview } = props;
+  const inviter = preview.inviter.displayName || preview.inviter.userId;
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        <h5 className="card-title mb-2">
+          {preview.type === "group" ? `Join ${preview.group?.name}` : `Connect with ${inviter}`}
+        </h5>
+        <div className="small text-muted">
+          From <strong>{inviter}</strong>
+          {preview.knownContact ? " (already a contact)" : ""}
+        </div>
+        {preview.group ? (
+          <div className="small text-muted">
+            You would join as <strong>{getRoleLabel(preview.group.role)}</strong>
+            {preview.group.mode === "open" ? " · joins immediately" : " · the inviter must approve"}
+            {preview.group.alreadyMember ? " · you are already a member" : ""}
+          </div>
+        ) : null}
+        <div className={`small ${preview.expired ? "text-danger" : "text-muted"}`}>
+          {preview.expired ? "Expired " : "Expires "}
+          {new Date(preview.expiresAt).toLocaleString()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ResultPanel(props: {
+  result: IAcceptInviteResult;
+  preview: IInvitePreview;
+  onDone: () => void;
+}) {
+  const { result, preview } = props;
+  const accepted = result.status === "accepted";
+  const message = accepted
+    ? preview.type === "group"
+      ? `You joined ${preview.group?.name}.`
+      : "Contact added."
+    : preview.type === "group"
+      ? "Join request sent. You will be added once it is approved."
+      : "Request sent. They will see it and confirm.";
+  return (
+    <div className="text-center">
+      <output className={`alert d-block ${accepted ? "alert-success" : "alert-info"}`}>
+        {message}
+        {result.deliveryState === "queued" ? (
+          <div className="small mt-1">Queued until the other person is reachable.</div>
+        ) : null}
+      </output>
+      <div className="d-flex gap-2 justify-content-center">
+        {accepted && result.groupId ? (
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => mainContentPath(`groups/${result.groupId}`)}
+          >
+            Open group
+          </button>
+        ) : null}
+        <button type="button" className="btn btn-outline-secondary" onClick={props.onDone}>
+          Done
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Paste or scan an invite, review what it grants, then accept it. Also consumes a token
+ * captured from a link or `peers://` open before this screen mounted.
+ */
+export function AcceptInvite(props: AcceptInviteProps) {
+  const [text, setText] = useState(props.initialToken ?? "");
+  const [scanning, setScanning] = useState(false);
+  const [preview, setPreview] = useState<IInvitePreview | undefined>(undefined);
+  const [result, setResult] = useState<IAcceptInviteResult | undefined>(undefined);
+  const [trustLevel, setTrustLevel] = useState<TrustLevel>(TrustLevel.NewUser);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const runPreview = useCallback(async (token: string) => {
+    setError("");
+    setBusy(true);
+    try {
+      const tools = await inviteTools();
+      const response = await tools.previewInvite({ token });
+      setPreview(response.preview);
+      setText(token);
+    } catch (err) {
+      setPreview(undefined);
+      setError((err as Error).message || "That is not a valid invite.");
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  // Deep-linked tokens: one stashed before mount, or one arriving while mounted.
+  useEffect(() => {
+    const stashed = props.initialToken ?? consumePendingInvite();
+    if (stashed) {
+      void runPreview(stashed);
+    }
+    const sub = inviteCaptured.subscribe(() => {
+      const token = consumePendingInvite();
+      if (token) {
+        void runPreview(token);
+      }
+    });
+    return () => sub.dispose();
+  }, [props.initialToken, runPreview]);
+
+  const accept = async () => {
+    setError("");
+    setBusy(true);
+    try {
+      const tools = await inviteTools();
+      const response = await tools.acceptInvite({ token: text, trustLevel });
+      setResult(response.result);
+    } catch (err) {
+      setError((err as Error).message || "Could not accept the invite.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const reset = () => {
+    setText("");
+    setPreview(undefined);
+    setResult(undefined);
+    setError("");
+  };
+
+  const done = props.onDone ?? reset;
+
+  if (result && preview) {
+    return <ResultPanel result={result} preview={preview} onDone={done} />;
+  }
+
+  if (scanning) {
+    return (
+      <div className="text-center">
+        <QrScanner
+          onScan={(scanned) => {
+            setScanning(false);
+            void runPreview(scanned);
+          }}
+          onError={(message) => {
+            setScanning(false);
+            setError(message);
+          }}
+        />
+        <button
+          type="button"
+          className="btn btn-outline-secondary mt-3"
+          onClick={() => setScanning(false)}
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: 520, margin: "0 auto" }}>
+      {preview ? (
+        <>
+          <PreviewCard preview={preview} />
+          {!preview.knownContact ? (
+            <div className="mb-3">
+              <label htmlFor="invite-trust" className="form-label small text-muted mb-1">
+                Trust level for {preview.inviter.displayName || "this contact"}
+              </label>
+              <select
+                id="invite-trust"
+                className="form-select form-select-sm"
+                value={trustLevel}
+                onChange={(event) => setTrustLevel(Number(event.target.value) as TrustLevel)}
+                disabled={busy}
+              >
+                {TRUST_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : null}
+          {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+          <div className="d-flex gap-2">
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={busy || preview.expired || preview.group?.alreadyMember}
+              onClick={() => void accept()}
+            >
+              {busy ? "Working…" : preview.type === "group" ? "Join" : "Accept"}
+            </button>
+            <button type="button" className="btn btn-outline-secondary" onClick={reset}>
+              Back
+            </button>
+          </div>
+        </>
+      ) : (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            void runPreview(text);
+          }}
+        >
+          <label htmlFor="invite-text" className="form-label">
+            Paste an invite link or code
+          </label>
+          <textarea
+            id="invite-text"
+            className="form-control font-monospace mb-2"
+            rows={3}
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            placeholder="https://peers.app/i#…"
+            disabled={busy}
+            spellCheck={false}
+          />
+          {error ? <div className="alert alert-danger py-2">{error}</div> : null}
+          <div className="d-flex gap-2">
+            <button type="submit" className="btn btn-primary" disabled={busy || !text.trim()}>
+              {busy ? "Checking…" : "Continue"}
+            </button>
+            {canScanQr() ? (
+              <button
+                type="button"
+                className="btn btn-outline-primary"
+                disabled={busy}
+                onClick={() => setScanning(true)}
+              >
+                <i className="bi bi-qr-code-scan me-1" />
+                Scan QR
+              </button>
+            ) : null}
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/screens/invites/index.ts

@@ -0,0 +1,9 @@
+// Import the screen so it registers its routes.
+import "./invites-screen";
+
+export * from "./accept-invite";
+export * from "./invite-capture";
+export * from "./invite-share";
+export * from "./invites-ipc";
+export * from "./invites-screen";
+export * from "./pending-invites-list";

package/src/screens/invites/invite-capture.ts

@@ -0,0 +1,107 @@
+/**
+ * Captures an inbound invite token from the page URL or a desktop `peers://` open-url event
+ * and holds it (tab-scoped) until the signed-in UI can route to the Accept screen.
+ *
+ * Tokens travel only in URL fragments and are stripped from the address bar immediately so
+ * startup route restoration never persists them.
+ */
+
+import { extractInviteTokenText, observable } from "@peers-app/peers-sdk";
+
+/** sessionStorage key for a captured token awaiting the Accept screen. */
+export const PENDING_INVITE_STORAGE_KEY = "peers.pendingInviteToken";
+
+/** Route of the Accept-invite screen. */
+export const ACCEPT_INVITE_PATH = "invites/accept";
+
+/** Fires whenever a new token is captured, so a mounted app can navigate immediately. */
+export const inviteCaptured = observable<string | undefined>(undefined);
+
+type IpcRendererLike = {
+  on: (channel: string, listener: (event: unknown, ...args: unknown[]) => void) => void;
+  removeAllListeners: (channel: string) => void;
+};
+
+/**
+ * Pull a token out of a URL fragment or deep link if one is present.
+ * Accepts `#invite=<token>`, `https://peers.app/i#<token>`, and `peers://i#<token>`.
+ */
+export function inviteTokenFromUrl(url: string): string | undefined {
+  const hash = url.indexOf("#");
+  if (hash < 0) {
+    return undefined;
+  }
+  const before = url.slice(0, hash);
+  const fragment = url.slice(hash + 1);
+  const isInviteFragment = fragment.startsWith("invite=");
+  const isLandingPage = /^peers:\/\/i\/?$/.test(before) || /^https?:\/\/[^/]+\/i\/?$/.test(before);
+  if (!isInviteFragment && !isLandingPage) {
+    return undefined;
+  }
+  try {
+    return extractInviteTokenText(url);
+  } catch {
+    return undefined;
+  }
+}
+
+/** Store a token for the Accept screen and notify listeners. */
+export function stashPendingInvite(token: string, storage: Storage = sessionStorage): void {
+  storage.setItem(PENDING_INVITE_STORAGE_KEY, token);
+  inviteCaptured(token);
+}
+
+/** Read the stored token without consuming it. */
+export function peekPendingInvite(storage: Storage = sessionStorage): string | undefined {
+  return storage.getItem(PENDING_INVITE_STORAGE_KEY) ?? undefined;
+}
+
+/** Read and clear the stored token. */
+export function consumePendingInvite(storage: Storage = sessionStorage): string | undefined {
+  const token = peekPendingInvite(storage);
+  storage.removeItem(PENDING_INVITE_STORAGE_KEY);
+  return token;
+}
+
+/**
+ * Capture `#invite=<token>` from the current location, strip it from the URL, and stash it.
+ * Safe to call repeatedly; returns the captured token when one was present.
+ */
+export function captureInviteFromLocation(
+  locationLike: Pick<Location, "href" | "pathname" | "search"> = window.location,
+  historyLike: Pick<History, "replaceState" | "state"> = window.history,
+  storage: Storage = sessionStorage,
+): string | undefined {
+  const token = inviteTokenFromUrl(locationLike.href);
+  if (!token) {
+    return undefined;
+  }
+  historyLike.replaceState(
+    historyLike.state ?? null,
+    "",
+    `${locationLike.pathname}${locationLike.search}`,
+  );
+  stashPendingInvite(token, storage);
+  return token;
+}
+
+/**
+ * Listen for `peers://` links forwarded by the Electron main process (`peers-open-url`).
+ * No-op outside Electron. Returns an unsubscribe function.
+ */
+export function listenForOpenUrlInvites(): () => void {
+  const ipc = (window as Window & { ipcRenderer?: IpcRendererLike }).ipcRenderer;
+  if (!ipc) {
+    return () => {};
+  }
+  ipc.on("peers-open-url", (_event, url) => {
+    if (typeof url !== "string") {
+      return;
+    }
+    const token = inviteTokenFromUrl(url);
+    if (token) {
+      stashPendingInvite(token);
+    }
+  });
+  return () => ipc.removeAllListeners("peers-open-url");
+}

package/src/screens/invites/invite-share.tsx

@@ -0,0 +1,104 @@
+import { copyToClipboard, type ICreatedInvite } from "@peers-app/peers-sdk";
+import { useState } from "react";
+import QRCode from "react-qr-code";
+
+/** Props for {@link InviteShare}. */
+export interface InviteShareProps {
+  invite: ICreatedInvite;
+  /** Short line under the heading explaining what accepting grants. */
+  description?: string;
+  /** Body text used by the native share sheet; defaults to a generic line. */
+  shareText?: string;
+  onDone?: () => void;
+}
+
+function canNativeShare(): boolean {
+  return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+
+/**
+ * Presents an issued invite as a QR code plus copyable link and token. The QR encodes the
+ * landing-page URL so phone cameras, the in-app scanner, and the desktop handler all work.
+ */
+export function InviteShare(props: InviteShareProps) {
+  const { invite } = props;
+  const [copied, setCopied] = useState<"link" | "token" | undefined>(undefined);
+  const expires = new Date(invite.token.expiresAt);
+
+  const copy = async (what: "link" | "token") => {
+    await copyToClipboard(what === "link" ? invite.url : invite.encoded);
+    setCopied(what);
+    window.setTimeout(() => setCopied(undefined), 1500);
+  };
+
+  const share = async () => {
+    try {
+      await navigator.share({
+        title: "Peers invite",
+        text: props.shareText ?? "Join me on Peers:",
+        url: invite.url,
+      });
+    } catch {
+      // User dismissed the share sheet; nothing to do.
+    }
+  };
+
+  return (
+    <div className="text-center" style={{ maxWidth: 440, margin: "0 auto" }}>
+      {props.description ? <p className="text-muted">{props.description}</p> : null}
+      <div className="d-inline-block bg-white rounded p-3 mb-2">
+        <QRCode value={invite.url} size={200} aria-label="Invite QR code" />
+      </div>
+      <p className="small text-muted mb-3">
+        Expires {expires.toLocaleString()}
+        {invite.token.uses === "unlimited" ? " · reusable" : " · single use"}
+      </p>
+      <div className="input-group input-group-sm mb-2">
+        <input
+          className="form-control font-monospace"
+          readOnly
+          value={invite.url}
+          aria-label="Invite link"
+          onFocus={(event) => event.currentTarget.select()}
+        />
+        <button type="button" className="btn btn-outline-primary" onClick={() => void copy("link")}>
+          {copied === "link" ? "Copied" : "Copy link"}
+        </button>
+      </div>
+      <details className="text-start small mb-3">
+        <summary className="text-muted" style={{ cursor: "pointer" }}>
+          No camera or link? Share the code text instead
+        </summary>
+        <div className="input-group input-group-sm mt-2">
+          <input
+            className="form-control font-monospace"
+            readOnly
+            value={invite.encoded}
+            aria-label="Invite code"
+            onFocus={(event) => event.currentTarget.select()}
+          />
+          <button
+            type="button"
+            className="btn btn-outline-secondary"
+            onClick={() => void copy("token")}
+          >
+            {copied === "token" ? "Copied" : "Copy"}
+          </button>
+        </div>
+      </details>
+      <div className="d-flex gap-2 justify-content-center">
+        {canNativeShare() ? (
+          <button type="button" className="btn btn-primary" onClick={() => void share()}>
+            <i className="bi bi-share me-1" />
+            Share…
+          </button>
+        ) : null}
+        {props.onDone ? (
+          <button type="button" className="btn btn-outline-secondary" onClick={props.onDone}>
+            Done
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/screens/invites/invites-ipc.ts

@@ -0,0 +1,74 @@
+import {
+  createContractConsumer,
+  getHostContractTransport,
+  getInvitesContractDefinition,
+  getUserContext,
+  type IContractTransport,
+  type IInvitesConsumer,
+  subscribeHostContractTransport,
+  waitForHostContractTransport,
+} from "@peers-app/peers-sdk";
+
+const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
+
+let cached: { transport: IContractTransport; consumer: IInvitesConsumer } | undefined;
+let pending: Promise<IInvitesConsumer> | undefined;
+
+subscribeHostContractTransport(
+  (transport) => {
+    if (cached && cached.transport !== transport) {
+      cached.consumer.dispose();
+      cached = undefined;
+      pending = undefined;
+    }
+  },
+  { emitCurrent: false },
+);
+
+async function load(transport: IContractTransport): Promise<IInvitesConsumer> {
+  const userContext = await getUserContext();
+  const consumer = createContractConsumer(getInvitesContractDefinition(), transport, {
+    dataContextId: userContext.userId,
+  }) as unknown as IInvitesConsumer;
+  try {
+    await consumer.loadingPromise;
+    if (getHostContractTransport() !== transport) {
+      consumer.dispose();
+      return getInvitesConsumer();
+    }
+    cached = { transport, consumer };
+    return consumer;
+  } catch (error) {
+    consumer.dispose();
+    throw error;
+  }
+}
+
+/**
+ * Return the typed local-host consumer for the System Invites contract.
+ *
+ * The consumer is cached per host transport and rebuilt if the transport is replaced
+ * (e.g. after a socket reconnect).
+ */
+export async function getInvitesConsumer(): Promise<IInvitesConsumer> {
+  const transport =
+    getHostContractTransport() ??
+    (await waitForHostContractTransport({ timeoutMs: HOST_TRANSPORT_TIMEOUT_MS }));
+  if (cached?.transport === transport) {
+    return cached.consumer;
+  }
+  if (pending) {
+    return pending;
+  }
+  pending = load(transport);
+  try {
+    return await pending;
+  } finally {
+    pending = undefined;
+  }
+}
+
+/** Shorthand for `(await getInvitesConsumer()).tools`. */
+export async function inviteTools(): Promise<IInvitesConsumer["tools"]> {
+  return (await getInvitesConsumer()).tools;
+}

package/src/screens/invites/invites-screen.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+import { AcceptInvite } from "./accept-invite";
+import { ACCEPT_INVITE_PATH, peekPendingInvite } from "./invite-capture";
+import { PendingInvitesList } from "./pending-invites-list";
+
+/** Screen props supplied by the router. */
+export interface InvitesScreenProps {
+  /** When `true`, the Accept panel starts open (the `invites/accept` route). */
+  accept?: boolean;
+}
+
+/**
+ * Invites hub: accept a pasted/scanned/deep-linked invite and review everything pending.
+ */
+export function InvitesScreen(props: InvitesScreenProps) {
+  const [accepting, setAccepting] = useState(Boolean(props.accept || peekPendingInvite()));
+  return (
+    <div className="container-fluid p-3" style={{ maxWidth: 720 }}>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h4 className="mb-0">
+          <i className="bi bi-envelope-paper me-2" />
+          Invites
+        </h4>
+        {!accepting ? (
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={() => setAccepting(true)}
+          >
+            <i className="bi bi-box-arrow-in-right me-1" />
+            Accept an invite
+          </button>
+        ) : null}
+      </div>
+
+      {accepting ? (
+        <div className="card mb-4">
+          <div className="card-body">
+            <h6 className="card-title">Accept an invite</h6>
+            <AcceptInvite onDone={() => setAccepting(false)} />
+          </div>
+        </div>
+      ) : null}
+
+      <PendingInvitesList title="Waiting on you or others" />
+      <details className="mt-3">
+        <summary className="small text-muted" style={{ cursor: "pointer" }}>
+          Recent history
+        </summary>
+        <div className="mt-2">
+          <PendingInvitesList statuses={["accepted", "declined", "expired", "revoked"]} />
+        </div>
+      </details>
+    </div>
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: "00invites0screen000000001",
+  component: InvitesScreen,
+  routes: [
+    {
+      isMatch: (props, context) => {
+        if (context.path === "invites") {
+          return true;
+        }
+        if (context.path === ACCEPT_INVITE_PATH) {
+          props.accept = true;
+          return true;
+        }
+        return false;
+      },
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});