diff --git a/res/css/_components.scss b/res/css/_components.scss index 57a34023c0..80add0b1ad 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/dialogs/_IncomingSasDialog.scss b/res/css/views/dialogs/_IncomingSasDialog.scss new file mode 100644 index 0000000000..3a9d645a98 --- /dev/null +++ b/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; +} diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js index 2a76e8a904..da2211c10f 100644 --- a/src/components/views/dialogs/IncomingSasDialog.js +++ b/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 =
+ +

{this.state.opponentProfile.displayname}

+
; + } else if (this.state.opponentProfileError) { + profile =
+ +

{this.props.verifier.userId}

+
; + } else { + profile = ; + } return (
-

{this.props.verifier.userId}

+ {profile}

{_t( "Verify this user to mark them as trusted. " + "Trusting users gives you extra peace of mind when using " +