Merge pull request #2613 from matrix-org/dbkr/sas_profile

Add display name / avatar to incoming sas dialog

res/css/_components.scss

@@ -57,6 +57,7 @@
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";

res/css/views/dialogs/_IncomingSasDialog.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_IncomingSasDialog_opponentProfile_image {
+    position: relative;
+}
+
+.mx_IncomingSasDialog_opponentProfile h2 {
+    display: inline-block;
+    margin-left: 10px;
+}

src/components/views/dialogs/IncomingSasDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
@@ -37,9 +38,12 @@ export default class IncomingSasDialog extends React.Component {
         this.state = {
             phase: PHASE_START,
             sasVerified: false,
+            opponentProfile: null,
+            opponentProfileError: null,
         };
         this.props.verifier.on('show_sas', this._onVerifierShowSas);
         this.props.verifier.on('cancel', this._onVerifierCancel);
+        this._fetchOpponentProfile();
     }
 
     componentWillUnmount() {
@@ -49,6 +53,21 @@ export default class IncomingSasDialog extends React.Component {
         this.props.verifier.removeListener('show_sas', this._onVerifierShowSas);
     }
 
+    async _fetchOpponentProfile() {
+        try {
+            const prof = await MatrixClientPeg.get().getProfileInfo(
+                this.props.verifier.userId,
+            );
+            this.setState({
+                opponentProfile: prof,
+            });
+        } catch (e) {
+            this.setState({
+                opponentProfileError: e,
+            });
+        }
+    }
+
     _onFinished = () => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
     }
@@ -93,10 +112,39 @@ export default class IncomingSasDialog extends React.Component {
 
     _renderPhaseStart() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Spinner = sdk.getComponent("views.elements.Spinner");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+
+        let profile;
+        if (this.state.opponentProfile) {
+            profile = <div className="mx_IncomingSasDialog_opponentProfile">
+                <BaseAvatar name={this.state.opponentProfile.displayname}
+                    idName={this.props.verifier.userId}
+                    url={MatrixClientPeg.get().mxcUrlToHttp(
+                        this.state.opponentProfile.avatar_url,
+                        Math.floor(48 * window.devicePixelRatio),
+                        Math.floor(48 * window.devicePixelRatio),
+                        'crop',
+                    )}
+                    width={48} height={48} resizeMethod='crop'
+                />
+                <h2>{this.state.opponentProfile.displayname}</h2>
+            </div>;
+        } else if (this.state.opponentProfileError) {
+            profile = <div>
+                <BaseAvatar name={this.props.verifier.userId.slice(1)}
+                    idName={this.props.verifier.userId}
+                    width={48} height={48}
+                />
+                <h2>{this.props.verifier.userId}</h2>
+            </div>;
+        } else {
+            profile = <Spinner />;
+        }
 
         return (
             <div>
-                <h2>{this.props.verifier.userId}</h2>
+                {profile}
                 <p>{_t(
                     "Verify this user to mark them as trusted. " +
                     "Trusting users gives you extra peace of mind when using " +