Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544)

* Improve decryption error UI by consolidating error messages and providing instructions when possible * Fix TS strict errors * Rename .scss to .pcss * Avoid accessing clipboard, Cypress doesn't like it * Display DecryptionFailureBar alongside other AuxPanel bars * Add comments * Add small margin off-screen for visible decryption failures * Fix some more TS strict errors * Add unit tests for DecryptionFailureBar * Add button to resend key requests manually * Remove references to matrix-js-sdk crypto internals * Add hysteresis to visible decryption failures * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Don't create empty div if we're not showing resend requests button * cancel updateSessions on unmount * Update unit tests * Fix lint and implicit any * Simplify visible event bounds checking * Adjust cypress test descriptions * Add percy snapshots * Update src/components/structures/TimelinePanel.tsx Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comments on TimelinePanel IState * comment * Add names to percy snapshots * Show Resend Key Requests button when there are sessions that haven't already been requested via this bar * We no longer request keys from senders * update i18n * update expected text in cypress test * don't download keys ourselves, update device info in response to updates from client * fix ts strict errors * visibledecryptionfailures undefined handling * Fix implicitAny errors Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-12-15 17:24:33 +00:00
parent b728b27435
commit 4724506320
18 changed files with 1779 additions and 165 deletions
@@ -0,0 +1,235 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import type { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import type { ISasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { SynapseInstance } from "../../plugins/synapsedocker";
+import { UserCredentials } from "../../support/login";
+import Chainable = Cypress.Chainable;
+
+const ROOM_NAME = "Test room";
+const TEST_USER = "Alia";
+const BOT_USER = "Benjamin";
+
+type EmojiMapping = [emoji: string, name: string];
+
+const waitForVerificationRequest = (cli: MatrixClient): Promise<VerificationRequest> => {
+    return new Promise<VerificationRequest>((resolve) => {
+        const onVerificationRequestEvent = (request: VerificationRequest) => {
+            // @ts-ignore CryptoEvent is not exported to window.matrixcs; using the string value here
+            cli.off("crypto.verification.request", onVerificationRequestEvent);
+            resolve(request);
+        };
+        // @ts-ignore
+        cli.on("crypto.verification.request", onVerificationRequestEvent);
+    });
+};
+
+const handleVerificationRequest = (request: VerificationRequest): Chainable<EmojiMapping[]> => {
+    return cy.wrap(
+        new Promise<EmojiMapping[]>((resolve) => {
+            const onShowSas = (event: ISasEvent) => {
+                verifier.off("show_sas", onShowSas);
+                event.confirm();
+                resolve(event.sas.emoji);
+            };
+
+            const verifier = request.beginKeyVerification("m.sas.v1");
+            verifier.on("show_sas", onShowSas);
+            verifier.verify();
+        }),
+    );
+};
+
+describe("Decryption Failure Bar", () => {
+    let synapse: SynapseInstance | undefined;
+    let testUser: UserCredentials | undefined;
+    let bot: MatrixClient | undefined;
+    let roomId: string;
+
+    beforeEach(function () {
+        cy.startSynapse("default").then((syn: SynapseInstance) => {
+            synapse = syn;
+            cy.initTestUser(synapse, TEST_USER)
+                .then((creds: UserCredentials) => {
+                    testUser = creds;
+                })
+                .then(() => {
+                    cy.getBot(synapse, { displayName: BOT_USER }).then((cli) => {
+                        bot = cli;
+                    });
+                })
+                .then(() => {
+                    cy.createRoom({ name: ROOM_NAME }).then((id) => {
+                        roomId = id;
+                    });
+                })
+                .then(() => {
+                    cy.inviteUser(roomId, bot.getUserId());
+                    cy.visit("/#/room/" + roomId);
+                    cy.contains(".mx_TextualEvent", BOT_USER + " joined the room").should("exist");
+                })
+                .then(() => {
+                    cy.getClient()
+                        .then(async (cli) => {
+                            await cli.setRoomEncryption(roomId, { algorithm: "m.megolm.v1.aes-sha2" });
+                            await bot.setRoomEncryption(roomId, { algorithm: "m.megolm.v1.aes-sha2" });
+                        })
+                        .then(() => {
+                            bot.getRoom(roomId).setBlacklistUnverifiedDevices(true);
+                        });
+                });
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it(
+        "should prompt the user to verify, if this device isn't verified " +
+            "and there are other verified devices or backups",
+        () => {
+            let otherDevice: MatrixClient | undefined;
+            cy.loginBot(synapse, testUser.username, testUser.password, {})
+                .then(async (cli) => {
+                    otherDevice = cli;
+                    await otherDevice.bootstrapCrossSigning({
+                        authUploadDeviceSigningKeys: async (makeRequest) => {
+                            await makeRequest({});
+                        },
+                        setupNewCrossSigning: true,
+                    });
+                })
+                .then(() => {
+                    cy.botSendMessage(bot, roomId, "test");
+                    cy.wait(5000);
+                    cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
+                        "have.text",
+                        "Verify this device to access all messages",
+                    );
+
+                    cy.percySnapshot("DecryptionFailureBar prompts user to verify");
+
+                    cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
+                    cy.contains(".mx_DecryptionFailureBar_button", "Verify").click();
+
+                    const verificationRequestPromise = waitForVerificationRequest(otherDevice);
+                    cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click();
+                    cy.wrap(verificationRequestPromise).then((verificationRequest: VerificationRequest) => {
+                        cy.wrap(verificationRequest.accept());
+                        handleVerificationRequest(verificationRequest).then((emojis) => {
+                            cy.get(".mx_VerificationShowSas_emojiSas_block").then((emojiBlocks) => {
+                                emojis.forEach((emoji: EmojiMapping, index: number) => {
+                                    expect(emojiBlocks[index].textContent.toLowerCase()).to.eq(emoji[0] + emoji[1]);
+                                });
+                            });
+                        });
+                    });
+                });
+            cy.contains(".mx_AccessibleButton", "They match").click();
+            cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist");
+            cy.contains(".mx_AccessibleButton", "Got it").click();
+
+            cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
+                "have.text",
+                "Open another device to load encrypted messages",
+            );
+
+            cy.percySnapshot(
+                "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button",
+            );
+
+            cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest");
+            cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").click();
+            cy.wait("@keyRequest");
+            cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
+
+            cy.percySnapshot(
+                "DecryptionFailureBar prompts user to open another device, " + "without Resend Key Requests button",
+            );
+        },
+    );
+
+    it(
+        "should prompt the user to reset keys, if this device isn't verified " +
+            "and there are no other verified devices or backups",
+        () => {
+            cy.loginBot(synapse, testUser.username, testUser.password, {}).then(async (cli) => {
+                await cli.bootstrapCrossSigning({
+                    authUploadDeviceSigningKeys: async (makeRequest) => {
+                        await makeRequest({});
+                    },
+                    setupNewCrossSigning: true,
+                });
+                await cli.logout(true);
+            });
+
+            cy.botSendMessage(bot, roomId, "test");
+            cy.wait(5000);
+            cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
+                "have.text",
+                "Reset your keys to prevent future decryption errors",
+            );
+
+            cy.percySnapshot("DecryptionFailureBar prompts user to reset keys");
+
+            cy.contains(".mx_DecryptionFailureBar_button", "Reset").click();
+
+            cy.get(".mx_Dialog").within(() => {
+                cy.contains(".mx_Dialog_primary", "Continue").click();
+                cy.get(".mx_CreateSecretStorageDialog_recoveryKey code").invoke("text").as("securityKey");
+                // Clicking download instead of Copy because of https://github.com/cypress-io/cypress/issues/2851
+                cy.contains(".mx_AccessibleButton", "Download").click();
+                cy.contains(".mx_Dialog_primary:not([disabled])", "Continue").click();
+            });
+
+            cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
+                "have.text",
+                "Some messages could not be decrypted",
+            );
+
+            cy.percySnapshot("DecryptionFailureBar displays general message with no call to action");
+        },
+    );
+
+    it("should appear and disappear as undecryptable messages enter and leave view", () => {
+        cy.getClient().then((cli) => {
+            for (let i = 0; i < 25; i++) {
+                cy.botSendMessage(cli, roomId, `test ${i}`);
+            }
+        });
+        cy.botSendMessage(bot, roomId, "test");
+        cy.get(".mx_DecryptionFailureBar").should("exist");
+        cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("exist");
+
+        cy.percySnapshot("DecryptionFailureBar displays loading spinner");
+
+        cy.wait(5000);
+        cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist");
+        cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon").should("exist");
+
+        cy.get(".mx_RoomView_messagePanel").scrollTo("top");
+        cy.get(".mx_DecryptionFailureBar").should("not.exist");
+
+        cy.botSendMessage(bot, roomId, "another test");
+        cy.get(".mx_DecryptionFailureBar").should("not.exist");
+
+        cy.get(".mx_RoomView_messagePanel").scrollTo("bottom");
+        cy.get(".mx_DecryptionFailureBar").should("exist");
+    });
+});
@@ -18,6 +18,7 @@ limitations under the License.

 import type { ISendEventResponse, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { SynapseInstance } from "../plugins/synapsedocker";
+import { Credentials } from "./synapse";
 import Chainable = Cypress.Chainable;

 interface CreateBotOpts {
@@ -33,11 +34,16 @@ interface CreateBotOpts {
     * Whether or not to start the syncing client.
     */
    startClient?: boolean;
+    /**
+     * Whether or not to generate cross-signing keys
+     */
+    bootstrapCrossSigning?: boolean;
 }

 const defaultCreateBotOptions = {
    autoAcceptInvites: true,
    startClient: true,
+    bootstrapCrossSigning: true,
 } as CreateBotOpts;

 declare global {
@@ -50,6 +56,19 @@ declare global {
             * @param opts create bot options
             */
            getBot(synapse: SynapseInstance, opts: CreateBotOpts): Chainable<MatrixClient>;
+            /**
+             * Returns a new Bot instance logged in as an existing user
+             * @param synapse the instance on which to register the bot user
+             * @param username the username for the bot to log in with
+             * @param password the password for the bot to log in with
+             * @param opts create bot options
+             */
+            loginBot(
+                synapse: SynapseInstance,
+                username: string,
+                password: string,
+                opts: CreateBotOpts,
+            ): Chainable<MatrixClient>;
            /**
             * Let a bot join a room
             * @param cli The bot's MatrixClient
@@ -73,53 +92,85 @@ declare global {
    }
 }

+function setupBotClient(
+    synapse: SynapseInstance,
+    credentials: Credentials,
+    opts: CreateBotOpts,
+): Chainable<MatrixClient> {
+    opts = Object.assign({}, defaultCreateBotOptions, opts);
+    return cy.window({ log: false }).then((win) => {
+        const keys = {};
+
+        const getCrossSigningKey = (type: string) => {
+            return keys[type];
+        };
+
+        const saveCrossSigningKeys = (k: Record<string, Uint8Array>) => {
+            Object.assign(keys, k);
+        };
+
+        const cli = new win.matrixcs.MatrixClient({
+            baseUrl: synapse.baseUrl,
+            userId: credentials.userId,
+            deviceId: credentials.deviceId,
+            accessToken: credentials.accessToken,
+            store: new win.matrixcs.MemoryStore(),
+            scheduler: new win.matrixcs.MatrixScheduler(),
+            cryptoStore: new win.matrixcs.MemoryCryptoStore(),
+            cryptoCallbacks: { getCrossSigningKey, saveCrossSigningKeys },
+        });
+
+        if (opts.autoAcceptInvites) {
+            cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => {
+                if (member.membership === "invite" && member.userId === cli.getUserId()) {
+                    cli.joinRoom(member.roomId);
+                }
+            });
+        }
+
+        if (!opts.startClient) {
+            return cy.wrap(cli);
+        }
+
+        return cy.wrap(
+            cli
+                .initCrypto()
+                .then(() => cli.setGlobalErrorOnUnknownDevices(false))
+                .then(() => cli.startClient())
+                .then(async () => {
+                    if (opts.bootstrapCrossSigning) {
+                        await cli.bootstrapCrossSigning({
+                            authUploadDeviceSigningKeys: async (func) => {
+                                await func({});
+                            },
+                        });
+                    }
+                })
+                .then(() => cli),
+        );
+    });
+}
+
 Cypress.Commands.add("getBot", (synapse: SynapseInstance, opts: CreateBotOpts): Chainable<MatrixClient> => {
    opts = Object.assign({}, defaultCreateBotOptions, opts);
    const username = Cypress._.uniqueId("userId_");
    const password = Cypress._.uniqueId("password_");
    return cy.registerUser(synapse, username, password, opts.displayName).then((credentials) => {
        cy.log(`Registered bot user ${username} with displayname ${opts.displayName}`);
-        return cy.window({ log: false }).then((win) => {
-            const cli = new win.matrixcs.MatrixClient({
-                baseUrl: synapse.baseUrl,
-                userId: credentials.userId,
-                deviceId: credentials.deviceId,
-                accessToken: credentials.accessToken,
-                store: new win.matrixcs.MemoryStore(),
-                scheduler: new win.matrixcs.MatrixScheduler(),
-                cryptoStore: new win.matrixcs.MemoryCryptoStore(),
-            });
-
-            if (opts.autoAcceptInvites) {
-                cli.on(win.matrixcs.RoomMemberEvent.Membership, (event, member) => {
-                    if (member.membership === "invite" && member.userId === cli.getUserId()) {
-                        cli.joinRoom(member.roomId);
-                    }
-                });
-            }
-
-            if (!opts.startClient) {
-                return cy.wrap(cli);
-            }
-
-            return cy.wrap(
-                cli
-                    .initCrypto()
-                    .then(() => cli.setGlobalErrorOnUnknownDevices(false))
-                    .then(() => cli.startClient())
-                    .then(() =>
-                        cli.bootstrapCrossSigning({
-                            authUploadDeviceSigningKeys: async (func) => {
-                                await func({});
-                            },
-                        }),
-                    )
-                    .then(() => cli),
-            );
-        });
+        return setupBotClient(synapse, credentials, opts);
    });
 });

+Cypress.Commands.add(
+    "loginBot",
+    (synapse: SynapseInstance, username: string, password: string, opts: CreateBotOpts): Chainable<MatrixClient> => {
+        opts = Object.assign({}, defaultCreateBotOptions, { bootstrapCrossSigning: false }, opts);
+        return cy.loginUser(synapse, username, password).then((credentials) => {
+            return setupBotClient(synapse, credentials, opts);
+        });
+    },
+);
+
 Cypress.Commands.add("botJoinRoom", (cli: MatrixClient, roomId: string): Chainable<Room> => {
    return cy.wrap(cli.joinRoom(roomId));
 });
@@ -69,7 +69,7 @@ function stopSynapse(synapse?: SynapseInstance): Chainable<AUTWindow> {
    });
 }

-interface Credentials {
+export interface Credentials {
    accessToken: string;
    userId: string;
    deviceId: string;