@peers-app/peers-ui 0.23.14 → 0.24.0

package/dist/screens/contacts/user-connect.js

@@ -1,487 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserConnect = UserConnect;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Connect-to-user screen: QR invite, link share, manual code entry, and trust confirmation.
- */
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
-const react_qr_code_1 = __importDefault(require("react-qr-code"));
-const globals_1 = require("../../globals");
-const hooks_1 = require("../../hooks");
-const ui_loader_1 = require("../../ui-router/ui-loader");
-const user_connect_invite_1 = require("./user-connect-invite");
-const ERROR_COPY = {
-    "invalid-code": {
-        title: "That invite isn’t valid",
-        body: "Check the link or code and try again, or create a new invite.",
-    },
-    "no-route": {
-        title: "This device isn’t connected yet",
-        body: "Connect this device to the internet or another Peers device, then try again.",
-    },
-    "not-found-or-expired": {
-        title: "Invite not found or expired",
-        body: "Ask the other person to create a new invite, or enter a fresh code.",
-    },
-    "remote-not-waiting": {
-        title: "The other device stopped waiting",
-        body: "Ask them to open Connect again and create a new invite.",
-    },
-    canceled: {
-        title: "Connection canceled",
-        body: "You can create a new invite or enter another code whenever you’re ready.",
-    },
-    "protocol-error": {
-        title: "Something went wrong",
-        body: "Try again in a moment. If it keeps failing, create a new invite.",
-    },
-};
-function errorMessage(error) {
-    const base = ERROR_COPY[error.code];
-    if (error.code === "protocol-error" && error.detail) {
-        return { title: base.title, body: base.body };
-    }
-    return base;
-}
-function formatCountdown(remainingMs) {
-    const clamped = Math.max(0, remainingMs);
-    const totalSeconds = Math.ceil(clamped / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-}
-function canShare() {
-    return typeof navigator !== "undefined" && typeof navigator.share === "function";
-}
-/**
- * Polished Connect to user screen. Creating an invite is the default path;
- * inbound links open a review state before connecting.
- */
-function UserConnect() {
-    const [phase, setPhase] = (0, react_1.useState)("offer");
-    const [connectionCode, setConnectionCode] = (0, react_1.useState)("");
-    const [inviteUrl, setInviteUrl] = (0, react_1.useState)("");
-    const [expiresAt, setExpiresAt] = (0, react_1.useState)(null);
-    const [remainingMs, setRemainingMs] = (0, react_1.useState)(peers_sdk_1.USER_CONNECT_TTL_MS);
-    const [inputCode, setInputCode] = (0, react_1.useState)("");
-    const [reviewCode, setReviewCode] = (0, react_1.useState)("");
-    const [result, setResult] = (0, react_1.useState)(null);
-    const [localError, setLocalError] = (0, react_1.useState)(null);
-    const [feedback, setFeedback] = (0, react_1.useState)("");
-    const [submitting, setSubmitting] = (0, react_1.useState)(false);
-    const [hasRoute, setHasRoute] = (0, react_1.useState)(null);
-    const [connectStatus] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectStatus);
-    const [answerCode] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectCodeAnswer);
-    const completedRef = (0, react_1.useRef)(false);
-    const offerStartedRef = (0, react_1.useRef)(false);
-    const answerWasActiveRef = (0, react_1.useRef)(false);
-    const protocolActiveRef = (0, react_1.useRef)(false);
-    const ceremonyGenerationRef = (0, react_1.useRef)(0);
-    const clearCeremony = (0, react_1.useCallback)((options) => {
-        ceremonyGenerationRef.current += 1;
-        completedRef.current = false;
-        answerWasActiveRef.current = false;
-        protocolActiveRef.current = false;
-        (0, peers_sdk_1.userConnectCodeOffer)("");
-        (0, peers_sdk_1.userConnectCodeAnswer)("");
-        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
-        if (!options?.preservePendingIntent) {
-            (0, user_connect_invite_1.clearUserConnectPendingIntent)();
-        }
-    }, []);
-    const startOffer = (0, react_1.useCallback)(() => {
-        completedRef.current = false;
-        clearCeremony();
-        const code = (0, peers_sdk_1.generateConnectionCode)();
-        const formatted = (0, peers_sdk_1.formatConnectionCode)(code.code);
-        setConnectionCode(formatted);
-        setInviteUrl((0, user_connect_invite_1.buildUserConnectInviteUrl)(code.code));
-        setExpiresAt(Date.now() + peers_sdk_1.USER_CONNECT_TTL_MS);
-        setRemainingMs(peers_sdk_1.USER_CONNECT_TTL_MS);
-        setLocalError(null);
-        setResult(null);
-        setFeedback("");
-        setSubmitting(false);
-        setPhase("offer");
-        (0, peers_sdk_1.userConnectCodeOffer)(code.code);
-    }, [clearCeremony]);
-    const showError = (0, react_1.useCallback)((error) => {
-        answerWasActiveRef.current = false;
-        protocolActiveRef.current = false;
-        setLocalError(error);
-        setSubmitting(false);
-        setPhase("error");
-    }, []);
-    const applyPendingInvite = (0, react_1.useCallback)(() => {
-        const pending = (0, user_connect_invite_1.readUserConnectPendingIntent)();
-        if (!pending.ok && pending.reason === "none") {
-            return false;
-        }
-        clearCeremony({ preservePendingIntent: true });
-        offerStartedRef.current = true;
-        setConnectionCode("");
-        setInviteUrl("");
-        setExpiresAt(null);
-        setLocalError(null);
-        setResult(null);
-        setFeedback("");
-        setSubmitting(false);
-        if (!pending.ok && pending.reason === "invalid") {
-            setReviewCode("");
-            setInputCode("");
-            setLocalError({ code: "invalid-code" });
-            setPhase("error");
-            return true;
-        }
-        if (!pending.ok && pending.reason === "expired") {
-            setReviewCode("");
-            setInputCode("");
-            setPhase("expired");
-            return true;
-        }
-        if (pending.ok) {
-            const formatted = (0, peers_sdk_1.formatConnectionCode)(pending.intent.code);
-            setReviewCode(formatted);
-            setInputCode(formatted);
-            setPhase("review");
-        }
-        return true;
-    }, [clearCeremony]);
-    const refreshRouteStatus = (0, react_1.useCallback)(async () => {
-        try {
-            const devices = await peers_sdk_1.rpcServerCalls.listConnectedDevices();
-            setHasRoute(devices.length > 0);
-        }
-        catch {
-            // If the RPC is unavailable, do not block entry — route may appear shortly.
-            setHasRoute(null);
-        }
-    }, []);
-    // Capture inbound intent once on mount; otherwise auto-start an offer.
-    (0, react_1.useEffect)(() => {
-        if (applyPendingInvite()) {
-            return;
-        }
-        if (!offerStartedRef.current) {
-            offerStartedRef.current = true;
-            startOffer();
-        }
-    }, [applyPendingInvite, startOffer]);
-    // A second invite can arrive while this screen is already mounted.
-    (0, react_1.useEffect)(() => {
-        const captureInboundInvite = () => {
-            const path = window.location.hash.slice(1).split("?")[0];
-            if (path !== "contacts/connect") {
-                return;
-            }
-            const captured = (0, user_connect_invite_1.captureUserConnectInviteFromLocation)();
-            if (captured.ok || captured.reason !== "none") {
-                applyPendingInvite();
-            }
-        };
-        window.addEventListener("hashchange", captureInboundInvite);
-        return () => window.removeEventListener("hashchange", captureInboundInvite);
-    }, [applyPendingInvite]);
-    (0, react_1.useEffect)(() => {
-        void refreshRouteStatus();
-    }, [refreshRouteStatus]);
-    // Countdown while an offer is active.
-    (0, react_1.useEffect)(() => {
-        if (phase !== "offer" || expiresAt === null) {
-            return;
-        }
-        const tick = () => {
-            const remaining = expiresAt - Date.now();
-            setRemainingMs(remaining);
-            if (remaining <= 0) {
-                clearCeremony();
-                setPhase("expired");
-            }
-        };
-        tick();
-        const id = window.setInterval(tick, 1000);
-        return () => window.clearInterval(id);
-    }, [phase, expiresAt, clearCeremony]);
-    const handleProtocolStatus = (0, react_1.useCallback)(async (status) => {
-        if (!status || completedRef.current) {
-            return;
-        }
-        if (status.kind === "connecting") {
-            protocolActiveRef.current = true;
-            return;
-        }
-        if (status.kind === "connected") {
-            const generation = ceremonyGenerationRef.current;
-            completedRef.current = true;
-            try {
-                const userContext = await (0, peers_sdk_1.getUserContext)();
-                const me = await (0, peers_sdk_1.getMe)();
-                const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(status.remoteUserId);
-                if (generation !== ceremonyGenerationRef.current) {
-                    return;
-                }
-                if (!remoteUser) {
-                    showError({ code: "protocol-error", detail: "Could not find connected user" });
-                    return;
-                }
-                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).get(status.remoteDeviceId);
-                if (generation !== ceremonyGenerationRef.current) {
-                    return;
-                }
-                if (!remoteDevice) {
-                    showError({
-                        code: "protocol-error",
-                        detail: "Could not find connected device",
-                    });
-                    return;
-                }
-                const myInfo = {
-                    userId: me.userId,
-                    publicKey: me.publicKey,
-                    publicBoxKey: me.publicBoxKey,
-                    deviceId: userContext.deviceId(),
-                };
-                const remoteInfo = {
-                    userId: remoteUser.userId,
-                    publicKey: remoteUser.publicKey,
-                    publicBoxKey: remoteUser.publicBoxKey,
-                    deviceId: remoteDevice.deviceId,
-                };
-                setResult({
-                    remoteUser,
-                    confirmationHash: (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo),
-                });
-                (0, user_connect_invite_1.clearUserConnectPendingIntent)();
-                (0, peers_sdk_1.userConnectCodeOffer)("");
-                (0, peers_sdk_1.userConnectCodeAnswer)("");
-                setSubmitting(false);
-                setPhase("success");
-            }
-            catch (err) {
-                if (generation !== ceremonyGenerationRef.current) {
-                    return;
-                }
-                showError({
-                    code: "protocol-error",
-                    detail: err instanceof Error ? err.message : String(err),
-                });
-            }
-            return;
-        }
-        if (status.kind === "error") {
-            showError({ code: status.code, detail: status.detail });
-        }
-    }, [showError]);
-    (0, react_1.useEffect)(() => {
-        void handleProtocolStatus(connectStatus);
-    }, [connectStatus, handleProtocolStatus]);
-    (0, react_1.useEffect)(() => {
-        if (phase !== "connecting" ||
-            !connectStatus ||
-            connectStatus.kind !== "idle" ||
-            (answerCode && !protocolActiveRef.current) ||
-            (!answerCode && !answerWasActiveRef.current)) {
-            return;
-        }
-        // Terminal handlers publish error/connected immediately after clearing the
-        // answer. Defer idle recovery one turn so those statuses win.
-        const timeout = window.setTimeout(() => {
-            const latestStatus = (0, peers_sdk_1.userConnectStatus)();
-            const latestAnswer = (0, peers_sdk_1.userConnectCodeAnswer)();
-            if (latestStatus.kind !== "idle") {
-                return;
-            }
-            if (latestAnswer) {
-                if (protocolActiveRef.current) {
-                    clearCeremony();
-                    showError({ code: "canceled" });
-                }
-                return;
-            }
-            if (answerWasActiveRef.current) {
-                clearCeremony();
-                setSubmitting(false);
-                setPhase("expired");
-            }
-        }, 0);
-        return () => window.clearTimeout(timeout);
-    }, [answerCode, clearCeremony, connectStatus, phase, showError]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            // Leaving the screen cancels an in-flight offer/answer.
-            (0, peers_sdk_1.userConnectCodeOffer)("");
-            (0, peers_sdk_1.userConnectCodeAnswer)("");
-            (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
-            const path = window.location.hash.slice(1).split("?")[0];
-            if (path !== "contacts/connect") {
-                (0, user_connect_invite_1.clearUserConnectPendingIntent)();
-            }
-        };
-    }, []);
-    const handleConfirmReview = (0, react_1.useCallback)(async () => {
-        if (submitting)
-            return;
-        const pending = (0, user_connect_invite_1.readUserConnectPendingIntent)();
-        if (!pending.ok) {
-            if (pending.reason === "invalid" || pending.reason === "expired") {
-                applyPendingInvite();
-            }
-            else {
-                showError({ code: "canceled" });
-            }
-            return;
-        }
-        const normalized = (0, user_connect_invite_1.normalizeUserConnectCode)(reviewCode);
-        if (!normalized || normalized !== pending.intent.code) {
-            showError({ code: "invalid-code" });
-            return;
-        }
-        ceremonyGenerationRef.current += 1;
-        completedRef.current = false;
-        answerWasActiveRef.current = true;
-        protocolActiveRef.current = false;
-        setSubmitting(true);
-        setPhase("connecting");
-        setLocalError(null);
-        (0, user_connect_invite_1.clearUserConnectPendingIntent)();
-        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
-        (0, peers_sdk_1.userConnectCodeAnswer)(normalized);
-    }, [applyPendingInvite, reviewCode, showError, submitting]);
-    const handleManualConnect = (0, react_1.useCallback)(async () => {
-        if (submitting)
-            return;
-        const normalized = (0, user_connect_invite_1.normalizeUserConnectCode)(inputCode);
-        if (!normalized) {
-            setLocalError({ code: "invalid-code" });
-            return;
-        }
-        ceremonyGenerationRef.current += 1;
-        completedRef.current = false;
-        answerWasActiveRef.current = true;
-        protocolActiveRef.current = false;
-        setSubmitting(true);
-        setPhase("connecting");
-        setLocalError(null);
-        (0, user_connect_invite_1.clearUserConnectPendingIntent)();
-        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
-        (0, peers_sdk_1.userConnectCodeAnswer)(normalized);
-    }, [inputCode, submitting]);
-    const handleCancel = (0, react_1.useCallback)(() => {
-        clearCeremony();
-        setSubmitting(false);
-        setLocalError(null);
-        setResult(null);
-        (0, globals_1.mainContentPath)("contacts");
-    }, [clearCeremony]);
-    const handleEnterManual = (0, react_1.useCallback)(() => {
-        clearCeremony();
-        setSubmitting(false);
-        setLocalError(null);
-        setInputCode("");
-        setPhase("manual");
-    }, [clearCeremony]);
-    const handleCopyLink = (0, react_1.useCallback)(async () => {
-        if (!inviteUrl)
-            return;
-        const ok = await (0, peers_sdk_1.copyToClipboard)(inviteUrl);
-        setFeedback(ok ? "Link copied" : "Could not copy link");
-        window.setTimeout(() => setFeedback(""), 2000);
-    }, [inviteUrl]);
-    const handleShareLink = (0, react_1.useCallback)(async () => {
-        if (!inviteUrl || !canShare()) {
-            await handleCopyLink();
-            return;
-        }
-        try {
-            await navigator.share({
-                title: "Connect on Peers",
-                text: (0, user_connect_invite_1.buildUserConnectShareText)(inviteUrl),
-                url: inviteUrl,
-            });
-            setFeedback("Share sheet opened");
-            window.setTimeout(() => setFeedback(""), 2000);
-        }
-        catch (err) {
-            // User cancel is neutral.
-            if (err instanceof DOMException && err.name === "AbortError") {
-                return;
-            }
-            await handleCopyLink();
-        }
-    }, [handleCopyLink, inviteUrl]);
-    const handleTrustAndView = (0, react_1.useCallback)(async () => {
-        if (!result)
-            return;
-        try {
-            const userContext = await (0, peers_sdk_1.getUserContext)();
-            await (0, peers_sdk_1.setUserTrustLevel)(result.remoteUser.userId, peers_sdk_1.TrustLevel.Trusted, userContext.userDataContext);
-            clearCeremony();
-            (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
-        }
-        catch (err) {
-            showError({
-                code: "protocol-error",
-                detail: err instanceof Error ? err.message : String(err),
-            });
-        }
-    }, [clearCeremony, result, showError]);
-    const handleViewWithoutTrust = (0, react_1.useCallback)(() => {
-        if (!result)
-            return;
-        clearCeremony();
-        (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
-    }, [clearCeremony, result]);
-    const handleCodeInput = (value) => {
-        const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
-        let formatted = "";
-        for (let i = 0; i < cleaned.length && i < 12; i++) {
-            if (i === 4 || i === 8)
-                formatted += "-";
-            formatted += cleaned[i];
-        }
-        setInputCode(formatted);
-        setLocalError(null);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus-fill me-2", "aria-hidden": "true" }), "Connect to user"] }), phase !== "offer" && phase !== "success" && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", onClick: handleCancel, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-left me-1", "aria-hidden": "true" }), "Back"] }))] }), hasRoute === false && phase !== "success" && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", role: "status", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-start gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("div", { children: "This device isn\u2019t connected to the internet or another Peers device yet. You can still prepare an invite; connection will work once a route appears." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-warning", onClick: () => void refreshRouteStatus(), children: "Check again" })] }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", className: "visually-hidden", children: feedback }), phase === "offer" && ((0, jsx_runtime_1.jsx)(OfferPanel, { connectionCode: connectionCode, inviteUrl: inviteUrl, remainingMs: remainingMs, feedback: feedback, onShare: () => void handleShareLink(), onCopy: () => void handleCopyLink(), onEnterManual: handleEnterManual, onCancel: handleCancel })), phase === "manual" && ((0, jsx_runtime_1.jsx)(ManualEntryPanel, { inputCode: inputCode, localError: localError, submitting: submitting, onChange: handleCodeInput, onConnect: () => void handleManualConnect() })), phase === "review" && ((0, jsx_runtime_1.jsx)(ReviewPanel, { reviewCode: reviewCode, submitting: submitting, onConfirm: () => void handleConfirmReview(), onEnterManual: handleEnterManual })), phase === "connecting" && (0, jsx_runtime_1.jsx)(ConnectingPanel, {}), phase === "success" && result && ((0, jsx_runtime_1.jsx)(SuccessPanel, { result: result, onTrust: () => void handleTrustAndView(), onViewWithoutTrust: handleViewWithoutTrust })), phase === "error" && localError && ((0, jsx_runtime_1.jsx)(ErrorPanel, { error: localError, onNewInvite: startOffer, onEnterCode: handleEnterManual })), phase === "expired" && ((0, jsx_runtime_1.jsx)(ExpiredPanel, { onNewInvite: startOffer, onEnterCode: handleEnterManual }))] }));
-}
-function OfferPanel(props) {
-    const shareAvailable = canShare();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Ask the other person to scan this with their camera" }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block p-3 mb-3 rounded", style: { background: "#ffffff" }, "aria-label": "Connection QR code", children: props.inviteUrl ? ((0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: props.inviteUrl, size: 220, bgColor: "#FFFFFF", fgColor: "#000000", style: { height: "auto", maxWidth: "100%", width: "min(70vw, 220px)" }, viewBox: "0 0 256 256" })) : ((0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary", role: "status", "aria-label": "Preparing invite" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Waiting for connection\u2026" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-muted small mb-3", "aria-live": "polite", children: ["Expires in ", formatCountdown(props.remainingMs)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2 mb-3", children: [shareAvailable ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-primary", onClick: props.onShare, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-share me-2", "aria-hidden": "true" }), "Share link"] })) : null, (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-primary", onClick: props.onCopy, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-clipboard me-2", "aria-hidden": "true" }), "Copy link"] }), props.feedback ? (0, jsx_runtime_1.jsx)("small", { className: "text-success", children: props.feedback }) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small text-muted mb-1", htmlFor: "user-connect-fallback-code", children: "Or share this code" }), (0, jsx_runtime_1.jsx)("input", { id: "user-connect-fallback-code", type: "text", className: "form-control form-control-lg text-center font-monospace", value: props.connectionCode, readOnly: true, "aria-label": "Connection code" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link", onClick: props.onEnterManual, children: "Enter a code instead" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" })] })] }));
-}
-function ManualEntryPanel(props) {
-    const ready = props.inputCode.replace(/[^0-9A-Z]/gi, "").length === 12;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 400, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Enter the connection code shared with you" }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace mb-3", placeholder: "XXXX-YYYY-ZZZZ", value: props.inputCode, onChange: (e) => props.onChange(e.target.value), maxLength: 14, "aria-label": "Connection code", autoComplete: "off" }), props.localError ? ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: errorMessage(props.localError).body })) : null, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg", onClick: props.onConnect, disabled: props.submitting || !ready, children: props.submitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting\u2026"] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-link-45deg me-2", "aria-hidden": "true" }), "Connect"] })) })] }));
-}
-function ReviewPanel(props) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 400, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "You opened a connection invite" }), (0, jsx_runtime_1.jsx)("p", { className: "font-monospace fs-4 mb-3", children: props.reviewCode }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small mb-4", children: "Both of you need Peers open. Confirm to connect with the person who shared this invite." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg mb-2", onClick: props.onConfirm, disabled: props.submitting, children: props.submitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting\u2026"] })) : ("Connect") }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link", onClick: props.onEnterManual, children: "Enter a different code" }) })] }));
-}
-function ConnectingPanel() {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary mb-3", role: "status", "aria-label": "Connecting" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-0", children: "Connecting\u2026" })] }));
-}
-function SuccessPanel(props) {
-    const [showDetails, setShowDetails] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-circle-fill text-success display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Connected" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "Verify with the other person that you both see:" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: "0.15em" }, children: props.result.confirmationHash }), (0, jsx_runtime_1.jsxs)("p", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Name: " }), props.result.remoteUser.name || "Unnamed"] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm mb-3", onClick: () => setShowDetails((v) => !v), "aria-expanded": showDetails, children: showDetails ? "Hide details" : "Show details" }), showDetails ? ((0, jsx_runtime_1.jsx)("p", { className: "font-monospace small text-muted mb-3", children: props.result.remoteUser.userId })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: props.onTrust, children: "Trust and view contact" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onViewWithoutTrust, children: "View without trusting" })] })] }));
-}
-function ErrorPanel(props) {
-    const copy = errorMessage(props.error);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-x-circle-fill text-danger display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-2", children: copy.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", children: copy.body }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: props.onNewInvite, children: "Create a new invite" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onEnterCode, children: "Enter another code" })] })] }));
-}
-function ExpiredPanel(props) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-hourglass-bottom text-warning display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-2", children: "Invite expired" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", children: "Create a new invite or enter a fresh code from the other person." }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: props.onNewInvite, children: "Create a new invite" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onEnterCode, children: "Enter another code" })] })] }));
-}
-(0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: "000user00connect0screen01",
-    component: UserConnect,
-    routes: [
-        {
-            isMatch: (_props, context) => context.path === "contacts/connect",
-            uiCategory: "screen",
-            priority: 3,
-        },
-    ],
-});

package/dist/screens/contacts/user-connect.test.d.ts

@@ -1 +0,0 @@
-export {};