From 210616c737bdc93fd421c75ec8e554779f4af7fb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 24 Jan 2020 11:45:39 +0000
Subject: [PATCH 01/13] Phase 1, split out UserInfo into a generic Pane, use
 for EncInfo

---
 res/css/views/right_panel/_UserInfo.scss      |  17 +-
 src/components/structures/RightPanel.js       |  13 +-
 .../views/right_panel/EncryptionInfo.js       |  18 +-
 .../views/right_panel/EncryptionPanel.js      |  25 +-
 src/components/views/right_panel/UserInfo.js  | 248 +++++++++---------
 src/i18n/strings/en_EN.json                   |   3 +-
 6 files changed, 191 insertions(+), 133 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index d2d9d12c6d..57ffd4982e 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/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 {
@@ -204,10 +209,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;
@@ -264,3 +268,10 @@ limitations under the License.
         margin: 16px 0;
     }
 }
+
+.mx_UserInfo.mx_UserInfo_smallAvatar {
+    .mx_UserInfo_avatar > div {
+        max-width: 72px;
+        margin: 0 auto;
+    }
+}
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index dca89d0c35..c01a3709e7 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -238,7 +238,18 @@ export default class RightPanel extends React.Component {
         } else if (this.state.phase === RIGHT_PANEL_PHASES.FilePanel) {
             panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
         } else if (this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
-            panel = <EncryptionPanel member={this.state.member} verificationRequest={this.state.verificationRequest} />;
+            const onClose = () => {
+                dis.dispatch({
+                    action: "view_user",
+                    member: this.state.member,
+                });
+            };
+            panel = (
+                <EncryptionPanel
+                    member={this.state.member}
+                    verificationRequest={this.state.verificationRequest}
+                    onClose={onClose} />
+            );
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {
diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js
index 5770e9b086..2d265967ae 100644
--- a/src/components/views/right_panel/EncryptionInfo.js
+++ b/src/components/views/right_panel/EncryptionInfo.js
@@ -21,11 +21,17 @@ import {_t} from "../../../languageHandler";
 export default class EncryptionInfo extends React.PureComponent {
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className="mx_UserInfo"><div className="mx_UserInfo_container">
-            <h3>{_t("Verify User")}</h3>
-            <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>
-            <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>{_t("Start Verification")}</AccessibleButton>
-        </div></div>);
+        return (
+            <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>
+                    <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onStartVerification}>
+                        {_t("Start Verification")}
+                    </AccessibleButton>
+                </div>
+            </div>
+        );
     }
 }
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 4b3473935a..a1008543e4 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/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.
@@ -19,6 +19,8 @@ import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
+import {UserInfoPane} from "./UserInfo";
+import {_t} from "../../../languageHandler";
 
 export default class EncryptionPanel extends React.PureComponent {
     constructor(props) {
@@ -27,15 +29,30 @@ export default class EncryptionPanel extends React.PureComponent {
     }
 
     render() {
+        let content;
         const request = this.props.verificationRequest || this.state.verificationRequest;
         const {member} = this.props;
         if (request) {
-            return <VerificationPanel request={request} key={request.channel.transactionId} />;
+            content = <VerificationPanel request={request} key={request.channel.transactionId} />;
         } else if (member) {
-            return <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
+            content = <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
         } else {
-            return <p>Not a member nor request, not sure what to render</p>;
+            content = <p>Not a member nor request, not sure what to render</p>;
         }
+
+        return (
+            <UserInfoPane className="mx_UserInfo_smallAvatar" member={member} onClose={this.props.onClose} e2eStatus="">
+                <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>
+
+                { content }
+            </UserInfoPane>
+        );
     }
 
     _onStartVerification = async () => {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 051f92cc9c..a31e9a6ce0 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -59,7 +59,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";
@@ -1047,6 +1047,117 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
+export const UserInfoPane = ({children, className, onClose, e2eStatus, member}) => {
+    const cli = useContext(MatrixClientContext);
+
+    let closeButton;
+    if (onClose) {
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
+            <div />
+        </AccessibleButton>;
+    }
+
+    let presenceState;
+    let presenceLastActiveAgo;
+    let presenceCurrentlyActive;
+    let statusMessage;
+
+    if (member instanceof RoomMember && member.user) {
+        presenceState = member.user.presence;
+        presenceLastActiveAgo = member.user.lastActiveAgo;
+        presenceCurrentlyActive = member.user.currentlyActive;
+
+        if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            statusMessage = member.user._unstable_statusMessage;
+        }
+    }
+
+    const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
+    let showPresence = true;
+    if (enablePresenceByHsUrl && enablePresenceByHsUrl[cli.baseUrl] !== undefined) {
+        showPresence = enablePresenceByHsUrl[cli.baseUrl];
+    }
+
+    let presenceLabel = null;
+    if (showPresence) {
+        const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
+        presenceLabel = <PresenceLabel activeAgo={presenceLastActiveAgo}
+                                       currentlyActive={presenceCurrentlyActive}
+                                       presenceState={presenceState} />;
+    }
+
+    let statusLabel = null;
+    if (statusMessage) {
+        statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
+    }
+
+    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 e2eIcon;
+    if (e2eStatus) {
+        e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
+    }
+
+    const displayName = member.name || member.displayname;
+
+    return (
+        <div className={classNames("mx_UserInfo", className)} role="tabpanel">
+            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
+                { closeButton }
+                { avatarElement }
+
+                <div className="mx_UserInfo_container mx_UserInfo_separator">
+                    <div className="mx_UserInfo_profile">
+                        <div>
+                            <h2 aria-label={displayName}>
+                                { e2eIcon }
+                                { displayName }
+                            </h2>
+                        </div>
+                        <div>{ member.userId }</div>
+                        <div className="mx_UserInfo_profileStatus">
+                            {presenceLabel}
+                            {statusLabel}
+                        </div>
+                    </div>
+                </div>
+
+                { children }
+            </AutoHideScrollbar>
+        </div>
+    );
+};
+
 const UserInfo = ({user, groupId, roomId, onClose}) => {
     const cli = useContext(MatrixClientContext);
 
@@ -1117,20 +1228,6 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         }
     }, [cli, user.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;
 
@@ -1180,68 +1277,6 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const displayName = member.name || member.displayname;
-
-    let presenceState;
-    let presenceLastActiveAgo;
-    let presenceCurrentlyActive;
-    let statusMessage;
-
-    if (member instanceof RoomMember && member.user) {
-        presenceState = member.user.presence;
-        presenceLastActiveAgo = member.user.lastActiveAgo;
-        presenceCurrentlyActive = member.user.currentlyActive;
-
-        if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            statusMessage = member.user._unstable_statusMessage;
-        }
-    }
-
-    const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
-    let showPresence = true;
-    if (enablePresenceByHsUrl && enablePresenceByHsUrl[cli.baseUrl] !== undefined) {
-        showPresence = enablePresenceByHsUrl[cli.baseUrl];
-    }
-
-    let presenceLabel = null;
-    if (showPresence) {
-        const PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
-        presenceLabel = <PresenceLabel activeAgo={presenceLastActiveAgo}
-                                       currentlyActive={presenceCurrentlyActive}
-                                       presenceState={presenceState} />;
-    }
-
-    let statusLabel = null;
-    if (statusMessage) {
-        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}
@@ -1347,53 +1382,30 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         </div>
     );
 
-    let e2eIcon;
+    let e2eStatus;
     if (isRoomEncrypted && devices) {
-        const e2eStatus = _getE2EStatus(cli, user.userId, devices);
-        e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
+        e2eStatus = getE2EStatus(cli, user.userId, devices);
     }
 
-    return (
-        <div className="mx_UserInfo" role="tabpanel">
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                { closeButton }
-                { avatarElement }
+    return <UserInfoPane onClose={onClose} e2eStatus={e2eStatus} member={member}>
+        { memberDetails &&
+        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
+            <div className="mx_UserInfo_memberDetails">
+                { memberDetails }
+            </div>
+        </div> }
 
-                <div className="mx_UserInfo_container">
-                    <div className="mx_UserInfo_profile">
-                        <div>
-                            <h2 aria-label={displayName}>
-                                { e2eIcon }
-                                { displayName }
-                            </h2>
-                        </div>
-                        <div>{ user.userId }</div>
-                        <div className="mx_UserInfo_profileStatus">
-                            {presenceLabel}
-                            {statusLabel}
-                        </div>
-                    </div>
-                </div>
+        { securitySection }
+        <UserOptionsSection
+            devices={devices}
+            canInvite={roomPermissions.canInvite}
+            isIgnored={isIgnored}
+            member={member} />
 
-                { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
-                    <div className="mx_UserInfo_memberDetails">
-                        { memberDetails }
-                    </div>
-                </div> }
+        { adminToolsContainer }
 
-                { securitySection }
-                <UserOptionsSection
-                    devices={devices}
-                    canInvite={roomPermissions.canInvite}
-                    isIgnored={isIgnored}
-                    member={member} />
-
-                { adminToolsContainer }
-
-                { spinner }
-            </AutoHideScrollbar>
-        </div>
-    );
+        { spinner }
+    </UserInfoPane>;
 };
 
 UserInfo.propTypes = {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 099b64dd49..c99b22f421 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1128,6 +1128,8 @@
     "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",
+    "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.",
     "Members": "Members",
     "Files": "Files",
     "Trusted": "Trusted",
@@ -1144,7 +1146,6 @@
     "<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",
     "Sunday": "Sunday",
     "Monday": "Monday",

From 7a5e172b88c959f94051db1f6d7424cf0ef8108f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 24 Jan 2020 16:16:46 +0000
Subject: [PATCH 02/13] Apply a huge part of the decorations and copy

---
 res/css/_components.scss                      |   2 +
 .../views/right_panel/_EncryptionInfo.scss    |  24 +
 res/css/views/right_panel/_UserInfo.scss      |   6 +-
 .../views/right_panel/_VerificationPanel.scss |  21 +
 src/components/structures/RightPanel.js       |  25 +-
 .../views/messages/MKeyVerificationRequest.js |   3 +-
 .../views/right_panel/EncryptionInfo.js       |  68 +-
 .../views/right_panel/EncryptionPanel.js      |  72 +-
 src/components/views/right_panel/UserInfo.js  | 619 ++++++++++--------
 .../views/right_panel/VerificationPanel.js    |  85 ++-
 .../views/toasts/VerificationRequestToast.js  |   6 +-
 .../views/verification/VerificationShowSas.js |  55 +-
 src/i18n/strings/en_EN.json                   |  18 +-
 13 files changed, 586 insertions(+), 418 deletions(-)
 create mode 100644 res/css/views/right_panel/_EncryptionInfo.scss
 create mode 100644 res/css/views/right_panel/_VerificationPanel.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 60f749de9c..e19050dc7e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -140,7 +140,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";
diff --git a/res/css/views/right_panel/_EncryptionInfo.scss b/res/css/views/right_panel/_EncryptionInfo.scss
new file mode 100644
index 0000000000..386eef8e7f
--- /dev/null
+++ b/res/css/views/right_panel/_EncryptionInfo.scss
@@ -0,0 +1,24 @@
+/*
+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;
+        }
+    }
+}
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 57ffd4982e..8aad5240aa 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -81,6 +81,7 @@ limitations under the License.
     .mx_UserInfo_avatar > div {
         max-width: 30vh;
         margin: 0 auto;
+        transition: 1s;
     }
 
     .mx_UserInfo_avatar > div > div {
@@ -260,11 +261,6 @@ 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;
     }
 }
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
new file mode 100644
index 0000000000..84a82c9a5c
--- /dev/null
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -0,0 +1,21 @@
+/*
+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;
+    }
+}
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index c01a3709e7..2188bda4f2 100644
--- a/src/components/structures/RightPanel.js
+++ b/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');
@@ -187,19 +186,22 @@ export default class RightPanel extends React.Component {
             panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
         } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomList) {
             panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) {
+        } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo ||
+            this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
             if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
                 const onClose = () => {
                     dis.dispatch({
                         action: "view_user",
-                        member: null,
+                        member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
                     });
                 };
                 panel = <UserInfo
-                    user={this.state.member}
+                    userId={this.state.member}
                     roomId={this.props.roomId}
                     key={this.props.roomId || this.state.member.userId}
                     onClose={onClose}
+                    phase={this.state.phase}
+                    verificationRequest={this.state.verificationRequest}
                 />;
             } else {
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
@@ -215,7 +217,7 @@ export default class RightPanel extends React.Component {
                     });
                 };
                 panel = <UserInfo
-                    user={this.state.member}
+                    userId={this.state.member}
                     groupId={this.props.groupId}
                     key={this.state.member.userId}
                     onClose={onClose} />;
@@ -237,19 +239,6 @@ export default class RightPanel extends React.Component {
             panel = <NotificationPanel />;
         } else if (this.state.phase === RIGHT_PANEL_PHASES.FilePanel) {
             panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
-            const onClose = () => {
-                dis.dispatch({
-                    action: "view_user",
-                    member: this.state.member,
-                });
-            };
-            panel = (
-                <EncryptionPanel
-                    member={this.state.member}
-                    verificationRequest={this.state.verificationRequest}
-                    onClose={onClose} />
-            );
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {
diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.js
index ae793556d8..474ff7becb 100644
--- a/src/components/views/messages/MKeyVerificationRequest.js
+++ b/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},
         });
     };
 
diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js
index 2d265967ae..8868c30053 100644
--- a/src/components/views/right_panel/EncryptionInfo.js
+++ b/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,24 +14,58 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import * as sdk from '../../../index';
+import React from "react";
+import PropTypes from "prop-types";
+
+import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
 
-export default class EncryptionInfo extends React.PureComponent {
-    render() {
+export const PendingActionSpinner = ({text}) => {
+    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_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>
-                    <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onStartVerification}>
-                        {_t("Start Verification")}
-                    </AccessibleButton>
-                </div>
-            </div>
+        content = (
+            <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={onStartVerification}>
+                {_t("Start Verification")}
+            </AccessibleButton>
         );
     }
-}
+
+    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;
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index a1008543e4..dfb145f61d 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -14,52 +14,42 @@ 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 EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
-import {UserInfoPane} from "./UserInfo";
-import {_t} from "../../../languageHandler";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
 
-export default class EncryptionPanel extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {};
+const EncryptionPanel = ({verificationRequest, member}) => {
+    const [request, setRequest] = useState(verificationRequest);
+    useEffect(() => {
+        setRequest(verificationRequest);
+    }, [verificationRequest]);
+
+    const [pending, setPending] = useState(false);
+    const changeHandler = useCallback(() => {
+        setPending(request && request.requested);
+    }, [request]);
+    useEventEmitter(request, "change", changeHandler);
+    useEffect(changeHandler, [changeHandler]);
+
+    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]);
+
+    if (!request || pending) {
+        return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={pending} />;
+    } else {
+        return <VerificationPanel member={member} request={request} key={request.channel.transactionId} />;
     }
+};
+EncryptionPanel.propTypes = {
 
-    render() {
-        let content;
-        const request = this.props.verificationRequest || this.state.verificationRequest;
-        const {member} = this.props;
-        if (request) {
-            content = <VerificationPanel request={request} key={request.channel.transactionId} />;
-        } else if (member) {
-            content = <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
-        } else {
-            content = <p>Not a member nor request, not sure what to render</p>;
-        }
+};
 
-        return (
-            <UserInfoPane className="mx_UserInfo_smallAvatar" member={member} onClose={this.props.onClose} e2eStatus="">
-                <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>
-
-                { content }
-            </UserInfoPane>
-        );
-    }
-
-    _onStartVerification = async () => {
-        const client = MatrixClientPeg.get();
-        const {member} = this.props;
-        const roomId = await ensureDMExists(client, member.userId);
-        const verificationRequest = await client.requestVerificationDM(member.userId, roomId);
-        this.setState({verificationRequest});
-    };
-}
+export default EncryptionPanel;
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index a31e9a6ce0..41dbe49cc8 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/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);
@@ -1047,7 +1048,256 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
-export const UserInfoPane = ({children, className, onClose, e2eStatus, member}) => {
+export const useDevices = (userId) => {
+    const cli = useContext(MatrixClientContext);
+
+    // 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([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;
+                    console.log("setDevices 2", devices);
+                    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(member.userId));
+    // Recheck if the user or client changes
+    useEffect(() => {
+        setIsIgnored(cli.isUserIgnored(member.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(member.userId));
+        }
+    }, [cli, member.userId]);
+    useEventEmitter(cli, "accountData", accountDataHandler);
+
+    // Count of how many operations are currently in progress, if > 0 then show a Spinner
+    const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
+    const startUpdating = useCallback(() => {
+        setPendingUpdateCount(pendingUpdateCount + 1);
+    }, [pendingUpdateCount]);
+    const stopUpdating = useCallback(() => {
+        setPendingUpdateCount(pendingUpdateCount - 1);
+    }, [pendingUpdateCount]);
+
+    const roomPermissions = useRoomPermissions(cli, room, member);
+
+    const onSynapseDeactivate = useCallback(async () => {
+        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+        const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
+            title: _t("Deactivate user?"),
+            description:
+                <div>{ _t(
+                    "Deactivating this user will log them out and prevent them from logging back in. Additionally, " +
+                    "they will leave all the rooms they are in. This action cannot be reversed. Are you sure you " +
+                    "want to deactivate this user?",
+                ) }</div>,
+            button: _t("Deactivate user"),
+            danger: true,
+        });
+
+        const [accepted] = await finished;
+        if (!accepted) return;
+        try {
+            await cli.deactivateSynapseUser(member.userId);
+        } catch (err) {
+            console.error("Failed to deactivate user");
+            console.error(err);
+
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            Modal.createTrackedDialog('Failed to deactivate Synapse user', '', ErrorDialog, {
+                title: _t('Failed to deactivate user'),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        }
+    }, [cli, member.userId]);
+
+    let synapseDeactivateButton;
+    let spinner;
+
+    // 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 && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
+        synapseDeactivateButton = (
+            <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
+                {_t("Deactivate user")}
+            </AccessibleButton>
+        );
+    }
+
+    let adminToolsContainer;
+    if (room && member.roomId) {
+        adminToolsContainer = (
+            <RoomAdminToolsContainer
+                powerLevels={powerLevels}
+                member={member}
+                room={room}
+                startUpdating={startUpdating}
+                stopUpdating={stopUpdating}>
+                { synapseDeactivateButton }
+            </RoomAdminToolsContainer>
+        );
+    } else if (groupId) {
+        adminToolsContainer = (
+            <GroupAdminToolsSection
+                groupId={groupId}
+                groupMember={member}
+                startUpdating={startUpdating}
+                stopUpdating={stopUpdating}>
+                { synapseDeactivateButton }
+            </GroupAdminToolsSection>
+        );
+    } else if (synapseDeactivateButton) {
+        adminToolsContainer = (
+            <GenericAdminToolsContainer>
+                { synapseDeactivateButton }
+            </GenericAdminToolsContainer>
+        );
+    }
+
+    if (pendingUpdateCount > 0) {
+        const Loader = sdk.getComponent("elements.Spinner");
+        spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
+    }
+
+    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;
@@ -1057,6 +1307,38 @@ export const UserInfoPane = ({children, className, onClose, e2eStatus, member})
         </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;
     let presenceCurrentlyActive;
@@ -1091,74 +1373,35 @@ export const UserInfoPane = ({children, className, onClose, e2eStatus, member})
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    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 e2eIcon;
     if (e2eStatus) {
         e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
     }
 
     const displayName = member.name || member.displayname;
+    return <React.Fragment>
+        { closeButton }
+        { avatarElement }
 
-    return (
-        <div className={classNames("mx_UserInfo", className)} role="tabpanel">
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                { closeButton }
-                { avatarElement }
-
-                <div className="mx_UserInfo_container mx_UserInfo_separator">
-                    <div className="mx_UserInfo_profile">
-                        <div>
-                            <h2 aria-label={displayName}>
-                                { e2eIcon }
-                                { displayName }
-                            </h2>
-                        </div>
-                        <div>{ member.userId }</div>
-                        <div className="mx_UserInfo_profileStatus">
-                            {presenceLabel}
-                            {statusLabel}
-                        </div>
-                    </div>
+        <div className="mx_UserInfo_container mx_UserInfo_separator">
+            <div className="mx_UserInfo_profile">
+                <div>
+                    <h2 aria-label={displayName}>
+                        { e2eIcon }
+                        { displayName }
+                    </h2>
                 </div>
-
-                { children }
-            </AutoHideScrollbar>
+                <div>{ member.userId }</div>
+                <div className="mx_UserInfo_profileStatus">
+                    {presenceLabel}
+                    {statusLabel}
+                </div>
+            </div>
         </div>
-    );
+    </React.Fragment>;
 };
 
-const UserInfo = ({user, groupId, roomId, onClose}) => {
+const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.RoomMemberInfo, ...props}) => {
     const cli = useContext(MatrixClientContext);
 
     // Load room if we are given a room id and memoize it
@@ -1166,246 +1409,46 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     // 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]);
 
-    // only display the devices list if our client supports E2E
-    const _enableDevices = cli.isCryptoEnabled();
-
-    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));
-    // Recheck if the user or client changes
-    useEffect(() => {
-        setIsIgnored(cli.isUserIgnored(user.userId));
-    }, [cli, user.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));
-        }
-    }, [cli, user.userId]);
-    useEventEmitter(cli, "accountData", accountDataHandler);
-
-    // Count of how many operations are currently in progress, if > 0 then show a Spinner
-    const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
-    const startUpdating = useCallback(() => {
-        setPendingUpdateCount(pendingUpdateCount + 1);
-    }, [pendingUpdateCount]);
-    const stopUpdating = useCallback(() => {
-        setPendingUpdateCount(pendingUpdateCount - 1);
-    }, [pendingUpdateCount]);
-
-    const roomPermissions = useRoomPermissions(cli, room, member);
-
-    const onSynapseDeactivate = useCallback(async () => {
-        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
-        const {finished} = Modal.createTrackedDialog('Synapse User Deactivation', '', QuestionDialog, {
-            title: _t("Deactivate user?"),
-            description:
-                <div>{ _t(
-                    "Deactivating this user will log them out and prevent them from logging back in. Additionally, " +
-                    "they will leave all the rooms they are in. This action cannot be reversed. Are you sure you " +
-                    "want to deactivate this user?",
-                ) }</div>,
-            button: _t("Deactivate user"),
-            danger: true,
-        });
-
-        const [accepted] = await finished;
-        if (!accepted) return;
-        try {
-            await cli.deactivateSynapseUser(user.userId);
-        } catch (err) {
-            console.error("Failed to deactivate user");
-            console.error(err);
-
-            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-            Modal.createTrackedDialog('Failed to deactivate Synapse user', '', ErrorDialog, {
-                title: _t('Failed to deactivate user'),
-                description: ((err && err.message) ? err.message : _t("Operation failed")),
-            });
-        }
-    }, [cli, user.userId]);
-
-    let synapseDeactivateButton;
-    let spinner;
-
-    // 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()}`)) {
-        synapseDeactivateButton = (
-            <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
-                {_t("Deactivate user")}
-            </AccessibleButton>
-        );
-    }
-
-    let adminToolsContainer;
-    if (room && member.roomId) {
-        adminToolsContainer = (
-            <RoomAdminToolsContainer
-                powerLevels={powerLevels}
-                member={member}
-                room={room}
-                startUpdating={startUpdating}
-                stopUpdating={stopUpdating}>
-                { synapseDeactivateButton }
-            </RoomAdminToolsContainer>
-        );
-    } else if (groupId) {
-        adminToolsContainer = (
-            <GroupAdminToolsSection
-                groupId={groupId}
-                groupMember={user}
-                startUpdating={startUpdating}
-                stopUpdating={stopUpdating}>
-                { synapseDeactivateButton }
-            </GroupAdminToolsSection>
-        );
-    } else if (synapseDeactivateButton) {
-        adminToolsContainer = (
-            <GenericAdminToolsContainer>
-                { synapseDeactivateButton }
-            </GenericAdminToolsContainer>
-        );
-    }
-
-    if (pendingUpdateCount > 0) {
-        const Loader = sdk.getComponent("elements.Spinner");
-        spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
-    }
-
-    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>
-    );
+    const devices = useDevices(user.userId);
 
     let e2eStatus;
     if (isRoomEncrypted && devices) {
         e2eStatus = getE2EStatus(cli, user.userId, devices);
     }
 
-    return <UserInfoPane onClose={onClose} e2eStatus={e2eStatus} member={member}>
-        { memberDetails &&
-        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
-            <div className="mx_UserInfo_memberDetails">
-                { memberDetails }
-            </div>
-        </div> }
+    const classes = ["mx_UserInfo"];
 
-        { securitySection }
-        <UserOptionsSection
-            devices={devices}
-            canInvite={roomPermissions.canInvite}
-            isIgnored={isIgnored}
-            member={member} />
+    let content;
+    switch (phase) {
+        case RIGHT_PANEL_PHASES.RoomMemberInfo:
+        case RIGHT_PANEL_PHASES.GroupMemberInfo:
+            content = (
+                <BasicUserInfo
+                    room={room}
+                    member={member}
+                    groupId={groupId}
+                    devices={devices}
+                    isRoomEncrypted={isRoomEncrypted} />
+            );
+            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 }
-    </UserInfoPane>;
+                { content }
+            </AutoHideScrollbar>
+        </div>
+    );
 };
 
 UserInfo.propTypes = {
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index 0d28e1568f..a66ecd34fb 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/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,8 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
+
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import {_t} from "../../../languageHandler";
+import E2EIcon from "../rooms/E2EIcon";
 
 export default class VerificationPanel extends React.PureComponent {
     constructor(props) {
@@ -25,46 +28,81 @@ export default class VerificationPanel extends React.PureComponent {
         this._hasVerifier = !!props.request.verifier;
     }
 
-    render() {
-        return <div className="mx_UserInfo">
+    renderQRPhase() {
+        const {member} = this.props;
+        // TODO change the button into a spinner when on click
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return <React.Fragment>
             <div className="mx_UserInfo_container">
-                { this.renderStatus() }
+                <h3>Verify by scanning</h3>
+                <p>{_t("Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", {
+                    displayName: member.displayName || member.name || member.userId,
+                }, {
+                    a: t => <a>{ t }</a>,
+                })}</p>
+                <div>QR Code</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>
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+                    {_t("Verify by emoji")}
+                </AccessibleButton>
+            </div>
+        </React.Fragment>;
     }
 
-    renderStatus() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const {request} = this.props;
+    renderVerifiedPhase() {
+        const {member} = this.props;
 
-        if (request.requested) {
-            return (<p>Waiting for {request.otherUserId} to accept ... <Spinner /></p>);
-        } else if (request.ready) {
-            const verifyButton = <AccessibleButton kind="primary" onClick={this._startSAS}>
-                Verify by emoji
-            </AccessibleButton>;
-            return (<p>{request.otherUserId} is ready, start {verifyButton}</p>);
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return (
+            <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
+                <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>
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    render() {
+        const {member, request} = this.props;
+
+        const displayName = member.displayName || member.name || member.userId;
+
+        if (request.ready) {
+            return this.renderQRPhase();
         } else if (request.started) {
-            if (this.state.sasWaitingForOtherParty) {
-                return <p>Waiting for {request.otherUserId} to confirm ...</p>;
-            } else if (this.state.sasEvent) {
+            if (this.state.sasEvent) {
                 const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-                return (<div>
+                // TODO implement "mismatch" vs "cancelled"
+                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>);
+                </div>;
             } else {
                 return (<p>Setting up SAS verification...</p>);
             }
         } else if (request.done) {
-            return <p>verified {request.otherUserId}!!</p>;
+            return this.renderVerifiedPhase();
         } else if (request.cancelled) {
+            // TODO check if this matches target
+            // TODO should this be a MODAL?
             return <p>cancelled by {request.cancellingUserId}!</p>;
         }
+        return null;
     }
 
     _startSAS = async () => {
@@ -79,7 +117,6 @@ export default class VerificationPanel extends React.PureComponent {
     };
 
     _onSasMatchesClick = () => {
-        this.setState({sasWaitingForOtherParty: true});
         this.state.sasEvent.confirm();
     };
 
@@ -106,7 +143,7 @@ export default class VerificationPanel extends React.PureComponent {
             request.verifier.removeListener('show_sas', this._onVerifierShowSas);
         }
         this._hasVerifier = !!request.verifier;
-        this.forceUpdate();
+        this.forceUpdate(); // TODO fix this
     };
 
     componentDidMount() {
diff --git a/src/components/views/toasts/VerificationRequestToast.js b/src/components/views/toasts/VerificationRequestToast.js
index 479a3e3f93..769e0d36d0 100644
--- a/src/components/views/toasts/VerificationRequestToast.js
+++ b/src/components/views/toasts/VerificationRequestToast.js
@@ -76,10 +76,14 @@ export default class VerificationRequestToast extends React.PureComponent {
         }
         try {
             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),
+                },
             });
         } catch (err) {
             console.error(err.message);
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 8f39457689..693a3769a0 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -18,6 +18,8 @@ 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";
 
 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() {
-        super();
-    }
+    onMatchClick = () => {
+        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,33 @@ export default class VerificationShowSas extends React.Component {
         } else {
             return <div>
                 {_t("Unable to find a supported verification method.")}
-                <DialogButtons
-                    primaryButton={_t('Cancel')}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this.props.onCancel}
-                />
+                <AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_verify">
+                    {_t('Cancel')}
+                </AccessibleButton>
             </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 {
+            confirm = <React.Fragment>
+                <AccessibleButton kind="primary" onClick={this.onMatchClick} className="mx_UserInfo_verify">
+                    {_t("They match")}
+                </AccessibleButton>
+                <AccessibleButton kind="danger" onClick={this.props.onCancel} className="mx_UserInfo_verify">
+                    {_t("They don't match")}
+                </AccessibleButton>
+            </React.Fragment>;
+        }
+
         return <div className="mx_VerificationShowSas">
             <p>{sasCaption}</p>
-            <p>{_t(
-                "For maximum security, we recommend you do this in person or use another " +
-                "trusted means of communication.",
-            )}</p>
+            <p>{_t("For ultimate security, do this in person or use another way to communicate.")}</p>
             {sasDisplay}
-            <DialogButtons onPrimaryButtonClick={this.props.onDone}
-                primaryButton={_t("Continue")}
-                hasCancel={true}
-                onCancel={this.props.onCancel}
-            />
+            {confirm}
         </div>;
     }
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c99b22f421..5b131b8750 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -451,7 +451,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",
@@ -1124,12 +1127,13 @@
     "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.",
-    "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.",
+    "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.",
     "Members": "Members",
     "Files": "Files",
     "Trusted": "Trusted",
@@ -1147,6 +1151,11 @@
     "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.",
     "Security": "Security",
+    "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:": "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:",
+    "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.",
+    "Verify by emoji": "Verify by emoji",
+    "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",
+    "Got it": "Got it",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",
@@ -1426,6 +1435,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>.",

From b67256c7c2b0b68b4b54274fcbf70b2336a32134 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 24 Jan 2020 16:41:43 +0000
Subject: [PATCH 03/13] post-merge fix

---
 src/components/structures/RightPanel.js       |  4 +--
 .../views/right_panel/VerificationPanel.js    | 30 +++++++++++++++++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 2188bda4f2..79955c8448 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -196,7 +196,7 @@ export default class RightPanel extends React.Component {
                     });
                 };
                 panel = <UserInfo
-                    userId={this.state.member}
+                    user={this.state.member}
                     roomId={this.props.roomId}
                     key={this.props.roomId || this.state.member.userId}
                     onClose={onClose}
@@ -217,7 +217,7 @@ export default class RightPanel extends React.Component {
                     });
                 };
                 panel = <UserInfo
-                    userId={this.state.member}
+                    user={this.state.member}
                     groupId={this.props.groupId}
                     key={this.state.member.userId}
                     onClose={onClose} />;
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index cbabb1188a..0fdf16de65 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -19,7 +19,6 @@ 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";
@@ -32,9 +31,26 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     renderQRPhase() {
-        const {member} = this.props;
+        const {member, request} = this.props; // type req: VerificationRequest
         // TODO change the button into a spinner when on click
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        if (!request.requestEvent || !request.requestEvent.getId()) {
+            // TODO handle this error case
+            return <p>request.requestEvent.getId()</p>;
+        }
+
+        const qrCodeKeys = [
+            [MatrixClientPeg.get().getDeviceId(), MatrixClientPeg.get().getDeviceEd25519Key()],
+            [MatrixClientPeg.get().getCrossSigningId(), MatrixClientPeg.get().getCrossSigningId()],
+        ];
+        const crossSigningInfo = MatrixClientPeg.get().getStoredCrossSigningForUser(request.otherUserId);
+
+        if (!crossSigningInfo) {
+            // TODO handle this error case
+            return <p>crossSigningInfo</p>;
+        }
+
         return <React.Fragment>
             <div className="mx_UserInfo_container">
                 <h3>Verify by scanning</h3>
@@ -43,12 +59,20 @@ export default class VerificationPanel extends React.PureComponent {
                 }, {
                     a: t => <a>{ t }</a>,
                 })}</p>
-                <div>QR Code</div>
+
+                <VerificationQRCode
+                    keyholderUserId={MatrixClientPeg.get().getUserId()}
+                    requestEventId={request.requestEvent.getId()}
+                    otherUserKey={crossSigningInfo.getId("master")}
+                    secret={request.encodedSharedSecret}
+                    keys={qrCodeKeys}
+                />
             </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>
+
                 <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
                     {_t("Verify by emoji")}
                 </AccessibleButton>

From 50b491d7e5ede07a2d23e91e0a8cb3ec0c3c7251 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 27 Jan 2020 15:48:19 +0000
Subject: [PATCH 04/13] post merge fix

---
 .../views/right_panel/VerificationPanel.js        | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index 0fdf16de65..b911824b4e 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -35,21 +35,18 @@ export default class VerificationPanel extends React.PureComponent {
         // TODO change the button into a spinner when on click
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
-        if (!request.requestEvent || !request.requestEvent.getId()) {
+        const cli = MatrixClientPeg.get();
+        const crossSigningInfo = cli.getStoredCrossSigningForUser(request.otherUserId);
+        if (!crossSigningInfo || !request.requestEvent || !request.requestEvent.getId()) {
             // TODO handle this error case
             return <p>request.requestEvent.getId()</p>;
         }
 
+        const myKeyId = cli.getCrossSigningId();
         const qrCodeKeys = [
-            [MatrixClientPeg.get().getDeviceId(), MatrixClientPeg.get().getDeviceEd25519Key()],
-            [MatrixClientPeg.get().getCrossSigningId(), MatrixClientPeg.get().getCrossSigningId()],
+            [cli.getDeviceId(), cli.getDeviceEd25519Key()],
+            [myKeyId, myKeyId],
         ];
-        const crossSigningInfo = MatrixClientPeg.get().getStoredCrossSigningForUser(request.otherUserId);
-
-        if (!crossSigningInfo) {
-            // TODO handle this error case
-            return <p>crossSigningInfo</p>;
-        }
 
         return <React.Fragment>
             <div className="mx_UserInfo_container">

From ca5d4d88a275c93aff94158ae8b6836acd1f08e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 27 Jan 2020 17:17:05 +0000
Subject: [PATCH 05/13] Style the QR code

---
 res/css/views/right_panel/_UserInfo.scss      |  5 +++++
 .../views/right_panel/_VerificationPanel.scss | 16 ++++++++++++++
 .../elements/crypto/VerificationQRCode.js     |  2 +-
 .../views/right_panel/VerificationPanel.js    | 21 ++++++++++---------
 src/i18n/strings/en_EN.json                   |  2 +-
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 9db636ae6b..30c71146bf 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -111,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 1s;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
@@ -270,4 +271,8 @@ limitations under the License.
         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
+    }
 }
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 84a82c9a5c..75b469cef9 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -18,4 +18,20 @@ limitations under the License.
     .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;
+        }
+    }
 }
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
index 1cb5647317..630a06a07c 100644
--- a/src/components/views/elements/crypto/VerificationQRCode.js
+++ b/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")} />;
     }
 }
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index b911824b4e..c1e84afc22 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -48,22 +48,23 @@ export default class VerificationPanel extends React.PureComponent {
             [myKeyId, myKeyId],
         ];
 
+        // TODO: add way to open camera to scan a QR code
         return <React.Fragment>
             <div className="mx_UserInfo_container">
                 <h3>Verify by scanning</h3>
-                <p>{_t("Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", {
+                <p>{_t("Ask %(displayName)s to scan your code:", {
                     displayName: member.displayName || member.name || member.userId,
-                }, {
-                    a: t => <a>{ t }</a>,
                 })}</p>
 
-                <VerificationQRCode
-                    keyholderUserId={MatrixClientPeg.get().getUserId()}
-                    requestEventId={request.requestEvent.getId()}
-                    otherUserKey={crossSigningInfo.getId("master")}
-                    secret={request.encodedSharedSecret}
-                    keys={qrCodeKeys}
-                />
+                <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 className="mx_UserInfo_container">
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6297270540..d4512d785d 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1156,7 +1156,7 @@
     "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.",
     "Security": "Security",
-    "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:": "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:",
+    "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.",
     "Verify by emoji": "Verify by emoji",
     "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",

From db1d3c091e041b607507fdf145cb41c6a92c46f5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 27 Jan 2020 17:21:31 +0000
Subject: [PATCH 06/13] Error handle the no QR verif case better

---
 .../views/right_panel/VerificationPanel.js          | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index c1e84afc22..f6a26665d8 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -31,15 +31,22 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     renderQRPhase() {
-        const {member, request} = this.props; // type req: VerificationRequest
+        const {member, request} = this.props;
         // TODO change the button into a spinner when on click
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const cli = MatrixClientPeg.get();
         const crossSigningInfo = cli.getStoredCrossSigningForUser(request.otherUserId);
         if (!crossSigningInfo || !request.requestEvent || !request.requestEvent.getId()) {
-            // TODO handle this error case
-            return <p>request.requestEvent.getId()</p>;
+            // 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>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+                    {_t("Verify by emoji")}
+                </AccessibleButton>
+            </div>;
         }
 
         const myKeyId = cli.getCrossSigningId();

From 657457c14bc1f49da33ddae8a51f9a7d5ac91cba Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 11:13:09 +0000
Subject: [PATCH 07/13] Apply remainder of ux

---
 .../views/right_panel/_EncryptionInfo.scss    |   2 +
 src/components/views/dialogs/ErrorDialog.js   |  10 +-
 .../views/right_panel/EncryptionPanel.js      |  52 ++++++--
 .../views/right_panel/VerificationPanel.js    | 112 ++++++++++++------
 .../views/verification/VerificationShowSas.js |   1 -
 src/i18n/strings/en_EN.json                   |  12 +-
 6 files changed, 139 insertions(+), 50 deletions(-)

diff --git a/res/css/views/right_panel/_EncryptionInfo.scss b/res/css/views/right_panel/_EncryptionInfo.scss
index 386eef8e7f..e13b1b6802 100644
--- a/res/css/views/right_panel/_EncryptionInfo.scss
+++ b/res/css/views/right_panel/_EncryptionInfo.scss
@@ -20,5 +20,7 @@ limitations under the License.
             margin-top: 25px;
             margin-bottom: 15px;
         }
+
+        text-align: center;
     }
 }
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index 15c87990d0..fbc5509457 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/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}
-                    title={this.props.title || _t('Error')}
-                    contentId='mx_Dialog_content'
+            <BaseDialog
+                className="mx_ErrorDialog"
+                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.') }
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index dfb145f61d..2c4a896624 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -21,19 +21,47 @@ 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";
 
-const EncryptionPanel = ({verificationRequest, member}) => {
+// cancellation codes which constitute a key mismatch
+const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
+
+const EncryptionPanel = ({verificationRequest, member, onClose}) => {
     const [request, setRequest] = useState(verificationRequest);
     useEffect(() => {
         setRequest(verificationRequest);
     }, [verificationRequest]);
 
-    const [pending, setPending] = useState(false);
+    const [phase, setPhase] = useState(false);
     const changeHandler = useCallback(() => {
-        setPending(request && request.requested);
-    }, [request]);
+        // 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
+        }
+
+        if (request) {
+            setPhase(request.phase);
+        }
+    }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
-    useEffect(changeHandler, [changeHandler]);
 
     const onStartVerification = useCallback(async () => {
         const cli = MatrixClientPeg.get();
@@ -42,10 +70,18 @@ const EncryptionPanel = ({verificationRequest, member}) => {
         setRequest(verificationRequest);
     }, [member.userId]);
 
-    if (!request || pending) {
-        return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={pending} />;
+    const requested = request && phase === PHASE_REQUESTED;
+    if (!request || requested) {
+        return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={requested} />;
     } else {
-        return <VerificationPanel member={member} request={request} key={request.channel.transactionId} />;
+        return (
+            <VerificationPanel
+                onClose={onClose}
+                member={member}
+                request={request}
+                key={request.channel.transactionId}
+                phase={phase} />
+        );
     }
 };
 EncryptionPanel.propTypes = {
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index f6a26665d8..6a5516927a 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -22,6 +22,13 @@ import VerificationQRCode from "../elements/crypto/VerificationQRCode";
 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) {
@@ -30,11 +37,22 @@ export default class VerificationPanel extends React.PureComponent {
         this._hasVerifier = !!props.request.verifier;
     }
 
-    renderQRPhase() {
+    renderQRPhase(pending) {
         const {member, request} = this.props;
         // TODO change the button into a spinner when on click
         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()) {
@@ -43,9 +61,7 @@ export default class VerificationPanel extends React.PureComponent {
                 <h3>Verify by emoji</h3>
                 <p>{_t("Verify by comparing unique emoji.")}</p>
 
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
-                    {_t("Verify by emoji")}
-                </AccessibleButton>
+                { button }
             </div>;
         }
 
@@ -78,9 +94,7 @@ export default class VerificationPanel extends React.PureComponent {
                 <h3>Verify by emoji</h3>
                 <p>{_t("If you can't scan the code above, verify by comparing unique emoji.")}</p>
 
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
-                    {_t("Verify by emoji")}
-                </AccessibleButton>
+                { button }
             </div>
         </React.Fragment>;
     }
@@ -97,7 +111,36 @@ export default class VerificationPanel extends React.PureComponent {
                 })}</p>
                 <E2EIcon isUser={true} status="verified" size={128} />
                 <p>Verify all users in a room to ensure it's secure.</p>
-                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this.props.onClose}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    renderCancelledPhase() {
+        const {member, request} = this.props;
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        let text;
+        if (request.cancellationCode === "m.timeout") {
+            text = _t("Verification timed out. Start verification again from their profile.");
+        } else if (request.cancellingUserId === request.otherUserId) {
+            text = _t("%(displayName)s cancelled verification. Start verification again from their profile.", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+        } else {
+            text = _t("You cancelled verification. Start verification again from their profile.");
+        }
+
+        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>
@@ -105,34 +148,32 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     render() {
-        const {member, request} = this.props;
+        const {member} = this.props;
 
         const displayName = member.displayName || member.name || member.userId;
 
-        if (request.ready) {
-            return this.renderQRPhase();
-        } else if (request.started) {
-            if (this.state.sasEvent) {
-                const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-                // TODO implement "mismatch" vs "cancelled"
-                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 (<p>Setting up SAS verification...</p>);
-            }
-        } else if (request.done) {
-            return this.renderVerifiedPhase();
-        } else if (request.cancelled) {
-            // TODO check if this matches target
-            // TODO should this be a MODAL?
-            return <p>cancelled by {request.cancellingUserId}!</p>;
+        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;
     }
@@ -143,8 +184,6 @@ export default class VerificationPanel extends React.PureComponent {
             await verifier.verify();
         } catch (err) {
             console.error(err);
-        } finally {
-            this.setState({sasEvent: null});
         }
     };
 
@@ -153,7 +192,7 @@ export default class VerificationPanel extends React.PureComponent {
     };
 
     _onSasMismatchesClick = () => {
-        this.state.sasEvent.cancel();
+        this.state.sasEvent.mismatch();
     };
 
     _onVerifierShowSas = (sasEvent) => {
@@ -175,7 +214,6 @@ export default class VerificationPanel extends React.PureComponent {
             request.verifier.removeListener('show_sas', this._onVerifierShowSas);
         }
         this._hasVerifier = !!request.verifier;
-        this.forceUpdate(); // TODO fix this
     };
 
     componentDidMount() {
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 693a3769a0..08d0dd422d 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -16,7 +16,6 @@ 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";
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d4512d785d..e926d4ff91 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1139,6 +1139,12 @@
     "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.",
+    "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",
@@ -1156,11 +1162,15 @@
     "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.",
     "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.",
-    "Verify by emoji": "Verify by 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",

From c93b080434670d83511acf01940779d2bbfc5d39 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 11:17:53 +0000
Subject: [PATCH 08/13] delint

---
 .../views/toasts/VerificationRequestToast.js    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/views/toasts/VerificationRequestToast.js b/src/components/views/toasts/VerificationRequestToast.js
index 1015ed0313..342b7d840c 100644
--- a/src/components/views/toasts/VerificationRequestToast.js
+++ b/src/components/views/toasts/VerificationRequestToast.js
@@ -83,14 +83,15 @@ export default class VerificationRequestToast extends React.PureComponent {
                 });
                 await request.accept();
                 const cli = MatrixClientPeg.get();
-            dis.dispatch({
-                action: "set_right_panel_phase",
-                phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-                refireParams: {
-                    verificationRequest: request,
-                    member: cli.getUser(request.otherUserId),
-                },
-            });} else if (request.channel.deviceId && request.verifier) {
+                dis.dispatch({
+                    action: "set_right_panel_phase",
+                    phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+                    refireParams: {
+                        verificationRequest: request,
+                        member: cli.getUser(request.otherUserId),
+                    },
+                });
+            } else if (request.channel.deviceId && request.verifier) {
                 // show to_device verifications in dialog still
                 const IncomingSasDialog = sdk.getComponent("views.dialogs.IncomingSasDialog");
                 Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {

From 58df4127d3b0c3b08c776c15ae84ccb215d68247 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 17:14:48 +0000
Subject: [PATCH 09/13] Update propTypes and remove todo

---
 src/components/views/right_panel/EncryptionPanel.js   | 7 +++++--
 src/components/views/right_panel/VerificationPanel.js | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 2c4a896624..d45280e29c 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from "react";
+import PropTypes from "prop-types";
 
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
@@ -85,7 +86,9 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
     }
 };
 EncryptionPanel.propTypes = {
-
+    member: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    verificationRequest: PropTypes.object,
 };
 
 export default EncryptionPanel;
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index 6a5516927a..3740c6e49d 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -39,7 +39,6 @@ export default class VerificationPanel extends React.PureComponent {
 
     renderQRPhase(pending) {
         const {member, request} = this.props;
-        // TODO change the button into a spinner when on click
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let button;

From b0028066395547f9912c7438bbf2e3e70a59f2e2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 17:42:39 +0000
Subject: [PATCH 10/13] Use DialogButtons because reusability :((

---
 .../views/verification/VerificationShowSas.js  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 08d0dd422d..4a1628e9e6 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 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);
@@ -90,14 +91,15 @@ export default class VerificationShowSas extends React.Component {
             const text = _t("Waiting for %(displayName)s to verify…", {displayName});
             confirm = <PendingActionSpinner text={text} />;
         } else {
-            confirm = <React.Fragment>
-                <AccessibleButton kind="primary" onClick={this.onMatchClick} className="mx_UserInfo_verify">
-                    {_t("They match")}
-                </AccessibleButton>
-                <AccessibleButton kind="danger" onClick={this.props.onCancel} className="mx_UserInfo_verify">
-                    {_t("They don't match")}
-                </AccessibleButton>
-            </React.Fragment>;
+            // FIXME: stop using DialogButtons here once it 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">

From c632c72f25433a91cec974117fff05424ec774a7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 23:43:09 +0000
Subject: [PATCH 11/13] tidy up right-panel if-else-if statement

---
 src/components/structures/RightPanel.js | 133 +++++++++++++-----------
 1 file changed, 75 insertions(+), 58 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 79955c8448..be10ead7ca 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -180,65 +180,82 @@ export default class RightPanel extends React.Component {
 
         let panel = <div />;
 
-        if (this.props.roomId && this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList) {
-            panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
-        } else if (this.props.groupId && this.state.phase === RIGHT_PANEL_PHASES.GroupMemberList) {
-            panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomList) {
-            panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo ||
-            this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
-            if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-                const onClose = () => {
-                    dis.dispatch({
-                        action: "view_user",
-                        member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
-                    });
-                };
-                panel = <UserInfo
-                    user={this.state.member}
-                    roomId={this.props.roomId}
-                    key={this.props.roomId || this.state.member.userId}
-                    onClose={onClose}
-                    phase={this.state.phase}
-                    verificationRequest={this.state.verificationRequest}
-                />;
-            } else {
-                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
-            }
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.Room3pidMemberInfo) {
-            panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
-        } else if (this.state.phase === 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.userId}
-                    onClose={onClose} />;
-            } else {
-                panel = (
-                    <GroupMemberInfo
-                        groupMember={this.state.member}
+        switch (this.state.phase) {
+            case RIGHT_PANEL_PHASES.RoomMemberList:
+                if (this.props.roomId) {
+                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+                }
+                break;
+            case RIGHT_PANEL_PHASES.GroupMemberList:
+                if (this.props.groupId) {
+                    panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+                }
+                break;
+            case RIGHT_PANEL_PHASES.GroupRoomList:
+                panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
+                break;
+            case RIGHT_PANEL_PHASES.RoomMemberInfo:
+            case RIGHT_PANEL_PHASES.EncryptionPanel:
+                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                    const onClose = () => {
+                        dis.dispatch({
+                            action: "view_user",
+                            member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
+                        });
+                    };
+                    panel = <UserInfo
+                        user={this.state.member}
+                        roomId={this.props.roomId}
+                        key={this.props.roomId || this.state.member.userId}
+                        onClose={onClose}
+                        phase={this.state.phase}
+                        verificationRequest={this.state.verificationRequest}
+                    />;
+                } else {
+                    panel = <MemberInfo
+                        member={this.state.member}
+                        key={this.props.roomId || this.state.member.userId}
+                    />;
+                }
+                break;
+            case RIGHT_PANEL_PHASES.Room3pidMemberInfo:
+                panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
+                break;
+            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}
-                    />
-                );
-            }
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.GroupRoomInfo) {
-            panel = <GroupRoomInfo
-                groupRoomId={this.state.groupRoomId}
-                groupId={this.props.groupId}
-                key={this.state.groupRoomId} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.NotificationPanel) {
-            panel = <NotificationPanel />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.FilePanel) {
-            panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
+                        key={this.state.member.userId}
+                        onClose={onClose} />;
+                } else {
+                    panel = (
+                        <GroupMemberInfo
+                            groupMember={this.state.member}
+                            groupId={this.props.groupId}
+                            key={this.state.member.user_id}
+                        />
+                    );
+                }
+                break;
+            case RIGHT_PANEL_PHASES.GroupRoomInfo:
+                panel = <GroupRoomInfo
+                    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", {

From 2fb6e737947140d23250101f315f282b5f4b541f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 23:43:27 +0000
Subject: [PATCH 12/13] speed up user info verification css transitions by 2x

---
 res/css/views/right_panel/_UserInfo.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index 30c71146bf..9ce524c5ac 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -81,7 +81,7 @@ limitations under the License.
     .mx_UserInfo_avatar > div {
         max-width: 30vh;
         margin: 0 auto;
-        transition: 1s;
+        transition: 0.5s;
     }
 
     .mx_UserInfo_avatar > div > div {
@@ -111,7 +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 1s;
+        transition: font-size 0.5s;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

From 5c44ff8f8a04599f795c45310e523502f902ddd7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 28 Jan 2020 23:48:00 +0000
Subject: [PATCH 13/13] other PR iteration based on feedback

---
 src/components/views/right_panel/UserInfo.js             | 1 -
 src/components/views/verification/VerificationShowSas.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index 41dbe49cc8..0c71642acc 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -1093,7 +1093,6 @@ export const useDevices = (userId) => {
                 // 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;
-                    console.log("setDevices 2", devices);
                     setDevices(devices);
                 });
             }
diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js
index 4a1628e9e6..7b93f42983 100644
--- a/src/components/views/verification/VerificationShowSas.js
+++ b/src/components/views/verification/VerificationShowSas.js
@@ -91,7 +91,7 @@ export default class VerificationShowSas extends React.Component {
             const text = _t("Waiting for %(displayName)s to verify…", {displayName});
             confirm = <PendingActionSpinner text={text} />;
         } else {
-            // FIXME: stop using DialogButtons here once it this component is only used in the right panel verification
+            // 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}