diff --git a/cypress/e2e/crypto/decryption-failure.spec.ts b/cypress/e2e/crypto/decryption-failure.spec.ts new file mode 100644 index 0000000000..c947240400 --- /dev/null +++ b/cypress/e2e/crypto/decryption-failure.spec.ts @@ -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 => { + return new Promise((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 => { + return cy.wrap( + new Promise((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"); + }); +}); diff --git a/cypress/support/bot.ts b/cypress/support/bot.ts index d02a0f857b..f4476af12f 100644 --- a/cypress/support/bot.ts +++ b/cypress/support/bot.ts @@ -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; + /** + * 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; /** * 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 { + 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) => { + 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 => { 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 => { + 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 => { return cy.wrap(cli.joinRoom(roomId)); }); diff --git a/cypress/support/synapse.ts b/cypress/support/synapse.ts index c8af95c577..69e05969cb 100644 --- a/cypress/support/synapse.ts +++ b/cypress/support/synapse.ts @@ -69,7 +69,7 @@ function stopSynapse(synapse?: SynapseInstance): Chainable { }); } -interface Credentials { +export interface Credentials { accessToken: string; userId: string; deviceId: string; diff --git a/res/css/_components.pcss b/res/css/_components.pcss index cec02b53f3..1abf50ee41 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -218,6 +218,7 @@ @import "./views/messages/_CallEvent.pcss"; @import "./views/messages/_CreateEvent.pcss"; @import "./views/messages/_DateSeparator.pcss"; +@import "./views/messages/_DecryptionFailureBody.pcss"; @import "./views/messages/_DisambiguatedProfile.pcss"; @import "./views/messages/_EventTileBubble.pcss"; @import "./views/messages/_HiddenBody.pcss"; @@ -260,6 +261,7 @@ @import "./views/rooms/_Autocomplete.pcss"; @import "./views/rooms/_AuxPanel.pcss"; @import "./views/rooms/_BasicMessageComposer.pcss"; +@import "./views/rooms/_DecryptionFailureBar.pcss"; @import "./views/rooms/_E2EIcon.pcss"; @import "./views/rooms/_EditMessageComposer.pcss"; @import "./views/rooms/_EmojiButton.pcss"; diff --git a/res/css/views/messages/_DecryptionFailureBody.pcss b/res/css/views/messages/_DecryptionFailureBody.pcss new file mode 100644 index 0000000000..2414f6caa1 --- /dev/null +++ b/res/css/views/messages/_DecryptionFailureBody.pcss @@ -0,0 +1,20 @@ +/* +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. +*/ + +.mx_DecryptionFailureBody { + color: $secondary-content; + font-style: italic; +} diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss new file mode 100644 index 0000000000..06a51d2664 --- /dev/null +++ b/res/css/views/rooms/_DecryptionFailureBar.pcss @@ -0,0 +1,60 @@ +/* +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. +*/ + +.mx_DecryptionFailureBar { + background-color: $system; + padding: $spacing-12; + margin-left: $spacing-16; + margin-right: $spacing-16; + border-radius: 4px; + display: flex; + align-items: flex-start; + gap: $spacing-12; +} + +.mx_DecryptionFailureBar_icon { + width: 24px; + height: 24px; + mask-image: url("$(res)/img/e2e/decryption-failure.svg"); + background-color: $alert; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; +} + +.mx_DecryptionFailureBar_icon, +.mx_DecryptionFailureBar .mx_Spinner { + flex-shrink: 0; + flex-grow: 0; +} + +.mx_DecryptionFailureBar_message { + flex-grow: 1; +} + +.mx_DecryptionFailureBar_message_headline { + font-weight: $font-semi-bold; + font-size: $font-16px; + margin-bottom: $spacing-4; +} + +.mx_DecryptionFailureBar_message_body { + color: $secondary-content; +} + +.mx_DecryptionFailureBar_button { + flex-shrink: 0; +} diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss index 2a0087871a..21b05a020c 100644 --- a/res/css/views/rooms/_EventBubbleTile.pcss +++ b/res/css/views/rooms/_EventBubbleTile.pcss @@ -478,11 +478,9 @@ limitations under the License. grid-template: "reply reply" auto "shield body" auto - "shield link" auto / auto 1fr; .mx_UnknownBody, - .mx_EventTile_keyRequestInfo, .mx_ReplyChain_wrapper, .mx_ViewSourceEvent { min-width: 0; /* Prevent a grid blowout */ @@ -490,16 +488,15 @@ limitations under the License. .mx_EventTile_e2eIcon { grid-area: shield; + margin-top: auto; + margin-bottom: auto; } - .mx_UnknownBody { + .mx_UnknownBody, + .mx_DecryptionFailureBody { grid-area: body; } - .mx_EventTile_keyRequestInfo { - grid-area: link; - } - .mx_ReplyChain_wrapper { grid-area: reply; } @@ -512,7 +509,6 @@ limitations under the License. align-items: center; grid-template: "shield source" auto - "shield link" auto / auto 1fr; .mx_ViewSourceEvent { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 4ab808302c..932e1d7c23 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -685,6 +685,11 @@ $left-gutter: 64px; mask-image: url("$(res)/img/e2e/normal.svg"); background-color: $header-panel-text-primary-color; } + + &.mx_EventTile_e2eIcon_decryption_failure::after { + mask-image: url("$(res)/img/e2e/decryption-failure.svg"); + background-color: $secondary-content; + } } .mx_EventTile_body { @@ -793,33 +798,6 @@ $left-gutter: 64px; mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); } -.mx_EventTile_keyRequestInfo { - font-size: $font-12px; - - .mx_EventTile_keyRequestInfo_text { - opacity: 0.5; - - .mx_AccessibleButton { - color: $primary-content; - text-decoration: underline; - } - } -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p { - text-align: auto; - margin-left: 3px; - margin-right: 3px; - - &:first-child { - margin-top: 0px; - } - - &:last-child { - margin-bottom: 0px; - } -} - .mx_EventTile_tileError { color: red; text-align: center; diff --git a/res/img/e2e/decryption-failure.svg b/res/img/e2e/decryption-failure.svg new file mode 100644 index 0000000000..244e5d2816 --- /dev/null +++ b/res/img/e2e/decryption-failure.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index da13e32894..24b049a16b 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -61,6 +61,7 @@ import RoomPreviewBar from "../views/rooms/RoomPreviewBar"; import RoomPreviewCard from "../views/rooms/RoomPreviewCard"; import SearchBar, { SearchScope } from "../views/rooms/SearchBar"; import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar"; +import { DecryptionFailureBar } from "../views/rooms/DecryptionFailureBar"; import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader, { ISearchInfo } from "../views/rooms/RoomHeader"; import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore"; @@ -220,6 +221,8 @@ export interface IRoomState { threadId?: string; liveTimeline?: EventTimeline; narrow: boolean; + // List of undecryptable events currently visible on-screen + visibleDecryptionFailures?: MatrixEvent[]; } interface LocalRoomViewProps { @@ -412,6 +415,7 @@ export class RoomView extends React.Component { timelineRenderingType: TimelineRenderingType.Room, liveTimeline: undefined, narrow: false, + visibleDecryptionFailures: [], }; this.dispatcherRef = dis.register(this.onAction); @@ -1166,6 +1170,7 @@ export class RoomView extends React.Component { private onEventDecrypted = (ev: MatrixEvent) => { if (!this.state.room || !this.state.matrixClientIsReady) return; // not ready at all if (ev.getRoomId() !== this.state.room.roomId) return; // not for us + this.updateVisibleDecryptionFailures(); if (ev.isDecryptionFailure()) return; this.handleEffects(ev); }; @@ -1470,7 +1475,21 @@ export class RoomView extends React.Component { } }; - private onMessageListScroll = (ev) => { + private updateVisibleDecryptionFailures = throttle( + () => + this.setState((prevState) => ({ + visibleDecryptionFailures: + this.messagePanel?.getVisibleDecryptionFailures( + // If there were visible failures last time we checked, + // add a margin to provide hysteresis and prevent flickering + (prevState.visibleDecryptionFailures?.length ?? 0) > 0, + ) ?? [], + })), + 500, + { leading: false, trailing: true }, + ); + + private onMessageListScroll = () => { if (this.messagePanel.isAtEndOfLiveTimeline()) { this.setState({ numUnreadMessages: 0, @@ -1482,6 +1501,7 @@ export class RoomView extends React.Component { }); } this.updateTopUnreadMessagesBar(); + this.updateVisibleDecryptionFailures(); }; private resetJumpToEvent = (eventId?: string) => { @@ -2028,7 +2048,7 @@ export class RoomView extends React.Component { const hiddenHighlightCount = this.getHiddenHighlightCount(); - let aux = null; + let aux: JSX.Element | undefined; let previewBar; if (this.state.timelineRenderingType === TimelineRenderingType.Search) { aux = ( @@ -2079,6 +2099,11 @@ export class RoomView extends React.Component { ); } + let decryptionFailureBar: JSX.Element | undefined; + if (this.state.visibleDecryptionFailures && this.state.visibleDecryptionFailures.length > 0) { + decryptionFailureBar = ; + } + if (this.state.room?.isSpaceRoom() && !this.props.forceTimeline) { return ( { resizeNotifier={this.props.resizeNotifier} > {aux} + {decryptionFailureBar} ); diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 72063cab14..743a409834 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -64,6 +64,9 @@ const READ_RECEIPT_INTERVAL_MS = 500; const READ_MARKER_DEBOUNCE_MS = 100; +// How far off-screen a decryption failure can be for it to still count as "visible" +const VISIBLE_DECRYPTION_FAILURE_MARGIN = 100; + const debuglog = (...args: any[]) => { if (SettingsStore.getValue("debug_timeline_panel")) { logger.log.call(console, "TimelinePanel debuglog:", ...args); @@ -149,7 +152,9 @@ interface IProps { } interface IState { + // All events, including still-pending events being sent by us events: MatrixEvent[]; + // Only events that are actually in the live timeline liveEvents: MatrixEvent[]; // track whether our room timeline is loading timelineLoading: boolean; @@ -1690,6 +1695,45 @@ class TimelinePanel extends React.Component { return index > -1 ? index : null; } + /** + * Get a list of undecryptable events currently visible on-screen. + * + * @param {boolean} addMargin Whether to add an extra margin beyond the viewport + * where events are still considered "visible" + * + * @returns {MatrixEvent[] | null} A list of undecryptable events, or null if + * the list of events could not be determined. + */ + public getVisibleDecryptionFailures(addMargin?: boolean): MatrixEvent[] | null { + const messagePanel = this.messagePanel.current; + if (!messagePanel) return null; + + const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as Element; + if (!messagePanelNode) return null; // sometimes this happens for fresh rooms/post-sync + const wrapperRect = messagePanelNode.getBoundingClientRect(); + const margin = addMargin ? VISIBLE_DECRYPTION_FAILURE_MARGIN : 0; + const screenTop = wrapperRect.top - margin; + const screenBottom = wrapperRect.bottom + margin; + + const result: MatrixEvent[] = []; + for (const ev of this.state.liveEvents) { + const eventId = ev.getId(); + if (!eventId) continue; + const node = messagePanel.getNodeForEventId(eventId); + if (!node) continue; + + const boundingRect = node.getBoundingClientRect(); + if (boundingRect.top > screenBottom) { + // we have gone past the visible section of timeline + break; + } else if (boundingRect.bottom >= screenTop) { + // the tile for this event is in the visible part of the screen (or just above/below it). + if (ev.isDecryptionFailure()) result.push(ev); + } + } + return result; + } + private getLastDisplayedEventIndex(opts: IEventIndexOpts = {}): number | null { const ignoreOwn = opts.ignoreOwn || false; const allowPartial = opts.allowPartial || false; @@ -1702,7 +1746,7 @@ class TimelinePanel extends React.Component { const wrapperRect = messagePanelNode.getBoundingClientRect(); const myUserId = MatrixClientPeg.get().credentials.userId; - const isNodeInView = (node) => { + const isNodeInView = (node: HTMLElement) => { if (node) { const boundingRect = node.getBoundingClientRect(); if ( diff --git a/src/components/views/messages/DecryptionFailureBody.tsx b/src/components/views/messages/DecryptionFailureBody.tsx new file mode 100644 index 0000000000..95e9cefe0e --- /dev/null +++ b/src/components/views/messages/DecryptionFailureBody.tsx @@ -0,0 +1,27 @@ +/* +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 React from "react"; + +import { _t } from "../../../languageHandler"; +import { IBodyProps } from "./IBodyProps"; + +// A placeholder element for messages that could not be decrypted +export default class DecryptionFailureBody extends React.Component> { + render() { + return
{_t("Unable to decrypt message")}
; + } +} diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx index bb759e9d06..e91aa41a3f 100644 --- a/src/components/views/messages/MessageEvent.tsx +++ b/src/components/views/messages/MessageEvent.tsx @@ -40,6 +40,7 @@ import MPollBody from "./MPollBody"; import MLocationBody from "./MLocationBody"; import MjolnirBody from "./MjolnirBody"; import MBeaconBody from "./MBeaconBody"; +import DecryptionFailureBody from "./DecryptionFailureBody"; import { GetRelationsForEvent, IEventTileOps } from "../rooms/EventTile"; import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../voice-broadcast"; @@ -152,7 +153,9 @@ export default class MessageEvent extends React.Component implements IMe let BodyType: React.ComponentType> | ReactAnyComponent = RedactedBody; if (!this.props.mxEvent.isRedacted()) { // only resolve BodyType if event is not redacted - if (type && this.evTypes.has(type)) { + if (this.props.mxEvent.isDecryptionFailure()) { + BodyType = DecryptionFailureBody; + } else if (type && this.evTypes.has(type)) { BodyType = this.evTypes.get(type); } else if (msgtype && this.bodyTypes.has(msgtype)) { BodyType = this.bodyTypes.get(msgtype); diff --git a/src/components/views/rooms/DecryptionFailureBar.tsx b/src/components/views/rooms/DecryptionFailureBar.tsx new file mode 100644 index 0000000000..e3f24eb63d --- /dev/null +++ b/src/components/views/rooms/DecryptionFailureBar.tsx @@ -0,0 +1,238 @@ +/* +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 React, { useCallback, useContext, useEffect, useState } from "react"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { CryptoEvent } from "matrix-js-sdk/src/crypto"; + +import Modal from "../../../Modal"; +import { _t } from "../../../languageHandler"; +import defaultDispatcher from "../../../dispatcher/dispatcher"; +import { Action } from "../../../dispatcher/actions"; +import AccessibleButton from "../elements/AccessibleButton"; +import { OpenToTabPayload } from "../../../dispatcher/payloads/OpenToTabPayload"; +import { UserTab } from "../dialogs/UserTab"; +import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import SetupEncryptionDialog from "../dialogs/security/SetupEncryptionDialog"; +import { SetupEncryptionStore } from "../../../stores/SetupEncryptionStore"; +import Spinner from "../elements/Spinner"; + +interface IProps { + failures: MatrixEvent[]; +} + +// Number of milliseconds to display a loading spinner before prompting the user for action +const WAIT_PERIOD = 5000; + +export const DecryptionFailureBar: React.FC = ({ failures }) => { + const context = useContext(MatrixClientContext); + + // Display a spinner for a few seconds before presenting an error message, + // in case keys are about to arrive + const [waiting, setWaiting] = useState(true); + useEffect(() => { + const timeout = setTimeout(() => setWaiting(false), WAIT_PERIOD); + return () => clearTimeout(timeout); + }, []); + + // Is this device unverified? + const [needsVerification, setNeedsVerification] = useState(false); + // Does this user have verified devices other than this device? + const [hasOtherVerifiedDevices, setHasOtherVerifiedDevices] = useState(false); + // Does this user have key backups? + const [hasKeyBackup, setHasKeyBackup] = useState(false); + + // Keep track of session IDs that the user has sent key + // requests for using the Resend Key Requests button + const [requestedSessions, setRequestedSessions] = useState>(new Set()); + // Keep track of whether there are any sessions the user has not yet sent requests for + const [anyUnrequestedSessions, setAnyUnrequestedSessions] = useState(true); + + useEffect(() => { + setAnyUnrequestedSessions( + failures.some((event) => { + const sessionId = event.getWireContent().session_id; + return sessionId && !requestedSessions.has(sessionId); + }), + ); + }, [failures, requestedSessions, setAnyUnrequestedSessions]); + + // Send key requests for any sessions that we haven't previously + // sent requests for. This is important if, for instance, we + // failed to decrypt a message because a key was withheld (in + // which case, we wouldn't bother requesting the key), but have + // since verified our device. In that case, now that the device is + // verified, other devices might be willing to share the key with us + // now. + const sendKeyRequests = useCallback(() => { + const newRequestedSessions = new Set(requestedSessions); + + for (const event of failures) { + const sessionId = event.getWireContent().session_id; + if (!sessionId || newRequestedSessions.has(sessionId)) continue; + newRequestedSessions.add(sessionId); + context.cancelAndResendEventRoomKeyRequest(event); + } + setRequestedSessions(newRequestedSessions); + }, [context, requestedSessions, setRequestedSessions, failures]); + + // Recheck which devices are verified and whether we have key backups + const updateDeviceInfo = useCallback(async () => { + const deviceId = context.getDeviceId()!; + let verified = true; // if we can't get a clear answer, don't bug the user about verifying + try { + verified = context.checkIfOwnDeviceCrossSigned(deviceId); + } catch (e) { + console.error("Error getting device cross-signing info", e); + } + setNeedsVerification(!verified); + + let otherVerifiedDevices = false; + try { + const devices = context.getStoredDevicesForUser(context.getUserId()!); + otherVerifiedDevices = devices.some( + (device) => device.deviceId !== deviceId && context.checkIfOwnDeviceCrossSigned(device.deviceId), + ); + } catch (e) { + console.error("Error getting info about other devices", e); + } + setHasOtherVerifiedDevices(otherVerifiedDevices); + + let keyBackup = false; + try { + const keys = await context.isSecretStored("m.cross_signing.master"); + keyBackup = keys !== null && Object.keys(keys).length > 0; + } catch (e) { + console.error("Error getting info about key backups", e); + } + setHasKeyBackup(keyBackup); + }, [context]); + + // Update our device info on initial render, and continue updating + // it whenever the client has an update + useEffect(() => { + updateDeviceInfo().catch(console.error); + context.on(CryptoEvent.DevicesUpdated, updateDeviceInfo); + return () => { + context.off(CryptoEvent.DevicesUpdated, updateDeviceInfo); + }; + }, [context, updateDeviceInfo]); + + const onVerifyClick = (): void => { + Modal.createDialog(SetupEncryptionDialog); + }; + + const onDeviceListClick = (): void => { + const payload: OpenToTabPayload = { action: Action.ViewUserSettings, initialTabId: UserTab.Security }; + defaultDispatcher.dispatch(payload); + }; + + const onResetClick = (): void => { + const store = SetupEncryptionStore.sharedInstance(); + store.resetConfirm(); + }; + + const statusIndicator = waiting ? :
; + + let headline: JSX.Element; + let body: JSX.Element; + let button = ; + if (waiting) { + headline = {_t("Decrypting messages...")}; + body = ( + + {_t("Please wait as we try to decrypt your messages. This may take a few moments.")} + + ); + } else if (needsVerification) { + if (hasOtherVerifiedDevices || hasKeyBackup) { + headline = {_t("Verify this device to access all messages")}; + body = ( + + {_t("This device was unable to decrypt some messages because it has not been verified yet.")} + + ); + button = ( + + {_t("Verify")} + + ); + } else { + headline = {_t("Reset your keys to prevent future decryption errors")}; + body = ( + + {_t( + "You will not be able to access old undecryptable messages, " + + "but resetting your keys will allow you to receive new messages.", + )} + + ); + button = ( + + {_t("Reset")} + + ); + } + } else if (hasOtherVerifiedDevices) { + headline = {_t("Open another device to load encrypted messages")}; + body = ( + + {_t( + "This device is requesting decryption keys from your other devices. " + + "Opening one of your other devices may speed this up.", + )} + + ); + button = ( + + {_t("View your device list")} + + ); + } else { + headline = {_t("Some messages could not be decrypted")}; + body = ( + + {_t( + "Unfortunately, there are no other verified devices to request decryption keys from. " + + "Signing in and verifying other devices may help avoid this situation in the future.", + )} + + ); + } + + let keyRequestButton = ; + if (!needsVerification && hasOtherVerifiedDevices && anyUnrequestedSessions) { + keyRequestButton = ( +
+ + {_t("Resend key requests")} + +
+ ); + } + + return ( +
+ {statusIndicator} +
+
{headline}
+
{body}
+
+
{button}
+ {keyRequestButton} +
+ ); +}; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 28a6fff29b..ac6fefdfda 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -55,7 +55,6 @@ import PlatformPeg from "../../../PlatformPeg"; import MemberAvatar from "../avatars/MemberAvatar"; import SenderProfile from "../messages/SenderProfile"; import MessageTimestamp from "../messages/MessageTimestamp"; -import TooltipButton from "../elements/TooltipButton"; import { IReadReceiptInfo } from "./ReadReceiptMarker"; import MessageActionBar from "../messages/MessageActionBar"; import ReactionsRow from "../messages/ReactionsRow"; @@ -70,7 +69,7 @@ import { ThreadNotificationState } from "../../../stores/notifications/ThreadNot import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationStateEvents } from "../../../stores/notifications/NotificationState"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import { ButtonEvent } from "../elements/AccessibleButton"; import { copyPlaintext, getSelectedText } from "../../../utils/strings"; import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker"; import RedactedBody from "../messages/RedactedBody"; @@ -234,8 +233,6 @@ interface IState { actionBarFocused: boolean; // Whether the event's sender has been verified. verified: string; - // Whether onRequestKeysClick has been called since mounting. - previouslyRequestedKeys: boolean; // The Relations model from the JS SDK for reactions to `mxEvent` reactions?: Relations | null | undefined; @@ -283,8 +280,6 @@ export class UnwrappedEventTile extends React.Component actionBarFocused: false, // Whether the event's sender has been verified. verified: null, - // Whether onRequestKeysClick has been called since mounting. - previouslyRequestedKeys: false, // The Relations model from the JS SDK for reactions to `mxEvent` reactions: this.getReactions(), // Context menu position @@ -758,20 +753,7 @@ export class UnwrappedEventTile extends React.Component }); }; - private onRequestKeysClick = () => { - this.setState({ - // Indicate in the UI that the keys have been requested (this is expected to - // be reset if the component is mounted in the future). - previouslyRequestedKeys: true, - }); - - // Cancel any outgoing key request for this event and resend it. If a response - // is received for the request with the required keys, the event could be - // decrypted successfully. - MatrixClientPeg.get().cancelAndResendEventRoomKeyRequest(this.props.mxEvent); - }; - - private onPermalinkClicked = (e) => { + private onPermalinkClicked = (e: MouseEvent) => { // This allows the permalink to be opened in a new tab/window or copied as // matrix.to, but also for it to enable routing within Element when clicked. e.preventDefault(); @@ -789,11 +771,11 @@ export class UnwrappedEventTile extends React.Component const ev = this.props.mxEvent; // no icon for local rooms - if (isLocalRoom(ev.getRoomId())) return; + if (isLocalRoom(ev.getRoomId()!)) return; // event could not be decrypted - if (ev.getContent().msgtype === "m.bad.encrypted") { - return ; + if (ev.isDecryptionFailure()) { + return ; } // event is encrypted and not redacted, display padlock corresponding to whether or not it is verified @@ -1160,55 +1142,6 @@ export class UnwrappedEventTile extends React.Component const timestamp = showTimestamp && ts ? messageTimestamp : null; - const keyRequestHelpText = ( -
-

- {this.state.previouslyRequestedKeys - ? _t( - "Your key share request has been sent - please check your other sessions " + - "for key share requests.", - ) - : _t( - "Key share requests are sent to your other sessions automatically. If you " + - "rejected or dismissed the key share request on your other sessions, click " + - "here to request the keys for this session again.", - )} -

-

- {_t( - "If your other sessions do not have the key for this message you will not " + - "be able to decrypt them.", - )} -

-
- ); - const keyRequestInfoContent = this.state.previouslyRequestedKeys - ? _t("Key request sent.") - : _t( - "Re-request encryption keys from your other sessions.", - {}, - { - requestLink: (sub) => ( - - {sub} - - ), - }, - ); - - const keyRequestInfo = - isEncryptionFailure && !isRedacted ? ( -
- {keyRequestInfoContent} - -
- ) : null; - let reactionsRow; if (!isRedacted) { reactionsRow = ( @@ -1543,7 +1476,6 @@ export class UnwrappedEventTile extends React.Component }, this.context.showHiddenEvents, )} - {keyRequestInfo} {actionBar} {this.props.layout === Layout.IRC && ( <> @@ -1578,23 +1510,19 @@ const SafeEventTile = forwardRef((props: EventTileProps, ref: RefObject; -} - -function E2ePadlockUnverified(props) { +function E2ePadlockUnverified(props: Omit) { return ; } -function E2ePadlockUnencrypted(props) { +function E2ePadlockUnencrypted(props: Omit) { return ; } -function E2ePadlockUnknown(props) { +function E2ePadlockUnknown(props: Omit) { return ; } -function E2ePadlockUnauthenticated(props) { +function E2ePadlockUnauthenticated(props: Omit) { return ( ) { + return ( + + ); +} + enum E2ePadlockIcon { Normal = "normal", Warning = "warning", + DecryptionFailure = "decryption_failure", } interface IE2ePadlockProps { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 146fbafd85..abee5e48db 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1850,6 +1850,18 @@ "Remove %(phone)s?": "Remove %(phone)s?", "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains.", "Phone Number": "Phone Number", + "Decrypting messages...": "Decrypting messages...", + "Please wait as we try to decrypt your messages. This may take a few moments.": "Please wait as we try to decrypt your messages. This may take a few moments.", + "Verify this device to access all messages": "Verify this device to access all messages", + "This device was unable to decrypt some messages because it has not been verified yet.": "This device was unable to decrypt some messages because it has not been verified yet.", + "Reset your keys to prevent future decryption errors": "Reset your keys to prevent future decryption errors", + "You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.": "You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages.", + "Open another device to load encrypted messages": "Open another device to load encrypted messages", + "This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.": "This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up.", + "View your device list": "View your device list", + "Some messages could not be decrypted": "Some messages could not be decrypted", + "Unfortunately, there are no other verified devices to request decryption keys from. Signing in and verifying other devices may help avoid this situation in the future.": "Unfortunately, there are no other verified devices to request decryption keys from. Signing in and verifying other devices may help avoid this situation in the future.", + "Resend key requests": "Resend key requests", "This user has not verified all of their sessions.": "This user has not verified all of their sessions.", "You have not verified this user.": "You have not verified this user.", "You have verified this user. This user has verified all of their sessions.": "You have verified this user. This user has verified all of their sessions.", @@ -1861,19 +1873,14 @@ "Mod": "Mod", "From a thread": "From a thread", "This event could not be displayed": "This event could not be displayed", - "Your key share request has been sent - please check your other sessions for key share requests.": "Your key share request has been sent - please check your other sessions for key share requests.", - "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.": "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.", - "If your other sessions do not have the key for this message you will not be able to decrypt them.": "If your other sessions do not have the key for this message you will not be able to decrypt them.", - "Key request sent.": "Key request sent.", - "Re-request encryption keys from your other sessions.": "Re-request encryption keys from your other sessions.", "Message Actions": "Message Actions", "View in room": "View in room", "Copy link to thread": "Copy link to thread", - "This message cannot be decrypted": "This message cannot be decrypted", "Encrypted by an unverified session": "Encrypted by an unverified session", "Unencrypted": "Unencrypted", "Encrypted by a deleted session": "Encrypted by a deleted session", "The authenticity of this encrypted message can't be guaranteed on this device.": "The authenticity of this encrypted message can't be guaranteed on this device.", + "This message could not be decrypted": "This message could not be decrypted", "Sending your message...": "Sending your message...", "Encrypting your message...": "Encrypting your message...", "Your message was sent": "Your message was sent", @@ -2286,6 +2293,7 @@ "Last month": "Last month", "The beginning of the room": "The beginning of the room", "Jump to date": "Jump to date", + "Unable to decrypt message": "Unable to decrypt message", "Downloading": "Downloading", "Decrypting": "Decrypting", "Download": "Download", diff --git a/test/components/views/rooms/DecryptionFailureBar-test.tsx b/test/components/views/rooms/DecryptionFailureBar-test.tsx new file mode 100644 index 0000000000..a716d38c26 --- /dev/null +++ b/test/components/views/rooms/DecryptionFailureBar-test.tsx @@ -0,0 +1,411 @@ +/* +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 React from "react"; +import { act, fireEvent, render, screen, waitFor, RenderResult } from "@testing-library/react"; +import "@testing-library/jest-dom"; + +import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; +import { DecryptionFailureBar } from "../../../../src/components/views/rooms/DecryptionFailureBar"; + +type MockDevice = { deviceId: string }; + +const verifiedDevice1: MockDevice = { deviceId: "verified1" }; +const verifiedDevice2: MockDevice = { deviceId: "verified2" }; +const unverifiedDevice1: MockDevice = { deviceId: "unverified1" }; +const unverifiedDevice2: MockDevice = { deviceId: "unverified2" }; + +const mockEvent1 = { + event: { event_id: "mockEvent1" }, + getWireContent: () => ({ session_id: "sessionA" }), +}; + +const mockEvent2 = { + event: { event_id: "mockEvent2" }, + getWireContent: () => ({ session_id: "sessionB" }), +}; + +const mockEvent3 = { + event: { event_id: "mockEvent3" }, + getWireContent: () => ({ session_id: "sessionB" }), +}; + +const userId = "@user:example.com"; + +let ourDevice: MockDevice | undefined; +let allDevices: MockDevice[] | undefined; +let keyBackup = false; +let callback = async () => {}; + +const mockClient = { + getUserId: () => userId, + getDeviceId: () => ourDevice?.deviceId, + getStoredDevicesForUser: () => allDevices, + isSecretStored: jest.fn(() => Promise.resolve(keyBackup ? { key: "yes" } : null)), + checkIfOwnDeviceCrossSigned: (deviceId: string) => deviceId.startsWith("verified"), + downloadKeys: jest.fn(() => {}), + cancelAndResendEventRoomKeyRequest: jest.fn(() => {}), + on: (_: any, cb: () => Promise) => { + callback = cb; + }, + off: () => {}, +}; + +function getBar(wrapper: RenderResult) { + return wrapper.container.querySelector(".mx_DecryptionFailureBar"); +} + +describe("", () => { + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + const container = document.body.firstChild; + container && document.body.removeChild(container); + + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + + mockClient.cancelAndResendEventRoomKeyRequest.mockClear(); + }); + + it("Displays a loading spinner", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1]; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Prompts the user to verify if they have other devices", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1, verifiedDevice1]; + keyBackup = false; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Prompts the user to verify if they have backups", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1]; + keyBackup = true; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Prompts the user to reset if they have no other verified devices and no backups", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1, unverifiedDevice2]; + keyBackup = false; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Recommends opening other devices if there are other verified devices", async () => { + ourDevice = verifiedDevice1; + allDevices = [verifiedDevice1, verifiedDevice2]; + keyBackup = false; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Displays a general error message if there are no other verified devices", async () => { + ourDevice = verifiedDevice1; + allDevices = [verifiedDevice1, unverifiedDevice1]; + keyBackup = true; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Displays button to resend key requests if we are verified", async () => { + ourDevice = verifiedDevice1; + allDevices = [verifiedDevice1, verifiedDevice2]; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + fireEvent.click(screen.getByText("Resend key requests")); + + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledTimes(2); + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledWith(mockEvent1); + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledWith(mockEvent2); + + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Does not display a button to send key requests if we are unverified", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1, verifiedDevice2]; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Displays the button to resend key requests only if there are sessions we haven't already requested", async () => { + ourDevice = verifiedDevice1; + allDevices = [verifiedDevice1, verifiedDevice2]; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + fireEvent.click(screen.getByText("Resend key requests")); + + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledTimes(1); + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledWith(mockEvent3); + + expect(getBar(bar)).toMatchSnapshot(); + + bar.rerender( + // @ts-ignore + + + , + , + ); + + expect(getBar(bar)).toMatchSnapshot(); + + mockClient.cancelAndResendEventRoomKeyRequest.mockClear(); + + fireEvent.click(screen.getByText("Resend key requests")); + + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledTimes(1); + expect(mockClient.cancelAndResendEventRoomKeyRequest).toHaveBeenCalledWith(mockEvent1); + + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); + + it("Handles device updates", async () => { + ourDevice = unverifiedDevice1; + allDevices = [unverifiedDevice1, verifiedDevice2]; + + const bar = render( + // @ts-ignore + + + , + , + ); + + await waitFor(() => expect(mockClient.isSecretStored).toHaveBeenCalled()); + act(() => { + jest.advanceTimersByTime(5000); + }); + expect(getBar(bar)).toMatchSnapshot(); + + ourDevice = verifiedDevice1; + await act(callback); + expect(getBar(bar)).toMatchSnapshot(); + + bar.unmount(); + }); +}); diff --git a/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap new file mode 100644 index 0000000000..bb21174a30 --- /dev/null +++ b/test/components/views/rooms/__snapshots__/DecryptionFailureBar-test.tsx.snap @@ -0,0 +1,573 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Displays a general error message if there are no other verified devices 1`] = ` +
+
+
+
+ Some messages could not be decrypted +
+
+ Unfortunately, there are no other verified devices to request decryption keys from. Signing in and verifying other devices may help avoid this situation in the future. +
+
+
+
+`; + +exports[` Displays a loading spinner 1`] = ` +
+
+
+
+
+
+ Decrypting messages... +
+
+ Please wait as we try to decrypt your messages. This may take a few moments. +
+
+
+
+`; + +exports[` Displays button to resend key requests if we are verified 1`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+
+ Resend key requests +
+
+
+`; + +exports[` Displays button to resend key requests if we are verified 2`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+`; + +exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 1`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+
+ Resend key requests +
+
+
+`; + +exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 2`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+`; + +exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 3`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+
+ Resend key requests +
+
+
+`; + +exports[` Displays the button to resend key requests only if there are sessions we haven't already requested 4`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+`; + +exports[` Does not display a button to send key requests if we are unverified 1`] = ` +
+
+
+
+ Verify this device to access all messages +
+
+ This device was unable to decrypt some messages because it has not been verified yet. +
+
+
+
+ Verify +
+
+
+`; + +exports[` Handles device updates 1`] = ` +
+
+
+
+ Verify this device to access all messages +
+
+ This device was unable to decrypt some messages because it has not been verified yet. +
+
+
+
+ Verify +
+
+
+`; + +exports[` Handles device updates 2`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+
+ Resend key requests +
+
+
+`; + +exports[` Prompts the user to reset if they have no other verified devices and no backups 1`] = ` +
+
+
+
+ Reset your keys to prevent future decryption errors +
+
+ You will not be able to access old undecryptable messages, but resetting your keys will allow you to receive new messages. +
+
+
+
+ Reset +
+
+
+`; + +exports[` Prompts the user to verify if they have backups 1`] = ` +
+
+
+
+ Verify this device to access all messages +
+
+ This device was unable to decrypt some messages because it has not been verified yet. +
+
+
+
+ Verify +
+
+
+`; + +exports[` Prompts the user to verify if they have other devices 1`] = ` +
+
+
+
+ Verify this device to access all messages +
+
+ This device was unable to decrypt some messages because it has not been verified yet. +
+
+
+
+ Verify +
+
+
+`; + +exports[` Recommends opening other devices if there are other verified devices 1`] = ` +
+
+
+
+ Open another device to load encrypted messages +
+
+ This device is requesting decryption keys from your other devices. Opening one of your other devices may speed this up. +
+
+
+
+ View your device list +
+
+
+
+ Resend key requests +
+
+
+`;