From 3a3cced90543f73fafda914c5656cce5cf47fed5 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 8 Mar 2018 11:48:04 +0000 Subject: [PATCH] E2E "fudge-button" Implement a UI to expose a JS-SDK API for cancelling and resending a room key request for an event. This is useful in scenarios where the user has dismissed the request on their other devices and would like to send the restart the verification dance manually. Depends on JS-SDK PR https://github.com/matrix-org/matrix-js-sdk/pull/624 --- src/components/views/rooms/EventTile.js | 63 ++++++++++++++++++++++++- src/i18n/strings/en_EN.json | 5 ++ 2 files changed, 66 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 1d8df4c7a6..62af1ad2db 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -152,7 +152,17 @@ module.exports = withMatrixClient(React.createClass({ }, getInitialState: function() { - return {menu: false, allReadAvatars: false, verified: null}; + return { + // Whether the context menu is being displayed. + menu: false, + // Whether all read receipts are being displayed. If not, only display + // a truncation of them. + allReadAvatars: false, + // Whether the event's sender has been verified. + verified: null, + // Whether onRequestKeysClick has been called since mounting. + previouslyRequestedKeys: false, + }; }, componentWillMount: function() { @@ -393,6 +403,19 @@ module.exports = withMatrixClient(React.createClass({ }); }, + onRequestKeysClick: function() { + 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. + this.props.matrixClient.cancelAndResendEventRoomKeyRequest(this.props.mxEvent); + }, + onPermalinkClicked: function(e) { // 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 Riot when clicked. @@ -458,6 +481,7 @@ module.exports = withMatrixClient(React.createClass({ const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1); const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted; + const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure(); const classes = classNames({ mx_EventTile: true, @@ -474,7 +498,7 @@ module.exports = withMatrixClient(React.createClass({ menu: this.state.menu, mx_EventTile_verified: this.state.verified == true, mx_EventTile_unverified: this.state.verified == false, - mx_EventTile_bad: msgtype === 'm.bad.encrypted', + mx_EventTile_bad: isEncryptionFailure, mx_EventTile_emote: msgtype === 'm.emote', mx_EventTile_redacted: isRedacted, }); @@ -534,6 +558,40 @@ module.exports = withMatrixClient(React.createClass({ const timestamp = this.props.mxEvent.getTs() ? : null; + const keyRequestHelpText = +
+

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

+

+ { _t( 'If your other devices 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 devices.', + {}, + {'requestLink': (sub) => { sub }}, + ); + + const ToolTipButton = sdk.getComponent('elements.ToolTipButton'); + const keyRequestInfo = isEncryptionFailure ? +
+ + { keyRequestInfoContent } + + +
: null; + switch (this.props.tileShape) { case 'notif': { const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId()); @@ -627,6 +685,7 @@ module.exports = withMatrixClient(React.createClass({ highlightLink={this.props.highlightLink} showUrlPreview={this.props.showUrlPreview} onWidgetLoad={this.props.onWidgetLoad} /> + { keyRequestInfo } { editButton } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 6a8ec64ffa..5ef919179d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -265,6 +265,11 @@ "%(senderName)s sent a video": "%(senderName)s sent a video", "%(senderName)s uploaded a file": "%(senderName)s uploaded a file", "Options": "Options", + "Your key share request has been sent - please check your other devices for key share requests.": "Your key share request has been sent - please check your other devices for key share requests.", + "Key share requests are sent to your other devices automatically. If you rejected or dismissed the key share request on your other devices, click here to request the keys for this session again.": "Key share requests are sent to your other devices automatically. If you rejected or dismissed the key share request on your other devices, click here to request the keys for this session again.", + "If your other devices do not have the key for this message you will not be able to decrypt them.": "If your other devices 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 devices.": "Re-request encryption keys from your other devices.", "Undecryptable": "Undecryptable", "Encrypted by a verified device": "Encrypted by a verified device", "Encrypted by an unverified device": "Encrypted by an unverified device",