Gracefully handle rate limit response when attempting to Sign in with QR (#11809)

* Gracefully hand rate limit response when attempting to Sign in with QR

* Don't cancel after rate limit

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing import

* Fix mock of error

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

test/components/views/settings/devices/LoginWithQR-test.tsx

@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import { cleanup, render, waitFor } from "@testing-library/react";
-import { mocked } from "jest-mock";
+import { MockedObject, mocked } from "jest-mock";
 import React from "react";
 import { MSC3906Rendezvous, RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
-import { LoginTokenPostResponse } from "matrix-js-sdk/src/matrix";
+import { HTTPError, LoginTokenPostResponse } from "matrix-js-sdk/src/matrix";
 
 import LoginWithQR, { Click, Mode, Phase } from "../../../../../src/components/views/auth/LoginWithQR";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
@@ -52,6 +52,8 @@ function makeClient() {
             on: jest.fn(),
         },
         getClientWellKnown: jest.fn().mockReturnValue({}),
+        getCrypto: jest.fn().mockReturnValue({}),
+        crypto: {},
     } as unknown as MatrixClient);
 }
 
@@ -60,7 +62,7 @@ function unresolvedPromise<T>(): Promise<T> {
 }
 
 describe("<LoginWithQR />", () => {
-    let client = makeClient();
+    let client!: MockedObject<MatrixClient>;
     const defaultProps = {
         mode: Mode.Show,
         onFinished: jest.fn(),
@@ -78,6 +80,7 @@ describe("<LoginWithQR />", () => {
     beforeEach(() => {
         mockedFlow.mockReset();
         jest.resetAllMocks();
+        client = makeClient();
         jest.spyOn(MSC3906Rendezvous.prototype, "generateCode").mockResolvedValue();
         // @ts-ignore
         // workaround for https://github.com/facebook/jest/issues/9675
@@ -233,10 +236,9 @@ describe("<LoginWithQR />", () => {
     });
 
     test("approve - no crypto", async () => {
-        // @ts-ignore
-        client.crypto = undefined;
+        (client as any).crypto = undefined;
+        (client as any).getCrypto = () => undefined;
         const onFinished = jest.fn();
-        // jest.spyOn(MSC3906Rendezvous.prototype, 'approveLoginOnExistingDevice').mockReturnValue(unresolvedPromise());
         render(getComponent({ client, onFinished }));
         const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
 
@@ -274,8 +276,6 @@ describe("<LoginWithQR />", () => {
 
     test("approve + verifying", async () => {
         const onFinished = jest.fn();
-        // @ts-ignore
-        client.crypto = {};
         jest.spyOn(MSC3906Rendezvous.prototype, "verifyNewDeviceOnExistingDevice").mockImplementation(() =>
             unresolvedPromise(),
         );
@@ -316,8 +316,6 @@ describe("<LoginWithQR />", () => {
 
     test("approve + verify", async () => {
         const onFinished = jest.fn();
-        // @ts-ignore
-        client.crypto = {};
         render(getComponent({ client, onFinished }));
         const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
 
@@ -341,6 +339,43 @@ describe("<LoginWithQR />", () => {
         await onClick(Click.Approve);
         expect(rendezvous.approveLoginOnExistingDevice).toHaveBeenCalledWith("token");
         expect(rendezvous.verifyNewDeviceOnExistingDevice).toHaveBeenCalled();
+        expect(rendezvous.close).toHaveBeenCalled();
         expect(onFinished).toHaveBeenCalledWith(true);
     });
+
+    test("approve - rate limited", async () => {
+        mocked(client.requestLoginToken).mockRejectedValue(new HTTPError("rate limit reached", 429));
+        const onFinished = jest.fn();
+        render(getComponent({ client, onFinished }));
+        const rendezvous = mocked(MSC3906Rendezvous).mock.instances[0];
+
+        await waitFor(() =>
+            expect(mockedFlow).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    phase: Phase.Connected,
+                }),
+            ),
+        );
+        expect(mockedFlow).toHaveBeenLastCalledWith({
+            phase: Phase.Connected,
+            confirmationDigits: mockConfirmationDigits,
+            onClick: expect.any(Function),
+        });
+        expect(rendezvous.generateCode).toHaveBeenCalled();
+        expect(rendezvous.startAfterShowingCode).toHaveBeenCalled();
+
+        // approve
+        const onClick = mockedFlow.mock.calls[0][0].onClick;
+        await onClick(Click.Approve);
+
+        // the 429 error should be handled and mapped
+        await waitFor(() =>
+            expect(mockedFlow).toHaveBeenLastCalledWith(
+                expect.objectContaining({
+                    phase: Phase.Error,
+                    failureReason: "rate_limited",
+                }),
+            ),
+        );
+    });
 });

test/components/views/settings/devices/LoginWithQRFlow-test.tsx

@@ -19,7 +19,12 @@ import React from "react";
 import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
 
 import LoginWithQRFlow from "../../../../../src/components/views/auth/LoginWithQRFlow";
-import { Click, Phase } from "../../../../../src/components/views/auth/LoginWithQR";
+import {
+    Click,
+    Phase,
+    LoginWithQRFailureReason,
+    FailureReason,
+} from "../../../../../src/components/views/auth/LoginWithQR";
 
 describe("<LoginWithQRFlow />", () => {
     const onClick = jest.fn();
@@ -31,7 +36,7 @@ describe("<LoginWithQRFlow />", () => {
     const getComponent = (props: {
         phase: Phase;
         onClick?: () => Promise<void>;
-        failureReason?: RendezvousFailureReason;
+        failureReason?: FailureReason;
         code?: string;
         confirmationDigits?: string;
     }) => <LoginWithQRFlow {...defaultProps} {...props} />;
@@ -97,7 +102,10 @@ describe("<LoginWithQRFlow />", () => {
     });
 
     describe("errors", () => {
-        for (const failureReason of Object.values(RendezvousFailureReason)) {
+        for (const failureReason of [
+            ...Object.values(RendezvousFailureReason),
+            ...Object.values(LoginWithQRFailureReason),
+        ]) {
             it(`renders ${failureReason}`, async () => {
                 const { container } = render(
                     getComponent({

test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap

@@ -294,6 +294,55 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
 </div>
 `;
 
+exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_centreTitle"
+    >
+      <h1>
+        <div
+          class="error"
+        />
+        Connection failed
+      </h1>
+    </div>
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <p
+        data-testid="cancellation-message"
+      >
+        Too many attempts in a short time. Wait some time before trying again.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        data-testid="try-again-button"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </div>
+      <div
+        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+        data-testid="cancel-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
 <div>
   <div