From 030d594e67ec09f451da928d5b177188c6c7c35a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 3 Apr 2020 17:03:37 +0200
Subject: [PATCH] for self-verif, mention which device, not user we're
 verifying in panel

---
 .../views/right_panel/EncryptionPanel.js           | 10 +++++++++-
 .../views/right_panel/VerificationPanel.js         | 14 +++++++++++---
 .../views/verification/VerificationShowSas.js      | 11 +++++++++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 152f4c0aa0..da06c37f75 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -22,6 +22,7 @@ import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {useAsyncMemo} from "../../../hooks/useAsyncMemo";
 import Modal from "../../../Modal";
 import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import * as sdk from "../../../index";
@@ -45,6 +46,12 @@ const EncryptionPanel = (props) => {
         }
     }, [verificationRequest]);
 
+    const deviceId = request && request.channel.deviceId;
+    const device = useAsyncMemo(() => {
+        const cli = MatrixClientPeg.get();
+        return cli.getStoredDevice(cli.getUserId(), deviceId);
+    }, [deviceId]);
+
     useEffect(() => {
         async function awaitPromise() {
             setRequesting(true);
@@ -139,7 +146,8 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 inDialog={inDialog}
-                phase={phase} />
+                phase={phase}
+                device={device} />
         </React.Fragment>);
     }
 };
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index 22cf855d2c..e114b60b28 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -210,12 +210,19 @@ export default class VerificationPanel extends React.PureComponent {
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const description = request.isSelfVerification ?
+            _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+                deviceName: this.props.device.getDisplayName(),
+                deviceId: this.props.device.deviceId,
+            }):
+            _t("You've successfully verified %(displayName)s!", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{_t("Verified")}</h3>
-                <p>{_t("You've successfully verified %(displayName)s!", {
-                    displayName: member.displayName || member.name || member.userId,
-                })}</p>
+                <p>{description}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
                 <p>{ text }</p>
 
@@ -276,6 +283,7 @@ export default class VerificationPanel extends React.PureComponent {
                                 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>
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 36f2df6360..7e9096e8fe 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -107,8 +107,15 @@ export default class VerificationShowSas extends React.Component {
         if (this.state.pending || this.state.cancelling) {
             let text;
             if (this.state.pending) {
-                const {displayName} = this.props;
-                text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                if (this.props.isSelf) {
+                    text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                        deviceName: this.props.device.getDisplayName(),
+                        deviceId: this.props.device.deviceId,
+                    });
+                } else {
+                    const {displayName} = this.props;
+                    text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                }
             } else {
                 text = _t("Cancelling…");
             }