@peers-app/peers-ui 0.20.6 → 0.21.0

package/src/screens/settings/settings-page.tsx

@@ -19,6 +19,7 @@ import { Tooltip } from "../../components/tooltip";
 import * as globals from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { LayoutPicker } from "../../root-layout/layout-picker";
+import { SourceDevicePairing } from "../device-pairing";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 import { VoiceSettings } from "./voice-settings";
 
@@ -71,6 +72,7 @@ const UserSettingsTab: React.FC = () => {
   return (
     <>
       <ProfileSection />
+      <AddDeviceSection />
       <LogoutSection />
     </>
   );
@@ -250,6 +252,26 @@ const ProfileSection: React.FC = () => {
   );
 };
 
+const AddDeviceSection: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <section className="mt-4 pt-3 border-top">
+      <h6>Add another device</h6>
+      <p className="small text-muted">
+        Create a five-minute invitation, compare the same number on both devices, and approve on
+        each one before account access is transferred.
+      </p>
+      {open ? (
+        <SourceDevicePairing onClose={() => setOpen(false)} />
+      ) : (
+        <button type="button" className="btn btn-outline-primary" onClick={() => setOpen(true)}>
+          Add another device
+        </button>
+      )}
+    </section>
+  );
+};
+
 const PackagesRootDirectory: React.FC = () => {
   return (
     <div className="mt-3">

package/src/screens/setup-user.tsx

@@ -7,8 +7,13 @@ import {
   rpcServerCalls,
   signMessageWithSecretKey,
 } from "@peers-app/peers-sdk";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useObservable } from "../hooks";
+import {
+  consumePendingDevicePairingInvite,
+  DEVICE_PAIRING_INVITE_CAPTURED_EVENT,
+  DestinationDevicePairing,
+} from "./device-pairing";
 import { colorMode } from "./settings/color-mode-dropdown";
 
 type SetupStep = "select-user-type" | "complete";
@@ -16,6 +21,10 @@ type SetupStep = "select-user-type" | "complete";
 export const SetupUser = () => {
   const [_colorMode] = useObservable(colorMode);
   const [step, _setStep] = useState<SetupStep>("select-user-type");
+  const [pairingInvitation, setPairingInvitation] = useState<string | undefined>(() =>
+    consumePendingDevicePairingInvite(),
+  );
+  const [showPairing, setShowPairing] = useState(() => Boolean(pairingInvitation));
   const [isExistingUser, setIsExistingUser] = useState<boolean | null>(null);
   const [userId, setUserId] = useState("");
   const [secretKey, setSecretKey] = useState("");
@@ -26,6 +35,17 @@ export const SetupUser = () => {
 
   const isDark = _colorMode === "dark";
 
+  useEffect(() => {
+    const capture = (event: Event) => {
+      const invitation = (event as CustomEvent<string>).detail;
+      setPairingInvitation(invitation);
+      consumePendingDevicePairingInvite();
+      setShowPairing(true);
+    };
+    window.addEventListener(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
+    return () => window.removeEventListener(DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
+  }, []);
+
   const handleNewUser = async () => {
     setError("");
     setIsValidating(true);
@@ -85,6 +105,35 @@ export const SetupUser = () => {
     }
   };
 
+  if (showPairing) {
+    return (
+      <div
+        className="container-fluid d-flex align-items-start justify-content-center"
+        style={{ paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }}
+      >
+        <div
+          className="card shadow"
+          style={{
+            maxWidth: "560px",
+            width: "100%",
+            backgroundColor: isDark ? "#2d3238" : "#ffffff",
+          }}
+        >
+          <div className="card-body p-4 p-md-5">
+            <DestinationDevicePairing
+              initialInvitation={pairingInvitation}
+              onInvitationConsumed={() => setPairingInvitation(undefined)}
+              onBack={() => {
+                setPairingInvitation(undefined);
+                setShowPairing(false);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // Step 1: Select User Type
   if (step === "select-user-type" && isExistingUser === null) {
     return (
@@ -134,6 +183,19 @@ export const SetupUser = () => {
                   </div>
                 </div>
               </button>
+
+              <button
+                className={`btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`}
+                onClick={() => setShowPairing(true)}
+              >
+                <div className="d-flex align-items-center justify-content-center">
+                  <i className="bi bi-phone fs-4 me-2" />
+                  <div className="text-start">
+                    <div className="fw-semibold">Use Another Device</div>
+                    <small className="opacity-75">Sign in with a device already on Peers</small>
+                  </div>
+                </div>
+              </button>
             </div>
           </div>
         </div>