only show supported verification methods

also an error message if none match

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 ?
+            <p>{_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.")}</p> :
+            null;
+
         if (this.props.layout === 'dialog') {
             // HACK: This is a terrible idea.
-            let qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
-            if (this.state.qrCodeProps) {
-                qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
+            let qrBlock;
+            let sasBlock;
+            if (showQR) {
+                let qrCode;
+                if (this.state.qrCodeProps) {
+                    qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
+                } else {
+                    qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
+                }
+                qrBlock =
+                    <div className='mx_VerificationPanel_QRPhase_startOption'>
+                        <p>{_t("Scan this unique code")}</p>
+                        {qrCode}
+                    </div>;
             }
+            if (showSAS) {
+                sasBlock =
+                    <div className='mx_VerificationPanel_QRPhase_startOption'>
+                        <p>{_t("Compare unique emoji")}</p>
+                        <span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                        <AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this._startSAS} kind='primary'>
+                            {_t("Start")}
+                        </AccessibleButton>
+                    </div>;
+            }
+            const or = qrBlock && sasBlock ?
+                <div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div> : null;
             return (
                 <div>
                     {_t("Verify this session by completing one of the following:")}
                     <div className='mx_VerificationPanel_QRPhase_startOptions'>
-                        <div className='mx_VerificationPanel_QRPhase_startOption'>
-                            <p>{_t("Scan this unique code")}</p>
-                            {qrCode}
-                        </div>
-                        <div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div>
-                        <div className='mx_VerificationPanel_QRPhase_startOption'>
-                            <p>{_t("Compare unique emoji")}</p>
-                            <span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
-                            <AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this._startSAS} kind='primary'>
-                                {_t("Start")}
-                            </AccessibleButton>
-                        </div>
+                        {qrBlock}
+                        {or}
+                        {sasBlock}
+                        {noCommonMethodError}
                     </div>
                 </div>
             );
         }
 
-        let button;
-        if (pending) {
-            button = <Spinner />;
-        } else {
-            const disabled = this.state.emojiButtonClicked;
-            button = (
-                <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
-                    {_t("Verify by emoji")}
-                </AccessibleButton>
-            );
-        }
-
-        if (!this.state.qrCodeProps) {
-            return <div className="mx_UserInfo_container">
-                <h3>{_t("Verify by emoji")}</h3>
-                <p>{_t("Verify by comparing unique emoji.")}</p>
-                { button }
-            </div>;
-        }
-
-        // TODO: add way to open camera to scan a QR code
-        return <React.Fragment>
-            <div className="mx_UserInfo_container">
+        let qrBlock;
+        if (this.state.qrCodeProps) {
+            qrBlock = <div className="mx_UserInfo_container">
                 <h3>{_t("Verify by scanning")}</h3>
                 <p>{_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 {
                 <div className="mx_VerificationPanel_qrCode">
                     <VerificationQRCode {...this.state.qrCodeProps} />
                 </div>
-            </div>
+            </div>;
+        }
 
-            <div className="mx_UserInfo_container">
+        let sasBlock;
+        if (showSAS) {
+            let button;
+            if (pending) {
+                button = <Spinner />;
+            } else {
+                const disabled = this.state.emojiButtonClicked;
+                button = (
+                    <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
+                        {_t("Verify by emoji")}
+                    </AccessibleButton>
+                );
+            }
+            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 = <div className="mx_UserInfo_container">
                 <h3>{_t("Verify by emoji")}</h3>
-                <p>{_t("If you can't scan the code above, verify by comparing unique emoji.")}</p>
-
+                <p>{sasLabel}</p>
                 { button }
-            </div>
+            </div>;
+        }
+
+        const noCommonMethodBlock = noCommonMethodError ?
+             <div className="mx_UserInfo_container">{noCommonMethodError}</div> :
+             null;
+
+        // TODO: add way to open camera to scan a QR code
+        return <React.Fragment>
+            {qrBlock}
+            {sasBlock}
+            {noCommonMethodBlock}
         </React.Fragment>;
     }
 

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