Merge branch 'develop' into travis/update-qr-code

res/css/_components.scss

@@ -143,7 +143,9 @@
 @import "./views/messages/_TextualEvent.scss";
 @import "./views/messages/_UnknownBody.scss";
 @import "./views/messages/_ViewSourceEvent.scss";
+@import "./views/right_panel/_EncryptionInfo.scss";
 @import "./views/right_panel/_UserInfo.scss";
+@import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/room_settings/_ColorSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -15,6 +15,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_CreateSecretStorageDialog {
+    // Why you ask? Because CompleteSecurityBody is 600px so this is the width
+    // we end up when in there, but when in our own dialog we set our own width
+    // so need to fix it to something sensible as otherwise we'd end up either
+    // really wide or really narrow depending on the phase. I bet you wish you
+    // never asked.
+    width: 560px;
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: 600;
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+}
+
 .mx_CreateSecretStorageDialog .mx_Dialog_title {
     /* TODO: Consider setting this for all dialog titles. */
     margin-bottom: 1em;

res/css/views/right_panel/_EncryptionInfo.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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_UserInfo {
+    .mx_EncryptionInfo_spinner {
+        .mx_Spinner {
+            margin-top: 25px;
+            margin-bottom: 15px;
+        }
+
+        text-align: center;
+    }
+}

res/css/views/right_panel/_UserInfo.scss

@@ -49,12 +49,17 @@ limitations under the License.
     }
 
     .mx_UserInfo_container {
-        padding: 0 16px 16px 16px;
+        padding: 8px 16px;
+    }
+
+    .mx_UserInfo_separator {
         border-bottom: 1px solid lightgray;
     }
 
     .mx_UserInfo_memberDetailsContainer {
+        padding-top: 0;
         padding-bottom: 0;
+        margin-bottom: 8px;
     }
 
     .mx_RoomTile_nameContainer {
@@ -76,6 +81,7 @@ limitations under the License.
     .mx_UserInfo_avatar > div {
         max-width: 30vh;
         margin: 0 auto;
+        transition: 0.5s;
     }
 
     .mx_UserInfo_avatar > div > div {
@@ -105,6 +111,7 @@ limitations under the License.
         // override the calculated sizes so that the letter isn't HUGE
         font-size: 56px !important;
         width: 100% !important;
+        transition: font-size 0.5s;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
@@ -204,10 +211,9 @@ limitations under the License.
         padding-bottom: 16px;
     }
 
-    .mx_UserInfo_scrollContainer .mx_UserInfo_container {
+    .mx_UserInfo_scrollContainer:not(.mx_UserInfo_separator) {
         padding-top: 16px;
         padding-bottom: 0;
-        border-bottom: none;
 
         > :not(h3) {
             margin-left: 8px;
@@ -256,11 +262,17 @@ limitations under the License.
 
     .mx_UserInfo_verify {
         display: block;
-        background-color: $accent-color;
-        color: $accent-fg-color;
-        border-radius: 4px;
-        padding: 7px 1.5em;
-        text-align: center;
         margin: 16px 0;
     }
 }
+
+.mx_UserInfo.mx_UserInfo_smallAvatar {
+    .mx_UserInfo_avatar > div {
+        max-width: 72px;
+        margin: 0 auto;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        font-size: 40px !important; // override the other override because here the avatar is smaller
+    }
+}

res/css/views/right_panel/_VerificationPanel.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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_UserInfo {
+    .mx_VerificationPanel_verified_section .mx_E2EIcon {
+        margin: 0 auto;
+    }
+
+    .mx_VerificationPanel_qrCode {
+        padding: 4px 4px 0 4px;
+        background: white;
+        border-radius: 4px;
+        width: max-content;
+        max-width: 100%;
+        margin: 0 auto;
+
+        canvas {
+            // override height and width which are set on the element directly
+            height: auto !important;
+            width: 100% !important;
+            max-width: 240px;
+        }
+    }
+}

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -25,19 +25,16 @@ limitations under the License.
 }
 
 .mx_TopUnreadMessagesBar::after {
-    content: "·";
+    content: "";
     position: absolute;
     top: -8px;
     left: 11px;
-    width: 16px;
+    width: 4px;
-    height: 16px;
+    height: 4px;
     border-radius: 16px;
-    font-weight: 600;
+    overflow: hidden;
-    font-size: 30px;
+    background-color: $secondary-accent-color;
-    line-height: 14px;
+    border: 6px solid $accent-color;
-    text-align: center;
-    color: $secondary-accent-color;
-    background-color: $accent-color;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -25,15 +25,14 @@ import { _t } from '../../../../languageHandler';
 import Modal from '../../../../Modal';
 
 const PHASE_LOADING = 0;
-const PHASE_RESTORE_KEY_BACKUP = 1;
+const PHASE_MIGRATE = 1;
-const PHASE_MIGRATE = 2;
+const PHASE_PASSPHRASE = 2;
-const PHASE_PASSPHRASE = 3;
+const PHASE_PASSPHRASE_CONFIRM = 3;
-const PHASE_PASSPHRASE_CONFIRM = 4;
+const PHASE_SHOWKEY = 4;
-const PHASE_SHOWKEY = 5;
+const PHASE_KEEPITSAFE = 5;
-const PHASE_KEEPITSAFE = 6;
+const PHASE_STORING = 6;
-const PHASE_STORING = 7;
+const PHASE_DONE = 7;
-const PHASE_DONE = 8;
+const PHASE_CONFIRM_SKIP = 8;
-const PHASE_OPTOUT_CONFIRM = 9;
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
 const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
@@ -58,7 +57,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         accountPassword: PropTypes.string,
     };
 
-    defaultProps = {
+    static defaultProps = {
         hasCancel: true,
     };
 
@@ -88,6 +87,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             // set if we are 'upgrading' encryption (making an SSSS store from
             // an existing key backup secret).
             doingUpgrade: null,
+            // status of the key backup toggle switch
+            useKeyBackup: true,
         };
 
         this._fetchBackupInfo();
@@ -110,9 +111,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             MatrixClientPeg.get().isCryptoEnabled() && await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo)
         );
 
-        const phase = backupInfo ?
+        const phase = backupInfo ? PHASE_MIGRATE : PHASE_PASSPHRASE;
-            (backupSigStatus.usable ? PHASE_MIGRATE : PHASE_RESTORE_KEY_BACKUP) :
-            PHASE_PASSPHRASE;
 
         this.setState({
             phase,
@@ -144,16 +143,26 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onKeyBackupStatusChange = () => {
-        this._fetchBackupInfo();
+        if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo();
     }
 
     _collectRecoveryKeyNode = (n) => {
         this._recoveryKeyNode = n;
     }
 
+    _onUseKeyBackupChange = (enabled) => {
+        this.setState({
+            useKeyBackup: enabled,
+        });
+    }
+
     _onMigrateFormSubmit = (e) => {
         e.preventDefault();
-        this._bootstrapSecretStorage();
+        if (this.state.backupSigStatus.usable) {
+            this._bootstrapSecretStorage();
+        } else {
+            this._restoreBackup();
+        }
     }
 
     _onCopyClick = () => {
@@ -221,6 +230,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
                 createSecretStorageKey: async () => this._keyInfo,
                 keyBackupInfo: this.state.backupInfo,
+                setupNewKeyBackup: !this.state.backupInfo && this.state.useKeyBackup,
             });
             this.setState({
                 phase: PHASE_DONE,
@@ -228,6 +238,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         } catch (e) {
             if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) {
                 this.setState({
+                    accountPassword: '',
                     accountPasswordCorrect: false,
                     phase: PHASE_MIGRATE,
                 });
@@ -246,16 +257,26 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         this.props.onFinished(true);
     }
 
-    _onRestoreKeyBackupClick = () => {
+    _restoreBackup = async () => {
         const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
-        Modal.createTrackedDialog(
+        const { finished } = Modal.createTrackedDialog(
             'Restore Backup', '', RestoreKeyBackupDialog, {showSummary: false}, null,
             /* priority = */ false, /* static = */ true,
         );
+
+        await finished;
+        await this._fetchBackupInfo();
+        if (
+            this.state.backupSigStatus.usable &&
+            this.state.canUploadKeysWithPasswordOnly &&
+            this.state.accountPassword
+        ) {
+            this._bootstrapSecretStorage();
+        }
     }
 
-    _onOptOutClick = () => {
+    _onSkipSetupClick = () => {
-        this.setState({phase: PHASE_OPTOUT_CONFIRM});
+        this.setState({phase: PHASE_CONFIRM_SKIP});
     }
 
     _onSetUpClick = () => {
@@ -367,23 +388,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _renderPhaseRestoreKeyBackup() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <div>
-            <p>{_t(
-                "Key Backup is enabled on your account but has not been set " +
-                "up from this session. To set up secret storage, " +
-                "restore your key backup.",
-            )}</p>
-            <DialogButtons primaryButton={_t('Restore')}
-                onPrimaryButtonClick={this._onRestoreKeyBackupClick}
-                onCancel={this._onCancel}
-                hasCancel={true}
-            >
-            </DialogButtons>
-        </div>;
-    }
-
     _renderPhaseMigrate() {
         // TODO: This is a temporary screen so people who have the labs flag turned on and
         // click the button are aware they're making a change to their account.
@@ -394,7 +398,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         const Field = sdk.getComponent('views.elements.Field');
 
         let authPrompt;
-        if (this.state.canUploadKeysWithPasswordOnly) {
+        let nextCaption = _t("Next");
+        if (!this.state.backupSigStatus.usable) {
+            authPrompt = <div>
+                <div>{_t("Restore your key backup to upgrade your encryption")}</div>
+            </div>;
+            nextCaption = _t("Restore");
+        } else if (this.state.canUploadKeysWithPasswordOnly) {
             authPrompt = <div>
                 <div>{_t("Enter your account password to confirm the upgrade:")}</div>
                 <div><Field type="password"
@@ -419,12 +429,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 "as trusted for other users.",
             )}</p>
             <div>{authPrompt}</div>
-            <DialogButtons primaryButton={_t('Next')}
+            <DialogButtons primaryButton={nextCaption}
                 primaryIsSubmit={true}
-                hasCancel={true}
+                hasCancel={false}
-                onCancel={this._onCancel}
                 primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
-            />
+            >
+                <button type="button" className="danger" onClick={this._onSkipSetupClick}>
+                    {_t('Skip')}
+                </button>
+            </DialogButtons>
         </form>;
     }
 
@@ -432,6 +445,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Field = sdk.getComponent('views.elements.Field');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
 
         let strengthMeter;
         let helpText;
@@ -480,13 +494,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 </div>
             </div>
 
+            <LabelledToggleSwitch
+                label={ _t("Back up my encryption keys, securing them with the same passphrase")}
+                onChange={this._onUseKeyBackupChange} value={this.state.useKeyBackup}
+            />
+
             <DialogButtons primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}
                 disabled={!this._passPhraseIsValid()}
             >
                 <button type="button"
-                    onClick={this._onCancel}
+                    onClick={this._onSkipSetupClick}
                     className="danger"
                 >{_t("Skip")}</button>
             </DialogButtons>
@@ -554,7 +573,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
             >
                 <button type="button"
-                    onClick={this._onCancel}
+                    onClick={this._onSkipSetupClick}
                     className="danger"
                 >{_t("Skip")}</button>
             </DialogButtons>
@@ -659,35 +678,32 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         </div>;
     }
 
-    _renderPhaseOptOutConfirm() {
+    _renderPhaseSkipConfirm() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             {_t(
-                "Without setting up secret storage, you won't be able to restore your " +
+                "Without completing security on this device, it won’t have " +
-                "access to encrypted messages or your cross-signing identity for " +
+                "access to encrypted messages.",
-                "verifying other devices if you log out or use another device.",
         )}
-            <DialogButtons primaryButton={_t('Set up secret storage')}
+            <DialogButtons primaryButton={_t('Go back')}
                 onPrimaryButtonClick={this._onSetUpClick}
                 hasCancel={false}
             >
-                <button onClick={this._onCancel}>I understand, continue without</button>
+                <button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>
             </DialogButtons>
         </div>;
     }
 
     _titleForPhase(phase) {
         switch (phase) {
-            case PHASE_RESTORE_KEY_BACKUP:
-                return _t('Restore your Key Backup');
             case PHASE_MIGRATE:
                 return _t('Upgrade your encryption');
             case PHASE_PASSPHRASE:
                 return _t('Set up encryption');
             case PHASE_PASSPHRASE_CONFIRM:
                 return _t('Confirm passphrase');
-            case PHASE_OPTOUT_CONFIRM:
+            case PHASE_CONFIRM_SKIP:
-                return _t('Warning!');
+                return _t('Are you sure?');
             case PHASE_SHOWKEY:
                 return _t('Recovery key');
             case PHASE_KEEPITSAFE:
@@ -722,9 +738,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 case PHASE_LOADING:
                     content = this._renderBusyPhase();
                     break;
-                case PHASE_RESTORE_KEY_BACKUP:
-                    content = this._renderPhaseRestoreKeyBackup();
-                    break;
                 case PHASE_MIGRATE:
                     content = this._renderPhaseMigrate();
                     break;
@@ -746,8 +759,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 case PHASE_DONE:
                     content = this._renderPhaseDone();
                     break;
-                case PHASE_OPTOUT_CONFIRM:
+                case PHASE_CONFIRM_SKIP:
-                    content = this._renderPhaseOptOutConfirm();
+                    content = this._renderPhaseSkipConfirm();
                     break;
             }
         }
@@ -763,6 +776,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 title={this._titleForPhase(this.state.phase)}
                 headerImage={headerImage}
                 hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
+                fixedWidth={false}
             >
             <div>
                 {content}

src/components/structures/RightPanel.js

@@ -169,7 +169,6 @@ export default class RightPanel extends React.Component {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const UserInfo = sdk.getComponent('right_panel.UserInfo');
-        const EncryptionPanel = sdk.getComponent('right_panel.EncryptionPanel');
         const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
@@ -181,64 +180,82 @@ export default class RightPanel extends React.Component {
 
         let panel = <div />;
 
-        if (this.props.roomId && this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList) {
+        switch (this.state.phase) {
-            panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+            case RIGHT_PANEL_PHASES.RoomMemberList:
-        } else if (this.props.groupId && this.state.phase === RIGHT_PANEL_PHASES.GroupMemberList) {
+                if (this.props.roomId) {
-            panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomList) {
+                }
-            panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
+                break;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) {
+            case RIGHT_PANEL_PHASES.GroupMemberList:
-            if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                if (this.props.groupId) {
-                const onClose = () => {
+                    panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
-                    dis.dispatch({
+                }
-                        action: "view_user",
+                break;
-                        member: null,
+            case RIGHT_PANEL_PHASES.GroupRoomList:
-                    });
+                panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-                };
+                break;
-                panel = <UserInfo
+            case RIGHT_PANEL_PHASES.RoomMemberInfo:
-                    user={this.state.member}
+            case RIGHT_PANEL_PHASES.EncryptionPanel:
-                    roomId={this.props.roomId}
+                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-                    key={this.props.roomId || this.state.member.userId}
+                    const onClose = () => {
-                    onClose={onClose}
+                        dis.dispatch({
-                />;
+                            action: "view_user",
-            } else {
+                            member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
-                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+                        });
-            }
+                    };
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.Room3pidMemberInfo) {
+                    panel = <UserInfo
-            panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
+                        user={this.state.member}
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupMemberInfo) {
+                        roomId={this.props.roomId}
-            if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                        key={this.props.roomId || this.state.member.userId}
-                const onClose = () => {
+                        onClose={onClose}
-                    dis.dispatch({
+                        phase={this.state.phase}
-                        action: "view_user",
+                        verificationRequest={this.state.verificationRequest}
-                        member: null,
+                    />;
-                    });
+                } else {
-                };
+                    panel = <MemberInfo
-                panel = <UserInfo
+                        member={this.state.member}
-                    user={this.state.member}
+                        key={this.props.roomId || this.state.member.userId}
-                    groupId={this.props.groupId}
+                    />;
-                    key={this.state.member.userId}
+                }
-                    onClose={onClose} />;
+                break;
-            } else {
+            case RIGHT_PANEL_PHASES.Room3pidMemberInfo:
-                panel = (
+                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
-                    <GroupMemberInfo
+                break;
-                        groupMember={this.state.member}
+            case RIGHT_PANEL_PHASES.GroupMemberInfo:
+                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                    const onClose = () => {
+                        dis.dispatch({
+                            action: "view_user",
+                            member: null,
+                        });
+                    };
+                    panel = <UserInfo
+                        user={this.state.member}
                         groupId={this.props.groupId}
-                        key={this.state.member.user_id}
+                        key={this.state.member.userId}
-                    />
+                        onClose={onClose} />;
-                );
+                } else {
-            }
+                    panel = (
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomInfo) {
+                        <GroupMemberInfo
-            panel = <GroupRoomInfo
+                            groupMember={this.state.member}
-                groupRoomId={this.state.groupRoomId}
+                            groupId={this.props.groupId}
-                groupId={this.props.groupId}
+                            key={this.state.member.user_id}
-                key={this.state.groupRoomId} />;
+                        />
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.NotificationPanel) {
+                    );
-            panel = <NotificationPanel />;
+                }
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.FilePanel) {
+                break;
-            panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
+            case RIGHT_PANEL_PHASES.GroupRoomInfo:
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
+                panel = <GroupRoomInfo
-            panel = <EncryptionPanel member={this.state.member} verificationRequest={this.state.verificationRequest} />;
+                    groupRoomId={this.state.groupRoomId}
+                    groupId={this.props.groupId}
+                    key={this.state.groupRoomId} />;
+                break;
+            case RIGHT_PANEL_PHASES.NotificationPanel:
+                panel = <NotificationPanel />;
+                break;
+            case RIGHT_PANEL_PHASES.FilePanel:
+                panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
+                break;
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {

src/components/structures/TimelinePanel.js

@@ -2,7 +2,7 @@
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -146,6 +146,9 @@ const TimelinePanel = createReactClass({
             liveEvents: [],
             timelineLoading: true, // track whether our room timeline is loading
 
+            // the index of the first event that is to be shown
+            firstVisibleEventIndex: 0,
+
             // canBackPaginate == false may mean:
             //
             // * we haven't (successfully) loaded the timeline yet, or:
@@ -333,11 +336,12 @@ const TimelinePanel = createReactClass({
 
             // We can now paginate in the unpaginated direction
             const canPaginateKey = (backwards) ? 'canBackPaginate' : 'canForwardPaginate';
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             this.setState({
                 [canPaginateKey]: true,
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             });
         }
     },
@@ -369,6 +373,11 @@ const TimelinePanel = createReactClass({
             return Promise.resolve(false);
         }
 
+        if (backwards && this.state.firstVisibleEventIndex !== 0) {
+            debuglog("TimelinePanel: won't", dir, "paginate past first visible event");
+            return Promise.resolve(false);
+        }
+
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
         this.setState({[paginatingKey]: true});
 
@@ -377,12 +386,13 @@ const TimelinePanel = createReactClass({
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
 
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             const newState = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             };
 
             // moving the window in this direction may mean that we can now
@@ -402,7 +412,11 @@ const TimelinePanel = createReactClass({
             // itself into the right place
             return new Promise((resolve) => {
                 this.setState(newState, () => {
-                    resolve(r);
+                    // we can continue paginating in the given direction if:
+                    // - _timelineWindow.paginate says we can
+                    // - we're paginating forwards, or we won't be trying to
+                    //   paginate backwards past the first visible event
+                    resolve(r && (!backwards || firstVisibleEventIndex === 0));
                 });
             });
         });
@@ -476,12 +490,13 @@ const TimelinePanel = createReactClass({
         this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => {
             if (this.unmounted) { return; }
 
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             const lastLiveEvent = liveEvents[liveEvents.length - 1];
 
             const updatedState = {
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             };
 
             let callRMUpdated;
@@ -1115,6 +1130,7 @@ const TimelinePanel = createReactClass({
     // get the list of events from the timeline window and the pending event list
     _getEvents: function() {
         const events = this._timelineWindow.getEvents();
+        const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
 
         // Hold onto the live events separately. The read receipt and read marker
         // should use this list, so that they don't advance into pending events.
@@ -1128,9 +1144,72 @@ const TimelinePanel = createReactClass({
         return {
             events,
             liveEvents,
+            firstVisibleEventIndex,
         };
     },
 
+    /**
+     * Check for undecryptable messages that were sent while the user was not in
+     * the room.
+     *
+     * @param {Array<MatrixEvent>} events The timeline events to check
+     *
+     * @return {Number} The index within `events` of the event after the most recent
+     * undecryptable event that was sent while the user was not in the room.  If no
+     * such events were found, then it returns 0.
+     */
+    _checkForPreJoinUISI: function(events) {
+        const room = this.props.timelineSet.room;
+
+        if (events.length === 0 || !room ||
+            !MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
+            return 0;
+        }
+
+        const userId = MatrixClientPeg.get().credentials.userId;
+
+        // get the user's membership at the last event by getting the timeline
+        // that the event belongs to, and traversing the timeline looking for
+        // that event, while keeping track of the user's membership
+        const lastEvent = events[events.length - 1];
+        const timeline = room.getTimelineForEvent(lastEvent.getId());
+        const userMembershipEvent =
+              timeline.getState(EventTimeline.FORWARDS).getMember(userId);
+        let userMembership = userMembershipEvent
+            ? userMembershipEvent.membership : "leave";
+        const timelineEvents = timeline.getEvents();
+        for (let i = timelineEvents.length - 1; i >= 0; i--) {
+            const event = timelineEvents[i];
+            if (event.getId() === lastEvent.getId()) {
+                // found the last event, so we can stop looking through the timeline
+                break;
+            } else if (event.getStateKey() === userId
+                       && event.getType() === "m.room.member") {
+                const prevContent = event.getPrevContent();
+                userMembership = prevContent.membership || "leave";
+            }
+        }
+
+        // now go through the events that we have and find the first undecryptable
+        // one that was sent when the user wasn't in the room
+        for (let i = events.length - 1; i >= 0; i--) {
+            const event = events[i];
+            if (event.getStateKey() === userId
+                && event.getType() === "m.room.member") {
+                const prevContent = event.getPrevContent();
+                userMembership = prevContent.membership || "leave";
+            } else if (userMembership === "leave" &&
+                       (event.isDecryptionFailure() || event.isBeingDecrypted())) {
+                // reached an undecryptable message when the user wasn't in
+                // the room -- don't try to load any more
+                // Note: for now, we assume that events that are being decrypted are
+                // not decryptable
+                return i + 1;
+            }
+        }
+        return 0;
+    },
+
     _indexForEventId: function(evId) {
         for (let i = 0; i < this.state.events.length; ++i) {
             if (evId == this.state.events[i].getId()) {
@@ -1323,6 +1402,9 @@ const TimelinePanel = createReactClass({
             this.state.forwardPaginating ||
             ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
+        const events = this.state.firstVisibleEventIndex
+              ? this.state.events.slice(this.state.firstVisibleEventIndex)
+              : this.state.events;
         return (
             <MessagePanel
                 ref={this._messagePanel}
@@ -1331,7 +1413,7 @@ const TimelinePanel = createReactClass({
                 hidden={this.props.hidden}
                 backPaginating={this.state.backPaginating}
                 forwardPaginating={forwardPaginating}
-                events={this.state.events}
+                events={events}
                 highlightedEventId={this.props.highlightedEventId}
                 readMarkerEventId={this.state.readMarkerEventId}
                 readMarkerVisible={this.state.readMarkerVisible}

src/components/views/dialogs/ErrorDialog.js

@@ -42,6 +42,7 @@ export default createReactClass({
         button: PropTypes.string,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
+        headerImage: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -56,9 +57,12 @@ export default createReactClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
+            <BaseDialog
-                    title={this.props.title || _t('Error')}
+                className="mx_ErrorDialog"
-                    contentId='mx_Dialog_content'
+                onFinished={this.props.onFinished}
+                title={this.props.title || _t('Error')}
+                headerImage={this.props.headerImage}
+                contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     { this.props.description || _t('An error has occurred.') }

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -39,7 +39,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         showSummary: PropTypes.bool,
     };
 
-    defaultProps = {
+    static defaultProps = {
         showSummary: true,
     };
 

src/components/views/elements/crypto/VerificationQRCode.js

@@ -51,6 +51,6 @@ export default class VerificationQRCode extends React.PureComponent {
 
         const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
 
-        return <QRCode value={uri} size={256} logoWidth={48} logo={require("../../../../../res/img/matrix-m.svg")} />;
+        return <QRCode value={uri} size={512} logoWidth={64} logo={require("../../../../../res/img/matrix-m.svg")} />;
     }
 }

src/components/views/messages/MKeyVerificationRequest.js

@@ -45,10 +45,11 @@ export default class MKeyVerificationRequest extends React.Component {
 
     _openRequest = () => {
         const {verificationRequest} = this.props.mxEvent;
+        const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
         dis.dispatch({
             action: "set_right_panel_phase",
             phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-            refireParams: {verificationRequest},
+            refireParams: {verificationRequest, member},
         });
     };
 

src/components/views/right_panel/EncryptionInfo.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,18 +14,58 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
-import * as sdk from '../../../index';
+import PropTypes from "prop-types";
+
+import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
 
-export default class EncryptionInfo extends React.PureComponent {
+export const PendingActionSpinner = ({text}) => {
-    render() {
+    const Spinner = sdk.getComponent('elements.Spinner');
+    return <div className="mx_EncryptionInfo_spinner">
+        <Spinner />
+        { text }
+    </div>;
+};
+
+const EncryptionInfo = ({pending, member, onStartVerification}) => {
+    let content;
+    if (pending) {
+        const text = _t("Waiting for %(displayName)s to accept…", {
+            displayName: member.displayName || member.name || member.userId,
+        });
+        content = <PendingActionSpinner text={text} />;
+    } else {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className="mx_UserInfo"><div className="mx_UserInfo_container">
+        content = (
-            <h3>{_t("Verify User")}</h3>
+            <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={onStartVerification}>
-            <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
+                {_t("Start Verification")}
-            <p>{_t("For maximum security, do this in person.")}</p>
+            </AccessibleButton>
-            <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>{_t("Start Verification")}</AccessibleButton>
+        );
-        </div></div>);
     }
-}
+
+    return <React.Fragment>
+        <div className="mx_UserInfo_container">
+            <h3>{_t("Encryption")}</h3>
+            <div>
+                <p>{_t("Messages in this room are end-to-end encrypted.")}</p>
+                <p>{_t("Your messages are secured and only you and the recipient have the unique keys to unlock them.")}</p>
+            </div>
+        </div>
+        <div className="mx_UserInfo_container">
+            <h3>{_t("Verify User")}</h3>
+            <div>
+                <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
+                <p>{_t("For maximum security, do this in person.")}</p>
+                { content }
+            </div>
+        </div>
+    </React.Fragment>;
+};
+EncryptionInfo.propTypes = {
+    member: PropTypes.object.isRequired,
+    onStartVerification: PropTypes.func.isRequired,
+    request: PropTypes.object,
+};
+
+export default EncryptionInfo;

src/components/views/right_panel/EncryptionPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,35 +14,81 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useEffect, useState} from "react";
+import PropTypes from "prop-types";
+
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import Modal from "../../../Modal";
+import {PHASE_REQUESTED} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import * as sdk from "../../../index";
+import {_t} from "../../../languageHandler";
 
-export default class EncryptionPanel extends React.PureComponent {
+// cancellation codes which constitute a key mismatch
-    constructor(props) {
+const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
-        super(props);
-        this.state = {};
-    }
 
-    render() {
+const EncryptionPanel = ({verificationRequest, member, onClose}) => {
-        const request = this.props.verificationRequest || this.state.verificationRequest;
+    const [request, setRequest] = useState(verificationRequest);
-        const {member} = this.props;
+    useEffect(() => {
-        if (request) {
+        setRequest(verificationRequest);
-            return <VerificationPanel request={request} key={request.channel.transactionId} />;
+    }, [verificationRequest]);
-        } else if (member) {
+
-            return <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
+    const [phase, setPhase] = useState(false);
-        } else {
+    const changeHandler = useCallback(() => {
-            return <p>Not a member nor request, not sure what to render</p>;
+        // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
+        if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
+                headerImage: require("../../../../res/img/e2e/warning.svg"),
+                title: _t("Your messages are not secure"),
+                description: <div>
+                    {_t("One of the following may be compromised:")}
+                    <ul>
+                        <li>{_t("Your homeserver")}</li>
+                        <li>{_t("The homeserver the user you’re verifying is connected to")}</li>
+                        <li>{_t("Yours, or the other users’ internet connection")}</li>
+                        <li>{_t("Yours, or the other users’ device")}</li>
+                    </ul>
+                </div>,
+                onFinished: onClose,
+            });
+            return; // don't update phase here as we will be transitioning away from this view shortly
         }
-    }
 
-    _onStartVerification = async () => {
+        if (request) {
-        const client = MatrixClientPeg.get();
+            setPhase(request.phase);
-        const {member} = this.props;
+        }
-        const roomId = await ensureDMExists(client, member.userId);
+    }, [onClose, request]);
-        const verificationRequest = await client.requestVerificationDM(member.userId, roomId);
+    useEventEmitter(request, "change", changeHandler);
-        this.setState({verificationRequest});
+
-    };
+    const onStartVerification = useCallback(async () => {
-}
+        const cli = MatrixClientPeg.get();
+        const roomId = await ensureDMExists(cli, member.userId);
+        const verificationRequest = await cli.requestVerificationDM(member.userId, roomId);
+        setRequest(verificationRequest);
+    }, [member.userId]);
+
+    const requested = request && phase === PHASE_REQUESTED;
+    if (!request || requested) {
+        return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={requested} />;
+    } else {
+        return (
+            <VerificationPanel
+                onClose={onClose}
+                member={member}
+                request={request}
+                key={request.channel.transactionId}
+                phase={phase} />
+        );
+    }
+};
+EncryptionPanel.propTypes = {
+    member: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    verificationRequest: PropTypes.object,
+};
+
+export default EncryptionPanel;

src/components/views/right_panel/RoomHeaderButtons.js

@@ -3,7 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
 Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,7 +23,6 @@ import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HEADER_KIND_ROOM} from './HeaderButtons';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
-import RightPanelStore from "../../../stores/RightPanelStore";
 
 const MEMBER_PHASES = [
     RIGHT_PANEL_PHASES.RoomMemberList,
@@ -60,7 +59,8 @@ export default class RoomHeaderButtons extends HeaderButtons {
     _onMembersClicked() {
         if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) {
             // send the active phase to trigger a toggle
-            this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, RightPanelStore.getSharedInstance().roomPanelPhaseParams);
+            // XXX: we should pass refireParams here but then it won't collapse as we desire it to
+            this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo);
         } else {
             // This toggles for us, if needed
             this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList);

src/components/views/right_panel/UserInfo.js

@@ -41,6 +41,7 @@ import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {textualPowerLevel} from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
+import EncryptionPanel from "./EncryptionPanel";
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -59,7 +60,7 @@ const _disambiguateDevices = (devices) => {
     }
 };
 
-const _getE2EStatus = (cli, userId, devices) => {
+export const getE2EStatus = (cli, userId, devices) => {
     if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
         const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
         return hasUnverifiedDevice ? "warning" : "verified";
@@ -183,11 +184,17 @@ function DeviceItem({userId, device}) {
             (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
             device.getDisplayName();
     const trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (<AccessibleButton className={classes} onClick={onDeviceClick}>
+    return (
-        <div className={iconClasses} />
+        <AccessibleButton
-        <div className="mx_UserInfo_device_name">{deviceName}</div>
+            className={classes}
-        <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+            title={device.deviceId}
-    </AccessibleButton>);
+            onClick={onDeviceClick}
+        >
+            <div className={iconClasses} />
+            <div className="mx_UserInfo_device_name">{deviceName}</div>
+            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+        </AccessibleButton>
+    );
 }
 
 function DevicesSection({devices, userId, loading}) {
@@ -1047,33 +1054,85 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
-const UserInfo = ({user, groupId, roomId, onClose}) => {
+export const useDevices = (userId) => {
     const cli = useContext(MatrixClientContext);
 
-    // Load room if we are given a room id and memoize it
+    // undefined means yet to be loaded, null means failed to load, otherwise list of devices
-    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
+    const [devices, setDevices] = useState(undefined);
-    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    // Download device lists
-    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+    useEffect(() => {
+        setDevices(undefined);
 
-    // only display the devices list if our client supports E2E
+        let cancelled = false;
-    const _enableDevices = cli.isCryptoEnabled();
+
+        async function _downloadDeviceList() {
+            try {
+                await cli.downloadKeys([userId], true);
+                const devices = await cli.getStoredDevicesForUser(userId);
+
+                if (cancelled) {
+                    // we got cancelled - presumably a different user now
+                    return;
+                }
+
+                _disambiguateDevices(devices);
+                setDevices(devices);
+            } catch (err) {
+                setDevices(null);
+            }
+        }
+        _downloadDeviceList();
+
+        // Handle being unmounted
+        return () => {
+            cancelled = true;
+        };
+    }, [cli, userId]);
+
+    // Listen to changes
+    useEffect(() => {
+        let cancel = false;
+        const onDeviceVerificationChanged = (_userId, device) => {
+            if (_userId === userId) {
+                // no need to re-download the whole thing; just update our copy of the list.
+
+                // Promise.resolve to handle transition from static result to promise; can be removed in future
+                Promise.resolve(cli.getStoredDevicesForUser(userId)).then((devices) => {
+                    if (cancel) return;
+                    setDevices(devices);
+                });
+            }
+        };
+        cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
+        // Handle being unmounted
+        return () => {
+            cancel = true;
+            cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
+        };
+    }, [cli, userId]);
+
+    return devices;
+};
+
+const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
+    const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
     // Load whether or not we are a Synapse Admin
     const isSynapseAdmin = useIsSynapseAdmin(cli);
 
     // Check whether the user is ignored
-    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(user.userId));
+    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(member.userId));
     // Recheck if the user or client changes
     useEffect(() => {
-        setIsIgnored(cli.isUserIgnored(user.userId));
+        setIsIgnored(cli.isUserIgnored(member.userId));
-    }, [cli, user.userId]);
+    }, [cli, member.userId]);
     // Recheck also if we receive new accountData m.ignored_user_list
     const accountDataHandler = useCallback((ev) => {
         if (ev.getType() === "m.ignored_user_list") {
-            setIsIgnored(cli.isUserIgnored(user.userId));
+            setIsIgnored(cli.isUserIgnored(member.userId));
         }
-    }, [cli, user.userId]);
+    }, [cli, member.userId]);
     useEventEmitter(cli, "accountData", accountDataHandler);
 
     // Count of how many operations are currently in progress, if > 0 then show a Spinner
@@ -1104,7 +1163,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         const [accepted] = await finished;
         if (!accepted) return;
         try {
-            await cli.deactivateSynapseUser(user.userId);
+            await cli.deactivateSynapseUser(member.userId);
         } catch (err) {
             console.error("Failed to deactivate user");
             console.error(err);
@@ -1115,21 +1174,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         }
-    }, [cli, user.userId]);
+    }, [cli, member.userId]);
-
-    const onMemberAvatarClick = useCallback(() => {
-        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
-        if (!avatarUrl) return;
-
-        const httpUrl = cli.mxcUrlToHttp(avatarUrl);
-        const ImageView = sdk.getComponent("elements.ImageView");
-        const params = {
-            src: httpUrl,
-            name: member.name,
-        };
-
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
-    }, [cli, member]);
 
     let synapseDeactivateButton;
     let spinner;
@@ -1137,7 +1182,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     // We don't need a perfect check here, just something to pass as "probably not our homeserver". If
     // someone does figure out how to bypass this check the worst that happens is an error.
     // FIXME this should be using cli instead of MatrixClientPeg.matrixClient
-    if (isSynapseAdmin && user.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
+    if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
         synapseDeactivateButton = (
             <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
                 {_t("Deactivate user")}
@@ -1161,7 +1206,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         adminToolsContainer = (
             <GroupAdminToolsSection
                 groupId={groupId}
-                groupMember={user}
+                groupMember={member}
                 startUpdating={startUpdating}
                 stopUpdating={stopUpdating}>
                 { synapseDeactivateButton }
@@ -1180,7 +1225,124 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const displayName = member.name || member.displayname;
+    const memberDetails = (
+        <PowerLevelSection
+            powerLevels={powerLevels}
+            user={member}
+            room={room}
+            roomPermissions={roomPermissions}
+        />
+    );
+
+    // only display the devices list if our client supports E2E
+    const _enableDevices = cli.isCryptoEnabled();
+
+    let text;
+    if (!isRoomEncrypted) {
+        if (!_enableDevices) {
+            text = _t("This client does not support end-to-end encryption.");
+        } else if (room) {
+            text = _t("Messages in this room are not end-to-end encrypted.");
+        } else {
+            // TODO what to render for GroupMember
+        }
+    } else {
+        text = _t("Messages in this room are end-to-end encrypted.");
+    }
+
+    const userTrust = cli.checkUserTrust(member.userId);
+    const userVerified = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
+        userTrust.isCrossSigningVerified() :
+        userTrust.isVerified();
+    const isMe = member.userId === cli.getUserId();
+    let verifyButton;
+    if (isRoomEncrypted && !userVerified && !isMe) {
+        verifyButton = (
+            <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={() => verifyUser(member)}>
+                {_t("Verify")}
+            </AccessibleButton>
+        );
+    }
+
+    let devicesSection;
+    if (isRoomEncrypted) {
+        devicesSection = <DevicesSection
+            loading={devices === undefined}
+            devices={devices}
+            userId={member.userId} />;
+    }
+
+    const securitySection = (
+        <div className="mx_UserInfo_container">
+            <h3>{ _t("Security") }</h3>
+            <p>{ text }</p>
+            { verifyButton }
+            { devicesSection }
+        </div>
+    );
+
+    return <React.Fragment>
+        { memberDetails &&
+        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
+            <div className="mx_UserInfo_memberDetails">
+                { memberDetails }
+            </div>
+        </div> }
+
+        { securitySection }
+        <UserOptionsSection
+            devices={devices}
+            canInvite={roomPermissions.canInvite}
+            isIgnored={isIgnored}
+            member={member} />
+
+        { adminToolsContainer }
+
+        { spinner }
+    </React.Fragment>;
+};
+
+const UserInfoHeader = ({onClose, member, e2eStatus}) => {
+    const cli = useContext(MatrixClientContext);
+
+    let closeButton;
+    if (onClose) {
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
+            <div />
+        </AccessibleButton>;
+    }
+
+    const onMemberAvatarClick = useCallback(() => {
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
+        if (!avatarUrl) return;
+
+        const httpUrl = cli.mxcUrlToHttp(avatarUrl);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: httpUrl,
+            name: member.name,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    }, [cli, member]);
+
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <div>
+                    <MemberAvatar
+                        member={member}
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        resizeMethod="scale"
+                        fallbackUserId={member.userId}
+                        onClick={onMemberAvatarClick}
+                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
+                </div>
+            </div>
+        </div>
+    );
 
     let presenceState;
     let presenceLastActiveAgo;
@@ -1216,181 +1378,79 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-    const avatarElement = (
-        <div className="mx_UserInfo_avatar">
-            <div>
-                <div>
-                    <MemberAvatar
-                        member={member}
-                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        resizeMethod="scale"
-                        fallbackUserId={member.userId}
-                        onClick={onMemberAvatarClick}
-                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
-                </div>
-            </div>
-        </div>
-    );
-
-    let closeButton;
-    if (onClose) {
-        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
-            <div />
-        </AccessibleButton>;
-    }
-
-    const memberDetails = (
-        <PowerLevelSection
-            powerLevels={powerLevels}
-            user={member}
-            room={room}
-            roomPermissions={roomPermissions}
-        />
-    );
-
-    const isRoomEncrypted = useIsEncrypted(cli, room);
-    // undefined means yet to be loaded, null means failed to load, otherwise list of devices
-    const [devices, setDevices] = useState(undefined);
-    // Download device lists
-    useEffect(() => {
-        setDevices(undefined);
-
-        let cancelled = false;
-
-        async function _downloadDeviceList() {
-            try {
-                await cli.downloadKeys([user.userId], true);
-                const devices = await cli.getStoredDevicesForUser(user.userId);
-
-                if (cancelled) {
-                    // we got cancelled - presumably a different user now
-                    return;
-                }
-
-                _disambiguateDevices(devices);
-                setDevices(devices);
-            } catch (err) {
-                setDevices(null);
-            }
-        }
-        _downloadDeviceList();
-
-        // Handle being unmounted
-        return () => {
-            cancelled = true;
-        };
-    }, [cli, user.userId]);
-
-    // Listen to changes
-    useEffect(() => {
-        let cancel = false;
-        const onDeviceVerificationChanged = (_userId, device) => {
-            if (_userId === user.userId) {
-                // no need to re-download the whole thing; just update our copy of the list.
-
-                // Promise.resolve to handle transition from static result to promise; can be removed in future
-                Promise.resolve(cli.getStoredDevicesForUser(user.userId)).then((devices) => {
-                    if (cancel) return;
-                    setDevices(devices);
-                });
-            }
-        };
-        cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
-        // Handle being unmounted
-        return () => {
-            cancel = true;
-            cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
-        };
-    }, [cli, user.userId]);
-
-    let text;
-    if (!isRoomEncrypted) {
-        if (!_enableDevices) {
-            text = _t("This client does not support end-to-end encryption.");
-        } else if (room) {
-            text = _t("Messages in this room are not end-to-end encrypted.");
-        } else {
-            // TODO what to render for GroupMember
-        }
-    } else {
-        text = _t("Messages in this room are end-to-end encrypted.");
-    }
-
-    const userTrust = cli.checkUserTrust(user.userId);
-    const userVerified = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
-        userTrust.isCrossSigningVerified() :
-        userTrust.isVerified();
-    const isMe = user.userId === cli.getUserId();
-    let verifyButton;
-    if (isRoomEncrypted && !userVerified && !isMe) {
-        verifyButton = <AccessibleButton className="mx_UserInfo_verify" onClick={() => verifyUser(user)}>
-            {_t("Verify")}
-        </AccessibleButton>;
-    }
-
-    let devicesSection;
-    if (isRoomEncrypted) {
-        devicesSection = <DevicesSection
-            loading={devices === undefined}
-            devices={devices} userId={user.userId} />;
-    }
-
-    const securitySection = (
-        <div className="mx_UserInfo_container">
-            <h3>{ _t("Security") }</h3>
-            <p>{ text }</p>
-            { verifyButton }
-            { devicesSection }
-        </div>
-    );
-
     let e2eIcon;
-    if (isRoomEncrypted && devices) {
+    if (e2eStatus) {
-        const e2eStatus = _getE2EStatus(cli, user.userId, devices);
         e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
     }
 
-    return (
+    const displayName = member.name || member.displayname;
-        <div className="mx_UserInfo" role="tabpanel">
+    return <React.Fragment>
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
+        { closeButton }
-                { closeButton }
+        { avatarElement }
-                { avatarElement }
 
-                <div className="mx_UserInfo_container">
+        <div className="mx_UserInfo_container mx_UserInfo_separator">
-                    <div className="mx_UserInfo_profile">
+            <div className="mx_UserInfo_profile">
-                        <div>
+                <div>
-                            <h2 aria-label={displayName}>
+                    <h2 aria-label={displayName}>
-                                { e2eIcon }
+                        { e2eIcon }
-                                { displayName }
+                        { displayName }
-                            </h2>
+                    </h2>
-                        </div>
-                        <div>{ user.userId }</div>
-                        <div className="mx_UserInfo_profileStatus">
-                            {presenceLabel}
-                            {statusLabel}
-                        </div>
-                    </div>
                 </div>
+                <div>{ member.userId }</div>
+                <div className="mx_UserInfo_profileStatus">
+                    {presenceLabel}
+                    {statusLabel}
+                </div>
+            </div>
+        </div>
+    </React.Fragment>;
+};
 
-                { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
+const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.RoomMemberInfo, ...props}) => {
-                    <div className="mx_UserInfo_memberDetails">
+    const cli = useContext(MatrixClientContext);
-                        { memberDetails }
-                    </div>
-                </div> }
 
-                { securitySection }
+    // Load room if we are given a room id and memoize it
-                <UserOptionsSection
+    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
+    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+
+    const isRoomEncrypted = useIsEncrypted(cli, room);
+    const devices = useDevices(user.userId);
+
+    let e2eStatus;
+    if (isRoomEncrypted && devices) {
+        e2eStatus = getE2EStatus(cli, user.userId, devices);
+    }
+
+    const classes = ["mx_UserInfo"];
+
+    let content;
+    switch (phase) {
+        case RIGHT_PANEL_PHASES.RoomMemberInfo:
+        case RIGHT_PANEL_PHASES.GroupMemberInfo:
+            content = (
+                <BasicUserInfo
+                    room={room}
+                    member={member}
+                    groupId={groupId}
                     devices={devices}
-                    canInvite={roomPermissions.canInvite}
+                    isRoomEncrypted={isRoomEncrypted} />
-                    isIgnored={isIgnored}
+            );
-                    member={member} />
+            break;
+        case RIGHT_PANEL_PHASES.EncryptionPanel:
+            classes.push("mx_UserInfo_smallAvatar");
+            content = (
+                <EncryptionPanel {...props} member={member} onClose={onClose} />
+            );
+            break;
+    }
 
-                { adminToolsContainer }
+    return (
+        <div className={classes.join(" ")} role="tabpanel">
+            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
+                <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />
 
-                { spinner }
+                { content }
             </AutoHideScrollbar>
         </div>
     );

src/components/views/right_panel/VerificationPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +15,20 @@ limitations under the License.
 */
 
 import React from 'react';
+
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {_t} from "../../../languageHandler";
+import E2EIcon from "../rooms/E2EIcon";
+import {
+    PHASE_READY,
+    PHASE_DONE,
+    PHASE_STARTED,
+    PHASE_CANCELLED,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import Spinner from "../elements/Spinner";
 
 export default class VerificationPanel extends React.PureComponent {
     constructor(props) {
@@ -28,65 +37,144 @@ export default class VerificationPanel extends React.PureComponent {
         this._hasVerifier = !!props.request.verifier;
     }
 
-    render() {
+    renderQRPhase(pending) {
-        return <div className="mx_UserInfo">
+        const {member, request} = this.props;
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        let button;
+        if (pending) {
+            button = <Spinner />;
+        } else {
+            button = (
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+                    {_t("Verify by emoji")}
+                </AccessibleButton>
+            );
+        }
+
+        const cli = MatrixClientPeg.get();
+        const crossSigningInfo = cli.getStoredCrossSigningForUser(request.otherUserId);
+        if (!crossSigningInfo || !request.requestEvent || !request.requestEvent.getId()) {
+            // for whatever reason we can't generate a QR code, offer only SAS Verification
+            return <div className="mx_UserInfo_container">
+                <h3>Verify by emoji</h3>
+                <p>{_t("Verify by comparing unique emoji.")}</p>
+
+                { button }
+            </div>;
+        }
+
+        const myKeyId = cli.getCrossSigningId();
+        const qrCodeKeys = [
+            [cli.getDeviceId(), cli.getDeviceEd25519Key()],
+            [myKeyId, myKeyId],
+        ];
+
+        // TODO: add way to open camera to scan a QR code
+        return <React.Fragment>
             <div className="mx_UserInfo_container">
-                { this.renderStatus() }
+                <h3>Verify by scanning</h3>
+                <p>{_t("Ask %(displayName)s to scan your code:", {
+                    displayName: member.displayName || member.name || member.userId,
+                })}</p>
+
+                <div className="mx_VerificationPanel_qrCode">
+                    <VerificationQRCode
+                        keyholderUserId={MatrixClientPeg.get().getUserId()}
+                        requestEventId={request.requestEvent.getId()}
+                        otherUserKey={crossSigningInfo.getId("master")}
+                        secret={request.encodedSharedSecret}
+                        keys={qrCodeKeys}
+                    />
+                </div>
             </div>
-        </div>;
+
+            <div className="mx_UserInfo_container">
+                <h3>Verify by emoji</h3>
+                <p>{_t("If you can't scan the code above, verify by comparing unique emoji.")}</p>
+
+                { button }
+            </div>
+        </React.Fragment>;
     }
 
-    renderStatus() {
+    renderVerifiedPhase() {
+        const {member} = this.props;
+
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Spinner = sdk.getComponent('elements.Spinner');
+        return (
-        const {request: req} = this.props;
+            <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
-        const request: VerificationRequest = req;
+                <h3>Verified</h3>
+                <p>{_t("You've successfully verified %(displayName)s!", {
+                    displayName: member.displayName || member.name || member.userId,
+                })}</p>
+                <E2EIcon isUser={true} status="verified" size={128} />
+                <p>Verify all users in a room to ensure it's secure.</p>
 
-        if (request.requested) {
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onClose}>
-            return (<p>Waiting for {request.otherUserId} to accept ... <Spinner /></p>);
+                    {_t("Got it")}
-        } else if (request.ready) {
+                </AccessibleButton>
-            const verifyButton = <AccessibleButton kind="primary" onClick={this._startSAS}>
+            </div>
-                Verify by emoji
+        );
-            </AccessibleButton>;
+    }
 
-            const crossSigningInfo = MatrixClientPeg.get().getStoredCrossSigningForUser(request.otherUserId);
+    renderCancelledPhase() {
-            const myKeyId = MatrixClientPeg.get().getCrossSigningId();
+        const {member, request} = this.props;
-            if (request.requestEvent && request.requestEvent.getId() && crossSigningInfo) {
-                const qrCodeKeys = [
-                    [MatrixClientPeg.get().getDeviceId(), MatrixClientPeg.get().getDeviceEd25519Key()],
-                    [myKeyId, myKeyId],
-                ];
-                const qrCode = <VerificationQRCode
-                    keyholderUserId={MatrixClientPeg.get().getUserId()}
-                    requestEventId={request.requestEvent.getId()}
-                    otherUserKey={crossSigningInfo.getId("master")}
-                    secret={request.encodedSharedSecret}
-                    keys={qrCodeKeys}
-                />;
-                return (<p>{request.otherUserId} is ready, start {verifyButton} or have them scan: {qrCode}</p>);
-            }
 
-            return (<p>{request.otherUserId} is ready, start {verifyButton}</p>);
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        } else if (request.started) {
+
-            if (this.state.sasWaitingForOtherParty) {
+        let text;
-                return <p>Waiting for {request.otherUserId} to confirm ...</p>;
+        if (request.cancellationCode === "m.timeout") {
-            } else if (this.state.sasEvent) {
+            text = _t("Verification timed out. Start verification again from their profile.");
-                const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+        } else if (request.cancellingUserId === request.otherUserId) {
-                return (<div>
+            text = _t("%(displayName)s cancelled verification. Start verification again from their profile.", {
-                    <VerificationShowSas
+                displayName: member.displayName || member.name || member.userId,
-                        sas={this.state.sasEvent.sas}
+            });
-                        onCancel={this._onSasMismatchesClick}
+        } else {
-                        onDone={this._onSasMatchesClick}
+            text = _t("You cancelled verification. Start verification again from their profile.");
-                    />
-                </div>);
-            } else {
-                return (<p>Setting up SAS verification...</p>);
-            }
-        } else if (request.done) {
-            return <p>verified {request.otherUserId}!!</p>;
-        } else if (request.cancelled) {
-            return <p>cancelled by {request.cancellingUserId}!</p>;
         }
+
+        return (
+            <div className="mx_UserInfo_container">
+                <h3>Verification cancelled</h3>
+                <p>{ text }</p>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onClose}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    render() {
+        const {member} = this.props;
+
+        const displayName = member.displayName || member.name || member.userId;
+
+        switch (this.props.phase) {
+            case PHASE_READY:
+                return this.renderQRPhase();
+            case PHASE_STARTED:
+                if (this.state.sasEvent) {
+                    const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+                    return <div className="mx_UserInfo_container">
+                        <h3>Compare emoji</h3>
+                        <VerificationShowSas
+                            displayName={displayName}
+                            sas={this.state.sasEvent.sas}
+                            onCancel={this._onSasMismatchesClick}
+                            onDone={this._onSasMatchesClick}
+                        />
+                    </div>;
+                } else {
+                    return this.renderQRPhase(true); // keep showing same phase but with a spinner
+                }
+            case PHASE_DONE:
+                return this.renderVerifiedPhase();
+            case PHASE_CANCELLED:
+                return this.renderCancelledPhase();
+        }
+        return null;
     }
 
     _startSAS = async () => {
@@ -95,18 +183,15 @@ export default class VerificationPanel extends React.PureComponent {
             await verifier.verify();
         } catch (err) {
             console.error(err);
-        } finally {
-            this.setState({sasEvent: null});
         }
     };
 
     _onSasMatchesClick = () => {
-        this.setState({sasWaitingForOtherParty: true});
         this.state.sasEvent.confirm();
     };
 
     _onSasMismatchesClick = () => {
-        this.state.sasEvent.cancel();
+        this.state.sasEvent.mismatch();
     };
 
     _onVerifierShowSas = (sasEvent) => {
@@ -128,7 +213,6 @@ export default class VerificationPanel extends React.PureComponent {
             request.verifier.removeListener('show_sas', this._onVerifierShowSas);
         }
         this._hasVerifier = !!request.verifier;
-        this.forceUpdate();
     };
 
     componentDidMount() {

src/components/views/toasts/VerificationRequestToast.js

@@ -82,10 +82,14 @@ export default class VerificationRequestToast extends React.PureComponent {
                     should_peek: false,
                 });
                 await request.accept();
+                const cli = MatrixClientPeg.get();
                 dis.dispatch({
                     action: "set_right_panel_phase",
                     phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-                    refireParams: {verificationRequest: request},
+                    refireParams: {
+                        verificationRequest: request,
+                        member: cli.getUser(request.otherUserId),
+                    },
                 });
             } else if (request.channel.deviceId && request.verifier) {
                 // show to_device verifications in dialog still

src/components/views/verification/VerificationShowSas.js

@@ -16,8 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
+import {PendingActionSpinner} from "../right_panel/EncryptionInfo";
+import AccessibleButton from "../elements/AccessibleButton";
+import DialogButtons from "../elements/DialogButtons";
 
 function capFirst(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -25,18 +27,26 @@ function capFirst(s) {
 
 export default class VerificationShowSas extends React.Component {
     static propTypes = {
+        displayName: PropTypes.string.isRequired,
         onDone: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            pending: false,
+        };
     }
 
-    constructor() {
+    onMatchClick = () => {
-        super();
+        this.setState({ pending: true });
-    }
+        this.props.onDone();
+    };
 
     render() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         let sasDisplay;
         let sasCaption;
         if (this.props.sas.emoji) {
@@ -69,26 +79,34 @@ export default class VerificationShowSas extends React.Component {
         } else {
             return <div>
                 {_t("Unable to find a supported verification method.")}
-                <DialogButtons
+                <AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_verify">
-                    primaryButton={_t('Cancel')}
+                    {_t('Cancel')}
-                    hasCancel={false}
+                </AccessibleButton>
-                    onPrimaryButtonClick={this.props.onCancel}
-                />
             </div>;
         }
 
+        let confirm;
+        if (this.state.pending) {
+            const {displayName} = this.props;
+            const text = _t("Waiting for %(displayName)s to verify…", {displayName});
+            confirm = <PendingActionSpinner text={text} />;
+        } else {
+            // FIXME: stop using DialogButtons here once this component is only used in the right panel verification
+            confirm = <DialogButtons
+                primaryButton={_t("They match")}
+                onPrimaryButtonClick={this.onMatchClick}
+                primaryButtonClassName="mx_UserInfo_verify"
+                cancelButton={_t("They don't match")}
+                onCancel={this.props.onCancel}
+                cancelButtonClass="mx_UserInfo_verify"
+            />;
+        }
+
         return <div className="mx_VerificationShowSas">
             <p>{sasCaption}</p>
-            <p>{_t(
+            <p>{_t("For ultimate security, do this in person or use another way to communicate.")}</p>
-                "For maximum security, we recommend you do this in person or use another " +
-                "trusted means of communication.",
-            )}</p>
             {sasDisplay}
-            <DialogButtons onPrimaryButtonClick={this.props.onDone}
+            {confirm}
-                primaryButton={_t("Continue")}
-                hasCancel={true}
-                onCancel={this.props.onCancel}
-            />
         </div>;
     }
 }

src/i18n/strings/en_EN.json

@@ -448,7 +448,10 @@
     "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.",
     "Cancel": "Cancel",
-    "For maximum security, we recommend you do this in person or use another trusted means of communication.": "For maximum security, we recommend you do this in person or use another trusted means of communication.",
+    "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
+    "They match": "They match",
+    "They don't match": "They don't match",
+    "For ultimate security, do this in person or use another way to communicate.": "For ultimate security, do this in person or use another way to communicate.",
     "Dog": "Dog",
     "Cat": "Cat",
     "Lion": "Lion",
@@ -1141,10 +1144,19 @@
     "URL previews are disabled by default for participants in this room.": "URL previews are disabled by default for participants in this room.",
     "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
+    "Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…",
+    "Start Verification": "Start Verification",
+    "Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.",
+    "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Your messages are secured and only you and the recipient have the unique keys to unlock them.",
     "Verify User": "Verify User",
     "For extra security, verify this user by checking a one-time code on both of your devices.": "For extra security, verify this user by checking a one-time code on both of your devices.",
     "For maximum security, do this in person.": "For maximum security, do this in person.",
-    "Start Verification": "Start Verification",
+    "Your messages are not secure": "Your messages are not secure",
+    "One of the following may be compromised:": "One of the following may be compromised:",
+    "Your homeserver": "Your homeserver",
+    "The homeserver the user you’re verifying is connected to": "The homeserver the user you’re verifying is connected to",
+    "Yours, or the other users’ internet connection": "Yours, or the other users’ internet connection",
+    "Yours, or the other users’ device": "Yours, or the other users’ device",
     "Members": "Members",
     "Files": "Files",
     "Trusted": "Trusted",
@@ -1161,8 +1173,16 @@
     "<strong>%(role)s</strong> in %(roomName)s": "<strong>%(role)s</strong> in %(roomName)s",
     "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.",
-    "Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.",
     "Security": "Security",
+    "Verify by emoji": "Verify by emoji",
+    "Verify by comparing unique emoji.": "Verify by comparing unique emoji.",
+    "Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:",
+    "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.",
+    "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.",
+    "%(displayName)s cancelled verification. Start verification again from their profile.": "%(displayName)s cancelled verification. Start verification again from their profile.",
+    "You cancelled verification. Start verification again from their profile.": "You cancelled verification. Start verification again from their profile.",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",
@@ -1442,6 +1462,7 @@
     "Verify device": "Verify device",
     "Use Legacy Verification (for older clients)": "Use Legacy Verification (for older clients)",
     "Verify by comparing a short text string.": "Verify by comparing a short text string.",
+    "For maximum security, we recommend you do this in person or use another trusted means of communication.": "For maximum security, we recommend you do this in person or use another trusted means of communication.",
     "Begin Verifying": "Begin Verifying",
     "Waiting for partner to accept...": "Waiting for partner to accept...",
     "Nothing appearing? Not all clients support interactive verification yet. <button>Use legacy verification</button>.": "Nothing appearing? Not all clients support interactive verification yet. <button>Use legacy verification</button>.",
@@ -1996,7 +2017,7 @@
     "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
     "File to import": "File to import",
     "Import": "Import",
-    "Key Backup is enabled on your account but has not been set up from this session. To set up secret storage, restore your key backup.": "Key Backup is enabled on your account but has not been set up from this session. To set up secret storage, restore your key backup.",
+    "Restore your key backup to upgrade your encryption": "Restore your key backup to upgrade your encryption",
     "Restore": "Restore",
     "Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
     "You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
@@ -2005,6 +2026,7 @@
     "Set up encryption on this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.": "Set up encryption on this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.",
     "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:": "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:",
     "Enter a passphrase": "Enter a passphrase",
+    "Back up my encryption keys, securing them with the same passphrase": "Back up my encryption keys, securing them with the same passphrase",
     "Set up with a recovery key": "Set up with a recovery key",
     "That matches!": "That matches!",
     "That doesn't match.": "That doesn't match.",
@@ -2025,9 +2047,6 @@
     "<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
     "This device can now verify other devices, granting them access to encrypted messages and marking them as trusted for other users.": "This device can now verify other devices, granting them access to encrypted messages and marking them as trusted for other users.",
     "Verify other users in their profile.": "Verify other users in their profile.",
-    "Without setting up secret storage, you won't be able to restore your access to encrypted messages or your cross-signing identity for verifying other devices if you log out or use another device.": "Without setting up secret storage, you won't be able to restore your access to encrypted messages or your cross-signing identity for verifying other devices if you log out or use another device.",
-    "Set up secret storage": "Set up secret storage",
-    "Restore your Key Backup": "Restore your Key Backup",
     "Upgrade your encryption": "Upgrade your encryption",
     "Recovery key": "Recovery key",
     "Keep it safe": "Keep it safe",