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.",