Merge pull request #4580 from matrix-org/dbkr/dont_npe_if_no_device

Avoid soft crash if unknown device in verification

src/components/views/right_panel/EncryptionPanel.js

@@ -45,9 +45,6 @@ const EncryptionPanel = (props) => {
         }
     }, [verificationRequest]);
 
-    const deviceId = request && request.channel.deviceId;
-    const device = MatrixClientPeg.get().getStoredDevice(MatrixClientPeg.get().getUserId(), deviceId);
-
     useEffect(() => {
         async function awaitPromise() {
             setRequesting(true);
@@ -143,7 +140,7 @@ const EncryptionPanel = (props) => {
                 key={request.channel.transactionId}
                 inDialog={layout === "dialog"}
                 phase={phase}
-                device={device} />
+            />
         </React.Fragment>);
     }
 };

src/components/views/right_panel/VerificationPanel.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 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";
@@ -161,6 +162,11 @@ export default class VerificationPanel extends React.PureComponent {
         this.state.reciprocateQREvent.cancel();
     };
 
+    _getDevice() {
+        const deviceId = this.props.request && this.props.request.channel.deviceId;
+        return MatrixClientPeg.get().getStoredDevice(MatrixClientPeg.get().getUserId(), deviceId);
+    }
+
     renderQRReciprocatePhase() {
         const {member, request} = this.props;
         let Button;
@@ -217,16 +223,27 @@ export default class VerificationPanel extends React.PureComponent {
             }
         }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        let description;
-        const description = request.isSelfVerification ?
+        if (request.isSelfVerification) {
-            _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+            const device = this._getDevice();
-                deviceName: this.props.device.getDisplayName(),
+            if (!device) {
-                deviceId: this.props.device.deviceId,
+                // This can happen if the device is logged out while we're still showing verification
-            }):
+                // UI for it.
-            _t("You've successfully verified %(displayName)s!", {
+                console.warn("Verified device we don't know about: " + this.props.request.channel.deviceId);
+                description = _t("You've successfully verified your device!");
+            } else {
+                description = _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+                    deviceName: device ? device.getDisplayName() : '',
+                    deviceId: this.props.request.channel.deviceId,
+                });
+            }
+        } else {
+            description = _t("You've successfully verified %(displayName)s!", {
                 displayName: member.displayName || member.name || member.userId,
             });
+        }
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{_t("Verified")}</h3>
@@ -297,12 +314,12 @@ export default class VerificationPanel extends React.PureComponent {
                         const emojis = this.state.sasEvent ?
                             <VerificationShowSas
                                 displayName={displayName}
+                                device={this._getDevice()}
                                 sas={this.state.sasEvent.sas}
                                 onCancel={this._onSasMismatchesClick}
                                 onDone={this._onSasMatchesClick}
                                 inDialog={this.props.inDialog}
                                 isSelf={request.isSelfVerification}
-                                device={this.props.device}
                             /> : <Spinner />;
                         return <div className="mx_UserInfo_container">
                             <h3>{_t("Compare emoji")}</h3>

src/components/views/verification/VerificationShowSas.js

@@ -30,6 +30,7 @@ export default class VerificationShowSas extends React.Component {
     static propTypes = {
         pending: PropTypes.bool,
         displayName: PropTypes.string, // required if pending is true
+        device: PropTypes.object,
         onDone: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
@@ -116,10 +117,16 @@ export default class VerificationShowSas extends React.Component {
             let text;
             if (this.state.pending) {
                 if (this.props.isSelf) {
-                    text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                    // device shouldn't be null in this situation but it can be, eg. if the device is
-                        deviceName: this.props.device.getDisplayName(),
+                    // logged out during verification
-                        deviceId: this.props.device.deviceId,
+                    if (this.props.device) {
-                    });
+                        text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                            deviceName: this.props.device ? this.props.device.getDisplayName() : '',
+                            deviceId: this.props.device ? this.props.device.deviceId : '',
+                        });
+                    } else {
+                        text = _t("Waiting for your other session to verify…");
+                    }
                 } else {
                     const {displayName} = this.props;
                     text = _t("Waiting for %(displayName)s to verify…", {displayName});

src/i18n/strings/en_EN.json

@@ -494,6 +494,7 @@
     "Verify this user by confirming the following number appears on their screen.": "Verify this user by confirming the following number appears on their screen.",
     "Unable to find a supported verification method.": "Unable to find a supported verification method.",
     "Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…": "Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…",
+    "Waiting for your other session to verify…": "Waiting for your other session to verify…",
     "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
     "Cancelling…": "Cancelling…",
     "They match": "They match",
@@ -1280,6 +1281,7 @@
     "Yes": "Yes",
     "Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.",
     "In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.",
+    "You've successfully verified your device!": "You've successfully verified your device!",
     "You've successfully verified %(deviceName)s (%(deviceId)s)!": "You've successfully verified %(deviceName)s (%(deviceId)s)!",
     "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",
     "Verified": "Verified",