diff --git a/desktop/src/features/settings/ui/MobilePairingCard.tsx b/desktop/src/features/settings/ui/MobilePairingCard.tsx index e15f54316b..0d58f86458 100644 --- a/desktop/src/features/settings/ui/MobilePairingCard.tsx +++ b/desktop/src/features/settings/ui/MobilePairingCard.tsx @@ -4,11 +4,10 @@ import { Copy, LoaderCircle, RefreshCw, - ShieldCheck, TriangleAlert, - X, } from "lucide-react"; import { listen } from "@tauri-apps/api/event"; +import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { toast } from "sonner"; import { @@ -16,15 +15,9 @@ import { confirmPairingSas, startPairing, } from "@/shared/api/tauri"; +import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { StyledQrCode } from "@/shared/ui/styled-qr-code"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from "@/shared/ui/dialog"; import { SettingsOptionGroup, SettingsOptionRow } from "./SettingsOptionGroup"; import { SettingsSectionHeader } from "./SettingsSectionHeader"; import { writeTextToClipboard } from "@/shared/lib/clipboard"; @@ -39,6 +32,8 @@ type PairingStep = | "done" | "error"; +const PAIRING_CODE_DIGIT_POSITIONS = [0, 1, 2, 3, 4, 5] as const; + function pairingErrorMessage(error: unknown) { const message = error instanceof Error @@ -58,114 +53,189 @@ function isPairingSessionTimeout(message: string) { return message.toLowerCase().includes("session timed out"); } -function PairingStatusDialog({ - onClose, +function PairingStepIndicator({ + complete, + label, + testId, +}: { + complete: boolean; + label: string; + testId: string; +}) { + const shouldReduceMotion = useReducedMotion() ?? false; + const hiddenState = shouldReduceMotion + ? { opacity: 0 } + : { filter: "blur(2px)", opacity: 0, scale: 0.25 }; + const visibleState = shouldReduceMotion + ? { opacity: 1 } + : { filter: "blur(0px)", opacity: 1, scale: 1 }; + + return ( + + ); +} + +function PairingSteps({ step }: { step: PairingStep }) { + const hasScanned = + step === "sas" || step === "transferring" || step === "done"; + const hasConfirmed = step === "transferring" || step === "done"; + const isPaired = step === "done"; + + return ( +
    +
  1. + +
    +

    Scan QR code

    +

    + Open Buzz on your mobile device and scan the code shown here. +

    +
    +
    2. + +
  2. + +
    +

    Confirm mobile code

    +

    + Check that the six-digit code matches on both devices, then confirm + it. +

    +
    +
    3. + +
  3. + +
    +

    + {isPaired ? "Paired" : "Pair your mobile app"} +

    +

    + {isPaired + ? "Your mobile app is now connected to this relay." + : "Your mobile app will connect after you confirm the code."} +

    +
    +
    4. +
+ ); +} + +function PairingCodeConfirmation({ onConfirm, onDeny, sasCode, - step, }: { - onClose: () => void; onConfirm: () => void; onDeny: () => void; - sasCode: string | null; - step: PairingStep; + sasCode: string; }) { - const open = step === "sas" || step === "transferring" || step === "done"; + const formattedCode = `${sasCode.slice(0, 3)} ${sasCode.slice(3, 6)}`; return ( - { - if (!nextOpen) onClose(); - }} - open={open} +
- -
- - Pair mobile device - - {step === "sas" - ? "Verify the security code matches your mobile device." - : step === "done" - ? "Your mobile device is now paired." - : "Securely sending your identity to the mobile app."} - - - -
- {step === "sas" && sasCode ? ( -
-
- -

- Verify this code matches your mobile device -

-
-

- {sasCode.slice(0, 3)} {sasCode.slice(3)} -

-
-

- You are about to transfer your Buzz identity to another - device. Only confirm if you initiated this pairing. -

-
- -
- - -
-
- ) : step === "transferring" ? ( -
-
- ) : step === "done" ? ( -
-
- -
-

Mobile device paired

-

- Your mobile app is now connected to this relay. -

-
- ) : null} -
-
- -
+ Confirm mobile code +

+
+ Confirmation code {formattedCode} + {PAIRING_CODE_DIGIT_POSITIONS.map((position) => ( + + ))} +
+
+ + +
+ ); } @@ -312,21 +382,6 @@ export function MobilePairingCard({ setStep("error"); } - function handleStatusDialogClose() { - pairingActiveRef.current = false; - if (stepRef.current === "done") { - setStep("idle"); - setQrUri(null); - setSasCode(null); - setError(null); - return; - } - - cancelPairing().catch(() => {}); - setError("Pairing was canceled."); - setStep("error"); - } - return (
- -
- {step === "qr" && qrUri ? ( - - ) : step === "expired" ? ( -
-

- Pairing code expired. -

+ {/* Persistent polite live region. The pairing steps swap the QR view + for the inline code confirmation asynchronously, and a screen + reader would otherwise get no signal that a code is now waiting. + This stays mounted for every step so the announcement is reliable + (a region added at the same time as its text often isn't spoken) + and is visually hidden, so it changes nothing on screen. */} +

+ {step === "sas" && sasCode + ? `Verification code ${sasCode.slice(0, 3)} ${sasCode.slice(3, 6)} ready. Check that it matches on your mobile device, then confirm the codes match.` + : step === "transferring" + ? "Codes confirmed. Pairing your mobile device." + : step === "done" + ? "Your mobile app is now paired." + : ""} +

+ +
+
+ {step === "sas" && sasCode ? ( + void handleConfirmSas()} + onDeny={handleDenySas} + sasCode={sasCode} + /> + ) : step === "transferring" ? ( +
+
+ ) : step === "qr" && qrUri ? ( + + ) : step === "expired" ? ( +
+

+ Pairing code expired. +

+ +
+ ) : step === "error" ? ( +
+ +

+ {error ?? "Pairing session ended."} +

+ +
+ ) : step === "idle" ? ( + currentPubkey ? ( + + ) : ( +

+ Sign in to generate a mobile pairing code. +

+ ) + ) : step === "done" ? ( +
+
+ +
+

Paired

+
+ ) : ( +
+
+ )} +
+ +
+ {step === "qr" && qrUri ? ( -
- ) : step === "error" ? ( -
- -

- {error ?? "Pairing session ended."} -

- -
- ) : step === "idle" ? ( - currentPubkey ? ( - - ) : ( -

- Sign in to generate a mobile pairing code. -

- ) - ) : ( -
-
- )} + ) : null} +
- {step === "qr" && qrUri ? ( - - ) : null} + - - void handleConfirmSas()} - onDeny={handleDenySas} - sasCode={sasCode} - step={step} - />
); } diff --git a/desktop/tests/e2e/mobile-pairing-qr.spec.ts b/desktop/tests/e2e/mobile-pairing-qr.spec.ts index 606777545f..a1e7935e38 100644 --- a/desktop/tests/e2e/mobile-pairing-qr.spec.ts +++ b/desktop/tests/e2e/mobile-pairing-qr.spec.ts @@ -47,10 +47,50 @@ test("mobile pairing starts on demand and reveals the QR code", async ({ const section = page.getByTestId("settings-mobile"); const card = page.getByTestId("mobile-pairing-card"); + const layout = card.getByTestId("mobile-pairing-layout"); const qrContainer = page.getByTestId("mobile-pairing-qr-container"); + const steps = card.getByTestId("mobile-pairing-steps"); + const scanStepIndicator = card.getByTestId( + "mobile-pairing-scan-step-indicator", + ); + const confirmStepIndicator = card.getByTestId( + "mobile-pairing-confirm-step-indicator", + ); + const finalStep = card.getByTestId("mobile-pairing-final-step"); const startButton = card.getByTestId("start-pairing-button"); await expect(card).toBeVisible(); await expect(startButton).toHaveText("Start pairing"); + await expect(steps.getByText("Scan QR code", { exact: true })).toBeVisible(); + await expect( + steps.getByText("Confirm mobile code", { exact: true }), + ).toBeVisible(); + await expect( + finalStep.getByText("Pair your mobile app", { exact: true }), + ).toBeVisible(); + const finalStepIndicator = finalStep.getByTestId( + "mobile-pairing-final-step-indicator", + ); + await expect(finalStepIndicator).toHaveText("3"); + await expect(scanStepIndicator).toHaveAttribute("data-completed", "false"); + await expect(confirmStepIndicator).toHaveAttribute("data-completed", "false"); + await expect(finalStepIndicator).toHaveCSS("width", "48px"); + await expect(finalStepIndicator).toHaveCSS("height", "48px"); + expect( + await finalStepIndicator.evaluate((element) => + Number.parseFloat(getComputedStyle(element).borderRadius), + ), + ).toBeGreaterThanOrEqual(24); + const indicatorBackground = await finalStepIndicator.evaluate( + (element) => getComputedStyle(element).backgroundColor, + ); + const primaryActionBackground = await startButton.evaluate( + (element) => getComputedStyle(element).backgroundColor, + ); + expect(indicatorBackground).not.toBe(primaryActionBackground); + await expect(layout).toHaveCSS("padding-top", "60px"); + await expect(layout).toHaveCSS("padding-right", "60px"); + await expect(layout).toHaveCSS("padding-left", "60px"); + await expect(layout).toHaveCSS("column-gap", "56px"); await expect(page.getByTestId("mobile-pairing-qr")).toHaveCount(0); await expect(page.getByTestId("copy-pairing-code")).toHaveCount(0); expect( @@ -64,8 +104,20 @@ test("mobile pairing starts on demand and reveals the QR code", async ({ const sectionBox = await section.boundingBox(); const cardBox = await card.boundingBox(); + const initialStepsBox = await steps.boundingBox(); expect(sectionBox).not.toBeNull(); expect(cardBox).not.toBeNull(); + expect(initialStepsBox).not.toBeNull(); + const initialQrBox = await qrContainer.boundingBox(); + expect(initialQrBox).not.toBeNull(); + const qrTopSpace = (initialQrBox?.y ?? 0) - (cardBox?.y ?? 0); + const qrLeftSpace = (initialQrBox?.x ?? 0) - (cardBox?.x ?? 0); + const qrBottomSpace = + (cardBox?.y ?? 0) + + (cardBox?.height ?? 0) - + ((initialQrBox?.y ?? 0) + (initialQrBox?.height ?? 0)); + expect(Math.abs(qrTopSpace - qrLeftSpace)).toBeLessThan(0.5); + expect(Math.abs(qrTopSpace - qrBottomSpace)).toBeLessThan(0.5); const sectionCenter = (sectionBox?.x ?? 0) + (sectionBox?.width ?? 0) / 2; const cardCenter = (cardBox?.x ?? 0) + (cardBox?.width ?? 0) / 2; expect(Math.abs(sectionCenter - cardCenter)).toBeLessThan(0.5); @@ -118,8 +170,19 @@ test("mobile pairing starts on demand and reveals the QR code", async ({ await waitForAnimations(page); const qrBox = await qrContainer.boundingBox(); const copyBox = await copyButton.boundingBox(); + const stepsBox = await steps.boundingBox(); + const qrCardBox = await card.boundingBox(); expect(qrBox).not.toBeNull(); expect(copyBox).not.toBeNull(); + expect(stepsBox).not.toBeNull(); + expect(qrCardBox).not.toBeNull(); + expect(qrBox?.x ?? 0).toBeLessThan(stepsBox?.x ?? 0); + expect(Math.abs((stepsBox?.y ?? 0) - (initialStepsBox?.y ?? 0))).toBeLessThan( + 0.5, + ); + expect( + Math.abs((qrCardBox?.height ?? 0) - (cardBox?.height ?? 0)), + ).toBeLessThan(0.5); expect(copyBox?.y ?? 0).toBeGreaterThan( (qrBox?.y ?? 0) + (qrBox?.height ?? 0), ); @@ -158,6 +221,178 @@ test("mobile pairing starts on demand and reveals the QR code", async ({ await qrCode.screenshot({ path: `${SCREENSHOT_DIR}/pairing-qr.png` }); }); +test("pairing completion updates the final step and resets after leaving", async ({ + page, +}) => { + await page.goto("/"); + await page.getByTestId("open-settings").click(); + await page.getByTestId("profile-popover-settings").click(); + await page.getByTestId("settings-nav-mobile").click(); + + const card = page.getByTestId("mobile-pairing-card"); + const finalStep = card.getByTestId("mobile-pairing-final-step"); + const scanStepIndicator = card.getByTestId( + "mobile-pairing-scan-step-indicator", + ); + const confirmStepIndicator = card.getByTestId( + "mobile-pairing-confirm-step-indicator", + ); + await card.getByTestId("start-pairing-button").click(); + await expect(page.getByTestId("mobile-pairing-qr")).toBeVisible(); + + await emitPairingEvent(page, "pairing-sas-received", { sas: "123456" }); + const confirmation = card.getByTestId("mobile-pairing-code-confirmation"); + await expect(scanStepIndicator).toHaveAttribute("data-completed", "true"); + await expect(scanStepIndicator.locator('[data-state="complete"]')).toHaveCSS( + "opacity", + "1", + ); + await expect(scanStepIndicator.locator("svg")).toHaveCount(1); + await expect(confirmStepIndicator).toHaveAttribute("data-completed", "false"); + await expect(page.getByTestId("mobile-pairing-dialog")).toHaveCount(0); + await expect(page.getByTestId("mobile-pairing-qr")).toHaveCount(0); + const confirmationCode = confirmation.getByTestId("pairing-sas-code"); + await expect(confirmationCode).toHaveAccessibleName( + "Confirmation code 123 456", + ); + await expect( + confirmationCode.locator('[data-testid^="pairing-sas-code-digit-"]'), + ).toHaveCount(6); + await expect( + confirmationCode.getByTestId("pairing-sas-code-digit-1"), + ).toHaveCSS("border-radius", "12px"); + await expect( + confirmationCode.getByTestId("pairing-sas-code-digit-1"), + ).toHaveCSS("box-shadow", "none"); + const firstCodeDigit = confirmationCode.getByTestId( + "pairing-sas-code-digit-1", + ); + const firstCodeDigitBox = await firstCodeDigit.boundingBox(); + expect(firstCodeDigitBox).not.toBeNull(); + expect(firstCodeDigitBox?.width ?? 0).toBeGreaterThan(32); + expect(firstCodeDigitBox?.height ?? 0).toBeGreaterThan(48); + const secondCodeDigitBox = await confirmationCode + .getByTestId("pairing-sas-code-digit-2") + .boundingBox(); + const thirdCodeDigitBox = await confirmationCode + .getByTestId("pairing-sas-code-digit-3") + .boundingBox(); + const fourthCodeDigitBox = await confirmationCode + .getByTestId("pairing-sas-code-digit-4") + .boundingBox(); + expect(secondCodeDigitBox).not.toBeNull(); + expect(thirdCodeDigitBox).not.toBeNull(); + expect(fourthCodeDigitBox).not.toBeNull(); + const regularDigitGap = + (thirdCodeDigitBox?.x ?? 0) - + ((secondCodeDigitBox?.x ?? 0) + (secondCodeDigitBox?.width ?? 0)); + const groupedDigitGap = + (fourthCodeDigitBox?.x ?? 0) - + ((thirdCodeDigitBox?.x ?? 0) + (thirdCodeDigitBox?.width ?? 0)); + expect(groupedDigitGap).toBeGreaterThan(regularDigitGap); + await expect(card.getByTestId("mobile-pairing-qr-container")).toHaveCSS( + "border-color", + "rgba(0, 0, 0, 0)", + ); + const confirmButton = confirmation.getByTestId("confirm-sas"); + const cancelButton = confirmation.getByTestId("deny-sas"); + const confirmationBox = await confirmation.boundingBox(); + const confirmationTitleBox = await confirmation + .getByTestId("pairing-sas-title") + .boundingBox(); + const confirmationCodeBox = await confirmationCode.boundingBox(); + const confirmationActionsBox = await confirmation + .getByTestId("pairing-sas-actions") + .boundingBox(); + expect(confirmationBox).not.toBeNull(); + expect(confirmationTitleBox).not.toBeNull(); + expect(confirmationCodeBox).not.toBeNull(); + expect(confirmationActionsBox).not.toBeNull(); + expect( + Math.abs((confirmationTitleBox?.y ?? 0) - (confirmationBox?.y ?? 0)), + ).toBeLessThan(0.5); + const codeCenter = + (confirmationCodeBox?.y ?? 0) + (confirmationCodeBox?.height ?? 0) / 2; + const availableCodeCenter = + ((confirmationTitleBox?.y ?? 0) + + (confirmationTitleBox?.height ?? 0) + + (confirmationActionsBox?.y ?? 0)) / + 2; + expect(Math.abs(availableCodeCenter - codeCenter)).toBeLessThan(0.5); + expect( + Math.abs( + (confirmationActionsBox?.y ?? 0) + + (confirmationActionsBox?.height ?? 0) - + ((confirmationBox?.y ?? 0) + (confirmationBox?.height ?? 0)), + ), + ).toBeLessThan(0.5); + await expect(confirmButton).toHaveCSS("height", "36px"); + await expect(cancelButton).toHaveCSS("height", "36px"); + await expect(confirmButton.locator("svg")).toHaveCount(1); + await expect(cancelButton.locator("svg")).toHaveCount(0); + const confirmBox = await confirmButton.boundingBox(); + const cancelBox = await cancelButton.boundingBox(); + expect(confirmBox).not.toBeNull(); + expect(cancelBox).not.toBeNull(); + expect(confirmBox?.y ?? 0).toBeLessThan(cancelBox?.y ?? 0); + await expect( + confirmation.getByText(/Only confirm if you started this pairing/), + ).toHaveCount(0); + await expect(confirmation.getByTestId("pairing-sas-title")).toHaveCSS( + "font-size", + "16px", + ); + + mkdirSync(SCREENSHOT_DIR, { recursive: true }); + await waitForAnimations(page); + await card.screenshot({ + path: `${SCREENSHOT_DIR}/pairing-code-confirmation.png`, + }); + + await confirmation.getByTestId("confirm-sas").click(); + await expect(card.getByText("Pairing mobile device...")).toBeVisible(); + await expect(confirmStepIndicator).toHaveAttribute("data-completed", "true"); + await expect( + confirmStepIndicator.locator('[data-state="complete"]'), + ).toHaveCSS("opacity", "1"); + await expect(confirmStepIndicator.locator("svg")).toHaveCount(1); + + await emitPairingEvent(page, "pairing-complete"); + + await expect(finalStep.getByText("Paired", { exact: true })).toBeVisible(); + await expect( + finalStep.getByText("Your mobile app is now connected to this relay."), + ).toBeVisible(); + await expect( + finalStep.getByTestId("mobile-pairing-final-step-indicator").locator("svg"), + ).toHaveCount(1); + await expect( + finalStep.getByTestId("mobile-pairing-final-step-indicator"), + ).toHaveAttribute("data-completed", "true"); + const pairedSurface = card.getByTestId("mobile-pairing-qr-container"); + await expect( + pairedSurface.getByText("Paired", { exact: true }), + ).toBeVisible(); + await expect( + pairedSurface.getByText("Your mobile app is now connected to this relay."), + ).toHaveCount(0); + + await waitForAnimations(page); + await card.screenshot({ path: `${SCREENSHOT_DIR}/pairing-complete.png` }); + + await page.getByTestId("settings-nav-updates").click(); + await page.getByTestId("settings-nav-mobile").click(); + + const restartedCard = page.getByTestId("mobile-pairing-card"); + await expect(restartedCard.getByTestId("start-pairing-button")).toBeVisible(); + await expect( + restartedCard + .getByTestId("mobile-pairing-final-step") + .getByText("Pair your mobile app", { exact: true }), + ).toBeVisible(); + await expect(page.getByTestId("mobile-pairing-qr")).toHaveCount(0); +}); + test("late pairing events are ignored after canceling", async ({ page }) => { await page.goto("/"); await page.getByTestId("open-settings").click(); @@ -169,17 +404,48 @@ test("late pairing events are ignored after canceling", async ({ page }) => { await expect(page.getByTestId("mobile-pairing-qr")).toBeVisible(); await emitPairingEvent(page, "pairing-sas-received", { sas: "123456" }); - const dialog = page.getByTestId("mobile-pairing-dialog"); - await expect(dialog).toBeVisible(); - await dialog.getByRole("button", { name: "Close" }).click(); + const confirmation = card.getByTestId("mobile-pairing-code-confirmation"); + await expect(confirmation).toBeVisible(); + await confirmation.getByTestId("deny-sas").click(); - await expect(dialog).toHaveCount(0); - await expect(card.getByText("Pairing was canceled.")).toBeVisible(); + await expect(confirmation).toHaveCount(0); + await expect( + card.getByText("The codes didn't match. Pairing was canceled."), + ).toBeVisible(); await emitPairingEvent(page, "pairing-complete"); await emitPairingEvent(page, "pairing-sas-received", { sas: "654321" }); - await expect(dialog).toHaveCount(0); - await expect(page.getByTestId("mobile-pairing-done")).toHaveCount(0); - await expect(card.getByText("Pairing was canceled.")).toBeVisible(); + await expect(confirmation).toHaveCount(0); + await expect( + card + .getByTestId("mobile-pairing-final-step") + .getByText("Paired", { exact: true }), + ).toHaveCount(0); + await expect( + card.getByText("The codes didn't match. Pairing was canceled."), + ).toBeVisible(); +}); + +test("step completion respects reduced motion", async ({ page }) => { + await page.emulateMedia({ reducedMotion: "reduce" }); + await page.goto("/"); + await page.getByTestId("open-settings").click(); + await page.getByTestId("profile-popover-settings").click(); + await page.getByTestId("settings-nav-mobile").click(); + + const card = page.getByTestId("mobile-pairing-card"); + const scanStepIndicator = card.getByTestId( + "mobile-pairing-scan-step-indicator", + ); + await card.getByTestId("start-pairing-button").click(); + await expect(page.getByTestId("mobile-pairing-qr")).toBeVisible(); + + await emitPairingEvent(page, "pairing-sas-received", { sas: "123456" }); + + await expect(scanStepIndicator).toHaveAttribute("data-completed", "true"); + await expect(scanStepIndicator).toHaveCSS("transition-property", "none"); + const completedContent = scanStepIndicator.locator('[data-state="complete"]'); + await expect(completedContent).toHaveCSS("opacity", "1"); + await expect(completedContent).toHaveCSS("transform", "none"); });