From a6c072ab42997208c16167b2de0689bfe4bb45fc Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 14 Feb 2020 13:48:18 +0100 Subject: [PATCH] only show supported verification methods also an error message if none match --- .../views/right_panel/VerificationPanel.js | 122 +++++++++++------- src/i18n/strings/en_EN.json | 5 +- 2 files changed, 80 insertions(+), 47 deletions(-) diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index 08c3935a2c..262d1c873b 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -19,6 +19,8 @@ import PropTypes from "prop-types"; import * as sdk from '../../../index'; import {verificationMethods} from 'matrix-js-sdk/src/crypto'; +import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode"; + import VerificationQRCode from "../elements/crypto/VerificationQRCode"; import {_t} from "../../../languageHandler"; import E2EIcon from "../rooms/E2EIcon"; @@ -54,7 +56,9 @@ export default class VerificationPanel extends React.PureComponent { qrCodeProps: null, // generated by the VerificationQRCode component itself }; this._hasVerifier = false; - this._generateQRCodeProps(props.request); + if (this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD)) { + this._generateQRCodeProps(props.request); + } } async _generateQRCodeProps(verificationRequest: VerificationRequest) { @@ -67,59 +71,60 @@ export default class VerificationPanel extends React.PureComponent { } renderQRPhase(pending) { - const {member} = this.props; + const {member, request} = this.props; + const showSAS = request.methods.includes(verificationMethods.SAS); + const showQR = this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD); const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + const noCommonMethodError = !showSAS && !showQR ? +

{_t("The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.")}

: + null; + if (this.props.layout === 'dialog') { // HACK: This is a terrible idea. - let qrCode =
; - if (this.state.qrCodeProps) { - qrCode = ; + let qrBlock; + let sasBlock; + if (showQR) { + let qrCode; + if (this.state.qrCodeProps) { + qrCode = ; + } else { + qrCode =
; + } + qrBlock = +
+

{_t("Scan this unique code")}

+ {qrCode} +
; } + if (showSAS) { + sasBlock = +
+

{_t("Compare unique emoji")}

+ {_t("Compare a unique set of emoji if you don't have a camera on either device")} + + {_t("Start")} + +
; + } + const or = qrBlock && sasBlock ? +
{_t("or")}
: null; return (
{_t("Verify this session by completing one of the following:")}
-
-

{_t("Scan this unique code")}

- {qrCode} -
-
{_t("or")}
-
-

{_t("Compare unique emoji")}

- {_t("Compare a unique set of emoji if you don't have a camera on either device")} - - {_t("Start")} - -
+ {qrBlock} + {or} + {sasBlock} + {noCommonMethodError}
); } - let button; - if (pending) { - button = ; - } else { - const disabled = this.state.emojiButtonClicked; - button = ( - - {_t("Verify by emoji")} - - ); - } - - if (!this.state.qrCodeProps) { - return
-

{_t("Verify by emoji")}

-

{_t("Verify by comparing unique emoji.")}

- { button } -
; - } - - // TODO: add way to open camera to scan a QR code - return -
+ let qrBlock; + if (this.state.qrCodeProps) { + qrBlock =

{_t("Verify by scanning")}

{_t("Ask %(displayName)s to scan your code:", { displayName: member.displayName || member.name || member.userId, @@ -128,14 +133,41 @@ export default class VerificationPanel extends React.PureComponent {

-
+
; + } -
+ let sasBlock; + if (showSAS) { + let button; + if (pending) { + button = ; + } else { + const disabled = this.state.emojiButtonClicked; + button = ( + + {_t("Verify by emoji")} + + ); + } + const sasLabel = this.state.qrCodeProps ? + _t("If you can't scan the code above, verify by comparing unique emoji.") : + _t("Verify by comparing unique emoji."); + sasBlock =

{_t("Verify by emoji")}

-

{_t("If you can't scan the code above, verify by comparing unique emoji.")}

- +

{sasLabel}

{ button } -
+
; + } + + const noCommonMethodBlock = noCommonMethodError ? +
{noCommonMethodError}
: + null; + + // TODO: add way to open camera to scan a QR code + return + {qrBlock} + {sasBlock} + {noCommonMethodBlock} ; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7a8642be95..00d8d426d0 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1197,11 +1197,12 @@ "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.", "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.", "Security": "Security", - "Verify by emoji": "Verify by emoji", - "Verify by comparing unique emoji.": "Verify by comparing unique emoji.", + "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.": "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.", "Verify by scanning": "Verify by scanning", "Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:", + "Verify by emoji": "Verify by emoji", "If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.", + "Verify by comparing unique emoji.": "Verify by comparing unique emoji.", "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!", "Got it": "Got it", "Verification timed out. Start verification again from their profile.": "Verification timed out. Start verification again from their profile.",