Merge branch 'develop' into move-read-receipts-to-bottom

src/components/structures/ContextMenu.js

@@ -255,7 +255,7 @@ export class ContextMenu extends React.Component {
 
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
-        } else {
+        } else if (position.top !== undefined) {
             const target = position.top;
 
             // By default, no adjustment is made

src/components/structures/FilePanel.js

@@ -19,9 +19,10 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
-import Matrix from 'matrix-js-sdk';
+import {Filter} from 'matrix-js-sdk';
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
+import EventIndexPeg from "../../indexing/EventIndexPeg";
 import { _t } from '../../languageHandler';
 
 /*
@@ -29,6 +30,9 @@ import { _t } from '../../languageHandler';
  */
 const FilePanel = createReactClass({
     displayName: 'FilePanel',
+    // This is used to track if a decrypted event was a live event and should be
+    // added to the timeline.
+    decryptingEvents: new Set(),
 
     propTypes: {
         roomId: PropTypes.string.isRequired,
@@ -40,42 +44,147 @@ const FilePanel = createReactClass({
         };
     },
 
-    componentDidMount: function() {
-        this.updateTimelineSet(this.props.roomId);
+    onRoomTimeline(ev, room, toStartOfTimeline, removed, data) {
+        if (room.roomId !== this.props.roomId) return;
+        if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
+
+        if (ev.isBeingDecrypted()) {
+            this.decryptingEvents.add(ev.getId());
+        } else {
+            this.addEncryptedLiveEvent(ev);
+        }
     },
 
-    updateTimelineSet: function(roomId) {
+    onEventDecrypted(ev, err) {
+        if (ev.getRoomId() !== this.props.roomId) return;
+        const eventId = ev.getId();
+
+        if (!this.decryptingEvents.delete(eventId)) return;
+        if (err) return;
+
+        this.addEncryptedLiveEvent(ev);
+    },
+
+    addEncryptedLiveEvent(ev, toStartOfTimeline) {
+        if (!this.state.timelineSet) return;
+
+        const timeline = this.state.timelineSet.getLiveTimeline();
+        if (ev.getType() !== "m.room.message") return;
+        if (["m.file", "m.image", "m.video", "m.audio"].indexOf(ev.getContent().msgtype) == -1) {
+            return;
+        }
+
+        if (!this.state.timelineSet.eventIdToTimeline(ev.getId())) {
+            this.state.timelineSet.addEventToTimeline(ev, timeline, false);
+        }
+    },
+
+    async componentDidMount() {
+        const client = MatrixClientPeg.get();
+
+        await this.updateTimelineSet(this.props.roomId);
+
+        if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
+
+        // The timelineSets filter makes sure that encrypted events that contain
+        // URLs never get added to the timeline, even if they are live events.
+        // These methods are here to manually listen for such events and add
+        // them despite the filter's best efforts.
+        //
+        // We do this only for encrypted rooms and if an event index exists,
+        // this could be made more general in the future or the filter logic
+        // could be fixed.
+        if (EventIndexPeg.get() !== null) {
+            client.on('Room.timeline', this.onRoomTimeline);
+            client.on('Event.decrypted', this.onEventDecrypted);
+        }
+    },
+
+    componentWillUnmount() {
+        const client = MatrixClientPeg.get();
+        if (client === null) return;
+
+        if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return;
+
+        if (EventIndexPeg.get() !== null) {
+            client.removeListener('Room.timeline', this.onRoomTimeline);
+            client.removeListener('Event.decrypted', this.onEventDecrypted);
+        }
+    },
+
+    async fetchFileEventsServer(room) {
+        const client = MatrixClientPeg.get();
+
+        const filter = new Filter(client.credentials.userId);
+        filter.setDefinition(
+            {
+                "room": {
+                    "timeline": {
+                        "contains_url": true,
+                        "types": [
+                            "m.room.message",
+                        ],
+                    },
+                },
+            },
+        );
+
+        const filterId = await client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter);
+        filter.filterId = filterId;
+        const timelineSet = room.getOrCreateFilteredTimelineSet(filter);
+
+        return timelineSet;
+    },
+
+    onPaginationRequest(timelineWindow, direction, limit) {
+        const client = MatrixClientPeg.get();
+        const eventIndex = EventIndexPeg.get();
+        const roomId = this.props.roomId;
+
+        const room = client.getRoom(roomId);
+
+        // We override the pagination request for encrypted rooms so that we ask
+        // the event index to fulfill the pagination request. Asking the server
+        // to paginate won't ever work since the server can't correctly filter
+        // out events containing URLs
+        if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
+            return eventIndex.paginateTimelineWindow(room, timelineWindow, direction, limit);
+        } else {
+            return timelineWindow.paginate(direction, limit);
+        }
+    },
+
+    async updateTimelineSet(roomId: string) {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(roomId);
+        const eventIndex = EventIndexPeg.get();
 
         this.noRoom = !room;
 
         if (room) {
-            const filter = new Matrix.Filter(client.credentials.userId);
-            filter.setDefinition(
-                {
-                    "room": {
-                        "timeline": {
-                            "contains_url": true,
-                            "types": [
-                                "m.room.message",
-                            ],
-                        },
-                    },
-                },
-            );
+            let timelineSet;
 
-            // FIXME: we shouldn't be doing this every time we change room - see comment above.
-            client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter).then(
-                (filterId)=>{
-                    filter.filterId = filterId;
-                    const timelineSet = room.getOrCreateFilteredTimelineSet(filter);
-                    this.setState({ timelineSet: timelineSet });
-                },
-                (error)=>{
-                    console.error("Failed to get or create file panel filter", error);
-                },
-            );
+            try {
+                timelineSet = await this.fetchFileEventsServer(room);
+
+                // If this room is encrypted the file panel won't be populated
+                // correctly since the defined filter doesn't support encrypted
+                // events and the server can't check if encrypted events contain
+                // URLs.
+                //
+                // This is where our event index comes into place, we ask the
+                // event index to populate the timelineSet for us. This call
+                // will add 10 events to the live timeline of the set. More can
+                // be requested using pagination.
+                if (client.isRoomEncrypted(roomId) && eventIndex !== null) {
+                    const timeline = timelineSet.getLiveTimeline();
+                    await eventIndex.populateFileTimeline(timelineSet, timeline, room, 10);
+                }
+
+                this.setState({ timelineSet: timelineSet });
+            } catch (error) {
+                console.error("Failed to get or create file panel filter", error);
+            }
         } else {
             console.error("Failed to add filtered timelineSet for FilePanel as no room!");
         }
@@ -111,6 +220,7 @@ const FilePanel = createReactClass({
                         manageReadMarkers={false}
                         timelineSet={this.state.timelineSet}
                         showUrlPreview = {false}
+                        onPaginationRequest={this.onPaginationRequest}
                         tileShape="file_grid"
                         resizeNotifier={this.props.resizeNotifier}
                         empty={_t('There are no visible files in this room')}

src/components/structures/GroupView.js

@@ -481,7 +481,7 @@ export default createReactClass({
                         group_id: groupId,
                     },
                 });
-                dis.dispatch({action: 'require_registration'});
+                dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${groupId}`}});
                 willDoOnboarding = true;
             }
             if (stateKey === GroupStore.STATE_KEY.Summary) {
@@ -726,7 +726,7 @@ export default createReactClass({
 
     _onJoinClick: async function() {
         if (this._matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
             return;
         }
 
@@ -821,10 +821,10 @@ export default createReactClass({
                 {_t(
                     "Want more than a community? <a>Get your own server</a>", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{sub}</a>,
                     },
                 )}
-                <a href={hostingSignupLink} target="_blank" rel="noopener">
+                <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
                     <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </div>;

src/components/structures/InteractiveAuth.js

@@ -20,7 +20,7 @@ import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
+import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
 
 import * as sdk from '../../index';
 
@@ -161,6 +161,7 @@ export default createReactClass({
     _authStateUpdated: function(stageType, stageState) {
         const oldStage = this.state.authStage;
         this.setState({
+            busy: false,
             authStage: stageType,
             stageState: stageState,
             errorText: stageState.error,
@@ -184,11 +185,13 @@ export default createReactClass({
                 errorText: null,
                 stageErrorText: null,
             });
-        } else {
-            this.setState({
-                busy: false,
-            });
         }
+        // The JS SDK eagerly reports itself as "not busy" right after any
+        // immediate work has completed, but that's not really what we want at
+        // the UI layer, so we ignore this signal and show a spinner until
+        // there's a new screen to show the user. This is implemented by setting
+        // `busy: false` in `_authStateUpdated`.
+        // See also https://github.com/vector-im/riot-web/issues/12546
     },
 
     _setFocus: function() {

src/components/structures/LeftPanel.js

@@ -129,9 +129,6 @@ const LeftPanel = createReactClass({
         if (!this.focusedElement) return;
 
         switch (ev.key) {
-            case Key.TAB:
-                this._onMoveFocus(ev, ev.shiftKey);
-                break;
             case Key.ARROW_UP:
                 this._onMoveFocus(ev, true, true);
                 break;

src/components/structures/LoggedInView.js

@@ -585,7 +585,8 @@ const LoggedInView = createReactClass({
                 limitType={usageLimitEvent.getContent().limit_type}
             />;
         } else if (this.props.showCookieBar &&
-            this.props.config.piwik
+            this.props.config.piwik &&
+            navigator.doNotTrack !== "1"
         ) {
             const policyUrl = this.props.config.piwik.policyUrl || null;
             topBar = <CookieBar policyUrl={policyUrl} />;

src/components/structures/MatrixChat.js

@@ -53,6 +53,7 @@ import createRoom from "../../createRoom";
 import KeyRequestHandler from '../../KeyRequestHandler';
 import { _t, getCurrentLanguage } from '../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
+import ThemeController from "../../settings/controllers/ThemeController";
 import { startAnyRegistrationFlow } from "../../Registration.js";
 import { messageForSyncError } from '../../utils/ErrorUtils';
 import ResizeNotifier from "../../utils/ResizeNotifier";
@@ -64,6 +65,7 @@ import { ThemeWatcher } from "../../theme";
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
 import { defer } from "../../utils/promise";
 import ToastStore from "../../stores/ToastStore";
+import * as StorageManager from "../../utils/StorageManager";
 
 /** constants for MatrixChat.state.view */
 export const VIEWS = {
@@ -89,12 +91,15 @@ export const VIEWS = {
     // showing flow to trust this new device with cross-signing
     COMPLETE_SECURITY: 6,
 
+    // flow to setup SSSS / cross-signing on this account
+    E2E_SETUP: 7,
+
     // we are logged in with an active matrix client.
-    LOGGED_IN: 7,
+    LOGGED_IN: 8,
 
     // We are logged out (invalid token) but have our local state again. The user
     // should log back in to rehydrate the client.
-    SOFT_LOGOUT: 8,
+    SOFT_LOGOUT: 9,
 };
 
 // Actions that are redirected through the onboarding process prior to being
@@ -253,6 +258,9 @@ export default createReactClass({
             // logout page.
             Lifecycle.loadSession({});
         }
+
+        this._accountPassword = null;
+        this._accountPasswordTimer = null;
     },
 
     componentDidMount: function() {
@@ -349,6 +357,8 @@ export default createReactClass({
         window.removeEventListener("focus", this.onFocus);
         window.removeEventListener('resize', this.handleResize);
         this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
+
+        if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer);
     },
 
     componentWillUpdate: function(props, state) {
@@ -498,6 +508,8 @@ export default createReactClass({
                     view: VIEWS.LOGIN,
                 });
                 this.notifyNewScreen('login');
+                ThemeController.isLogin = true;
+                this._themeWatcher.recheck();
                 break;
             case 'start_post_registration':
                 this.setState({
@@ -547,13 +559,19 @@ export default createReactClass({
             case 'view_user_info':
                 this._viewUser(payload.userId, payload.subAction);
                 break;
-            case 'view_room':
+            case 'view_room': {
                 // Takes either a room ID or room alias: if switching to a room the client is already
                 // known to be in (eg. user clicks on a room in the recents panel), supply the ID
                 // If the user is clicking on a room in the context of the alias being presented
                 // to them, supply the room alias. If both are supplied, the room ID will be ignored.
-                this._viewRoom(payload);
+                const promise = this._viewRoom(payload);
+                if (payload.deferred_action) {
+                    promise.then(() => {
+                        dis.dispatch(payload.deferred_action);
+                    });
+                }
                 break;
+            }
             case 'view_prev_room':
                 this._viewNextRoom(-1);
                 break;
@@ -657,7 +675,9 @@ export default createReactClass({
                 if (
                     !Lifecycle.isSoftLogout() &&
                     this.state.view !== VIEWS.LOGIN &&
-                    this.state.view !== VIEWS.COMPLETE_SECURITY
+                    this.state.view !== VIEWS.REGISTER &&
+                    this.state.view !== VIEWS.COMPLETE_SECURITY &&
+                    this.state.view !== VIEWS.E2E_SETUP
                 ) {
                     this._onLoggedIn();
                 }
@@ -750,6 +770,8 @@ export default createReactClass({
         }
 
         this.setStateForNewView(newState);
+        ThemeController.isLogin = true;
+        this._themeWatcher.recheck();
         this.notifyNewScreen('register');
     },
 
@@ -846,7 +868,7 @@ export default createReactClass({
             waitFor = this.firstSyncPromise.promise;
         }
 
-        waitFor.then(() => {
+        return waitFor.then(() => {
             let presentedId = roomInfo.room_alias || roomInfo.room_id;
             const room = MatrixClientPeg.get().getRoom(roomInfo.room_id);
             if (room) {
@@ -869,7 +891,7 @@ export default createReactClass({
                 presentedId += "/" + roomInfo.event_id;
             }
             newState.ready = true;
-            this.setState(newState, ()=>{
+            this.setState(newState, () => {
                 this.notifyNewScreen('room/' + presentedId);
             });
         });
@@ -900,6 +922,8 @@ export default createReactClass({
             view: VIEWS.WELCOME,
         });
         this.notifyNewScreen('welcome');
+        ThemeController.isLogin = true;
+        this._themeWatcher.recheck();
     },
 
     _viewHome: function() {
@@ -909,6 +933,8 @@ export default createReactClass({
         });
         this._setPage(PageTypes.HomePage);
         this.notifyNewScreen('home');
+        ThemeController.isLogin = false;
+        this._themeWatcher.recheck();
     },
 
     _viewUser: function(userId, subAction) {
@@ -961,9 +987,9 @@ export default createReactClass({
         const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
         const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog);
 
-        const [shouldCreate, createOpts] = await modal.finished;
+        const [shouldCreate, opts] = await modal.finished;
         if (shouldCreate) {
-            createRoom({createOpts});
+            createRoom(opts);
         }
     },
 
@@ -988,6 +1014,10 @@ export default createReactClass({
                 // needs to be reset so that they can revisit /user/.. // (and trigger
                 // `_chatCreateOrReuse` again)
                 go_welcome_on_cancel: true,
+                screen_after: {
+                    screen: `user/${this.props.config.welcomeUserId}`,
+                    params: { action: 'chat' },
+                },
             });
             return;
         }
@@ -1155,8 +1185,17 @@ export default createReactClass({
      * Called when a new logged in session has started
      */
     _onLoggedIn: async function() {
+        ThemeController.isLogin = false;
         this.setStateForNewView({ view: VIEWS.LOGGED_IN });
-        if (MatrixClientPeg.currentUserIsJustRegistered()) {
+        // If a specific screen is set to be shown after login, show that above
+        // all else, as it probably means the user clicked on something already.
+        if (this._screenAfterLogin && this._screenAfterLogin.screen) {
+            this.showScreen(
+                this._screenAfterLogin.screen,
+                this._screenAfterLogin.params,
+            );
+            this._screenAfterLogin = null;
+        } else if (MatrixClientPeg.currentUserIsJustRegistered()) {
             MatrixClientPeg.setJustRegisteredUserId(null);
 
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
@@ -1174,6 +1213,8 @@ export default createReactClass({
         } else {
             this._showScreenAfterLogin();
         }
+
+        StorageManager.tryPersistStorage();
     },
 
     _showScreenAfterLogin: function() {
@@ -1221,6 +1262,8 @@ export default createReactClass({
         });
         this.subTitleStatus = '';
         this._setPageSubtitle();
+        ThemeController.isLogin = true;
+        this._themeWatcher.recheck();
     },
 
     /**
@@ -1350,7 +1393,8 @@ export default createReactClass({
                 cancelButton: _t('Dismiss'),
                 onFinished: (confirmed) => {
                     if (confirmed) {
-                        window.open(consentUri, '_blank');
+                        const wnd = window.open(consentUri, '_blank');
+                        wnd.opener = null;
                     }
                 },
             }, null, true);
@@ -1453,7 +1497,6 @@ export default createReactClass({
 
         if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             cli.on("crypto.verification.request", request => {
-                console.log(`MatrixChat got a .request ${request.channel.transactionId}`, request.event.getRoomId());
                 if (request.pending) {
                     ToastStore.sharedInstance().addOrReplaceToast({
                         key: 'verifreq_' + request.channel.transactionId,
@@ -1725,6 +1768,10 @@ export default createReactClass({
         this.showScreen("forgot_password");
     },
 
+    onRegisterFlowComplete: function(credentials, password) {
+        return this.onUserCompletedLoginFlow(credentials, password);
+    },
+
     // returns a promise which resolves to the new MatrixClient
     onRegistered: function(credentials) {
         return Lifecycle.setLoggedIn(credentials);
@@ -1813,7 +1860,15 @@ export default createReactClass({
         this._loggedInView = ref;
     },
 
-    async onUserCompletedLoginFlow(credentials) {
+    async onUserCompletedLoginFlow(credentials, password) {
+        this._accountPassword = password;
+        // self-destruct the password after 5mins
+        if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer);
+        this._accountPasswordTimer = setTimeout(() => {
+            this._accountPassword = null;
+            this._accountPasswordTimer = null;
+        }, 60 * 5 * 1000);
+
         // Wait for the client to be logged in (but not started)
         // which is enough to ask the server about account data.
         const loggedIn = new Promise(resolve => {
@@ -1827,7 +1882,7 @@ export default createReactClass({
         });
 
         // Create and start the client in the background
-        Lifecycle.setLoggedIn(credentials);
+        const setLoggedInPromise = Lifecycle.setLoggedIn(credentials);
         await loggedIn;
 
         const cli = MatrixClientPeg.get();
@@ -1843,17 +1898,30 @@ export default createReactClass({
         try {
             masterKeyInStorage = !!await cli.getAccountDataFromServer("m.cross_signing.master");
         } catch (e) {
-            if (e.errcode !== "M_NOT_FOUND") throw e;
+            if (e.errcode !== "M_NOT_FOUND") {
+                console.warn("Secret storage account data check failed", e);
+            }
         }
 
         if (masterKeyInStorage) {
+            // Auto-enable cross-signing for the new session when key found in
+            // secret storage.
+            SettingsStore.setFeatureEnabled("feature_cross_signing", true);
             this.setStateForNewView({ view: VIEWS.COMPLETE_SECURITY });
+        } else if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            // This will only work if the feature is set to 'enable' in the config,
+            // since it's too early in the lifecycle for users to have turned the
+            // labs flag on.
+            this.setStateForNewView({ view: VIEWS.E2E_SETUP });
         } else {
             this._onLoggedIn();
         }
+
+        return setLoggedInPromise;
     },
 
-    onCompleteSecurityFinished() {
+    // complete security / e2e setup has finished
+    onCompleteSecurityE2eSetupFinished() {
         this._onLoggedIn();
     },
 
@@ -1873,7 +1941,15 @@ export default createReactClass({
             const CompleteSecurity = sdk.getComponent('structures.auth.CompleteSecurity');
             view = (
                 <CompleteSecurity
-                    onFinished={this.onCompleteSecurityFinished}
+                    onFinished={this.onCompleteSecurityE2eSetupFinished}
+                />
+            );
+        } else if (this.state.view === VIEWS.E2E_SETUP) {
+            const E2eSetup = sdk.getComponent('structures.auth.E2eSetup');
+            view = (
+                <E2eSetup
+                    onFinished={this.onCompleteSecurityE2eSetupFinished}
+                    accountPassword={this._accountPassword}
                 />
             );
         } else if (this.state.view === VIEWS.POST_REGISTRATION) {
@@ -1940,9 +2016,10 @@ export default createReactClass({
                     email={this.props.startingFragmentQueryParams.email}
                     brand={this.props.config.brand}
                     makeRegistrationUrl={this._makeRegistrationUrl}
-                    onLoggedIn={this.onRegistered}
+                    onLoggedIn={this.onRegisterFlowComplete}
                     onLoginClick={this.onLoginClick}
                     onServerConfigChange={this.onServerConfigChange}
+                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
                     {...this.getServerProperties()}
                 />
             );

src/components/structures/MessagePanel.js

@@ -28,6 +28,7 @@ import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
+import {textForEvent} from "../../TextForEvent";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -115,6 +116,7 @@ export default class MessagePanel extends React.Component {
             // previous positions the read marker has been in, so we can
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -164,6 +166,9 @@ export default class MessagePanel extends React.Component {
         this._readMarkerNode = createRef();
         this._whoIsTyping = createRef();
         this._scrollPanel = createRef();
+
+        this._showTypingNotificationsWatcherRef =
+            SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
     }
 
     componentDidMount() {
@@ -172,6 +177,7 @@ export default class MessagePanel extends React.Component {
 
     componentWillUnmount() {
         this._isMounted = false;
+        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -184,6 +190,12 @@ export default class MessagePanel extends React.Component {
         }
     }
 
+    onShowTypingNotificationsChange = () => {
+        this.setState({
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+        });
+    };
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -402,10 +414,6 @@ export default class MessagePanel extends React.Component {
     };
 
     _getEventTiles() {
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
-        const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
-
         this.eventNodes = {};
 
         let i;
@@ -447,184 +455,48 @@ export default class MessagePanel extends React.Component {
             this._readReceiptsByEvent = this._getReadReceiptsByShownEvent();
         }
 
+        let grouper = null;
+
         for (i = 0; i < this.props.events.length; i++) {
             const mxEv = this.props.events[i];
             const eventId = mxEv.getId();
             const last = (mxEv === lastShownEvent);
 
-            // Wrap initial room creation events into an EventListSummary
-            // Grouping only events sent by the same user that sent the `m.room.create` and only until
-            // the first non-state event or membership event which is not regarding the sender of the `m.room.create` event
-            const shouldGroup = (ev) => {
-               if (ev.getType() === "m.room.member"
-                   && (ev.getStateKey() !== mxEv.getSender() || ev.getContent()["membership"] !== "join")) {
-                   return false;
-               }
-               if (ev.isState() && ev.getSender() === mxEv.getSender()) {
-                   return true;
-               }
-               return false;
-            };
-            if (mxEv.getType() === "m.room.create") {
-                let summaryReadMarker = null;
-                const ts1 = mxEv.getTs();
-
-                if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    const dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} /></li>;
-                    ret.push(dateSeparator);
+            if (grouper) {
+                if (grouper.shouldGroup(mxEv)) {
+                    grouper.add(mxEv);
+                    continue;
+                } else {
+                    // not part of group, so get the group tiles, close the
+                    // group, and continue like a normal event
+                    ret.push(...grouper.getTiles());
+                    prevEvent = grouper.getNewPrevEvent();
+                    grouper = null;
                 }
-
-                // If RM event is the first in the summary, append the RM after the summary
-                summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(mxEv.getId());
-
-                // If this m.room.create event should be shown (room upgrade) then show it before the summary
-                if (this._shouldShowEvent(mxEv)) {
-                    // pass in the mxEv as prevEvent as well so no extra DateSeparator is rendered
-                    ret.push(...this._getTilesForEvent(mxEv, mxEv, false));
-                }
-
-                const summarisedEvents = []; // Don't add m.room.create here as we don't want it inside the summary
-                for (;i + 1 < this.props.events.length; i++) {
-                    const collapsedMxEv = this.props.events[i + 1];
-
-                    // Ignore redacted/hidden member events
-                    if (!this._shouldShowEvent(collapsedMxEv)) {
-                        // If this hidden event is the RM and in or at end of a summary put RM after the summary.
-                        summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-                        continue;
-                    }
-
-                    if (!shouldGroup(collapsedMxEv) || this._wantsDateSeparator(mxEv, collapsedMxEv.getDate())) {
-                        break;
-                    }
-
-                    // If RM event is in the summary, mark it as such and the RM will be appended after the summary.
-                    summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-
-                    summarisedEvents.push(collapsedMxEv);
-                }
-
-                // At this point, i = the index of the last event in the summary sequence
-                const eventTiles = summarisedEvents.map((e) => {
-                    // In order to prevent DateSeparators from appearing in the expanded form
-                    // of EventListSummary, render each member event as if the previous
-                    // one was itself. This way, the timestamp of the previous event === the
-                    // timestamp of the current event, and no DateSeparator is inserted.
-                    return this._getTilesForEvent(e, e, e === lastShownEvent);
-                }).reduce((a, b) => a.concat(b), []);
-
-                // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
-                const ev = this.props.events[i];
-                ret.push(<EventListSummary
-                    key="roomcreationsummary"
-                    events={summarisedEvents}
-                    onToggle={this._onHeightChanged} // Update scroll state
-                    summaryMembers={[ev.sender]}
-                    summaryText={_t("%(creator)s created and configured the room.", {
-                        creator: ev.sender ? ev.sender.name : ev.getSender(),
-                    })}
-                >
-                    { eventTiles }
-                </EventListSummary>);
-
-                if (summaryReadMarker) {
-                    ret.push(summaryReadMarker);
-                }
-
-                prevEvent = mxEv;
-                continue;
             }
 
-            const wantTile = this._shouldShowEvent(mxEv);
-
-            // Wrap consecutive member events in a ListSummary, ignore if redacted
-            if (isMembershipChange(mxEv) && wantTile) {
-                let summaryReadMarker = null;
-                const ts1 = mxEv.getTs();
-                // Ensure that the key of the MemberEventListSummary does not change with new
-                // member events. This will prevent it from being re-created unnecessarily, and
-                // instead will allow new props to be provided. In turn, the shouldComponentUpdate
-                // method on MELS can be used to prevent unnecessary renderings.
-                //
-                // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
-                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
-                // membership event, which will not change during forward pagination.
-                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
-
-                if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    const dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} /></li>;
-                    ret.push(dateSeparator);
+            for (const Grouper of groupers) {
+                if (Grouper.canStartGroup(this, mxEv)) {
+                    grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent);
                 }
-
-                // If RM event is the first in the MELS, append the RM after MELS
-                summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(mxEv.getId());
-
-                const summarisedEvents = [mxEv];
-                for (;i + 1 < this.props.events.length; i++) {
-                    const collapsedMxEv = this.props.events[i + 1];
-
-                    // Ignore redacted/hidden member events
-                    if (!this._shouldShowEvent(collapsedMxEv)) {
-                        // If this hidden event is the RM and in or at end of a MELS put RM after MELS.
-                        summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-                        continue;
-                    }
-
-                    if (!isMembershipChange(collapsedMxEv) ||
-                        this._wantsDateSeparator(mxEv, collapsedMxEv.getDate())) {
-                        break;
-                    }
-
-                    // If RM event is in MELS mark it as such and the RM will be appended after MELS.
-                    summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-
-                    summarisedEvents.push(collapsedMxEv);
-                }
-
-                let highlightInMels = false;
-
-                // At this point, i = the index of the last event in the summary sequence
-                let eventTiles = summarisedEvents.map((e) => {
-                    if (e.getId() === this.props.highlightedEventId) {
-                        highlightInMels = true;
-                    }
-                    // In order to prevent DateSeparators from appearing in the expanded form
-                    // of MemberEventListSummary, render each member event as if the previous
-                    // one was itself. This way, the timestamp of the previous event === the
-                    // timestamp of the current event, and no DateSeparator is inserted.
-                    return this._getTilesForEvent(e, e, e === lastShownEvent);
-                }).reduce((a, b) => a.concat(b), []);
-
-                if (eventTiles.length === 0) {
-                    eventTiles = null;
-                }
-
-                ret.push(<MemberEventListSummary key={key}
-                    events={summarisedEvents}
-                    onToggle={this._onHeightChanged} // Update scroll state
-                    startExpanded={highlightInMels}
-                >
-                        { eventTiles }
-                </MemberEventListSummary>);
-
-                if (summaryReadMarker) {
-                    ret.push(summaryReadMarker);
-                }
-
-                prevEvent = mxEv;
-                continue;
             }
+            if (!grouper) {
+                const wantTile = this._shouldShowEvent(mxEv);
+                if (wantTile) {
+                    // make sure we unpack the array returned by _getTilesForEvent,
+                    // otherwise react will auto-generate keys and we will end up
+                    // replacing all of the DOM elements every time we paginate.
+                    ret.push(...this._getTilesForEvent(prevEvent, mxEv, last));
+                    prevEvent = mxEv;
+                }
 
-            if (wantTile) {
-                // make sure we unpack the array returned by _getTilesForEvent,
-                // otherwise react will auto-generate keys and we will end up
-                // replacing all of the DOM elements every time we paginate.
-                ret.push(...this._getTilesForEvent(prevEvent, mxEv, last));
-                prevEvent = mxEv;
+                const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
+                if (readMarker) ret.push(readMarker);
             }
+        }
 
-            const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
-            if (readMarker) ret.push(readMarker);
+        if (grouper) {
+            ret.push(...grouper.getTiles());
         }
 
         return ret;
@@ -906,7 +778,7 @@ export default class MessagePanel extends React.Component {
         );
 
         let whoIsTyping;
-        if (this.props.room && !this.props.tileShape) {
+        if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
                 room={this.props.room}
                 onShown={this._onTypingShown}
@@ -935,3 +807,242 @@ export default class MessagePanel extends React.Component {
         );
     }
 }
+
+/* Grouper classes determine when events can be grouped together in a summary.
+ * Groupers should have the following methods:
+ * - canStartGroup (static): determines if a new group should be started with the
+ *   given event
+ * - shouldGroup: determines if the given event should be added to an existing group
+ * - add: adds an event to an existing group (should only be called if shouldGroup
+ *   return true)
+ * - getTiles: returns the tiles that represent the group
+ * - getNewPrevEvent: returns the event that should be used as the new prevEvent
+ *   when determining things such as whether a date separator is necessary
+ */
+
+// Wrap initial room creation events into an EventListSummary
+// Grouping only events sent by the same user that sent the `m.room.create` and only until
+// the first non-state event or membership event which is not regarding the sender of the `m.room.create` event
+class CreationGrouper {
+    static canStartGroup = function(panel, ev) {
+        return ev.getType() === "m.room.create";
+    };
+
+    constructor(panel, createEvent, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.createEvent = createEvent;
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+        this.events = [];
+        // events that we include in the group but then eject out and place
+        // above the group.
+        this.ejectedEvents = [];
+        this.readMarker = panel._readMarkerForEvent(createEvent.getId());
+    }
+
+    shouldGroup(ev) {
+        const panel = this.panel;
+        const createEvent = this.createEvent;
+        if (!panel._shouldShowEvent(ev)) {
+            this.readMarker = this.readMarker || panel._readMarkerForEvent(ev.getId());
+            return true;
+        }
+        if (panel._wantsDateSeparator(this.createEvent, ev.getDate())) {
+            return false;
+        }
+        if (ev.getType() === "m.room.member"
+            && (ev.getStateKey() !== createEvent.getSender() || ev.getContent()["membership"] !== "join")) {
+            return false;
+        }
+        if (ev.isState() && ev.getSender() === createEvent.getSender()) {
+            return true;
+        }
+        return false;
+    }
+
+    add(ev) {
+        const panel = this.panel;
+        this.readMarker = this.readMarker || panel._readMarkerForEvent(ev.getId());
+        if (!panel._shouldShowEvent(ev)) {
+            return;
+        }
+        if (ev.getType() === "m.room.encryption") {
+            this.ejectedEvents.push(ev);
+        } else {
+            this.events.push(ev);
+        }
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
+
+        const panel = this.panel;
+        const ret = [];
+        const createEvent = this.createEvent;
+        const lastShownEvent = this.lastShownEvent;
+
+        if (panel._wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
+            const ts = createEvent.getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // If this m.room.create event should be shown (room upgrade) then show it before the summary
+        if (panel._shouldShowEvent(createEvent)) {
+            // pass in the createEvent as prevEvent as well so no extra DateSeparator is rendered
+            ret.push(...panel._getTilesForEvent(createEvent, createEvent, false));
+        }
+
+        for (const ejected of this.ejectedEvents) {
+            ret.push(...panel._getTilesForEvent(
+                createEvent, ejected, createEvent === lastShownEvent,
+            ));
+        }
+
+        const eventTiles = this.events.map((e) => {
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of EventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+        // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
+        const ev = this.events[this.events.length - 1];
+        ret.push(
+            <EventListSummary
+                 key="roomcreationsummary"
+                 events={this.events}
+                 onToggle={panel._onHeightChanged} // Update scroll state
+                 summaryMembers={[ev.sender]}
+                 summaryText={_t("%(creator)s created and configured the room.", {
+                     creator: ev.sender ? ev.sender.name : ev.getSender(),
+                 })}
+            >
+                 { eventTiles }
+            </EventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.createEvent;
+    }
+}
+
+// Wrap consecutive member events in a ListSummary, ignore if redacted
+class MemberGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && isMembershipChange(ev);
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(ev.getId());
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+            return false;
+        }
+        return isMembershipChange(ev);
+    }
+
+    add(ev) {
+        if (ev.getType() === 'm.room.member') {
+            // We'll just double check that it's worth our time to do so, through an
+            // ugly hack. If textForEvent returns something, we should group it for
+            // rendering but if it doesn't then we'll exclude it.
+            const renderText = textForEvent(ev);
+            if (!renderText || renderText.trim().length === 0) return; // quietly ignore
+        }
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(ev.getId());
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
+
+        const panel = this.panel;
+        const lastShownEvent = this.lastShownEvent;
+        const ret = [];
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // Ensure that the key of the MemberEventListSummary does not change with new
+        // member events. This will prevent it from being re-created unnecessarily, and
+        // instead will allow new props to be provided. In turn, the shouldComponentUpdate
+        // method on MELS can be used to prevent unnecessary renderings.
+        //
+        // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
+        // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
+        // membership event, which will not change during forward pagination.
+        const key = "membereventlistsummary-" + (
+            this.prevEvent ? this.events[0].getId() : "initial"
+        );
+
+        let highlightInMels;
+        let eventTiles = this.events.map((e) => {
+            if (e.getId() === panel.props.highlightedEventId) {
+                highlightInMels = true;
+            }
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of MemberEventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <MemberEventListSummary key={key}
+                 events={this.events}
+                 onToggle={panel._onHeightChanged} // Update scroll state
+                 startExpanded={highlightInMels}
+            >
+                 { eventTiles }
+            </MemberEventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
+// all the grouper classes that we use
+const groupers = [CreationGrouper, MemberGrouper];

src/components/structures/RightPanel.js

@@ -48,6 +48,7 @@ export default class RightPanel extends React.Component {
             phase: this._getPhaseFromProps(),
             isUserPrivilegedInGroup: null,
             member: this._getUserForPanel(),
+            verificationRequest: RightPanelStore.getSharedInstance().roomPanelPhaseParams.verificationRequest,
         };
         this.onAction = this.onAction.bind(this);
         this.onRoomStateMember = this.onRoomStateMember.bind(this);
@@ -68,15 +69,35 @@ export default class RightPanel extends React.Component {
         return this.props.user || lastParams['member'];
     }
 
+    // gets the current phase from the props and also maybe the store
     _getPhaseFromProps() {
         const rps = RightPanelStore.getSharedInstance();
+        const userForPanel = this._getUserForPanel();
         if (this.props.groupId) {
             if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) {
                 dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.GroupMemberList});
                 return RIGHT_PANEL_PHASES.GroupMemberList;
             }
             return rps.groupPanelPhase;
-        } else if (this._getUserForPanel()) {
+        } else if (userForPanel) {
+            // XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
+            // from its props and some from a store, except if the contents of the store changes
+            // while it's mounted in which case it replaces all of its state with that of the store,
+            // except it uses a dispatch instead of a normal store listener?
+            // Unfortunately rewriting this would almost certainly break showing the right panel
+            // in some of the many cases, and I don't have time to re-architect it and test all
+            // the flows now, so adding yet another special case so if the store thinks there is
+            // a verification going on for the member we're displaying, we show that, otherwise
+            // we race if a verification is started while the panel isn't displayed because we're
+            // not mounted in time to get the dispatch.
+            // Until then, let this code serve as a warning from history.
+            if (
+                rps.roomPanelPhaseParams.member &&
+                userForPanel.userId === rps.roomPanelPhaseParams.member.userId &&
+                rps.roomPanelPhaseParams.verificationRequest
+            ) {
+                return rps.roomPanelPhase;
+            }
             return RIGHT_PANEL_PHASES.RoomMemberInfo;
         } else {
             if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) {
@@ -161,6 +182,7 @@ export default class RightPanel extends React.Component {
                 member: payload.member,
                 event: payload.event,
                 verificationRequest: payload.verificationRequest,
+                verificationRequestPromise: payload.verificationRequestPromise,
             });
         }
     }
@@ -169,7 +191,6 @@ export default class RightPanel extends React.Component {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const UserInfo = sdk.getComponent('right_panel.UserInfo');
-        const EncryptionPanel = sdk.getComponent('right_panel.EncryptionPanel');
         const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
@@ -181,64 +202,83 @@ 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) {
-            if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-                const onClose = () => {
-                    dis.dispatch({
-                        action: "view_user",
-                        member: null,
-                    });
-                };
-                panel = <UserInfo
-                    user={this.state.member}
-                    roomId={this.props.roomId}
-                    key={this.props.roomId || this.state.member.userId}
-                    onClose={onClose}
-                />;
-            } 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}
+                        verificationRequestPromise={this.state.verificationRequestPromise}
+                    />;
+                } 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} />;
-        } else if (this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel) {
-            panel = <EncryptionPanel member={this.state.member} verificationRequest={this.state.verificationRequest} />;
+                        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", {
@@ -248,7 +288,7 @@ export default class RightPanel extends React.Component {
         });
 
         return (
-            <aside className={classes}>
+            <aside className={classes} id="mx_RightPanel">
                 { panel }
             </aside>
         );

src/components/structures/RoomDirectory.js

@@ -155,7 +155,7 @@ export default createReactClass({
 
             this.nextBatch = data.next_batch;
             this.setState((s) => {
-                s.publicRooms.push(...data.chunk);
+                s.publicRooms.push(...(data.chunk || []));
                 s.loading = false;
                 return s;
             });

src/components/structures/RoomStatusBar.js

@@ -220,12 +220,12 @@ export default createReactClass({
         });
 
         if (hasUDE) {
-            title = _t("Message not sent due to unknown devices being present");
+            title = _t("Message not sent due to unknown sessions being present");
             content = _t(
-                "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
+                "<showSessionsText>Show sessions</showSessionsText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
                 {},
                 {
-                    'showDevicesText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onShowDevicesClick}>{ sub }</a>,
+                    'showSessionsText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onShowDevicesClick}>{ sub }</a>,
                     'sendAnywayText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="sendAnyway" onClick={this._onSendWithoutVerifyingClick}>{ sub }</a>,
                     'cancelText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
                 },

src/components/structures/RoomSubList.js

@@ -31,6 +31,7 @@ import PropTypes from 'prop-types';
 import RoomTile from "../views/rooms/RoomTile";
 import LazyRenderList from "../views/elements/LazyRenderList";
 import {_t} from "../../languageHandler";
+import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
@@ -45,8 +46,6 @@ export default class RoomSubList extends React.PureComponent {
         tagName: PropTypes.string,
         addRoomLabel: PropTypes.string,
 
-        order: PropTypes.string.isRequired,
-
         // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
         isInvite: PropTypes.bool,
 
@@ -141,10 +140,6 @@ export default class RoomSubList extends React.PureComponent {
 
     onHeaderKeyDown = (ev) => {
         switch (ev.key) {
-            case Key.TAB:
-                // Prevent LeftPanel handling Tab if focus is on the sublist header itself
-                ev.stopPropagation();
-                break;
             case Key.ARROW_LEFT:
                 // On ARROW_LEFT collapse the room sublist
                 if (!this.state.hidden && !this.props.forceExpand) {
@@ -263,33 +258,6 @@ export default class RoomSubList extends React.PureComponent {
         const subListNotifCount = subListNotifications.count;
         const subListNotifHighlight = subListNotifications.highlight;
 
-        let badge;
-        if (!this.props.collapsed) {
-            const badgeClasses = classNames({
-                'mx_RoomSubList_badge': true,
-                'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
-            });
-            // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
-            if (subListNotifCount > 0) {
-                badge = (
-                    <AccessibleButton className={badgeClasses} onClick={this._onNotifBadgeClick} aria-label={_t("Jump to first unread room.")}>
-                        <div>
-                            { FormattingUtils.formatCount(subListNotifCount) }
-                        </div>
-                    </AccessibleButton>
-                );
-            } else if (this.props.isInvite && this.props.list.length) {
-                // no notifications but highlight anyway because this is an invite badge
-                badge = (
-                    <AccessibleButton className={badgeClasses} onClick={this._onInviteBadgeClick} aria-label={_t("Jump to first invite.")}>
-                        <div>
-                            { this.props.list.length }
-                        </div>
-                    </AccessibleButton>
-                );
-            }
-        }
-
         // When collapsed, allow a long hover on the header to show user
         // the full tag name and room count
         let title;
@@ -305,17 +273,6 @@ export default class RoomSubList extends React.PureComponent {
                 <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
         }
 
-        let addRoomButton;
-        if (this.props.onAddRoom) {
-            addRoomButton = (
-                <AccessibleTooltipButton
-                    onClick={this.onAddRoom}
-                    className="mx_RoomSubList_addRoom"
-                    title={this.props.addRoomLabel || _t("Add room")}
-                />
-            );
-        }
-
         const len = this.props.list.length + this.props.extraTiles.length;
         let chevron;
         if (len) {
@@ -327,25 +284,81 @@ export default class RoomSubList extends React.PureComponent {
             chevron = (<div className={chevronClasses} />);
         }
 
-        return (
-            <div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
-                <AccessibleButton
-                    onClick={this.onClick}
-                    className="mx_RoomSubList_label"
-                    tabIndex={0}
-                    aria-expanded={!isCollapsed}
-                    inputRef={this._headerButton}
-                    role="treeitem"
-                    aria-level="1"
-                >
-                    { chevron }
-                    <span>{this.props.label}</span>
-                    { incomingCall }
-                </AccessibleButton>
-                { badge }
-                { addRoomButton }
-            </div>
-        );
+        return <RovingTabIndexWrapper inputRef={this._headerButton}>
+            {({onFocus, isActive, ref}) => {
+                const tabIndex = isActive ? 0 : -1;
+
+                let badge;
+                if (!this.props.collapsed) {
+                    const badgeClasses = classNames({
+                        'mx_RoomSubList_badge': true,
+                        'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+                    });
+                    // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
+                    if (subListNotifCount > 0) {
+                        badge = (
+                            <AccessibleButton
+                                tabIndex={tabIndex}
+                                className={badgeClasses}
+                                onClick={this._onNotifBadgeClick}
+                                aria-label={_t("Jump to first unread room.")}
+                            >
+                                <div>
+                                    { FormattingUtils.formatCount(subListNotifCount) }
+                                </div>
+                            </AccessibleButton>
+                        );
+                    } else if (this.props.isInvite && this.props.list.length) {
+                        // no notifications but highlight anyway because this is an invite badge
+                        badge = (
+                            <AccessibleButton
+                                tabIndex={tabIndex}
+                                className={badgeClasses}
+                                onClick={this._onInviteBadgeClick}
+                                aria-label={_t("Jump to first invite.")}
+                            >
+                                <div>
+                                    { this.props.list.length }
+                                </div>
+                            </AccessibleButton>
+                        );
+                    }
+                }
+
+                let addRoomButton;
+                if (this.props.onAddRoom) {
+                    addRoomButton = (
+                        <AccessibleTooltipButton
+                            tabIndex={tabIndex}
+                            onClick={this.onAddRoom}
+                            className="mx_RoomSubList_addRoom"
+                            title={this.props.addRoomLabel || _t("Add room")}
+                        />
+                    );
+                }
+
+                return (
+                    <div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
+                        <AccessibleButton
+                            onFocus={onFocus}
+                            tabIndex={tabIndex}
+                            inputRef={ref}
+                            onClick={this.onClick}
+                            className="mx_RoomSubList_label"
+                            aria-expanded={!isCollapsed}
+                            role="treeitem"
+                            aria-level="1"
+                        >
+                            { chevron }
+                            <span>{this.props.label}</span>
+                            { incomingCall }
+                        </AccessibleButton>
+                        { badge }
+                        { addRoomButton }
+                    </div>
+                );
+            } }
+        </RovingTabIndexWrapper>;
     }
 
     checkOverflow = () => {

src/components/structures/RoomView.js

@@ -342,7 +342,7 @@ export default createReactClass({
                         peekLoading: false,
                     });
                     this._onRoomLoaded(room);
-                }, (err) => {
+                }).catch((err) => {
                     if (this.unmounted) {
                         return;
                     }
@@ -355,7 +355,7 @@ export default createReactClass({
                     // This won't necessarily be a MatrixError, but we duck-type
                     // here and say if it's got an 'errcode' key with the right value,
                     // it means we can't peek.
-                    if (err.errcode == "M_GUEST_ACCESS_FORBIDDEN") {
+                    if (err.errcode === "M_GUEST_ACCESS_FORBIDDEN" || err.errcode === 'M_FORBIDDEN') {
                         // This is fine: the room just isn't peekable (we assume).
                         this.setState({
                             peekLoading: false,
@@ -365,8 +365,6 @@ export default createReactClass({
                     }
                 });
             } else if (room) {
-                //viewing a previously joined room, try to lazy load members
-
                 // Stop peeking because we have joined this room previously
                 MatrixClientPeg.get().stopPeeking();
                 this.setState({isPeeking: false});
@@ -460,8 +458,6 @@ export default createReactClass({
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
 
-        SettingsStore.unwatchSetting(this._ciderWatcherRef);
-
         // update the scroll map before we get unmounted
         if (this.state.roomId) {
             RoomScrollStateStore.setScrollState(this.state.roomId, this._getScrollState());
@@ -618,6 +614,22 @@ export default createReactClass({
                     this.onCancelSearchClick();
                 }
                 break;
+            case 'quote':
+                if (this.state.searchResults) {
+                    const roomId = payload.event.getRoomId();
+                    if (roomId === this.state.roomId) {
+                        this.onCancelSearchClick();
+                    }
+
+                    setImmediate(() => {
+                        dis.dispatch({
+                            action: 'view_room',
+                            room_id: roomId,
+                            deferred_action: payload,
+                        });
+                    });
+                }
+                break;
         }
     },
 
@@ -766,7 +778,7 @@ export default createReactClass({
 
     onUserVerificationChanged: function(userId, _trustStatus) {
         const room = this.state.room;
-        if (!room.currentState.getMember(userId)) {
+        if (!room || !room.currentState.getMember(userId)) {
             return;
         }
         this._updateE2EStatus(room);
@@ -796,6 +808,7 @@ export default createReactClass({
             return;
         }
 
+        // Duplication between here and _updateE2eStatus in RoomTile
         /* At this point, the user has encryption on and cross-signing on */
         const e2eMembers = await room.getEncryptionTargetMembers();
         const verified = [];
@@ -810,16 +823,18 @@ export default createReactClass({
         debuglog("e2e verified", verified, "unverified", unverified);
 
         /* Check all verified user devices. */
-        for (const userId of verified) {
+        /* Don't alarm if no other users are verified  */
+        const targets = (verified.length > 0) ? [...verified, cli.getUserId()] : verified;
+        for (const userId of targets) {
             const devices = await cli.getStoredDevicesForUser(userId);
-            const allDevicesVerified = devices.every(({deviceId}) => {
-                return cli.checkDeviceTrust(userId, deviceId).isVerified();
+            const anyDeviceNotVerified = devices.some(({deviceId}) => {
+                return !cli.checkDeviceTrust(userId, deviceId).isVerified();
             });
-            if (!allDevicesVerified) {
+            if (anyDeviceNotVerified) {
                 this.setState({
                     e2eStatus: "warning",
                 });
-                debuglog("e2e status set to warning as not all users trust all of their devices." +
+                debuglog("e2e status set to warning as not all users trust all of their sessions." +
                          " Aborted on user", userId);
                 return;
             }
@@ -1367,6 +1382,41 @@ export default createReactClass({
         });
     },
 
+    onRejectAndIgnoreClick: async function() {
+        this.setState({
+            rejecting: true,
+        });
+
+        const cli = MatrixClientPeg.get();
+        try {
+            const myMember = this.state.room.getMember(cli.getUserId());
+            const inviteEvent = myMember.events.member;
+            const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
+            ignoredUsers.push(inviteEvent.getSender()); // de-duped internally in the js-sdk
+            await cli.setIgnoredUsers(ignoredUsers);
+
+            await cli.leave(this.state.roomId);
+            dis.dispatch({ action: 'view_next_room' });
+            this.setState({
+                rejecting: false,
+            });
+        } catch (error) {
+            console.error("Failed to reject invite: %s", error);
+
+            const msg = error.message ? error.message : JSON.stringify(error);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to reject invite', '', ErrorDialog, {
+                title: _t("Failed to reject invite"),
+                description: msg,
+            });
+
+            self.setState({
+                rejecting: false,
+                rejectError: error,
+            });
+        }
+    },
+
     onRejectThreepidInviteButtonClicked: function(ev) {
         // We can reject 3pid invites in the same way that we accept them,
         // using /leave rather than /join. In the short term though, we
@@ -1671,9 +1721,11 @@ export default createReactClass({
                 return (
                     <div className="mx_RoomView">
                         <ErrorBoundary>
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                            <RoomPreviewBar
+                                onJoinClick={this.onJoinButtonClicked}
                                 onForgetClick={this.onForgetClick}
                                 onRejectClick={this.onRejectButtonClicked}
+                                onRejectAndIgnoreClick={this.onRejectAndIgnoreClick}
                                 inviterName={inviterName}
                                 canPreview={false}
                                 joining={this.state.joining}

src/components/structures/ScrollPanel.js

@@ -523,7 +523,7 @@ export default createReactClass({
     scrollRelative: function(mult) {
         const scrollNode = this._getScrollNode();
         const delta = mult * scrollNode.clientHeight * 0.5;
-        scrollNode.scrollTop = scrollNode.scrollTop + delta;
+        scrollNode.scrollBy(0, delta);
         this._saveScrollState();
     },
 
@@ -705,17 +705,15 @@ export default createReactClass({
             // the currently filled piece of the timeline
             if (trackedNode) {
                 const oldTop = trackedNode.offsetTop;
-                // changing the height might change the scrollTop
-                // if the new height is smaller than the scrollTop.
-                // We calculate the diff that needs to be applied
-                // ourselves, so be sure to measure the
-                // scrollTop before changing the height.
-                const preexistingScrollTop = sn.scrollTop;
                 itemlist.style.height = `${newHeight}px`;
                 const newTop = trackedNode.offsetTop;
                 const topDiff = newTop - oldTop;
-                sn.scrollTop = preexistingScrollTop + topDiff;
-                debuglog("updateHeight to", {newHeight, topDiff, preexistingScrollTop});
+                // important to scroll by a relative amount as
+                // reading scrollTop and then setting it might
+                // yield out of date values and cause a jump
+                // when setting it
+                sn.scrollBy(0, topDiff);
+                debuglog("updateHeight to", {newHeight, topDiff});
             }
         }
     },
@@ -767,6 +765,7 @@ export default createReactClass({
     },
 
     _topFromBottom(node) {
+        // current capped height - distance from top = distance from bottom of container to top of tracked element
         return this._itemlist.current.clientHeight - node.offsetTop;
     },
 
@@ -877,11 +876,14 @@ export default createReactClass({
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
+
+        // give the <ol> an explicit role=list because Safari+VoiceOver seems to think an ordered-list with
+        // list-style-type: none; is no longer a list
         return (<AutoHideScrollbar wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
                 className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
-                        <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite">
+                        <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
                             { this.props.children }
                         </ol>
                     </div>

src/components/structures/SearchBox.js

@@ -133,9 +133,11 @@ export default createReactClass({
             return null;
         }
         const clearButton = (!this.state.blurred || this.state.searchTerm) ?
-            (<AccessibleButton key="button"
-                    className="mx_SearchBox_closeButton"
-                    onClick={ () => {this._clearSearch("button"); } }>
+            (<AccessibleButton
+                key="button"
+                tabIndex={-1}
+                className="mx_SearchBox_closeButton"
+                onClick={ () => {this._clearSearch("button"); } }>
             </AccessibleButton>) : undefined;
 
         // show a shorter placeholder when blurred, if requested
@@ -158,6 +160,7 @@ export default createReactClass({
                     onKeyDown={ this._onKeyDown }
                     onBlur={this._onBlur}
                     placeholder={ placeholder }
+                    autoComplete="off"
                 />
                 { clearButton }
             </div>

src/components/structures/TagPanel.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017, 2018 New Vector Ltd.
+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.
@@ -64,8 +65,8 @@ const TagPanel = createReactClass({
         this.unmounted = true;
         this.context.removeListener("Group.myMembership", this._onGroupMyMembership);
         this.context.removeListener("sync", this._onClientSync);
-        if (this._filterStoreToken) {
-            this._filterStoreToken.remove();
+        if (this._tagOrderStoreToken) {
+            this._tagOrderStoreToken.remove();
         }
     },
 

src/components/structures/TimelinePanel.js

@@ -2,7 +2,7 @@
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -94,6 +94,10 @@ const TimelinePanel = createReactClass({
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: PropTypes.func,
 
+        // callback which is called when we wish to paginate the timeline
+        // window.
+        onPaginationRequest: PropTypes.func,
+
         // maximum number of events to show in a timeline
         timelineCap: PropTypes.number,
 
@@ -142,6 +146,9 @@ const TimelinePanel = createReactClass({
             liveEvents: [],
             timelineLoading: true, // track whether our room timeline is loading
 
+            // the index of the first event that is to be shown
+            firstVisibleEventIndex: 0,
+
             // canBackPaginate == false may mean:
             //
             // * we haven't (successfully) loaded the timeline yet, or:
@@ -329,15 +336,24 @@ const TimelinePanel = createReactClass({
 
             // We can now paginate in the unpaginated direction
             const canPaginateKey = (backwards) ? 'canBackPaginate' : 'canForwardPaginate';
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             this.setState({
                 [canPaginateKey]: true,
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             });
         }
     },
 
+    onPaginationRequest(timelineWindow, direction, size) {
+        if (this.props.onPaginationRequest) {
+            return this.props.onPaginationRequest(timelineWindow, direction, size);
+        } else {
+            return timelineWindow.paginate(direction, size);
+        }
+    },
+
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
         if (!this._shouldPaginate()) return Promise.resolve(false);
@@ -357,20 +373,26 @@ const TimelinePanel = createReactClass({
             return Promise.resolve(false);
         }
 
+        if (backwards && this.state.firstVisibleEventIndex !== 0) {
+            debuglog("TimelinePanel: won't", dir, "paginate past first visible event");
+            return Promise.resolve(false);
+        }
+
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
         this.setState({[paginatingKey]: true});
 
-        return this._timelineWindow.paginate(dir, PAGINATE_SIZE).then((r) => {
+        return this.onPaginationRequest(this._timelineWindow, dir, PAGINATE_SIZE).then((r) => {
             if (this.unmounted) { return; }
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
 
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             const newState = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             };
 
             // moving the window in this direction may mean that we can now
@@ -390,7 +412,11 @@ const TimelinePanel = createReactClass({
             // itself into the right place
             return new Promise((resolve) => {
                 this.setState(newState, () => {
-                    resolve(r);
+                    // we can continue paginating in the given direction if:
+                    // - _timelineWindow.paginate says we can
+                    // - we're paginating forwards, or we won't be trying to
+                    //   paginate backwards past the first visible event
+                    resolve(r && (!backwards || firstVisibleEventIndex === 0));
                 });
             });
         });
@@ -464,12 +490,13 @@ const TimelinePanel = createReactClass({
         this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => {
             if (this.unmounted) { return; }
 
-            const { events, liveEvents } = this._getEvents();
+            const { events, liveEvents, firstVisibleEventIndex } = this._getEvents();
             const lastLiveEvent = liveEvents[liveEvents.length - 1];
 
             const updatedState = {
                 events,
                 liveEvents,
+                firstVisibleEventIndex,
             };
 
             let callRMUpdated;
@@ -1103,6 +1130,7 @@ const TimelinePanel = createReactClass({
     // get the list of events from the timeline window and the pending event list
     _getEvents: function() {
         const events = this._timelineWindow.getEvents();
+        const firstVisibleEventIndex = this._checkForPreJoinUISI(events);
 
         // Hold onto the live events separately. The read receipt and read marker
         // should use this list, so that they don't advance into pending events.
@@ -1116,9 +1144,84 @@ const TimelinePanel = createReactClass({
         return {
             events,
             liveEvents,
+            firstVisibleEventIndex,
         };
     },
 
+    /**
+     * Check for undecryptable messages that were sent while the user was not in
+     * the room.
+     *
+     * @param {Array<MatrixEvent>} events The timeline events to check
+     *
+     * @return {Number} The index within `events` of the event after the most recent
+     * undecryptable event that was sent while the user was not in the room.  If no
+     * such events were found, then it returns 0.
+     */
+    _checkForPreJoinUISI: function(events) {
+        const room = this.props.timelineSet.room;
+
+        if (events.length === 0 || !room ||
+            !MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
+            return 0;
+        }
+
+        const userId = MatrixClientPeg.get().credentials.userId;
+
+        // get the user's membership at the last event by getting the timeline
+        // that the event belongs to, and traversing the timeline looking for
+        // that event, while keeping track of the user's membership
+        let i;
+        let userMembership = "leave";
+        for (i = events.length - 1; i >= 0; i--) {
+            const timeline = room.getTimelineForEvent(events[i].getId());
+            if (!timeline) {
+                // Somehow, it seems to be possible for live events to not have
+                // a timeline, even though that should not happen. :(
+                // https://github.com/vector-im/riot-web/issues/12120
+                console.warn(
+                    `Event ${events[i].getId()} in room ${room.roomId} is live, ` +
+                    `but it does not have a timeline`,
+                );
+                continue;
+            }
+            const userMembershipEvent =
+                    timeline.getState(EventTimeline.FORWARDS).getMember(userId);
+            userMembership = userMembershipEvent ? userMembershipEvent.membership : "leave";
+            const timelineEvents = timeline.getEvents();
+            for (let j = timelineEvents.length - 1; j >= 0; j--) {
+                const event = timelineEvents[j];
+                if (event.getId() === events[i].getId()) {
+                    break;
+                } else if (event.getStateKey() === userId
+                    && event.getType() === "m.room.member") {
+                    const prevContent = event.getPrevContent();
+                    userMembership = prevContent.membership || "leave";
+                }
+            }
+            break;
+        }
+
+        // now go through the rest of the events and find the first undecryptable
+        // one that was sent when the user wasn't in the room
+        for (; i >= 0; i--) {
+            const event = events[i];
+            if (event.getStateKey() === userId
+                && event.getType() === "m.room.member") {
+                const prevContent = event.getPrevContent();
+                userMembership = prevContent.membership || "leave";
+            } else if (userMembership === "leave" &&
+                       (event.isDecryptionFailure() || event.isBeingDecrypted())) {
+                // reached an undecryptable message when the user wasn't in
+                // the room -- don't try to load any more
+                // Note: for now, we assume that events that are being decrypted are
+                // not decryptable
+                return i + 1;
+            }
+        }
+        return 0;
+    },
+
     _indexForEventId: function(evId) {
         for (let i = 0; i < this.state.events.length; ++i) {
             if (evId == this.state.events[i].getId()) {
@@ -1311,6 +1414,9 @@ const TimelinePanel = createReactClass({
             this.state.forwardPaginating ||
             ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
+        const events = this.state.firstVisibleEventIndex
+              ? this.state.events.slice(this.state.firstVisibleEventIndex)
+              : this.state.events;
         return (
             <MessagePanel
                 ref={this._messagePanel}
@@ -1319,7 +1425,7 @@ const TimelinePanel = createReactClass({
                 hidden={this.props.hidden}
                 backPaginating={this.state.backPaginating}
                 forwardPaginating={forwardPaginating}
-                events={this.state.events}
+                events={events}
                 highlightedEventId={this.props.highlightedEventId}
                 readMarkerEventId={this.state.readMarkerEventId}
                 readMarkerVisible={this.state.readMarkerVisible}

src/components/structures/ToastContainer.js

@@ -23,9 +23,11 @@ export default class ToastContainer extends React.Component {
     constructor() {
         super();
         this.state = {toasts: ToastStore.sharedInstance().getToasts()};
-    }
 
-    componentDidMount() {
+        // Start listening here rather than in componentDidMount because
+        // toasts may dismiss themselves in their didMount if they find
+        // they're already irrelevant by the time they're mounted, and
+        // our own componentDidMount is too late.
         ToastStore.sharedInstance().on('update', this._onToastStoreUpdate);
     }
 

src/components/structures/TopLeftMenuButton.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {TopLeftMenu} from '../views/context_menus/TopLeftMenu';
+import TopLeftMenu from '../views/context_menus/TopLeftMenu';
 import BaseAvatar from '../views/avatars/BaseAvatar';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import * as Avatar from '../../Avatar';

src/components/structures/auth/CompleteSecurity.js

@@ -19,11 +19,12 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import { accessSecretStorage } from '../../../CrossSigningManager';
+import { accessSecretStorage, AccessCancelledError } from '../../../CrossSigningManager';
 
 const PHASE_INTRO = 0;
-const PHASE_DONE = 1;
-const PHASE_CONFIRM_SKIP = 2;
+const PHASE_BUSY = 1;
+const PHASE_DONE = 2;
+const PHASE_CONFIRM_SKIP = 3;
 
 export default class CompleteSecurity extends React.Component {
     static propTypes = {
@@ -35,20 +36,72 @@ export default class CompleteSecurity extends React.Component {
 
         this.state = {
             phase: PHASE_INTRO,
+            // this serves dual purpose as the object for the request logic and
+            // the presence of it insidicating that we're in 'verify mode'.
+            // Because of the latter, it lives in the state.
+            verificationRequest: null,
+            backupInfo: null,
         };
+        MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequest);
+    }
+
+    componentWillUnmount() {
+        if (this.state.verificationRequest) {
+            this.state.verificationRequest.off("change", this.onVerificationRequestChange);
+        }
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("crypto.verification.request", this.onVerificationRequest);
+        }
     }
 
     onStartClick = async () => {
+        this.setState({
+            phase: PHASE_BUSY,
+        });
         const cli = MatrixClientPeg.get();
+        const backupInfo = await cli.getKeyBackupVersion();
+        this.setState({backupInfo});
         try {
             await accessSecretStorage(async () => {
                 await cli.checkOwnCrossSigningTrust();
+                if (backupInfo) await cli.restoreKeyBackupWithSecretStorage(backupInfo);
             });
-            this.setState({
-                phase: PHASE_DONE,
-            });
+
+            if (cli.getCrossSigningId()) {
+                this.setState({
+                    phase: PHASE_DONE,
+                });
+            }
         } catch (e) {
+            if (!(e instanceof AccessCancelledError)) {
+                console.log(e);
+            }
             // this will throw if the user hits cancel, so ignore
+            this.setState({
+                phase: PHASE_INTRO,
+            });
+        }
+    }
+
+    onVerificationRequest = async (request) => {
+        if (request.otherUserId !== MatrixClientPeg.get().getUserId()) return;
+
+        if (this.state.verificationRequest) {
+            this.state.verificationRequest.off("change", this.onVerificationRequestChange);
+        }
+        await request.accept();
+        request.on("change", this.onVerificationRequestChange);
+        this.setState({
+            verificationRequest: request,
+        });
+    }
+
+    onVerificationRequestChange = () => {
+        if (this.state.verificationRequest.cancelled) {
+            this.state.verificationRequest.off("change", this.onVerificationRequestChange);
+            this.setState({
+                verificationRequest: null,
+            });
         }
     }
 
@@ -74,8 +127,7 @@ export default class CompleteSecurity extends React.Component {
 
     render() {
         const AuthPage = sdk.getComponent("auth.AuthPage");
-        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const AuthBody = sdk.getComponent("auth.AuthBody");
+        const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         const {
@@ -85,7 +137,16 @@ export default class CompleteSecurity extends React.Component {
         let icon;
         let title;
         let body;
-        if (phase === PHASE_INTRO) {
+
+        if (this.state.verificationRequest) {
+            const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
+            body = <EncryptionPanel
+                layout="dialog"
+                verificationRequest={this.state.verificationRequest}
+                onClose={this.props.onFinished}
+                member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
+            />;
+        } else if (phase === PHASE_INTRO) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
             title = _t("Complete security");
             body = (
@@ -112,13 +173,21 @@ export default class CompleteSecurity extends React.Component {
         } else if (phase === PHASE_DONE) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified"></span>;
             title = _t("Session verified");
+            let message;
+            if (this.state.backupInfo) {
+                message = <p>{_t(
+                    "Your new session is now verified. It has access to your " +
+                    "encrypted messages, and other users will see it as trusted.",
+                )}</p>;
+            } else {
+                message = <p>{_t(
+                    "Your new session is now verified. Other users will see it as trusted.",
+                )}</p>;
+            }
             body = (
                 <div>
                     <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified"></div>
-                    <p>{_t(
-                        "Your new session is now verified. It has access to your " +
-                        "encrypted messages, and other users will see it as trusted.",
-                    )}</p>
+                    {message}
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             kind="primary"
@@ -135,7 +204,7 @@ export default class CompleteSecurity extends React.Component {
             body = (
                 <div>
                     <p>{_t(
-                        "Without completing security on this device, it won’t have " +
+                        "Without completing security on this session, it won’t have " +
                         "access to encrypted messages.",
                     )}</p>
                     <div className="mx_CompleteSecurity_actionRow">
@@ -155,14 +224,18 @@ export default class CompleteSecurity extends React.Component {
                     </div>
                 </div>
             );
+        } else if (phase === PHASE_BUSY) {
+            const Spinner = sdk.getComponent('views.elements.Spinner');
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
+            title = _t("Complete security");
+            body = <Spinner />;
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }
 
         return (
             <AuthPage>
-                <AuthHeader />
-                <AuthBody>
+                <CompleteSecurityBody>
                     <h2 className="mx_CompleteSecurity_header">
                         {icon}
                         {title}
@@ -170,7 +243,7 @@ export default class CompleteSecurity extends React.Component {
                     <div className="mx_CompleteSecurity_body">
                         {body}
                     </div>
-                </AuthBody>
+                </CompleteSecurityBody>
             </AuthPage>
         );
     }

src/components/structures/auth/E2eSetup.js

@@ -0,0 +1,50 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AsyncWrapper from '../../../AsyncWrapper';
+import * as sdk from '../../../index';
+
+export default class E2eSetup extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+        accountPassword: PropTypes.string,
+    };
+
+    constructor() {
+        super();
+        // awkwardly indented because https://github.com/eslint/eslint/issues/11310
+        this._createStorageDialogPromise =
+            import("../../../async-components/views/dialogs/secretstorage/CreateSecretStorageDialog");
+    }
+
+    render() {
+        const AuthPage = sdk.getComponent("auth.AuthPage");
+        const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
+        return (
+            <AuthPage>
+                <CompleteSecurityBody>
+                    <AsyncWrapper prom={this._createStorageDialogPromise}
+                        hasCancel={false}
+                        onFinished={this.props.onFinished}
+                        accountPassword={this.props.accountPassword}
+                    />
+                </CompleteSecurityBody>
+            </AuthPage>
+        );
+    }
+}

src/components/structures/auth/ForgotPassword.js

@@ -152,8 +152,8 @@ export default createReactClass({
                     <div>
                         { _t(
                             "Changing your password will reset any end-to-end encryption keys " +
-                            "on all of your devices, making encrypted chat history unreadable. Set up " +
-                            "Key Backup or export your room keys from another device before resetting your " +
+                            "on all of your sessions, making encrypted chat history unreadable. Set up " +
+                            "Key Backup or export your room keys from another session before resetting your " +
                             "password.",
                         ) }
                     </div>,
@@ -358,7 +358,7 @@ export default createReactClass({
         return <div>
             <p>{_t("Your password has been reset.")}</p>
             <p>{_t(
-                "You have been logged out of all devices and will no longer receive " +
+                "You have been logged out of all sessions and will no longer receive " +
                 "push notifications. To re-enable notifications, sign in again on each " +
                 "device.",
             )}</p>

src/components/structures/auth/Login.js

@@ -27,6 +27,8 @@ import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import classNames from "classnames";
 import AuthPage from "../../views/auth/AuthPage";
+import SSOButton from "../../views/elements/SSOButton";
+import PlatformPeg from '../../../PlatformPeg';
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -58,6 +60,11 @@ export default createReactClass({
     displayName: 'Login',
 
     propTypes: {
+        // Called when the user has logged in. Params:
+        // - The object returned by the login API
+        // - The user's password, if applicable, (may be cached in memory for a
+        //   short time so the user is not required to re-enter their password
+        //   for operations like uploading cross-signing keys).
         onLoggedIn: PropTypes.func.isRequired,
 
         // If true, the component will consider itself busy.
@@ -115,8 +122,8 @@ export default createReactClass({
             'm.login.password': this._renderPasswordStep,
 
             // CAS and SSO are the same thing, modulo the url we link to
-            'm.login.cas': () => this._renderSsoStep(this._loginLogic.getSsoLoginUrl("cas")),
-            'm.login.sso': () => this._renderSsoStep(this._loginLogic.getSsoLoginUrl("sso")),
+            'm.login.cas': () => this._renderSsoStep("cas"),
+            'm.login.sso': () => this._renderSsoStep("sso"),
         };
 
         this._initLoginLogic();
@@ -181,7 +188,7 @@ export default createReactClass({
             username, phoneCountry, phoneNumber, password,
         ).then((data) => {
             this.setState({serverIsAlive: true}); // it must be, we logged in.
-            this.props.onLoggedIn(data);
+            this.props.onLoggedIn(data, password);
         }, (error) => {
             if (this._unmounted) {
                 return;
@@ -240,6 +247,7 @@ export default createReactClass({
             }
 
             this.setState({
+                busy: false,
                 errorText: errorText,
                 // 401 would be the sensible status code for 'incorrect password'
                 // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
@@ -247,13 +255,6 @@ export default createReactClass({
                 // We treat both as an incorrect password
                 loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
             });
-        }).finally(() => {
-            if (this._unmounted) {
-                return;
-            }
-            this.setState({
-                busy: false,
-            });
         });
     },
 
@@ -339,6 +340,21 @@ export default createReactClass({
         this.props.onRegisterClick();
     },
 
+    onTryRegisterClick: function(ev) {
+        const step = this._getCurrentFlowStep();
+        if (step === 'm.login.sso' || step === 'm.login.cas') {
+            // If we're showing SSO it means that registration is also probably disabled,
+            // so intercept the click and instead pretend the user clicked 'Sign in with SSO'.
+            ev.preventDefault();
+            ev.stopPropagation();
+            const ssoKind = step === 'm.login.sso' ? 'sso' : 'cas';
+            PlatformPeg.get().startSingleSignOn(this._loginLogic.createTemporaryClient(), ssoKind);
+        } else {
+            // Don't intercept - just go through to the register page
+            this.onRegisterClick(ev);
+        }
+    },
+
     async onServerDetailsNextPhaseClick() {
         this.setState({
             phase: PHASE_LOGIN,
@@ -476,7 +492,7 @@ export default createReactClass({
                         "Either use HTTPS or <a>enable unsafe scripts</a>.", {},
                         {
                             'a': (sub) => {
-                                return <a target="_blank" rel="noopener"
+                                return <a target="_blank" rel="noreferrer noopener"
                                     href="https://www.google.com/search?&q=enable%20unsafe%20scripts"
                                 >
                                     { sub }
@@ -491,11 +507,10 @@ export default createReactClass({
                         "<a>homeserver's SSL certificate</a> is trusted, and that a browser extension " +
                         "is not blocking requests.", {},
                         {
-                            'a': (sub) => {
-                                return <a target="_blank" rel="noopener" href={this.props.serverConfig.hsUrl}>
+                            'a': (sub) =>
+                                <a target="_blank" rel="noreferrer noopener" href={this.props.serverConfig.hsUrl}>
                                     { sub }
-                                </a>;
-                            },
+                                </a>,
                         },
                     ) }
                 </span>;
@@ -581,7 +596,7 @@ export default createReactClass({
         );
     },
 
-    _renderSsoStep: function(url) {
+    _renderSsoStep: function(loginType) {
         const SignInToText = sdk.getComponent('views.auth.SignInToText');
 
         let onEditServerDetailsClick = null;
@@ -602,7 +617,10 @@ export default createReactClass({
                 <SignInToText serverConfig={this.props.serverConfig}
                     onEditServerDetailsClick={onEditServerDetailsClick} />
 
-                <a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
+                <SSOButton
+                    className="mx_Login_sso_link mx_Login_submit"
+                    matrixClient={this._loginLogic.createTemporaryClient()}
+                    loginType={loginType} />
             </div>
         );
     },
@@ -650,7 +668,7 @@ export default createReactClass({
                     { serverDeadSection }
                     { this.renderServerComponent() }
                     { this.renderLoginComponentForStep() }
-                    <a className="mx_AuthBody_changeFlow" onClick={this.onRegisterClick} href="#">
+                    <a className="mx_AuthBody_changeFlow" onClick={this.onTryRegisterClick} href="#">
                         { _t('Create account') }
                     </a>
                 </AuthBody>

src/components/structures/auth/Registration.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -31,6 +31,8 @@ import classNames from "classnames";
 import * as Lifecycle from '../../../Lifecycle';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import AuthPage from "../../views/auth/AuthPage";
+import Login from "../../../Login";
+import dis from "../../../dispatcher";
 
 // Phases
 // Show controls to configure server details
@@ -45,7 +47,13 @@ export default createReactClass({
     displayName: 'Registration',
 
     propTypes: {
+        // Called when the user has logged in. Params:
+        // - object with userId, deviceId, homeserverUrl, identityServerUrl, accessToken
+        // - The user's password, if available and applicable (may be cached in memory
+        //   for a short time so the user is not required to re-enter their password
+        //   for operations like uploading cross-signing keys).
         onLoggedIn: PropTypes.func.isRequired,
+
         clientSecret: PropTypes.string,
         sessionId: PropTypes.string,
         makeRegistrationUrl: PropTypes.func.isRequired,
@@ -56,6 +64,7 @@ export default createReactClass({
         // registration shouldn't know or care how login is done.
         onLoginClick: PropTypes.func.isRequired,
         onServerConfigChange: PropTypes.func.isRequired,
+        defaultDeviceDisplayName: PropTypes.string,
     },
 
     getInitialState: function() {
@@ -225,6 +234,13 @@ export default createReactClass({
             serverRequiresIdServer,
             busy: false,
         });
+        const showGenericError = (e) => {
+            this.setState({
+                errorText: _t("Unable to query for supported registration methods."),
+                // add empty flows array to get rid of spinner
+                flows: [],
+            });
+        };
         try {
             await this._makeRegisterRequest({});
             // This should never succeed since we specified an empty
@@ -236,18 +252,32 @@ export default createReactClass({
                     flows: e.data.flows,
                 });
             } else if (e.httpStatus === 403 && e.errcode === "M_UNKNOWN") {
-                this.setState({
-                    errorText: _t("Registration has been disabled on this homeserver."),
-                    // add empty flows array to get rid of spinner
-                    flows: [],
-                });
+                // At this point registration is pretty much disabled, but before we do that let's
+                // quickly check to see if the server supports SSO instead. If it does, we'll send
+                // the user off to the login page to figure their account out.
+                try {
+                    const loginLogic = new Login(hsUrl, isUrl, null, {
+                        defaultDeviceDisplayName: "riot login check", // We shouldn't ever be used
+                    });
+                    const flows = await loginLogic.getFlows();
+                    const hasSsoFlow = flows.find(f => f.type === 'm.login.sso' || f.type === 'm.login.cas');
+                    if (hasSsoFlow) {
+                        // Redirect to login page - server probably expects SSO only
+                        dis.dispatch({action: 'start_login'});
+                    } else {
+                        this.setState({
+                            errorText: _t("Registration has been disabled on this homeserver."),
+                            // add empty flows array to get rid of spinner
+                            flows: [],
+                        });
+                    }
+                } catch (e) {
+                    console.error("Failed to get login flows to check for SSO support", e);
+                    showGenericError(e);
+                }
             } else {
                 console.log("Unable to query for supported registration methods.", e);
-                this.setState({
-                    errorText: _t("Unable to query for supported registration methods."),
-                    // add empty flows array to get rid of spinner
-                    flows: [],
-                });
+                showGenericError(e);
             }
         }
     },
@@ -348,7 +378,7 @@ export default createReactClass({
                 homeserverUrl: this.state.matrixClient.getHomeserverUrl(),
                 identityServerUrl: this.state.matrixClient.getIdentityServerUrl(),
                 accessToken: response.access_token,
-            });
+            }, this.state.formVals.password);
 
             this._setupPushers(cli);
             // we're still busy until we get unmounted: don't show the registration form again
@@ -426,15 +456,14 @@ export default createReactClass({
         // session).
         if (!this.state.formVals.password) inhibitLogin = null;
 
-        return this.state.matrixClient.register(
-            this.state.formVals.username,
-            this.state.formVals.password,
-            undefined, // session id: included in the auth dict already
-            auth,
-            null,
-            null,
-            inhibitLogin,
-        );
+        const registerParams = {
+            username: this.state.formVals.username,
+            password: this.state.formVals.password,
+            initial_device_display_name: this.props.defaultDeviceDisplayName,
+        };
+        if (auth) registerParams.auth = auth;
+        if (inhibitLogin !== undefined && inhibitLogin !== null) registerParams.inhibitLogin = inhibitLogin;
+        return this.state.matrixClient.registerRequest(registerParams);
     },
 
     _getUIAuthInputs: function() {

src/components/structures/auth/SoftLogout.js

@@ -23,8 +23,8 @@ import * as Lifecycle from '../../../Lifecycle';
 import Modal from '../../../Modal';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {sendLoginRequest} from "../../../Login";
-import url from 'url';
 import AuthPage from "../../views/auth/AuthPage";
+import SSOButton from "../../views/elements/SSOButton";
 
 const LOGIN_VIEW = {
     LOADING: 1,
@@ -55,7 +55,6 @@ export default class SoftLogout extends React.Component {
         this.state = {
             loginView: LOGIN_VIEW.LOADING,
             keyBackupNeeded: true, // assume we do while we figure it out (see componentWillMount)
-            ssoUrl: null,
 
             busy: false,
             password: "",
@@ -83,7 +82,7 @@ export default class SoftLogout extends React.Component {
             onFinished: (wipeData) => {
                 if (!wipeData) return;
 
-                console.log("Clearing data from soft-logged-out device");
+                console.log("Clearing data from soft-logged-out session");
                 Lifecycle.logout();
             },
         });
@@ -105,18 +104,6 @@ export default class SoftLogout extends React.Component {
 
         const chosenView = loginViews.filter(f => !!f)[0] || LOGIN_VIEW.UNSUPPORTED;
         this.setState({loginView: chosenView});
-
-        if (chosenView === LOGIN_VIEW.CAS || chosenView === LOGIN_VIEW.SSO) {
-            const client = MatrixClientPeg.get();
-
-            const appUrl = url.parse(window.location.href, true);
-            appUrl.hash = ""; // Clear #/soft_logout off the URL
-            appUrl.query["homeserver"] = client.getHomeserverUrl();
-            appUrl.query["identityServer"] = client.getIdentityServerUrl();
-
-            const ssoUrl = client.getSsoLoginUrl(url.format(appUrl), chosenView === LOGIN_VIEW.CAS ? "cas" : "sso");
-            this.setState({ssoUrl});
-        }
     }
 
     onPasswordChange = (ev) => {
@@ -195,14 +182,6 @@ export default class SoftLogout extends React.Component {
         });
     }
 
-    onSsoLogin = async (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        this.setState({busy: true});
-        window.location.href = this.state.ssoUrl;
-    };
-
     _renderSignInSection() {
         if (this.state.loginView === LOGIN_VIEW.LOADING) {
             const Spinner = sdk.getComponent("elements.Spinner");
@@ -212,8 +191,8 @@ export default class SoftLogout extends React.Component {
         let introText = null; // null is translated to something area specific in this function
         if (this.state.keyBackupNeeded) {
             introText = _t(
-                "Regain access to your account and recover encryption keys stored on this device. " +
-                "Without them, you won’t be able to read all of your secure messages on any device.");
+                "Regain access to your account and recover encryption keys stored in this session. " +
+                "Without them, you won’t be able to read all of your secure messages in any session.");
         }
 
         if (this.state.loginView === LOGIN_VIEW.PASSWORD) {
@@ -257,8 +236,6 @@ export default class SoftLogout extends React.Component {
         }
 
         if (this.state.loginView === LOGIN_VIEW.SSO || this.state.loginView === LOGIN_VIEW.CAS) {
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
             if (!introText) {
                 introText = _t("Sign in and regain access to your account.");
             } // else we already have a message and should use it (key backup warning)
@@ -266,9 +243,9 @@ export default class SoftLogout extends React.Component {
             return (
                 <div>
                     <p>{introText}</p>
-                    <AccessibleButton kind='primary' onClick={this.onSsoLogin}>
-                        {_t('Sign in with single sign-on')}
-                    </AccessibleButton>
+                    <SSOButton
+                        matrixClient={MatrixClientPeg.get()}
+                        loginType={this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso"} />
                 </div>
             );
         }
@@ -306,7 +283,7 @@ export default class SoftLogout extends React.Component {
                     <p>
                         {_t(
                             "Warning: Your personal data (including encryption keys) is still stored " +
-                            "on this device. Clear it if you're finished using this device, or want to sign " +
+                            "in this session. Clear it if you're finished using this session, or want to sign " +
                             "in to another account.",
                         )}
                     </p>

src/components/views/auth/AuthFooter.js

@@ -26,7 +26,7 @@ export default createReactClass({
     render: function() {
         return (
             <div className="mx_AuthFooter">
-                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t("powered by Matrix") }</a>
+                <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>
             </div>
         );
     },

src/components/views/auth/CaptchaForm.js

@@ -61,13 +61,9 @@ export default createReactClass({
         } else {
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
-            let protocol = global.location.protocol;
-            if (protocol === "vector:") {
-                protocol = "https:";
-            }
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
-                'src', `${protocol}//www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
             );
             this._recaptchaContainer.current.appendChild(scriptTag);
         }

src/components/views/auth/CompleteSecurityBody.js

@@ -0,0 +1,27 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class CompleteSecurityBody extends React.PureComponent {
+    render() {
+        return <div className="mx_CompleteSecurityBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -142,7 +142,7 @@ export const PasswordAuthEntry = createReactClass({
 
         return (
             <div>
-                <p>{ _t("To continue, please enter your password.") }</p>
+                <p>{ _t("Confirm your identity by entering your account password below.") }</p>
                 <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
                         id="mx_InteractiveAuthEntryComponents_password"
@@ -331,7 +331,7 @@ export const TermsAuthEntry = createReactClass({
             checkboxes.push(
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
                     <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
-                    <a href={policy.url} target="_blank" rel="noopener">{ policy.name }</a>
+                    <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
                 </label>,
             );
         }
@@ -604,6 +604,7 @@ export const FallbackAuthEntry = createReactClass({
             this.props.authSessionId,
         );
         this._popupWindow = window.open(url);
+        this._popupWindow.opener = null;
     },
 
     _onReceiveMessage: function(event) {
@@ -641,7 +642,7 @@ const AuthEntryComponents = [
     TermsAuthEntry,
 ];
 
-export function getEntryComponentForLoginType(loginType) {
+export default function getEntryComponentForLoginType(loginType) {
     for (const c of AuthEntryComponents) {
         if (c.LOGIN_TYPE == loginType) {
             return c;

src/components/views/auth/ModularServerConfig.js

@@ -99,7 +99,7 @@ export default class ModularServerConfig extends ServerConfig {
                     "Enter the location of your Modular homeserver. It may use your own " +
                     "domain name or be a subdomain of <a>modular.im</a>.",
                     {}, {
-                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                             {sub}
                         </a>,
                     },

src/components/views/auth/PasswordLogin.js

@@ -202,6 +202,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
@@ -216,6 +217,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
@@ -240,6 +242,7 @@ export default class PasswordLogin extends React.Component {
                     prefix={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             }
@@ -291,6 +294,7 @@ export default class PasswordLogin extends React.Component {
                         element="select"
                         value={this.state.loginType}
                         onChange={this.onLoginTypeChange}
+                        disabled={this.props.disableSubmit}
                     >
                         <option
                             key={PasswordLogin.LOGIN_FIELD_MXID}
@@ -330,6 +334,7 @@ export default class PasswordLogin extends React.Component {
                         label={_t('Password')}
                         value={this.state.password}
                         onChange={this.onPasswordChanged}
+                        disabled={this.props.disableSubmit}
                     />
                     {forgotPasswordJsx}
                     <input className="mx_Login_submit"

src/components/views/auth/RegistrationForm.js

@@ -486,6 +486,7 @@ export default createReactClass({
             id="mx_RegistrationForm_password"
             ref={field => this[FIELD_PASSWORD] = field}
             type="password"
+            autoComplete="new-password"
             label={_t("Password")}
             value={this.state.password}
             onChange={this.onPasswordChange}
@@ -499,6 +500,7 @@ export default createReactClass({
             id="mx_RegistrationForm_passwordConfirm"
             ref={field => this[FIELD_PASSWORD_CONFIRM] = field}
             type="password"
+            autoComplete="new-password"
             label={_t("Confirm")}
             value={this.state.passwordConfirm}
             onChange={this.onPasswordConfirmChange}

src/components/views/auth/ServerConfig.js

@@ -274,15 +274,13 @@ export default class ServerConfig extends React.PureComponent {
             : null;
 
         return (
-            <div className="mx_ServerConfig">
+            <form className="mx_ServerConfig" onSubmit={this.onSubmit} autoComplete="off">
                 <h3>{_t("Other servers")}</h3>
                 {errorText}
                 {this._renderHomeserverSection()}
                 {this._renderIdentityServerSection()}
-                <form onSubmit={this.onSubmit} autoComplete="off" action={null}>
-                    {submitButton}
-                </form>
-            </div>
+                {submitButton}
+            </form>
         );
     }
 }

src/components/views/auth/ServerTypeSelector.js

@@ -46,7 +46,7 @@ export const TYPES = {
         label: () => _t('Premium'),
         logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
-            a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+            a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                 {sub}
             </a>,
         }),

src/components/views/context_menus/MessageContextMenu.js

@@ -90,7 +90,8 @@ export default createReactClass({
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
         if (!pinnedEvent) return false;
-        return pinnedEvent.getContent().pinned.includes(this.props.mxEvent.getId());
+        const content = pinnedEvent.getContent();
+        return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     },
 
     onResendClick: function() {
@@ -414,11 +415,16 @@ export default createReactClass({
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <MenuItem className="mx_MessageContextMenu_field">
-                <a href={permalink} target="_blank" rel="noopener" onClick={this.onPermalinkClick} tabIndex={-1}>
-                    { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                        ? _t('Share Permalink') : _t('Share Message') }
-                </a>
+            <MenuItem
+                element="a"
+                className="mx_MessageContextMenu_field"
+                onClick={this.onPermalinkClick}
+                href={permalink}
+                target="_blank"
+                rel="noreferrer noopener"
+            >
+                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
+                    ? _t('Share Permalink') : _t('Share Message') }
             </MenuItem>
         );
 
@@ -436,16 +442,15 @@ export default createReactClass({
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <MenuItem className="mx_MessageContextMenu_field">
-                    <a
-                        href={mxEvent.event.content.external_url}
-                        target="_blank"
-                        rel="noopener"
-                        onClick={this.closeMenu}
-                        tabIndex={-1}
-                    >
-                        { _t('Source URL') }
-                    </a>
+                <MenuItem
+                    element="a"
+                    className="mx_MessageContextMenu_field"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    onClick={this.closeMenu}
+                    href={mxEvent.event.content.external_url}
+                >
+                    { _t('Source URL') }
                 </MenuItem>
           );
         }

src/components/views/context_menus/RoomTileContextMenu.js

@@ -306,7 +306,7 @@ export default createReactClass({
         return (
             <div>
                 <MenuItem className="mx_RoomTileContextMenu_tag_field" onClick={this._onClickSettings}>
-                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icons-settings-room.svg")} width="15" height="15" alt="" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/feather-customised/settings.svg")} width="15" height="15" alt="" />
                     { _t('Settings') }
                 </MenuItem>
             </div>

src/components/views/context_menus/TopLeftMenu.js

@@ -27,7 +27,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
 import * as sdk from "../../../index";
 
-export class TopLeftMenu extends React.Component {
+export default class TopLeftMenu extends React.Component {
     static propTypes = {
         displayName: PropTypes.string.isRequired,
         userId: PropTypes.string.isRequired,
@@ -68,10 +68,11 @@ export class TopLeftMenu extends React.Component {
                 {_t(
                     "<a>Upgrade</a> to your own domain", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener" tabIndex={-1}>{sub}</a>,
+                        a: sub =>
+                            <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener" tabIndex={-1}>{sub}</a>,
                     },
                 )}
-                <a href={hostingSignupLink} target="_blank" rel="noopener" role="presentation" aria-hidden={true} tabIndex={-1}>
+                <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener" role="presentation" aria-hidden={true} tabIndex={-1}>
                     <img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </div>;

src/components/views/dialogs/AskInviteAnywayDialog.js

@@ -72,7 +72,7 @@ export default createReactClass({
                     <button onClick={this._onInviteNeverWarnClicked}>
                         { _t('Invite anyway and never warn me again') }
                     </button>
-                    <button onClick={this._onInviteClicked} autoFocus="true">
+                    <button onClick={this._onInviteClicked} autoFocus={true}>
                         { _t('Invite anyway') }
                     </button>
                 </div>

src/components/views/dialogs/BaseDialog.js

@@ -65,6 +65,9 @@ export default createReactClass({
         // Title for the dialog.
         title: PropTypes.node.isRequired,
 
+        // Path to an icon to put in the header
+        headerImage: PropTypes.string,
+
         // children should be the content of the dialog
         children: PropTypes.node,
 
@@ -110,6 +113,13 @@ export default createReactClass({
             );
         }
 
+        let headerImage;
+        if (this.props.headerImage) {
+            headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage}
+                alt=""
+            />;
+        }
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <FocusLock
@@ -135,6 +145,7 @@ export default createReactClass({
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
+                            {headerImage}
                             { this.props.title }
                         </div>
                         { this.props.headerButton }

src/components/views/dialogs/ChangelogDialog.js

@@ -52,7 +52,7 @@ export default class ChangelogDialog extends React.Component {
     _elementsForCommit(commit) {
         return (
             <li key={commit.sha} className="mx_ChangelogDialog_li">
-                <a href={commit.html_url} target="_blank" rel="noopener">
+                <a href={commit.html_url} target="_blank" rel="noreferrer noopener">
                     {commit.commit.message.split('\n')[0]}
                 </a>
             </li>

src/components/views/dialogs/ConfirmDestroyCrossSigningDialog.js

@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {_t} from "../../../languageHandler";
+import * as sdk from "../../../index";
+
+export default class ConfirmDestroyCrossSigningDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _onConfirm = () => {
+        this.props.onFinished(true);
+    };
+
+    _onDecline = () => {
+        this.props.onFinished(false);
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <BaseDialog
+                    className='mx_ConfirmDestroyCrossSigningDialog'
+                    hasCancel={true}
+                    onFinished={this.props.onFinished}
+                    title={_t("Destroy cross-signing keys?")}>
+                <div className='mx_ConfirmDestroyCrossSigningDialog_content'>
+                    <p>
+                        {_t(
+                            "Deleting cross-signing keys is permanent. " +
+                            "Anyone you have verified with will see security alerts. " +
+                            "You almost certainly don't want to do this, unless " +
+                            "you've lost every device you can cross-sign from.",
+                        )}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Clear cross-signing keys")}
+                    onPrimaryButtonClick={this._onConfirm}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("Cancel")}
+                    onCancel={this._onDecline}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/ConfirmWipeDeviceDialog.js

@@ -39,11 +39,11 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
         return (
             <BaseDialog className='mx_ConfirmWipeDeviceDialog' hasCancel={true}
                         onFinished={this.props.onFinished}
-                        title={_t("Clear all data on this device?")}>
+                        title={_t("Clear all data in this session?")}>
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
                         {_t(
-                            "Clearing all data from this device is permanent. Encrypted messages will be lost " +
+                            "Clearing all data from this session is permanent. Encrypted messages will be lost " +
                             "unless their keys have been backed up.",
                         )}
                     </p>

src/components/views/dialogs/CreateRoomDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+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.
@@ -44,13 +45,13 @@ export default createReactClass({
     },
 
     _roomCreateOptions() {
-        const createOpts = {};
+        const opts = {};
+        const createOpts = opts.createOpts = {};
         createOpts.name = this.state.name;
         if (this.state.isPublic) {
             createOpts.visibility = "public";
             createOpts.preset = "public_chat";
-            // to prevent createRoom from enabling guest access
-            createOpts['initial_state'] = [];
+            opts.guestAccess = false;
             const {alias} = this.state;
             const localPart = alias.substr(1, alias.indexOf(":") - 1);
             createOpts['room_alias_name'] = localPart;
@@ -61,7 +62,7 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
-        return createOpts;
+        return opts;
     },
 
     componentDidMount() {

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -118,6 +118,7 @@ export default class DeactivateAccountDialog extends React.Component {
 
         const Field = sdk.getComponent('elements.Field');
 
+        // this is on purpose not a <form /> to prevent Enter triggering submission, to further prevent accidents
         return (
             <BaseDialog className="mx_DeactivateAccountDialog"
                 onFinished={this.props.onFinished}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -27,16 +27,19 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {ensureDMExists} from "../../../createRoom";
 import dis from "../../../dispatcher";
 import SettingsStore from '../../../settings/SettingsStore';
+import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
 
 const MODE_LEGACY = 'legacy';
 const MODE_SAS = 'sas';
 
 const PHASE_START = 0;
 const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
-const PHASE_SHOW_SAS = 2;
-const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
-const PHASE_VERIFIED = 4;
-const PHASE_CANCELLED = 5;
+const PHASE_PICK_VERIFICATION_OPTION = 2;
+const PHASE_SHOW_SAS = 3;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 4;
+const PHASE_VERIFIED = 5;
+const PHASE_CANCELLED = 6;
 
 export default class DeviceVerifyDialog extends React.Component {
     static propTypes = {
@@ -49,6 +52,7 @@ export default class DeviceVerifyDialog extends React.Component {
         super();
         this._verifier = null;
         this._showSasEvent = null;
+        this._request = null;
         this.state = {
             phase: PHASE_START,
             mode: MODE_SAS,
@@ -80,6 +84,25 @@ export default class DeviceVerifyDialog extends React.Component {
         this.props.onFinished(false);
     }
 
+    _onUseSasClick = async () => {
+        try {
+            this._verifier = this._request.beginKeyVerification(verificationMethods.SAS);
+            this._verifier.on('show_sas', this._onVerifierShowSas);
+            // throws upon cancellation
+            await this._verifier.verify();
+            this.setState({phase: PHASE_VERIFIED});
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier = null;
+        } catch (e) {
+            console.log("Verification failed", e);
+            this.setState({
+                phase: PHASE_CANCELLED,
+            });
+            this._verifier = null;
+            this._request = null;
+        }
+    };
+
     _onLegacyFinished = (confirm) => {
         if (confirm) {
             MatrixClientPeg.get().setDeviceVerified(
@@ -100,7 +123,7 @@ export default class DeviceVerifyDialog extends React.Component {
                 const roomId = await ensureDMExistsAndOpen(this.props.userId);
                 // throws upon cancellation before having started
                 const request = await client.requestVerificationDM(
-                    this.props.userId, roomId, [verificationMethods.SAS],
+                    this.props.userId, roomId,
                 );
                 await request.waitFor(r => r.ready || r.started);
                 if (request.ready) {
@@ -108,11 +131,21 @@ export default class DeviceVerifyDialog extends React.Component {
                 } else {
                     this._verifier = request.verifier;
                 }
+            } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                this._request = await client.requestVerification(this.props.userId, [
+                    verificationMethods.SAS,
+                    SHOW_QR_CODE_METHOD,
+                    verificationMethods.RECIPROCATE_QR_CODE,
+                ]);
+
+                await this._request.waitFor(r => r.ready || r.started);
+                this.setState({phase: PHASE_PICK_VERIFICATION_OPTION});
             } else {
                 this._verifier = client.beginKeyVerification(
                     verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
                 );
             }
+            if (!this._verifier) return;
             this._verifier.on('show_sas', this._onVerifierShowSas);
             // throws upon cancellation
             await this._verifier.verify();
@@ -150,10 +183,13 @@ export default class DeviceVerifyDialog extends React.Component {
         let body;
         switch (this.state.phase) {
             case PHASE_START:
-                body = this._renderSasVerificationPhaseStart();
+                body = this._renderVerificationPhaseStart();
                 break;
             case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
-                body = this._renderSasVerificationPhaseWaitAccept();
+                body = this._renderVerificationPhaseWaitAccept();
+                break;
+            case PHASE_PICK_VERIFICATION_OPTION:
+                body = this._renderVerificationPhasePick();
                 break;
             case PHASE_SHOW_SAS:
                 body = this._renderSasVerificationPhaseShowSas();
@@ -162,17 +198,17 @@ export default class DeviceVerifyDialog extends React.Component {
                 body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
                 break;
             case PHASE_VERIFIED:
-                body = this._renderSasVerificationPhaseVerified();
+                body = this._renderVerificationPhaseVerified();
                 break;
             case PHASE_CANCELLED:
-                body = this._renderSasVerificationPhaseCancelled();
+                body = this._renderVerificationPhaseCancelled();
                 break;
         }
 
         const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
         return (
             <BaseDialog
-                title={_t("Verify device")}
+                title={_t("Verify session")}
                 onFinished={this._onCancelClick}
             >
                 {body}
@@ -180,7 +216,7 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
-    _renderSasVerificationPhaseStart() {
+    _renderVerificationPhaseStart() {
         const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
@@ -194,10 +230,7 @@ export default class DeviceVerifyDialog extends React.Component {
                     { _t("Verify by comparing a short text string.") }
                 </p>
                 <p>
-                    {_t(
-                        "For maximum security, we recommend you do this in person or " +
-                        "use another trusted means of communication.",
-                    )}
+                    {_t("To be secure, do this in person or use a trusted way to communicate.")}
                 </p>
                 <DialogButtons
                     primaryButton={_t('Begin Verifying')}
@@ -209,7 +242,7 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
-    _renderSasVerificationPhaseWaitAccept() {
+    _renderVerificationPhaseWaitAccept() {
         const Spinner = sdk.getComponent("views.elements.Spinner");
         const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
 
@@ -230,12 +263,22 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
+    _renderVerificationPhasePick() {
+        return <VerificationQREmojiOptions
+            request={this._request}
+            onCancel={this._onCancelClick}
+            onStartEmoji={this._onUseSasClick}
+        />;
+    }
+
     _renderSasVerificationPhaseShowSas() {
         const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
         return <VerificationShowSas
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
+            isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
+            onStartEmoji={this._onUseSasClick}
         />;
     }
 
@@ -249,12 +292,12 @@ export default class DeviceVerifyDialog extends React.Component {
         </div>;
     }
 
-    _renderSasVerificationPhaseVerified() {
+    _renderVerificationPhaseVerified() {
         const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
         return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
     }
 
-    _renderSasVerificationPhaseCancelled() {
+    _renderVerificationPhaseCancelled() {
         const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
         return <VerificationCancelled onDone={this._onCancelClick} />;
     }
@@ -265,12 +308,12 @@ export default class DeviceVerifyDialog extends React.Component {
 
         let text;
         if (MatrixClientPeg.get().getUserId() === this.props.userId) {
-            text = _t("To verify that this device can be trusted, please check that the key you see " +
+            text = _t("To verify that this session can be trusted, please check that the key you see " +
                 "in User Settings on that device matches the key below:");
         } else {
-            text = _t("To verify that this device can be trusted, please contact its owner using some other " +
+            text = _t("To verify that this session can be trusted, please contact its owner using some other " +
                 "means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings " +
-                "for this device matches the key below:");
+                "for this session matches the key below:");
         }
 
         const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
@@ -286,14 +329,14 @@ export default class DeviceVerifyDialog extends React.Component {
                 </p>
                 <div className="mx_DeviceVerifyDialog_cryptoSection">
                     <ul>
-                        <li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                        <li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
-                        <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
+                        <li><label>{ _t("Session name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
+                        <li><label>{ _t("Session ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
+                        <li><label>{ _t("Session key") }:</label> <span><code><b>{ key }</b></code></span></li>
                     </ul>
                 </div>
                 <p>
                     { _t("If it matches, press the verify button below. " +
-                        "If it doesn't, then someone else is intercepting this device " +
+                        "If it doesn't, then someone else is intercepting this session " +
                         "and you probably want to press the blacklist button instead.") }
                 </p>
             </div>
@@ -301,7 +344,7 @@ export default class DeviceVerifyDialog extends React.Component {
 
         return (
             <QuestionDialog
-                title={_t("Verify device")}
+                title={_t("Verify session")}
                 description={body}
                 button={_t("I verify that the keys match")}
                 onFinished={this._onLegacyFinished}
@@ -321,7 +364,7 @@ export default class DeviceVerifyDialog extends React.Component {
 }
 
 async function ensureDMExistsAndOpen(userId) {
-    const roomId = ensureDMExists(MatrixClientPeg.get(), userId);
+    const roomId = await ensureDMExists(MatrixClientPeg.get(), userId);
     // don't use andView and spinner in createRoom, together, they cause this dialog to close and reopen,
     // we causes us to loose the verifier and restart, and we end up having two verification requests
     dis.dispatch({

src/components/views/dialogs/DevtoolsDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
@@ -22,6 +22,16 @@ import { _t } from '../../../languageHandler';
 import { Room } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+
+import {
+    PHASE_UNSENT,
+    PHASE_REQUESTED,
+    PHASE_READY,
+    PHASE_DONE,
+    PHASE_STARTED,
+    PHASE_CANCELLED,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 class GenericEditor extends React.PureComponent {
     // static propTypes = {onBack: PropTypes.func.isRequired};
@@ -605,12 +615,97 @@ class ServersInRoomList extends React.PureComponent {
     }
 }
 
+const PHASE_MAP = {
+    [PHASE_UNSENT]: "unsent",
+    [PHASE_REQUESTED]: "requested",
+    [PHASE_READY]: "ready",
+    [PHASE_DONE]: "done",
+    [PHASE_STARTED]: "started",
+    [PHASE_CANCELLED]: "cancelled",
+};
+
+function VerificationRequest({txnId, request}) {
+    const [, updateState] = useState();
+    const [timeout, setRequestTimeout] = useState(request.timeout);
+
+    /* Re-render if something changes state */
+    useEventEmitter(request, "change", updateState);
+
+    /* Keep re-rendering if there's a timeout */
+    useEffect(() => {
+        if (request.timeout == 0) return;
+
+        /* Note that request.timeout is a getter, so its value changes */
+        const id = setInterval(() => {
+           setRequestTimeout(request.timeout);
+        }, 500);
+
+        return () => { clearInterval(id); };
+    }, [request]);
+
+    return (<div className="mx_DevTools_VerificationRequest">
+        <dl>
+            <dt>Transaction</dt>
+            <dd>{txnId}</dd>
+            <dt>Phase</dt>
+            <dd>{PHASE_MAP[request.phase] || request.phase}</dd>
+            <dt>Timeout</dt>
+            <dd>{Math.floor(timeout / 1000)}</dd>
+            <dt>Methods</dt>
+            <dd>{request.methods && request.methods.join(", ")}</dd>
+            <dt>requestingUserId</dt>
+            <dd>{request.requestingUserId}</dd>
+            <dt>observeOnly</dt>
+            <dd>{JSON.stringify(request.observeOnly)}</dd>
+        </dl>
+    </div>);
+}
+
+class VerificationExplorer extends React.Component {
+    static getLabel() {
+        return _t("Verification Requests");
+    }
+
+    /* Ensure this.context is the cli */
+    static contextType = MatrixClientContext;
+
+    onNewRequest = () => {
+        this.forceUpdate();
+    }
+
+    componentDidMount() {
+        const cli = this.context;
+        cli.on("crypto.verification.request", this.onNewRequest);
+    }
+
+    componentWillUnmount() {
+        const cli = this.context;
+        cli.off("crypto.verification.request", this.onNewRequest);
+    }
+
+    render() {
+        const cli = this.context;
+        const room = this.props.room;
+        const inRoomChannel = cli._crypto._inRoomVerificationRequests;
+        const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
+
+        return (<div>
+            <div className="mx_Dialog_content">
+                {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
+                    <VerificationRequest txnId={txnId} request={request} key={txnId} />,
+                )}
+            </div>
+        </div>);
+    }
+}
+
 const Entries = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
     AccountDataExplorer,
     ServersInRoomList,
+    VerificationExplorer,
 ];
 
 export default class DevtoolsDialog extends React.PureComponent {

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.') }

src/components/views/dialogs/IncomingSasDialog.js

@@ -121,6 +121,8 @@ export default class IncomingSasDialog extends React.Component {
         const Spinner = sdk.getComponent("views.elements.Spinner");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
+        const isSelf = this.props.verifier.userId == MatrixClientPeg.get().getUserId();
+
         let profile;
         if (this.state.opponentProfile) {
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
@@ -148,20 +150,36 @@ export default class IncomingSasDialog extends React.Component {
             profile = <Spinner />;
         }
 
+        const userDetailText = [
+            <p key="p1">{_t(
+                "Verify this user to mark them as trusted. " +
+                "Trusting users gives you extra peace of mind when using " +
+                "end-to-end encrypted messages.",
+            )}</p>,
+            <p key="p2">{_t(
+                // NB. Below wording adjusted to singular 'session' until we have
+                // cross-signing
+                "Verifying this user will mark their session as trusted, and " +
+                "also mark your session as trusted to them.",
+            )}</p>,
+        ];
+
+        const selfDetailText = [
+            <p key="p1">{_t(
+                "Verify this device to mark it as trusted. " +
+                "Trusting this device gives you and other users extra peace of mind when using " +
+                "end-to-end encrypted messages.",
+            )}</p>,
+            <p key="p2">{_t(
+                "Verifying this device will mark it as trusted, and users who have verified with " +
+                "you will trust this device.",
+            )}</p>,
+        ];
+
         return (
             <div>
                 {profile}
-                <p>{_t(
-                    "Verify this user to mark them as trusted. " +
-                    "Trusting users gives you extra peace of mind when using " +
-                    "end-to-end encrypted messages.",
-                )}</p>
-                <p>{_t(
-                    // NB. Below wording adjusted to singular 'device' until we have
-                    // cross-signing
-                    "Verifying this user will mark their device as trusted, and " +
-                    "also mark your device as trusted to them.",
-                )}</p>
+                {isSelf ? selfDetailText : userDetailText}
                 <DialogButtons
                     primaryButton={_t('Continue')}
                     hasCancel={true}
@@ -178,6 +196,7 @@ export default class IncomingSasDialog extends React.Component {
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
+            isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
         />;
     }
 
@@ -227,6 +246,7 @@ export default class IncomingSasDialog extends React.Component {
             <BaseDialog
                 title={_t("Incoming Verification Request")}
                 onFinished={this._onFinished}
+                fixedWidth={false}
             >
                 {body}
             </BaseDialog>

src/components/views/dialogs/InviteDialog.js

@@ -31,8 +31,10 @@ import dis from "../../../dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
+import SettingsStore from '../../../settings/SettingsStore';
+import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -217,7 +219,7 @@ class DMRoomTile extends React.PureComponent {
         }
 
         // Push any text we missed (end of text)
-        if (i < (str.length - 1)) {
+        if (i < str.length) {
             result.push(<span key={i + 'end'}>{str.substring(i)}</span>);
         }
 
@@ -300,18 +302,16 @@ export default class InviteDialog extends React.PureComponent {
             throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
         }
 
-        let alreadyInvited = [];
+        const alreadyInvited = new Set([MatrixClientPeg.get().getUserId(), SdkConfig.get()['welcomeUserId']]);
         if (props.roomId) {
             const room = MatrixClientPeg.get().getRoom(props.roomId);
             if (!room) throw new Error("Room ID given to InviteDialog does not look like a room");
-            alreadyInvited = [
-                ...room.getMembersWithMembership('invite'),
-                ...room.getMembersWithMembership('join'),
-                ...room.getMembersWithMembership('ban'), // so we don't try to invite them
-            ].map(m => m.userId);
+            room.getMembersWithMembership('invite').forEach(m => alreadyInvited.add(m.userId));
+            room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
+            // add banned users, so we don't try to invite them
+            room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
         }
 
-
         this.state = {
             targets: [], // array of Member objects (see interface above)
             filterText: "",
@@ -332,24 +332,63 @@ export default class InviteDialog extends React.PureComponent {
         this._editorRef = createRef();
     }
 
-    _buildRecents(excludedTargetIds: string[]): {userId: string, user: RoomMember, lastActive: number} {
-        const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals();
+    _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
+        const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
+
+        // Also pull in all the rooms tagged as TAG_DM so we don't miss anything. Sometimes the
+        // room list doesn't tag the room for the DMRoomMap, but does for the room list.
+        const taggedRooms = RoomListStore.getRoomLists();
+        const dmTaggedRooms = taggedRooms[TAG_DM];
+        const myUserId = MatrixClientPeg.get().getUserId();
+        for (const dmRoom of dmTaggedRooms) {
+            const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);
+            for (const member of otherMembers) {
+                if (rooms[member.userId]) continue; // already have a room
+
+                console.warn(`Adding DM room for ${member.userId} as ${dmRoom.roomId} from tag, not DM map`);
+                rooms[member.userId] = dmRoom;
+            }
+        }
+
         const recents = [];
         for (const userId in rooms) {
             // Filter out user IDs that are already in the room / should be excluded
-            if (excludedTargetIds.includes(userId)) continue;
+            if (excludedTargetIds.has(userId)) {
+                console.warn(`[Invite:Recents] Excluding ${userId} from recents`);
+                continue;
+            }
 
             const room = rooms[userId];
             const member = room.getMember(userId);
-            if (!member) continue; // just skip people who don't have memberships for some reason
+            if (!member) {
+                // just skip people who don't have memberships for some reason
+                console.warn(`[Invite:Recents] ${userId} is missing a member object in their own DM (${room.roomId})`);
+                continue;
+            }
 
-            const lastEventTs = room.timeline && room.timeline.length
-                ? room.timeline[room.timeline.length - 1].getTs()
-                : 0;
-            if (!lastEventTs) continue; // something weird is going on with this room
+            // Find the last timestamp for a message event
+            const searchTypes = ["m.room.message", "m.room.encrypted", "m.sticker"];
+            const maxSearchEvents = 20; // to prevent traversing history
+            let lastEventTs = 0;
+            if (room.timeline && room.timeline.length) {
+                for (let i = room.timeline.length - 1; i >= 0; i--) {
+                    const ev = room.timeline[i];
+                    if (searchTypes.includes(ev.getType())) {
+                        lastEventTs = ev.getTs();
+                        break;
+                    }
+                    if (room.timeline.length - i > maxSearchEvents) break;
+                }
+            }
+            if (!lastEventTs) {
+                // something weird is going on with this room
+                console.warn(`[Invite:Recents] ${userId} (${room.roomId}) has a weird last timestamp: ${lastEventTs}`);
+                continue;
+            }
 
             recents.push({userId, user: member, lastActive: lastEventTs});
         }
+        if (!recents) console.warn("[Invite:Recents] No recents to suggest!");
 
         // Sort the recents by last active to save us time later
         recents.sort((a, b) => b.lastActive - a.lastActive);
@@ -357,13 +396,10 @@ export default class InviteDialog extends React.PureComponent {
         return recents;
     }
 
-    _buildSuggestions(excludedTargetIds: string[]): {userId: string, user: RoomMember} {
+    _buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember} {
         const maxConsideredMembers = 200;
-        const client = MatrixClientPeg.get();
-        const excludedUserIds = [client.getUserId(), SdkConfig.get()['welcomeUserId']];
-        const joinedRooms = client.getRooms()
-            .filter(r => r.getMyMembership() === 'join')
-            .filter(r => r.getJoinedMemberCount() <= maxConsideredMembers);
+        const joinedRooms = MatrixClientPeg.get().getRooms()
+            .filter(r => r.getMyMembership() === 'join' && r.getJoinedMemberCount() <= maxConsideredMembers);
 
         // Generates { userId: {member, rooms[]} }
         const memberRooms = joinedRooms.reduce((members, room) => {
@@ -372,10 +408,10 @@ export default class InviteDialog extends React.PureComponent {
                 return members; // Do nothing
             }
 
-            const joinedMembers = room.getJoinedMembers().filter(u => !excludedUserIds.includes(u.userId));
+            const joinedMembers = room.getJoinedMembers().filter(u => !excludedTargetIds.has(u.userId));
             for (const member of joinedMembers) {
                 // Filter out user IDs that are already in the room / should be excluded
-                if (excludedTargetIds.includes(member.userId)) {
+                if (excludedTargetIds.has(member.userId)) {
                     continue;
                 }
 
@@ -416,7 +452,7 @@ export default class InviteDialog extends React.PureComponent {
         // room to see who has sent a message in the last few hours, and giving them a score
         // which correlates to the freshness of their message. In theory, this results in suggestions
         // which are closer to "continue this conversation" rather than "this person exists".
-        const trueJoinedRooms = client.getRooms().filter(r => r.getMyMembership() === 'join');
+        const trueJoinedRooms = MatrixClientPeg.get().getRooms().filter(r => r.getMyMembership() === 'join');
         const now = (new Date()).getTime();
         const earliestAgeConsidered = now - (60 * 60 * 1000); // 1 hour ago
         const maxMessagesConsidered = 50; // so we don't iterate over a huge amount of traffic
@@ -432,7 +468,7 @@ export default class InviteDialog extends React.PureComponent {
             const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
             for (let i = events.length - 1; i >= Math.max(0, events.length - maxMessagesConsidered); i--) {
                 const ev = events[i];
-                if (excludedUserIds.includes(ev.getSender())) {
+                if (excludedTargetIds.has(ev.getSender())) {
                     continue;
                 }
                 if (ev.getTs() <= earliestAgeConsidered) {
@@ -493,9 +529,27 @@ export default class InviteDialog extends React.PureComponent {
         return false;
     }
 
-    _startDm = () => {
+    _convertFilter(): Member[] {
+        // Check to see if there's anything to convert first
+        if (!this.state.filterText || !this.state.filterText.includes('@')) return this.state.targets || [];
+
+        let newMember: Member;
+        if (this.state.filterText.startsWith('@')) {
+            // Assume mxid
+            newMember = new DirectoryMember({user_id: this.state.filterText, display_name: null, avatar_url: null});
+        } else {
+            // Assume email
+            newMember = new ThreepidMember(this.state.filterText);
+        }
+        const newTargets = [...(this.state.targets || []), newMember];
+        this.setState({targets: newTargets, filterText: ''});
+        return newTargets;
+    }
+
+    _startDm = async () => {
         this.setState({busy: true});
-        const targetIds = this.state.targets.map(t => t.userId);
+        const targets = this._convertFilter();
+        const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
         const existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
@@ -510,14 +564,30 @@ export default class InviteDialog extends React.PureComponent {
             return;
         }
 
+        const createRoomOptions = {inlineErrors: true};
+
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            // Check whether all users have uploaded device keys before.
+            // If so, enable encryption in the new room.
+            const client = MatrixClientPeg.get();
+            const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
+            if (allHaveDeviceKeys) {
+                createRoomOptions.encryption = true;
+            }
+        }
+
         // Check if it's a traditional DM and create the room if required.
         // TODO: [Canonical DMs] Remove this check and instead just create the multi-person DM
         let createRoomPromise = Promise.resolve();
-        if (targetIds.length === 1) {
-            createRoomPromise = createRoom({dmUserId: targetIds[0]});
+        const isSelf = targetIds.length === 1 && targetIds[0] === MatrixClientPeg.get().getUserId();
+        if (targetIds.length === 1 && !isSelf) {
+            createRoomOptions.dmUserId = targetIds[0];
+            createRoomPromise = createRoom(createRoomOptions);
+        } else if (isSelf) {
+            createRoomPromise = createRoom(createRoomOptions);
         } else {
             // Create a boring room and try to invite the targets manually.
-            createRoomPromise = createRoom().then(roomId => {
+            createRoomPromise = createRoom(createRoomOptions).then(roomId => {
                 return inviteMultipleToRoom(roomId, targetIds);
             }).then(result => {
                 if (this._shouldAbortAfterInviteError(result)) {
@@ -541,7 +611,9 @@ export default class InviteDialog extends React.PureComponent {
 
     _inviteUsers = () => {
         this.setState({busy: true});
-        const targetIds = this.state.targets.map(t => t.userId);
+        this._convertFilter();
+        const targets = this._convertFilter();
+        const targetIds = targets.map(t => t.userId);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         if (!room) {
@@ -586,13 +658,45 @@ export default class InviteDialog extends React.PureComponent {
             clearTimeout(this._debounceTimer);
         }
         this._debounceTimer = setTimeout(async () => {
-            MatrixClientPeg.get().searchUserDirectory({term}).then(r => {
+            MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
                 if (term !== this.state.filterText) {
                     // Discard the results - we were probably too slow on the server-side to make
                     // these results useful. This is a race we want to avoid because we could overwrite
                     // more accurate results.
                     return;
                 }
+
+                if (!r.results) r.results = [];
+
+                // While we're here, try and autocomplete a search result for the mxid itself
+                // if there's no matches (and the input looks like a mxid).
+                if (term[0] === '@' && term.indexOf(':') > 1) {
+                    try {
+                        const profile = await MatrixClientPeg.get().getProfileInfo(term);
+                        if (profile) {
+                            // If we have a profile, we have enough information to assume that
+                            // the mxid can be invited - add it to the list. We stick it at the
+                            // top so it is most obviously presented to the user.
+                            r.results.splice(0, 0, {
+                                user_id: term,
+                                display_name: profile['displayname'],
+                                avatar_url: profile['avatar_url'],
+                            });
+                        }
+                    } catch (e) {
+                        console.warn("Non-fatal error trying to make an invite for a user ID");
+                        console.warn(e);
+
+                        // Add a result anyways, just without a profile. We stick it at the
+                        // top so it is most obviously presented to the user.
+                        r.results.splice(0, 0, {
+                            user_id: term,
+                            display_name: term,
+                            avatar_url: null,
+                        });
+                    }
+                }
+
                 this.setState({
                     serverResultsMixin: r.results.map(u => ({
                         userId: u.user_id,
@@ -672,11 +776,16 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _toggleMember = (member: Member) => {
+        let filterText = this.state.filterText;
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(member);
-        if (idx >= 0) targets.splice(idx, 1);
-        else targets.push(member);
-        this.setState({targets});
+        if (idx >= 0) {
+            targets.splice(idx, 1);
+        } else {
+            targets.push(member);
+            filterText = ""; // clear the filter when the user accepts a suggestion
+        }
+        this.setState({targets, filterText});
     };
 
     _removeMember = (member: Member) => {
@@ -689,6 +798,12 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _onPaste = async (e) => {
+        if (this.state.filterText) {
+            // if the user has already typed something, just let them
+            // paste normally.
+            return;
+        }
+
         // Prevent the text being pasted into the textarea
         e.preventDefault();
 
@@ -703,7 +818,7 @@ export default class InviteDialog extends React.PureComponent {
         ];
         const toAdd = [];
         const failed = [];
-        const potentialAddresses = text.split(/[\s,]+/);
+        const potentialAddresses = text.split(/[\s,]+/).map(p => p.trim()).filter(p => !!p); // filter empty strings
         for (const address of potentialAddresses) {
             const member = possibleMembers.find(m => m.userId === address);
             if (member) {
@@ -791,24 +906,24 @@ export default class InviteDialog extends React.PureComponent {
         // Mix in the server results if we have any, but only if we're searching. We track the additional
         // members separately because we want to filter sourceMembers but trust the mixin arrays to have
         // the right members in them.
-        let additionalMembers = [];
+        let priorityAdditionalMembers = []; // Shows up before our own suggestions, higher quality
+        let otherAdditionalMembers = []; // Shows up after our own suggestions, lower quality
         const hasMixins = this.state.serverResultsMixin || this.state.threepidResultsMixin;
         if (this.state.filterText && hasMixins && kind === 'suggestions') {
             // We don't want to duplicate members though, so just exclude anyone we've already seen.
             const notAlreadyExists = (u: Member): boolean => {
                 return !sourceMembers.some(m => m.userId === u.userId)
-                    && !additionalMembers.some(m => m.userId === u.userId);
+                    && !priorityAdditionalMembers.some(m => m.userId === u.userId)
+                    && !otherAdditionalMembers.some(m => m.userId === u.userId);
             };
 
-            const uniqueServerResults = this.state.serverResultsMixin.filter(notAlreadyExists);
-            additionalMembers = additionalMembers.concat(...uniqueServerResults);
-
-            const uniqueThreepidResults = this.state.threepidResultsMixin.filter(notAlreadyExists);
-            additionalMembers = additionalMembers.concat(...uniqueThreepidResults);
+            otherAdditionalMembers = this.state.serverResultsMixin.filter(notAlreadyExists);
+            priorityAdditionalMembers = this.state.threepidResultsMixin.filter(notAlreadyExists);
         }
+        const hasAdditionalMembers = priorityAdditionalMembers.length > 0 || otherAdditionalMembers.length > 0;
 
         // Hide the section if there's nothing to filter by
-        if (sourceMembers.length === 0 && additionalMembers.length === 0) return null;
+        if (sourceMembers.length === 0 && !hasAdditionalMembers) return null;
 
         // Do some simple filtering on the input before going much further. If we get no results, say so.
         if (this.state.filterText) {
@@ -816,7 +931,7 @@ export default class InviteDialog extends React.PureComponent {
             sourceMembers = sourceMembers
                 .filter(m => m.user.name.toLowerCase().includes(filterBy) || m.userId.toLowerCase().includes(filterBy));
 
-            if (sourceMembers.length === 0 && additionalMembers.length === 0) {
+            if (sourceMembers.length === 0 && !hasAdditionalMembers) {
                 return (
                     <div className='mx_InviteDialog_section'>
                         <h3>{sectionName}</h3>
@@ -828,7 +943,7 @@ export default class InviteDialog extends React.PureComponent {
 
         // Now we mix in the additional members. Again, we presume these have already been filtered. We
         // also assume they are more relevant than our suggestions and prepend them to the list.
-        sourceMembers = [...additionalMembers, ...sourceMembers];
+        sourceMembers = [...priorityAdditionalMembers, ...sourceMembers, ...otherAdditionalMembers];
 
         // If we're going to hide one member behind 'show more', just use up the space of the button
         // with the member's tile instead.
@@ -876,9 +991,10 @@ export default class InviteDialog extends React.PureComponent {
                 key={"input"}
                 rows={1}
                 onChange={this._updateFilter}
-                defaultValue={this.state.filterText}
+                value={this.state.filterText}
                 ref={this._editorRef}
                 onPaste={this._onPaste}
+                autoFocus={true}
             />
         );
         return (
@@ -944,10 +1060,10 @@ export default class InviteDialog extends React.PureComponent {
 
             title = _t("Direct Messages");
             helpText = _t(
-                "If you can't find someone, ask them for their username, or share your " +
+                "If you can't find someone, ask them for their username, share your " +
                 "username (%(userId)s) or <a>profile link</a>.",
                 {userId},
-                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noopener" target="_blank">{sub}</a>},
+                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{sub}</a>},
             );
             buttonText = _t("Go");
             goButtonFn = this._startDm;
@@ -956,12 +1072,17 @@ export default class InviteDialog extends React.PureComponent {
             helpText = _t(
                 "If you can't find someone, ask them for their username (e.g. @user:server.com) or " +
                 "<a>share this room</a>.", {},
-                {a: (sub) => <a href={makeRoomPermalink(this.props.roomId)} rel="noopener" target="_blank">{sub}</a>},
+                {
+                    a: (sub) =>
+                        <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
+                },
             );
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
         }
 
+        const hasSelection = this.state.targets.length > 0
+            || (this.state.filterText && this.state.filterText.includes('@'));
         return (
             <BaseDialog
                 className='mx_InviteDialog'
@@ -970,7 +1091,7 @@ export default class InviteDialog extends React.PureComponent {
                 title={title}
             >
                 <div className='mx_InviteDialog_content'>
-                    <p>{helpText}</p>
+                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
                     <div className='mx_InviteDialog_addressBar'>
                         {this._renderEditor()}
                         <div className='mx_InviteDialog_buttonAndSpinner'>
@@ -978,7 +1099,7 @@ export default class InviteDialog extends React.PureComponent {
                                 kind="primary"
                                 onClick={goButtonFn}
                                 className='mx_InviteDialog_goButton'
-                                disabled={this.state.busy}
+                                disabled={this.state.busy || !hasSelection}
                             >
                                 {buttonText}
                             </AccessibleButton>
@@ -987,8 +1108,10 @@ export default class InviteDialog extends React.PureComponent {
                     </div>
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
-                    {this._renderSection('recents')}
-                    {this._renderSection('suggestions')}
+                    <div className='mx_InviteDialog_userSections'>
+                        {this._renderSection('recents')}
+                        {this._renderSection('suggestions')}
+                    </div>
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/KeyShareDialog.js

@@ -60,7 +60,7 @@ export default createReactClass({
             const deviceInfo = r[userId][deviceId];
 
             if (!deviceInfo) {
-                console.warn(`No details found for device ${userId}:${deviceId}`);
+                console.warn(`No details found for session ${userId}:${deviceId}`);
 
                 this.props.onFinished(false);
                 return;
@@ -121,10 +121,10 @@ export default createReactClass({
 
         let text;
         if (this.state.wasNewDevice) {
-            text = _td("You added a new device '%(displayName)s', which is"
+            text = _td("You added a new session '%(displayName)s', which is"
                 + " requesting encryption keys.");
         } else {
-            text = _td("Your unverified device '%(displayName)s' is requesting"
+            text = _td("Your unverified session '%(displayName)s' is requesting"
                 + " encryption keys.");
         }
         text = _t(text, {displayName: displayName});
@@ -159,7 +159,7 @@ export default createReactClass({
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    <p>{ _t('Loading device info...') }</p>
+                    <p>{ _t('Loading session info...') }</p>
                     <Spinner />
                 </div>
             );

src/components/views/dialogs/LogoutDialog.js

@@ -138,7 +138,7 @@ export default class LogoutDialog extends React.Component {
                 const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
                 let setupButtonCaption;
                 if (this.state.backupInfo) {
-                    setupButtonCaption = _t("Connect this device to Key Backup");
+                    setupButtonCaption = _t("Connect this session to Key Backup");
                 } else {
                     // if there's an error fetching the backup info, we'll just assume there's
                     // no backup for the purpose of the button caption

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -0,0 +1,116 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
+import VerificationRequestDialog from './VerificationRequestDialog';
+import BaseDialog from './BaseDialog';
+import DialogButtons from '../elements/DialogButtons';
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import * as sdk from '../../../index';
+
+@replaceableComponent("views.dialogs.NewSessionReviewDialog")
+export default class NewSessionReviewDialog extends React.PureComponent {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    onCancelClick = () => {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
+            headerImage: require("../../../../res/img/e2e/warning.svg"),
+            title: _t("Your account is not secure"),
+            description: <div>
+                {_t("One of the following may be compromised:")}
+                <ul>
+                    <li>{_t("Your password")}</li>
+                    <li>{_t("Your homeserver")}</li>
+                    <li>{_t("This session, or the other session")}</li>
+                    <li>{_t("The internet connection either session is using")}</li>
+                </ul>
+                <div>
+                    {_t("We recommend you change your password and recovery key in Settings immediately")}
+                </div>
+            </div>,
+            onFinished: () => this.props.onFinished(false),
+        });
+    }
+
+    onContinueClick = async () => {
+        const { userId, device } = this.props;
+        const cli = MatrixClientPeg.get();
+        const request = await cli.requestVerification(
+            userId,
+            [device.deviceId],
+        );
+
+        this.props.onFinished(true);
+        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
+            verificationRequest: request,
+        });
+    }
+
+    render() {
+        const { device } = this.props;
+
+        const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;
+        const titleText = _t("New session");
+
+        const title = <h2 className="mx_NewSessionReviewDialog_header">
+            {icon}
+            {titleText}
+        </h2>;
+
+        return (
+            <BaseDialog
+                title={title}
+                onFinished={this.props.onFinished}
+            >
+                <div className="mx_NewSessionReviewDialog_body">
+                    <p>{_t(
+                        "Use this session to verify your new one, " +
+                        "granting it access to encrypted messages:",
+                    )}</p>
+                    <div className="mx_NewSessionReviewDialog_deviceInfo">
+                        <div>
+                            <span className="mx_NewSessionReviewDialog_deviceName">
+                                {device.getDisplayName()}
+                            </span> <span className="mx_NewSessionReviewDialog_deviceID">
+                                ({device.deviceId})
+                            </span>
+                        </div>
+                    </div>
+                    <p>{_t(
+                        "If you didn’t sign in to this session, " +
+                        "your account may be compromised.",
+                    )}</p>
+                    <DialogButtons
+                        cancelButton={_t("This wasn't me")}
+                        cancelButtonClass="danger"
+                        primaryButton={_t("Continue")}
+                        onCancel={this.onCancelClick}
+                        onPrimaryButtonClick={this.onContinueClick}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/QuestionDialog.js

@@ -31,6 +31,8 @@ export default createReactClass({
         danger: PropTypes.bool,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
+        headerImage: PropTypes.string,
+        quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
     },
 
     getDefaultProps: function() {
@@ -41,6 +43,7 @@ export default createReactClass({
             focus: true,
             hasCancelButton: true,
             danger: false,
+            quitOnly: false,
         };
     },
 
@@ -63,6 +66,7 @@ export default createReactClass({
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
+                headerImage={this.props.headerImage}
                 hasCancel={this.props.hasCancelButton}
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
@@ -71,7 +75,7 @@ export default createReactClass({
                 <DialogButtons primaryButton={this.props.button || _t('OK')}
                     primaryButtonClass={primaryButtonClass}
                     cancelButton={this.props.cancelButton}
-                    hasCancel={this.props.hasCancelButton}
+                    hasCancel={this.props.hasCancelButton && !this.props.quitOnly}
                     onPrimaryButtonClick={this.onOk}
                     focus={this.props.focus}
                     onCancel={this.onCancel}

src/components/views/dialogs/ReportEventDialog.js

@@ -20,6 +20,8 @@ import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
 import {MatrixEvent} from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import SdkConfig from '../../../SdkConfig';
+import Markdown from '../../../Markdown';
 
 /*
  * A dialog for reporting an event.
@@ -95,6 +97,15 @@ export default class ReportEventDialog extends PureComponent {
             );
         }
 
+        const adminMessageMD =
+            SdkConfig.get().reportEvent &&
+            SdkConfig.get().reportEvent.adminMessageMD;
+        let adminMessage;
+        if (adminMessageMD) {
+            const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true });
+            adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
+        }
+
         return (
             <BaseDialog
                 className="mx_BugReportDialog"
@@ -110,7 +121,7 @@ export default class ReportEventDialog extends PureComponent {
                                 "administrator will not be able to read the message text or view any files or images.")
                         }
                     </p>
-
+                    {adminMessage}
                     <Field
                         id="mx_ReportEventDialog_reason"
                         className="mx_ReportEventDialog_reason"

src/components/views/dialogs/RoomSettingsDialog.js

@@ -54,9 +54,6 @@ export default class RoomSettingsDialog extends React.Component {
 
     _getTabs() {
         const tabs = [];
-        const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
-        const shouldShowBridgeIcon = featureFlag &&
-            BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
 
         tabs.push(new Tab(
             _td("General"),
@@ -79,9 +76,9 @@ export default class RoomSettingsDialog extends React.Component {
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 
-        if (shouldShowBridgeIcon) {
+        if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
-                _td("Bridge Info"),
+                _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
             ));

src/components/views/dialogs/SetPasswordDialog.js

@@ -114,7 +114,7 @@ export default createReactClass({
             >
                 <div className="mx_Dialog_content">
                     <p>
-                        { _t('This will allow you to return to your account after signing out, and sign in on other devices.') }
+                        { _t('This will allow you to return to your account after signing out, and sign in on other sessions.') }
                     </p>
                     <ChangePassword
                         className="mx_SetPasswordDialog_change_password"

src/components/views/dialogs/ShareDialog.js

@@ -218,7 +218,7 @@ export default class ShareDialog extends React.Component {
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {
-                            socials.map((social) => <a rel="noopener"
+                            socials.map((social) => <a rel="noreferrer noopener"
                                                        target="_blank"
                                                        key={social.name}
                                                        name={social.name}

src/components/views/dialogs/TermsDialog.js

@@ -135,7 +135,7 @@ export default class TermsDialog extends React.PureComponent {
                 rows.push(<tr key={termDoc[termsLang].url}>
                     <td className="mx_TermsDialog_service">{serviceName}</td>
                     <td className="mx_TermsDialog_summary">{summary}</td>
-                    <td>{termDoc[termsLang].name} <a rel="noopener" target="_blank" href={termDoc[termsLang].url}>
+                    <td>{termDoc[termsLang].name} <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
                         <span className="mx_TermsDialog_link" />
                     </a></td>
                     <td><TermsCheckbox

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -132,8 +132,8 @@ export default createReactClass({
         if (SettingsStore.getValue("blacklistUnverifiedDevices", this.props.room.roomId)) {
             warning = (
                 <h4>
-                    { _t("You are currently blacklisting unverified devices; to send " +
-                    "messages to these devices you must verify them.") }
+                    { _t("You are currently blacklisting unverified sessions; to send " +
+                    "messages to these sessions you must verify them.") }
                 </h4>
             );
         } else {
@@ -141,7 +141,7 @@ export default createReactClass({
                 <div>
                     <p>
                         { _t("We recommend you go through the verification process " +
-                            "for each device to confirm they belong to their legitimate owner, " +
+                            "for each session to confirm they belong to their legitimate owner, " +
                             "but you can resend the message without verifying if you prefer.") }
                     </p>
                 </div>
@@ -165,15 +165,15 @@ export default createReactClass({
         return (
             <BaseDialog className='mx_UnknownDeviceDialog'
                 onFinished={this.props.onFinished}
-                title={_t('Room contains unknown devices')}
+                title={_t('Room contains unknown sessions')}
                 contentId='mx_Dialog_content'
             >
                 <GeminiScrollbarWrapper autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
                     <h4>
-                        { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
+                        { _t('"%(RoomName)s" contains sessions that you haven\'t seen before.', {RoomName: this.props.room.name}) }
                     </h4>
                     { warning }
-                    { _t("Unknown devices") }:
+                    { _t("Unknown sessions") }:
 
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbarWrapper>

src/components/views/dialogs/VerificationRequestDialog.js

@@ -0,0 +1,55 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class VerificationRequestDialog extends React.Component {
+    static propTypes = {
+        verificationRequest: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(...args) {
+        super(...args);
+        this.onFinished = this.onFinished.bind(this);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
+        return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
+                contentId="mx_Dialog_content"
+                title={_t("Verification Request")}
+                hasCancel={true}
+            >
+            <EncryptionPanel
+                layout="dialog"
+                verificationRequest={this.props.verificationRequest}
+                onClose={this.props.onFinished}
+                member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)}
+            />
+        </BaseDialog>;
+    }
+
+    onFinished() {
+        this.props.verificationRequest.cancel();
+        this.props.onFinished();
+    }
+}

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

@@ -16,12 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk';
 import Modal from '../../../../Modal';
 import { _t } from '../../../../languageHandler';
-import {Key} from "../../../../Keyboard";
 import { accessSecretStorage } from '../../../../CrossSigningManager';
 
 const RESTORE_TYPE_PASSPHRASE = 0;
@@ -32,6 +32,16 @@ const RESTORE_TYPE_SECRET_STORAGE = 2;
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
 export default class RestoreKeyBackupDialog extends React.PureComponent {
+    static propTypes = {
+        // if false, will close the dialog as soon as the restore completes succesfully
+        // default: true
+        showSummary: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        showSummary: true,
+    };
+
     constructor(props) {
         super(props);
         this.state = {
@@ -96,6 +106,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
             );
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -110,6 +124,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
     }
 
     _onRecoveryKeyNext = async () => {
+        if (!this.state.recoveryKeyValid) return;
+
         this.setState({
             loading: true,
             restoreError: null,
@@ -119,6 +135,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
             );
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -138,18 +158,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseKeyPress = (e) => {
-        if (e.key === Key.ENTER) {
-            this._onPassPhraseNext();
-        }
-    }
-
-    _onRecoveryKeyKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
-            this._onRecoveryKeyNext();
-        }
-    }
-
     async _restoreWithSecretStorage() {
         this.setState({
             loading: true,
@@ -229,7 +237,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         } else if (this.state.restoreError) {
             if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
                 if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
-                    title = _t("Recovery Key Mismatch");
+                    title = _t("Recovery key mismatch");
                     content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this key: " +
@@ -237,7 +245,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                         )}</p>
                     </div>;
                 } else {
-                    title = _t("Incorrect Recovery Passphrase");
+                    title = _t("Incorrect recovery passphrase");
                     content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this passphrase: " +
@@ -253,7 +261,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             title = _t("Error");
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
-            title = _t("Backup Restored");
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            title = _t("Backup restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -264,11 +273,16 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = <div>
                 <p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
                 {failedToDecrypt}
+                <DialogButtons primaryButton={_t('OK')}
+                    onPrimaryButtonClick={this._onDone}
+                    hasCancel={false}
+                    focus={true}
+                />
             </div>;
         } else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter Recovery Passphrase");
+            title = _t("Enter recovery passphrase");
             content = <div>
                 <p>{_t(
                     "<b>Warning</b>: you should only set up key backup " +
@@ -280,21 +294,22 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     "messaging by entering your recovery passphrase.",
                 )}</p>
 
-                <div className="mx_RestoreKeyBackupDialog_primaryContainer">
+                <form className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input type="password"
                         className="mx_RestoreKeyBackupDialog_passPhraseInput"
                         onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
                         value={this.state.passPhrase}
                         autoFocus={true}
                     />
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
+                        primaryIsSubmit={true}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
@@ -315,7 +330,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter Recovery Key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -346,7 +361,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 <div className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
                         onChange={this._onRecoveryKeyChange}
-                        onKeyPress={this._onRecoveryKeyKeyPress}
                         value={this.state.recoveryKey}
                         autoFocus={true}
                     />

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,7 +21,6 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 
 import { _t } from '../../../../languageHandler';
-import { Key } from "../../../../Keyboard";
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -68,7 +67,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseNext = async () => {
+    _onPassPhraseNext = async (e) => {
+        e.preventDefault();
+
+        if (this.state.passPhrase.length <= 0) return;
+
         this.setState({ keyMatches: null });
         const input = { passphrase: this.state.passPhrase };
         const keyMatches = await this.props.checkPrivateKey(input);
@@ -79,7 +82,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         }
     }
 
-    _onRecoveryKeyNext = async () => {
+    _onRecoveryKeyNext = async (e) => {
+        e.preventDefault();
+
+        if (!this.state.recoveryKeyValid) return;
+
         this.setState({ keyMatches: null });
         const input = { recoveryKey: this.state.recoveryKey };
         const keyMatches = await this.props.checkPrivateKey(input);
@@ -97,18 +104,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.passPhrase.length > 0) {
-            this._onPassPhraseNext();
-        }
-    }
-
-    _onRecoveryKeyKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
-            this._onRecoveryKeyNext();
-        }
-    }
-
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -135,7 +130,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     )}
                 </div>;
             } else {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
             }
 
             content = <div>
@@ -146,26 +141,28 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other devices by entering your passphrase.",
+                    "identity for verifying other sessions by entering your passphrase.",
                 )}</p>
 
-                <div className="mx_AccessSecretStorageDialog_primaryContainer">
-                    <input type="password"
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
+                    <input
+                        type="password"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
                         onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
                         value={this.state.passPhrase}
                         autoFocus={true}
+                        autoComplete="new-password"
                     />
                     {keyStatus}
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
@@ -192,11 +189,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             let keyStatus;
             if (this.state.recoveryKey.length === 0) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
-            } else if (this.state.recoveryKeyValid) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
-                </div>;
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
@@ -204,6 +197,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         "entered the correct recovery key.",
                     )}
                 </div>;
+            } else if (this.state.recoveryKeyValid) {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
+                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
+                </div>;
             } else {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
@@ -218,25 +215,25 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other devices by entering your recovery key.",
+                    "identity for verifying other sessions by entering your recovery key.",
                 )}</p>
 
-                <div className="mx_AccessSecretStorageDialog_primaryContainer">
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext}>
                     <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
                         onChange={this._onRecoveryKeyChange}
-                        onKeyPress={this._onRecoveryKeyKeyPress}
                         value={this.state.recoveryKey}
                         autoFocus={true}
                     />
                     {keyStatus}
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onRecoveryKeyNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your recovery key you can "+
                     "<button>set up new recovery options</button>."

src/components/views/elements/AppTile.js

@@ -552,7 +552,7 @@ export default class AppTile extends React.Component {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener'}).click();
+            { target: '_blank', href: this._getSafeUrl(), rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {

src/components/views/elements/DialogButtons.js

@@ -34,12 +34,19 @@ export default createReactClass({
         // A node to insert into the cancel button instead of default "Cancel"
         cancelButton: PropTypes.node,
 
+        // If true, make the primary button a form submit button (input type="submit")
+        primaryIsSubmit: PropTypes.bool,
+
         // onClick handler for the primary button.
-        onPrimaryButtonClick: PropTypes.func.isRequired,
+        onPrimaryButtonClick: PropTypes.func,
 
         // should there be a cancel button? default: true
         hasCancel: PropTypes.bool,
 
+        // The class of the cancel button, only used if a cancel button is
+        // enabled
+        cancelButtonClass: PropTypes.node,
+
         // onClick handler for the cancel button.
         onCancel: PropTypes.func,
 
@@ -69,16 +76,26 @@ export default createReactClass({
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
         let cancelButton;
+
         if (this.props.cancelButton || this.props.hasCancel) {
-            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+            cancelButton = <button
+                // important: the default type is 'submit' and this button comes before the
+                // primary in the DOM so will get form submissions unless we make it not a submit.
+                type="button"
+                onClick={this._onCancelClick}
+                className={this.props.cancelButtonClass}
+                disabled={this.props.disabled}
+            >
                 { this.props.cancelButton || _t("Cancel") }
             </button>;
         }
+
         return (
             <div className="mx_Dialog_buttons">
                 { cancelButton }
                 { this.props.children }
-                <button className={primaryButtonClassName}
+                <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
+                    className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
                     disabled={this.props.disabled || this.props.primaryDisabled}

src/components/views/elements/ImageView.js

@@ -91,7 +91,7 @@ export default class ImageView extends React.Component {
     getName() {
         let name = this.props.name;
         if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
+            name = <a href={ this.props.link } target="_blank" rel="noreferrer noopener">{ name }</a>;
         }
         return name;
     }

src/components/views/elements/Pill.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { getDisplayAliasForRoom } from '../../../Rooms';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -128,7 +127,8 @@ const Pill = createReactClass({
             case Pill.TYPE_ROOM_MENTION: {
                 const localRoom = resourceId[0] === '#' ?
                     MatrixClientPeg.get().getRooms().find((r) => {
-                        return r.getAliases().includes(resourceId);
+                        return r.getCanonicalAlias() === resourceId ||
+                               r.getAltAliases().includes(resourceId);
                     }) : MatrixClientPeg.get().getRoom(resourceId);
                 room = localRoom;
                 if (!localRoom) {
@@ -211,7 +211,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = "@room";
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
                     pillClass = 'mx_AtRoomPill';
                 }
@@ -225,7 +225,7 @@ const Pill = createReactClass({
                         member.rawDisplayName = member.rawDisplayName || '';
                         linkText = member.rawDisplayName;
                         if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16} />;
+                            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
                         }
                         pillClass = 'mx_UserPill';
                         href = null;
@@ -236,12 +236,12 @@ const Pill = createReactClass({
             case Pill.TYPE_ROOM_MENTION: {
                 const room = this.state.room;
                 if (room) {
-                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    linkText = resource;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
-                    pillClass = 'mx_RoomPill';
                 }
+                pillClass = 'mx_RoomPill';
             }
                 break;
             case Pill.TYPE_GROUP_MENTION: {
@@ -251,7 +251,7 @@ const Pill = createReactClass({
 
                     linkText = groupId;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <BaseAvatar name={name || groupId} width={16} height={16}
+                        avatar = <BaseAvatar name={name || groupId} width={16} height={16} aria-hidden="true"
                                              url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
                     }
                     pillClass = 'mx_GroupPill';

src/components/views/elements/RoomAliasField.js

@@ -92,6 +92,7 @@ export default class RoomAliasField extends React.PureComponent {
                 invalid: () => _t("Please provide a room alias"),
             }, {
                 key: "taken",
+                final: true,
                 test: async ({value}) => {
                     if (!value) {
                         return true;

src/components/views/elements/SSOButton.js

@@ -0,0 +1,41 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PlatformPeg from "../../../PlatformPeg";
+import AccessibleButton from "./AccessibleButton";
+import {_t} from "../../../languageHandler";
+
+const SSOButton = ({matrixClient, loginType, ...props}) => {
+    const onClick = () => {
+        PlatformPeg.get().startSingleSignOn(matrixClient, loginType);
+    };
+
+    return (
+        <AccessibleButton {...props} kind="primary" onClick={onClick}>
+            {_t("Sign in with single sign-on")}
+        </AccessibleButton>
+    );
+};
+
+SSOButton.propTypes = {
+    matrixClient: PropTypes.object.isRequired, // does not use context as may use a temporary client
+    loginType: PropTypes.oneOf(["sso", "cas"]), // defaults to "sso" in base-apis
+};
+
+export default SSOButton;

src/components/views/elements/Validation.js

@@ -28,9 +28,11 @@ import classNames from 'classnames';
  *     An array of rules describing how to check to input value. Each rule in an object
  *     and may have the following properties:
  *     - `key`: A unique ID for the rule. Required.
+ *     - `skip`: A function used to determine whether the rule should even be evaluated.
  *     - `test`: A function used to determine the rule's current validity. Required.
  *     - `valid`: Function returning text to show when the rule is valid. Only shown if set.
  *     - `invalid`: Function returning text to show when the rule is invalid. Only shown if set.
+ *     - `final`: A Boolean if true states that this rule will only be considered if all rules before it returned valid.
  * @returns {Function}
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
@@ -51,9 +53,20 @@ export default function withValidation({ description, rules }) {
                 if (!rule.key || !rule.test) {
                     continue;
                 }
+
+                if (!valid && rule.final) {
+                    continue;
+                }
+
+                const data = { value, allowEmpty };
+
+                if (rule.skip && rule.skip.call(this, data)) {
+                    continue;
+                }
+
                 // We're setting `this` to whichever component holds the validation
                 // function. That allows rules to access the state of the component.
-                const ruleValid = await rule.test.call(this, { value, allowEmpty });
+                const ruleValid = await rule.test.call(this, data);
                 valid = valid && ruleValid;
                 if (ruleValid && rule.valid) {
                     // If the rule's result is valid and has text to show for

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

@@ -0,0 +1,167 @@
+/*
+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.
+*/
+
+import React from "react";
+import PropTypes from "prop-types";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import {MatrixClientPeg} from "../../../../MatrixClientPeg";
+import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import {ToDeviceChannel} from "matrix-js-sdk/src/crypto/verification/request/ToDeviceChannel";
+import {decodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
+import Spinner from "../Spinner";
+import * as QRCode from "qrcode";
+
+const CODE_VERSION = 0x02; // the version of binary QR codes we support
+const BINARY_PREFIX = "MATRIX"; // ASCII, used to prefix the binary format
+const MODE_VERIFY_OTHER_USER = 0x00; // Verifying someone who isn't us
+const MODE_VERIFY_SELF_TRUSTED = 0x01; // We trust the master key
+const MODE_VERIFY_SELF_UNTRUSTED = 0x02; // We do not trust the master key
+
+@replaceableComponent("views.elements.crypto.VerificationQRCode")
+export default class VerificationQRCode extends React.PureComponent {
+    static propTypes = {
+        prefix: PropTypes.string.isRequired,
+        version: PropTypes.number.isRequired,
+        mode: PropTypes.number.isRequired,
+        transactionId: PropTypes.string.isRequired, // or requestEventId
+        firstKeyB64: PropTypes.string.isRequired,
+        secondKeyB64: PropTypes.string.isRequired,
+        secretB64: PropTypes.string.isRequired,
+    };
+
+    static async getPropsForRequest(verificationRequest: VerificationRequest) {
+        const cli = MatrixClientPeg.get();
+        const myUserId = cli.getUserId();
+        const otherUserId = verificationRequest.otherUserId;
+
+        let mode = MODE_VERIFY_OTHER_USER;
+        if (myUserId === otherUserId) {
+            // Mode changes depending on whether or not we trust the master cross signing key
+            const myTrust = cli.checkUserTrust(myUserId);
+            if (myTrust.isCrossSigningVerified()) {
+                mode = MODE_VERIFY_SELF_TRUSTED;
+            } else {
+                mode = MODE_VERIFY_SELF_UNTRUSTED;
+            }
+        }
+
+        const requestEvent = verificationRequest.requestEvent;
+        const transactionId = requestEvent.getId()
+            ? requestEvent.getId()
+            : ToDeviceChannel.getTransactionId(requestEvent);
+
+        const qrProps = {
+            prefix: BINARY_PREFIX,
+            version: CODE_VERSION,
+            mode,
+            transactionId,
+            firstKeyB64: '', // worked out shortly
+            secondKeyB64: '', // worked out shortly
+            secretB64: verificationRequest.encodedSharedSecret,
+        };
+
+        const myCrossSigningInfo = cli.getStoredCrossSigningForUser(myUserId);
+        const myDevices = (await cli.getStoredDevicesForUser(myUserId)) || [];
+
+        if (mode === MODE_VERIFY_OTHER_USER) {
+            // First key is our master cross signing key
+            qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
+
+            // Second key is the other user's master cross signing key
+            const otherUserCrossSigningInfo = cli.getStoredCrossSigningForUser(otherUserId);
+            qrProps.secondKeyB64 = otherUserCrossSigningInfo.getId("master");
+        } else if (mode === MODE_VERIFY_SELF_TRUSTED) {
+            // First key is our master cross signing key
+            qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
+
+            // Second key is the other device's device key
+            const otherDevice = verificationRequest.targetDevice;
+            const otherDeviceId = otherDevice ? otherDevice.deviceId : null;
+            const device = myDevices.find(d => d.deviceId === otherDeviceId);
+            qrProps.secondKeyB64 = device.getFingerprint();
+        } else if (mode === MODE_VERIFY_SELF_UNTRUSTED) {
+            // First key is our device's key
+            qrProps.firstKeyB64 = cli.getDeviceEd25519Key();
+
+            // Second key is what we think our master cross signing key is
+            qrProps.secondKeyB64 = myCrossSigningInfo.getId("master");
+        }
+
+        return qrProps;
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataUri: null,
+        };
+        this.generateQrCode();
+    }
+
+    componentDidUpdate(prevProps): void {
+        if (JSON.stringify(this.props) === JSON.stringify(prevProps)) return; // No prop change
+
+        this.generateQRCode();
+    }
+
+    async generateQrCode() {
+        let buf = Buffer.alloc(0); // we'll concat our way through life
+
+        const appendByte = (b: number) => {
+            const tmpBuf = Buffer.from([b]);
+            buf = Buffer.concat([buf, tmpBuf]);
+        };
+        const appendInt = (i: number) => {
+            const tmpBuf = Buffer.alloc(2);
+            tmpBuf.writeInt16BE(i, 0);
+            buf = Buffer.concat([buf, tmpBuf]);
+        };
+        const appendStr = (s: string, enc: string, withLengthPrefix = true) => {
+            const tmpBuf = Buffer.from(s, enc);
+            if (withLengthPrefix) appendInt(tmpBuf.byteLength);
+            buf = Buffer.concat([buf, tmpBuf]);
+        };
+        const appendEncBase64 = (b64: string) => {
+            const b = decodeBase64(b64);
+            const tmpBuf = Buffer.from(b);
+            buf = Buffer.concat([buf, tmpBuf]);
+        };
+
+        // Actually build the buffer for the QR code
+        appendStr(this.props.prefix, "ascii", false);
+        appendByte(this.props.version);
+        appendByte(this.props.mode);
+        appendStr(this.props.transactionId, "utf-8");
+        appendEncBase64(this.props.firstKeyB64);
+        appendEncBase64(this.props.secondKeyB64);
+        appendEncBase64(this.props.secretB64);
+
+        // Now actually assemble the QR code's data URI
+        const uri = await QRCode.toDataURL([{data: buf, mode: 'byte'}], {
+            errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
+        });
+        this.setState({dataUri: uri});
+    }
+
+    render() {
+        if (!this.state.dataUri) {
+            return <div className='mx_VerificationQRCode'><Spinner /></div>;
+        }
+
+        return <img src={this.state.dataUri} className='mx_VerificationQRCode' />;
+    }
+}

src/components/views/emojipicker/EmojiPicker.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-import * as recent from './recent';
+import * as recent from '../../../emojipicker/recent';
 import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
 
 export const CATEGORY_HEADER_HEIGHT = 22;

src/components/views/emojipicker/recent.js

@@ -1,35 +0,0 @@
-/*
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-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.
-*/
-
-const REACTION_COUNT = JSON.parse(window.localStorage.mx_reaction_count || '{}');
-let sorted = null;
-
-export function add(emoji) {
-    const [count] = REACTION_COUNT[emoji] || [0];
-    REACTION_COUNT[emoji] = [count + 1, Date.now()];
-    window.localStorage.mx_reaction_count = JSON.stringify(REACTION_COUNT);
-    sorted = null;
-}
-
-export function get(limit = 24) {
-    if (sorted === null) {
-        sorted = Object.entries(REACTION_COUNT)
-            .sort(([, [count1, date1]], [, [count2, date2]]) =>
-                count2 === count1 ? date2 - date1 : count2 - count1)
-            .map(([emoji, count]) => emoji);
-    }
-    return sorted.slice(0, limit);
-}

src/components/views/groups/GroupInviteTile.js

@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
 
 // XXX this class copies a lot from RoomTile.js
 export default createReactClass({
@@ -127,7 +128,8 @@ export default createReactClass({
             'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed,
         });
 
-        const label = <div title={this.props.group.groupId} className={nameClasses} dir="auto">
+        // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
+        const label = <div title={this.props.group.groupId} className={nameClasses} tabIndex={-1} dir="auto">
             { groupName }
         </div>;
 
@@ -137,16 +139,6 @@ export default createReactClass({
         });
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
-        const badge = (
-            <ContextMenuButton
-                className={badgeClasses}
-                onClick={this.onContextMenuButtonClick}
-                label={_t("Options")}
-                isExpanded={isMenuDisplayed}
-            >
-                { badgeContent }
-            </ContextMenuButton>
-        );
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {
@@ -171,22 +163,37 @@ export default createReactClass({
         }
 
         return <React.Fragment>
-            <AccessibleButton
-                className={classes}
-                onClick={this.onClick}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-                onContextMenu={this.onContextMenu}
-            >
-                <div className="mx_RoomTile_avatar">
-                    { av }
-                </div>
-                <div className="mx_RoomTile_nameContainer">
-                    { label }
-                    { badge }
-                </div>
-                { tooltip }
-            </AccessibleButton>
+            <RovingTabIndexWrapper>
+                {({onFocus, isActive, ref}) =>
+                    <AccessibleButton
+                        onFocus={onFocus}
+                        tabIndex={isActive ? 0 : -1}
+                        inputRef={ref}
+                        className={classes}
+                        onClick={this.onClick}
+                        onMouseEnter={this.onMouseEnter}
+                        onMouseLeave={this.onMouseLeave}
+                        onContextMenu={this.onContextMenu}
+                    >
+                        <div className="mx_RoomTile_avatar">
+                            { av }
+                        </div>
+                        <div className="mx_RoomTile_nameContainer">
+                            { label }
+                            <ContextMenuButton
+                                className={badgeClasses}
+                                onClick={this.onContextMenuButtonClick}
+                                label={_t("Options")}
+                                isExpanded={isMenuDisplayed}
+                                tabIndex={isActive ? 0 : -1}
+                            >
+                                { badgeContent }
+                            </ContextMenuButton>
+                        </div>
+                        { tooltip }
+                    </AccessibleButton>
+                }
+            </RovingTabIndexWrapper>
 
             { contextMenu }
         </React.Fragment>;

src/components/views/groups/GroupMemberTile.js

@@ -60,6 +60,7 @@ export default createReactClass({
 
         const av = (
             <BaseAvatar
+                aria-hidden="true"
                 name={this.props.member.displayname || this.props.member.userId}
                 idName={this.props.member.userId}
                 width={36} height={36}

src/components/views/messages/EditHistoryMessage.js

@@ -20,7 +20,7 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
 import {formatTime} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk';
-import {pillifyLinks} from '../../../utils/pillify';
+import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -53,6 +53,7 @@ export default class EditHistoryMessage extends React.PureComponent {
         this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
 
         this._content = createRef();
+        this._pills = [];
     }
 
     _onAssociatedStatusChanged = () => {
@@ -81,7 +82,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     pillifyLinks() {
         // not present for redacted events
         if (this._content.current) {
-            pillifyLinks(this._content.current.children, this.props.mxEvent);
+            pillifyLinks(this._content.current.children, this.props.mxEvent, this._pills);
         }
     }
 
@@ -90,6 +91,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     }
 
     componentWillUnmount() {
+        unmountPills(this._pills);
         const event = this.props.mxEvent;
         if (event.localRedactionEvent()) {
             event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);

src/components/views/messages/EncryptionEvent.js

@@ -0,0 +1,58 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+
+export default class EncryptionEvent extends React.Component {
+    render() {
+        const {mxEvent} = this.props;
+
+        let body;
+        let classes = "mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon";
+        if (
+            mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' &&
+            MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId())
+        ) {
+            body = <div>
+                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
+                <div className="mx_cryptoEvent_subtitle">
+                    {_t(
+                        "Messages in this room are end-to-end encrypted. " +
+                        "Learn more & verify this user in their user profile.",
+                    )}
+                </div>
+            </div>;
+        } else {
+            body = <div>
+                <div className="mx_cryptoEvent_title">{_t("Encryption not enabled")}</div>
+                <div className="mx_cryptoEvent_subtitle">{_t("The encryption used by this room isn't supported.")}</div>
+            </div>;
+            classes += " mx_cryptoEvent_icon_warning";
+        }
+
+        return (<div className={classes}>
+            {body}
+        </div>);
+    }
+}
+
+EncryptionEvent.propTypes = {
+    /* the MatrixEvent to show */
+    mxEvent: PropTypes.object.isRequired,
+};

src/components/views/messages/MFileBody.js

@@ -26,7 +26,7 @@ import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
 import request from 'browser-request';
 import Modal from '../../../Modal';
-import SdkConfig from "../../../SdkConfig";
+import AccessibleButton from "../elements/AccessibleButton";
 
 
 // A cached tinted copy of require("../../../../res/img/download.svg")
@@ -94,84 +94,6 @@ Tinter.registerTintable(updateTintedDownloadImage);
 // The downside of using a second domain is that it complicates hosting,
 // the downside of using a sandboxed iframe is that the browers are overly
 // restrictive in what you are allowed to do with the generated URL.
-//
-// For now given how unusable the blobs generated in sandboxed iframes are we
-// default to using a renderer hosted on "usercontent.riot.im". This is
-// overridable so that people running their own version of the client can
-// choose a different renderer.
-//
-// To that end the current version of the blob generation is the following
-// html:
-//
-//      <html><head><script>
-//      var params = window.location.search.substring(1).split('&');
-//      var lockOrigin;
-//      for (var i = 0; i < params.length; ++i) {
-//          var parts = params[i].split('=');
-//          if (parts[0] == 'origin') lockOrigin = decodeURIComponent(parts[1]);
-//      }
-//      window.onmessage=function(e){
-//          if (lockOrigin === undefined || e.origin === lockOrigin) eval("("+e.data.code+")")(e);
-//      }
-//      </script></head><body></body></html>
-//
-// This waits to receive a message event sent using the window.postMessage API.
-// When it receives the event it evals a javascript function in data.code and
-// runs the function passing the event as an argument. This version adds
-// support for a query parameter controlling the origin from which messages
-// will be processed as an extra layer of security (note that the default URL
-// is still 'v1' since it is backwards compatible).
-//
-// In particular it means that the rendering function can be written as a
-// ordinary javascript function which then is turned into a string using
-// toString().
-//
-const DEFAULT_CROSS_ORIGIN_RENDERER = "https://usercontent.riot.im/v1.html";
-
-/**
- * Render the attachment inside the iframe.
- * We can't use imported libraries here so this has to be vanilla JS.
- */
-function remoteRender(event) {
-    const data = event.data;
-
-    const img = document.createElement("img");
-    img.id = "img";
-    img.src = data.imgSrc;
-
-    const a = document.createElement("a");
-    a.id = "a";
-    a.rel = data.rel;
-    a.target = data.target;
-    a.download = data.download;
-    a.style = data.style;
-    a.style.fontFamily = "Arial, Helvetica, Sans-Serif";
-    a.href = window.URL.createObjectURL(data.blob);
-    a.appendChild(img);
-    a.appendChild(document.createTextNode(data.textContent));
-
-    const body = document.body;
-    // Don't display scrollbars if the link takes more than one line
-    // to display.
-    body.style = "margin: 0px; overflow: hidden";
-    body.appendChild(a);
-}
-
-/**
- * Update the tint inside the iframe.
- * We can't use imported libraries here so this has to be vanilla JS.
- */
-function remoteSetTint(event) {
-    const data = event.data;
-
-    const img = document.getElementById("img");
-    img.src = data.imgSrc;
-    img.style = data.imgStyle;
-
-    const a = document.getElementById("a");
-    a.style = data.style;
-}
-
 
 /**
  * Get the current CSS style for a DOMElement.
@@ -283,7 +205,6 @@ export default createReactClass({
             // will be inside the iframe so we wont be able to update
             // it directly.
             this._iframe.current.contentWindow.postMessage({
-                code: remoteSetTint.toString(),
                 imgSrc: tintedDownloadImageURL,
                 style: computedStyle(this._dummyLink.current),
             }, "*");
@@ -306,7 +227,7 @@ export default createReactClass({
                 // Wait for the user to click on the link before downloading
                 // and decrypting the attachment.
                 let decrypting = false;
-                const decrypt = () => {
+                const decrypt = (e) => {
                     if (decrypting) {
                         return false;
                     }
@@ -323,16 +244,17 @@ export default createReactClass({
                         });
                     }).finally(() => {
                         decrypting = false;
-                        return;
                     });
                 };
 
+                // This button should actually Download because usercontent/ will try to click itself
+                // but it is not guaranteed between various browsers' settings.
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MFileBody_download">
-                            <a href="javascript:void(0)" onClick={decrypt}>
+                            <AccessibleButton onClick={decrypt}>
                                 { _t("Decrypt %(text)s", { text: text }) }
-                            </a>
+                            </AccessibleButton>
                         </div>
                     </span>
                 );
@@ -341,7 +263,6 @@ export default createReactClass({
             // When the iframe loads we tell it to render a download link
             const onIframeLoad = (ev) => {
                 ev.target.contentWindow.postMessage({
-                    code: remoteRender.toString(),
                     imgSrc: tintedDownloadImageURL,
                     style: computedStyle(this._dummyLink.current),
                     blob: this.state.decryptedBlob,
@@ -349,19 +270,15 @@ export default createReactClass({
                     // will have the correct name when the user tries to download it.
                     // We can't provide a Content-Disposition header like we would for HTTP.
                     download: fileName,
-                    rel: "noopener",
-                    target: "_blank",
                     textContent: _t("Download %(text)s", { text: text }),
+                    // only auto-download if a user triggered this iframe explicitly
+                    auto: !this.props.decryptedBlob,
                 }, "*");
             };
 
-            // If the attachment is encryped then put the link inside an iframe.
-            let renderer_url = DEFAULT_CROSS_ORIGIN_RENDERER;
-            const appConfig = SdkConfig.get();
-            if (appConfig && appConfig.cross_origin_renderer_url) {
-                renderer_url = appConfig.cross_origin_renderer_url;
-            }
-            renderer_url += "?origin=" + encodeURIComponent(window.location.origin);
+            const url = "usercontent/"; // XXX: this path should probably be passed from the skin
+
+            // If the attachment is encrypted then put the link inside an iframe.
             return (
                 <span className="mx_MFileBody">
                     <div className="mx_MFileBody_download">
@@ -373,14 +290,18 @@ export default createReactClass({
                               */ }
                             <a ref={this._dummyLink} />
                         </div>
-                        <iframe src={renderer_url} onLoad={onIframeLoad} ref={this._iframe} />
+                        <iframe
+                            src={`${url}?origin=${encodeURIComponent(window.location.origin)}`}
+                            onLoad={onIframeLoad}
+                            ref={this._iframe}
+                            sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
                     </div>
                 </span>
             );
         } else if (contentUrl) {
             const downloadProps = {
                 target: "_blank",
-                rel: "noopener",
+                rel: "noreferrer noopener",
 
                 // We set the href regardless of whether or not we intercept the download
                 // because we don't really want to convert the file to a blob eagerly, and

src/components/views/messages/MKeyVerificationConclusion.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.
@@ -32,6 +32,7 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request) {
             request.on("change", this._onRequestChanged);
         }
+        MatrixClientPeg.get().on("userTrustStatusChanged", this._onTrustChanged);
     }
 
     componentWillUnmount() {
@@ -39,12 +40,25 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request) {
             request.off("change", this._onRequestChanged);
         }
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("userTrustStatusChanged", this._onTrustChanged);
+        }
     }
 
     _onRequestChanged = () => {
         this.forceUpdate();
     };
 
+    _onTrustChanged = (userId, status) => {
+        const { mxEvent } = this.props;
+        const request = mxEvent.verificationRequest;
+        if (!request || request.otherUserId !== userId) {
+            return;
+        }
+        this.forceUpdate();
+    };
+
     _shouldRender(mxEvent, request) {
         // normally should not happen
         if (!request) {
@@ -63,6 +77,14 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request.pending) {
             return false;
         }
+
+        // User isn't actually verified
+        if (!MatrixClientPeg.get()
+                            .checkUserTrust(request.otherUserId)
+                            .isCrossSigningVerified()) {
+            return false;
+        }
+
         return true;
     }
 
@@ -93,13 +115,13 @@ export default class MKeyVerificationConclusion extends React.Component {
         }
 
         if (title) {
-            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent);
-            const classes = classNames("mx_EventTile_bubble", "mx_KeyVerification", "mx_KeyVerification_icon", {
-                mx_KeyVerification_icon_verified: request.done,
+            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId());
+            const classes = classNames("mx_EventTile_bubble", "mx_cryptoEvent", "mx_cryptoEvent_icon", {
+                mx_cryptoEvent_icon_verified: request.done,
             });
             return (<div className={classes}>
-                <div className="mx_KeyVerification_title">{title}</div>
-                <div className="mx_KeyVerification_subtitle">{subtitle}</div>
+                <div className="mx_cryptoEvent_title">{title}</div>
+                <div className="mx_cryptoEvent_subtitle">{subtitle}</div>
             </div>);
         }
 

src/components/views/messages/MKeyVerificationRequest.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.
@@ -27,6 +27,7 @@ import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 export default class MKeyVerificationRequest extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {};
     }
 
     componentDidMount() {
@@ -45,10 +46,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},
         });
     };
 
@@ -60,8 +62,8 @@ export default class MKeyVerificationRequest extends React.Component {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
-                await request.accept();
                 this._openRequest();
+                await request.accept();
             } catch (err) {
                 console.error(err.message);
             }
@@ -85,17 +87,27 @@ export default class MKeyVerificationRequest extends React.Component {
         if (userId === myUserId) {
             return _t("You accepted");
         } else {
-            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
         }
     }
 
     _cancelledLabel(userId) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
+        const {cancellationCode} = this.props.mxEvent.verificationRequest;
+        const declined = cancellationCode === "m.user";
         if (userId === myUserId) {
-            return _t("You cancelled");
+            if (declined) {
+                return _t("You declined");
+            } else {
+                return _t("You cancelled");
+            }
         } else {
-            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            if (declined) {
+                return _t("%(name)s declined", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            } else {
+                return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            }
         }
     }
 
@@ -114,39 +126,44 @@ export default class MKeyVerificationRequest extends React.Component {
         let subtitle;
         let stateNode;
 
-        const accepted = request.ready || request.started || request.done;
-        if (accepted || request.cancelled) {
+        if (!request.canAccept) {
             let stateLabel;
+            const accepted = request.ready || request.started || request.done;
             if (accepted) {
                 stateLabel = (<AccessibleButton onClick={this._openRequest}>
                     {this._acceptedLabel(request.receivingUserId)}
                 </AccessibleButton>);
-            } else {
+            } else if (request.cancelled) {
                 stateLabel = this._cancelledLabel(request.cancellingUserId);
+            } else if (request.accepting) {
+                stateLabel = _t("Accepting …");
+            } else if (request.declining) {
+                stateLabel = _t("Declining …");
             }
-            stateNode = (<div className="mx_KeyVerification_state">{stateLabel}</div>);
+            stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>);
         }
 
         if (!request.initiatedByMe) {
-            title = (<div className="mx_KeyVerification_title">{
-                _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}</div>);
-            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.requestingUserId, mxEvent)}</div>);
-            if (request.requested && !request.observeOnly) {
-                stateNode = (<div className="mx_KeyVerification_buttons">
+            const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
+            title = (<div className="mx_cryptoEvent_title">{
+                _t("%(name)s wants to verify", {name})}</div>);
+            subtitle = (<div className="mx_cryptoEvent_subtitle">{
+                userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
+            if (request.canAccept) {
+                stateNode = (<div className="mx_cryptoEvent_buttons">
                     <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
                     <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
                 </div>);
             }
         } else { // request sent by us
-            title = (<div className="mx_KeyVerification_title">{
+            title = (<div className="mx_cryptoEvent_title">{
                 _t("You sent a verification request")}</div>);
-            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.receivingUserId, mxEvent)}</div>);
+            subtitle = (<div className="mx_cryptoEvent_subtitle">{
+                userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}</div>);
         }
 
         if (title) {
-            return (<div className="mx_EventTile_bubble mx_KeyVerification mx_KeyVerification_icon">
+            return (<div className="mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon">
                 {title}
                 {subtitle}
                 {stateNode}

src/components/views/messages/TextualBody.js

@@ -30,7 +30,7 @@ import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import ReplyThread from "../elements/ReplyThread";
-import {pillifyLinks} from '../../../utils/pillify';
+import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
@@ -92,6 +92,7 @@ export default createReactClass({
 
     componentDidMount: function() {
         this._unmounted = false;
+        this._pills = [];
         if (!this.props.editState) {
             this._applyFormatting();
         }
@@ -103,7 +104,7 @@ export default createReactClass({
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
-        pillifyLinks([this._content.current], this.props.mxEvent);
+        pillifyLinks([this._content.current], this.props.mxEvent, this._pills);
         HtmlUtils.linkifyElement(this._content.current);
         this.calculateUrlPreview();
 
@@ -146,6 +147,7 @@ export default createReactClass({
 
     componentWillUnmount: function() {
         this._unmounted = true;
+        unmountPills(this._pills);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -372,7 +374,9 @@ export default createReactClass({
                     const height = window.screen.height > 800 ? 800 : window.screen.height;
                     const left = (window.screen.width - width) / 2;
                     const top = (window.screen.height - height) / 2;
-                    window.open(completeUrl, '_blank', `height=${height}, width=${width}, top=${top}, left=${left},`);
+                    const features = `height=${height}, width=${width}, top=${top}, left=${left},`;
+                    const wnd = window.open(completeUrl, '_blank', features);
+                    wnd.opener = null;
                 },
             });
         });

src/components/views/messages/ViewSourceEvent.js

@@ -32,6 +32,13 @@ export default class ViewSourceEvent extends React.PureComponent {
         };
     }
 
+    componentDidMount() {
+        const {mxEvent} = this.props;
+        if (mxEvent.isBeingDecrypted()) {
+            mxEvent.once("Event.decrypted", () => this.forceUpdate());
+        }
+    }
+
     onToggle = (ev) => {
         ev.preventDefault();
         const { expanded } = this.state;

src/components/views/right_panel/EncryptionInfo.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,18 +14,63 @@ 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 = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification}) => {
+    let content;
+    if (waitingForOtherParty || waitingForNetwork) {
+        let text;
+        if (waitingForOtherParty) {
+            text = _t("Waiting for %(displayName)s to accept…", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+        } else {
+            text = _t("Accepting…");
+        }
+        content = <PendingActionSpinner text={text} />;
+    } else {
         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>);
+        content = (
+            <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" 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("To be secure, do this in person or use a trusted way to communicate.")}</p>
+                { content }
+            </div>
+        </div>
+    </React.Fragment>;
+};
+EncryptionInfo.propTypes = {
+    member: PropTypes.object.isRequired,
+    onStartVerification: PropTypes.func.isRequired,
+    request: PropTypes.object,
+};
+
+export default EncryptionInfo;

src/components/views/right_panel/EncryptionPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,35 +14,111 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useEffect, useState} from "react";
+import PropTypes from "prop-types";
+
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import Modal from "../../../Modal";
+import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import * as sdk from "../../../index";
+import {_t} from "../../../languageHandler";
 
-export default class EncryptionPanel extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
+// cancellation codes which constitute a key mismatch
+const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-    render() {
-        const request = this.props.verificationRequest || this.state.verificationRequest;
-        const {member} = this.props;
-        if (request) {
-            return <VerificationPanel request={request} key={request.channel.transactionId} />;
-        } else if (member) {
-            return <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
-        } else {
-            return <p>Not a member nor request, not sure what to render</p>;
+const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => {
+    const [request, setRequest] = useState(verificationRequest);
+    // state to show a spinner immediately after clicking "start verification",
+    // before we have a request
+    const [isRequesting, setRequesting] = useState(false);
+    const [phase, setPhase] = useState(request && request.phase);
+    useEffect(() => {
+        setRequest(verificationRequest);
+        if (verificationRequest) {
+            setRequesting(false);
+            setPhase(verificationRequest.phase);
         }
-    }
+    }, [verificationRequest]);
 
-    _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});
-    };
-}
+    useEffect(() => {
+        async function awaitPromise() {
+            setRequesting(true);
+            const request = await verificationRequestPromise;
+            setRequesting(false);
+            setRequest(request);
+            setPhase(request.phase);
+        }
+        if (verificationRequestPromise) {
+            awaitPromise();
+        }
+    }, [verificationRequestPromise]);
+    const changeHandler = useCallback(() => {
+        // 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’ session")}</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);
+
+    const onStartVerification = useCallback(async () => {
+        setRequesting(true);
+        const cli = MatrixClientPeg.get();
+        const roomId = await ensureDMExists(cli, member.userId);
+        const verificationRequest = await cli.requestVerificationDM(member.userId, roomId);
+        setRequest(verificationRequest);
+        setPhase(verificationRequest.phase);
+    }, [member.userId]);
+
+    const requested =
+        (!request && isRequesting) ||
+        (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
+    if (!request || requested) {
+        const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
+        return <EncryptionInfo
+            onStartVerification={onStartVerification}
+            member={member}
+            waitingForOtherParty={requested && initiatedByMe}
+            waitingForNetwork={requested && !initiatedByMe} />;
+    } else {
+        return (
+            <VerificationPanel
+                layout={layout}
+                onClose={onClose}
+                member={member}
+                request={request}
+                key={request.channel.transactionId}
+                phase={phase} />
+        );
+    }
+};
+EncryptionPanel.propTypes = {
+    member: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    verificationRequest: PropTypes.object,
+    layout: PropTypes.string,
+};
+
+export default EncryptionPanel;

src/components/views/right_panel/RoomHeaderButtons.js

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

src/components/views/right_panel/UserInfo.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-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.
@@ -25,7 +25,7 @@ import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import createRoom from '../../../createRoom';
+import createRoom, {findDMForUser} from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
@@ -41,6 +41,8 @@ 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";
+import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -59,14 +61,16 @@ 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";
     }
     const isMe = userId === cli.getUserId();
     const userVerified = cli.checkUserTrust(userId).isCrossSigningVerified();
-    const allDevicesVerified = devices.every(device => {
+    if (!userVerified) return "normal";
+
+    const anyDeviceUnverified = devices.some(device => {
         const { deviceId } = device;
         // For your own devices, we use the stricter check of cross-signing
         // verification to encourage everyone to trust their own devices via
@@ -74,15 +78,12 @@ const _getE2EStatus = (cli, userId, devices) => {
         // For other people's devices, the more general verified check that
         // includes locally verified devices can be used.
         const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
-        return isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
+        return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
     });
-    if (allDevicesVerified) {
-        return userVerified ? "verified" : "normal";
-    }
-    return "warning";
+    return anyDeviceUnverified ? "warning" : "verified";
 };
 
-function openDMForUser(matrixClient, userId) {
+async function openDMForUser(matrixClient, userId) {
     const dmRooms = DMRoomMap.shared().getDMRoomsForUserId(userId);
     const lastActiveRoom = dmRooms.reduce((lastActiveRoom, roomId) => {
         const room = matrixClient.getRoom(roomId);
@@ -100,9 +101,27 @@ function openDMForUser(matrixClient, userId) {
             action: 'view_room',
             room_id: lastActiveRoom.roomId,
         });
-    } else {
-        createRoom({dmUserId: userId});
+        return;
     }
+
+    const createRoomOptions = {
+        dmUserId: userId,
+    };
+
+    if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        // Check whether all users have uploaded device keys before.
+        // If so, enable encryption in the new room.
+        const usersToDevicesMap = await matrixClient.downloadKeys([userId]);
+        const allHaveDeviceKeys = Object.values(usersToDevicesMap).every(devices => {
+            // `devices` is an object of the form { deviceId: deviceInfo, ... }.
+            return Object.keys(devices).length > 0;
+        });
+        if (allHaveDeviceKeys) {
+            createRoomOptions.encryption = true;
+        }
+    }
+
+    createRoom(createRoomOptions);
 }
 
 function useIsEncrypted(cli, room) {
@@ -117,19 +136,70 @@ function useIsEncrypted(cli, room) {
     return isEncrypted;
 }
 
-function verifyDevice(userId, device) {
-    const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-    Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
-        userId: userId,
-        device: device,
-    }, null, /* priority = */ false, /* static = */ true);
+function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
+    return useAsyncMemo(async () => {
+        if (!canVerify) {
+            return false;
+        }
+        setUpdating(true);
+        try {
+            await cli.downloadKeys([member.userId]);
+            const xsi = cli.getStoredCrossSigningForUser(member.userId);
+            const key = xsi && xsi.getId();
+            return !!key;
+        } finally {
+            setUpdating(false);
+        }
+    }, [cli, member, canVerify], false);
+}
+
+async function verifyDevice(userId, device) {
+    const cli = MatrixClientPeg.get();
+    const member = cli.getUser(userId);
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    Modal.createTrackedDialog("Verification warning", "unverified session", QuestionDialog, {
+        headerImage: require("../../../../res/img/e2e/warning.svg"),
+        title: _t("Not Trusted"),
+        description: <div>
+            <p>{_t("%(name)s (%(userId)s) signed in to a new session without verifying it:", {name: member.displayName, userId})}</p>
+            <p>{device.getDisplayName()} ({device.deviceId})</p>
+            <p>{_t("Ask this user to verify their session, or manually verify it below.")}</p>
+        </div>,
+        onFinished: async (doneClicked) => {
+            const manuallyVerifyClicked = !doneClicked;
+            if (!manuallyVerifyClicked) {
+                return;
+            }
+            const cli = MatrixClientPeg.get();
+            const verificationRequestPromise = cli.requestVerification(
+                userId,
+                [device.deviceId],
+            );
+            dis.dispatch({
+                action: "set_right_panel_phase",
+                phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+                refireParams: {member, verificationRequestPromise},
+            });
+        },
+        primaryButton: _t("Done"),
+        cancelButton: _t("Manually Verify"),
+    });
 }
 
 function verifyUser(user) {
+    const cli = MatrixClientPeg.get();
+    const dmRoom = findDMForUser(cli, user.userId);
+    let existingRequest;
+    if (dmRoom) {
+        existingRequest = cli.findVerificationRequestDMInProgress(dmRoom.roomId);
+    }
     dis.dispatch({
         action: "set_right_panel_phase",
         phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-        refireParams: {member: user},
+        refireParams: {
+            member: user,
+            verificationRequest: existingRequest,
+        },
     });
 }
 
@@ -137,6 +207,7 @@ function DeviceItem({userId, device}) {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
+    const userTrust = cli.checkUserTrust(userId);
     // For your own devices, we use the stricter check of cross-signing
     // verification to encourage everyone to trust their own devices via
     // cross-signing so that other users can then safely trust you.
@@ -151,8 +222,9 @@ function DeviceItem({userId, device}) {
         mx_UserInfo_device_unverified: !isVerified,
     });
     const iconClasses = classNames("mx_E2EIcon", {
+        mx_E2EIcon_normal: !userTrust.isVerified(),
         mx_E2EIcon_verified: isVerified,
-        mx_E2EIcon_warning: !isVerified,
+        mx_E2EIcon_warning: userTrust.isVerified() && !isVerified,
     });
 
     const onDeviceClick = () => {
@@ -164,17 +236,25 @@ function DeviceItem({userId, device}) {
     const deviceName = device.ambiguous ?
             (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
             device.getDisplayName();
-    const trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (<AccessibleButton className={classes} onClick={onDeviceClick}>
-        <div className={iconClasses} />
-        <div className="mx_UserInfo_device_name">{deviceName}</div>
-        <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-    </AccessibleButton>);
+    let trustedLabel = null;
+    if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
+    return (
+        <AccessibleButton
+            className={classes}
+            title={device.deviceId}
+            onClick={onDeviceClick}
+        >
+            <div className={iconClasses} />
+            <div className="mx_UserInfo_device_name">{deviceName}</div>
+            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+        </AccessibleButton>
+    );
 }
 
 function DevicesSection({devices, userId, loading}) {
     const Spinner = sdk.getComponent("elements.Spinner");
     const cli = useContext(MatrixClientContext);
+    const userTrust = cli.checkUserTrust(userId);
 
     const [isExpanded, setExpanded] = useState(false);
 
@@ -183,43 +263,61 @@ function DevicesSection({devices, userId, loading}) {
         return <Spinner />;
     }
     if (devices === null) {
-        return _t("Unable to load device list");
+        return _t("Unable to load session list");
     }
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));
 
+    let expandSectionDevices = [];
     const unverifiedDevices = [];
-    const verifiedDevices = [];
 
-    for (let i = 0; i < devices.length; ++i) {
-        const device = devices[i];
-        const deviceTrust = deviceTrusts[i];
-        // For your own devices, we use the stricter check of cross-signing
-        // verification to encourage everyone to trust their own devices via
-        // cross-signing so that other users can then safely trust you.
-        // For other people's devices, the more general verified check that
-        // includes locally verified devices can be used.
-        const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
-            deviceTrust.isCrossSigningVerified() :
-            deviceTrust.isVerified();
+    let expandCountCaption;
+    let expandHideCaption;
+    let expandIconClasses = "mx_E2EIcon";
 
-        if (isVerified) {
-            verifiedDevices.push(device);
-        } else {
-            unverifiedDevices.push(device);
+    if (userTrust.isVerified()) {
+        for (let i = 0; i < devices.length; ++i) {
+            const device = devices[i];
+            const deviceTrust = deviceTrusts[i];
+            // For your own devices, we use the stricter check of cross-signing
+            // verification to encourage everyone to trust their own devices via
+            // cross-signing so that other users can then safely trust you.
+            // For other people's devices, the more general verified check that
+            // includes locally verified devices can be used.
+            const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
+                deviceTrust.isCrossSigningVerified() :
+                deviceTrust.isVerified();
+
+            if (isVerified) {
+                expandSectionDevices.push(device);
+            } else {
+                unverifiedDevices.push(device);
+            }
         }
+        expandCountCaption = _t("%(count)s verified sessions", {count: expandSectionDevices.length});
+        expandHideCaption = _t("Hide verified sessions");
+        expandIconClasses += " mx_E2EIcon_verified";
+    } else {
+        expandSectionDevices = devices;
+        expandCountCaption = _t("%(count)s sessions", {count: devices.length});
+        expandHideCaption = _t("Hide sessions");
+        expandIconClasses += " mx_E2EIcon_normal";
     }
 
     let expandButton;
-    if (verifiedDevices.length) {
+    if (expandSectionDevices.length) {
         if (isExpanded) {
-            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(false)}>
-                <div>{_t("Hide verified sessions")}</div>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+                onClick={() => setExpanded(false)}
+            >
+                <div>{expandHideCaption}</div>
             </AccessibleButton>);
         } else {
-            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(true)}>
-                <div className="mx_E2EIcon mx_E2EIcon_verified" />
-                <div>{_t("%(count)s verified sessions", {count: verifiedDevices.length})}</div>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+                onClick={() => setExpanded(true)}
+            >
+                <div className={expandIconClasses} />
+                <div>{expandCountCaption}</div>
             </AccessibleButton>);
         }
     }
@@ -229,7 +327,7 @@ function DevicesSection({devices, userId, loading}) {
     });
     if (isExpanded) {
         const keyStart = unverifiedDevices.length;
-        deviceList = deviceList.concat(verifiedDevices.map((device, i) => {
+        deviceList = deviceList.concat(expandSectionDevices.map((device, i) => {
             return (<DeviceItem key={i + keyStart} userId={userId} device={device} />);
         }));
     }
@@ -836,6 +934,12 @@ const useIsSynapseAdmin = (cli) => {
     return isAdmin;
 };
 
+const useHomeserverSupportsCrossSigning = (cli) => {
+    return useAsyncMemo(async () => {
+        return cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
+    }, [cli], false);
+};
+
 function useRoomPermissions(cli, room, user) {
     const [roomPermissions, setRoomPermissions] = useState({
         // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL
@@ -1029,33 +1133,95 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
-const UserInfo = ({user, groupId, roomId, onClose}) => {
+export const useDevices = (userId) => {
     const cli = useContext(MatrixClientContext);
 
-    // Load room if we are given a room id and memoize it
-    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
-    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
-    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+    // 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);
 
-    // only display the devices list if our client supports E2E
-    const _enableDevices = cli.isCryptoEnabled();
+        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 updateDevices = async () => {
+            const newDevices = await cli.getStoredDevicesForUser(userId);
+            if (cancel) return;
+            setDevices(newDevices);
+        };
+        const onDevicesUpdated = (users) => {
+            if (!users.includes(userId)) return;
+            updateDevices();
+        };
+        const onDeviceVerificationChanged = (_userId, device) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        const onUserTrustStatusChanged = (_userId, trustStatus) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        cli.on("crypto.devicesUpdated", onDevicesUpdated);
+        cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
+        cli.on("userTrustStatusChanged", onUserTrustStatusChanged);
+        // Handle being unmounted
+        return () => {
+            cancel = true;
+            cli.removeListener("crypto.devicesUpdated", onDevicesUpdated);
+            cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
+            cli.removeListener("userTrustStatusChanged", onUserTrustStatusChanged);
+        };
+    }, [cli, userId]);
+
+    return devices;
+};
+
+const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
+    const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
     // Load whether or not we are a Synapse Admin
     const isSynapseAdmin = useIsSynapseAdmin(cli);
 
     // Check whether the user is ignored
-    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(user.userId));
+    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(member.userId));
     // Recheck if the user or client changes
     useEffect(() => {
-        setIsIgnored(cli.isUserIgnored(user.userId));
-    }, [cli, user.userId]);
+        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(user.userId));
+            setIsIgnored(cli.isUserIgnored(member.userId));
         }
-    }, [cli, user.userId]);
+    }, [cli, member.userId]);
     useEventEmitter(cli, "accountData", accountDataHandler);
 
     // Count of how many operations are currently in progress, if > 0 then show a Spinner
@@ -1086,7 +1252,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         const [accepted] = await finished;
         if (!accepted) return;
         try {
-            await cli.deactivateSynapseUser(user.userId);
+            await cli.deactivateSynapseUser(member.userId);
         } catch (err) {
             console.error("Failed to deactivate user");
             console.error(err);
@@ -1097,21 +1263,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         }
-    }, [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]);
+    }, [cli, member.userId]);
 
     let synapseDeactivateButton;
     let spinner;
@@ -1119,7 +1271,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     // We don't need a perfect check here, just something to pass as "probably not our homeserver". If
     // someone does figure out how to bypass this check the worst that happens is an error.
     // FIXME this should be using cli instead of MatrixClientPeg.matrixClient
-    if (isSynapseAdmin && user.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
+    if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
         synapseDeactivateButton = (
             <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
                 {_t("Deactivate user")}
@@ -1143,7 +1295,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         adminToolsContainer = (
             <GroupAdminToolsSection
                 groupId={groupId}
-                groupMember={user}
+                groupMember={member}
                 startUpdating={startUpdating}
                 stopUpdating={stopUpdating}>
                 { synapseDeactivateButton }
@@ -1162,7 +1314,134 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const displayName = member.name || member.displayname;
+    const memberDetails = (
+        <PowerLevelSection
+            powerLevels={powerLevels}
+            user={member}
+            room={room}
+            roomPermissions={roomPermissions}
+        />
+    );
+
+    // only display the devices list if our client supports E2E
+    const _enableDevices = cli.isCryptoEnabled();
+
+    let text;
+    if (!isRoomEncrypted) {
+        if (!_enableDevices) {
+            text = _t("This client does not support end-to-end encryption.");
+        } else if (room) {
+            text = _t("Messages in this room are not end-to-end encrypted.");
+        } else {
+            // TODO what to render for GroupMember
+        }
+    } else {
+        text = _t("Messages in this room are end-to-end encrypted.");
+    }
+
+    let verifyButton;
+    const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli);
+
+    const userTrust = cli.checkUserTrust(member.userId);
+    const userVerified = userTrust.isCrossSigningVerified();
+    const isMe = member.userId === cli.getUserId();
+    const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") &&
+                        homeserverSupportsCrossSigning &&
+                        isRoomEncrypted && !userVerified && !isMe;
+
+    const setUpdating = (updating) => {
+        setPendingUpdateCount(count => count + (updating ? 1 : -1));
+    };
+    const hasCrossSigningKeys =
+        useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
+
+    if (canVerify && hasCrossSigningKeys) {
+        verifyButton = (
+            <AccessibleButton className="mx_UserInfo_field" onClick={() => verifyUser(member)}>
+                {_t("Verify")}
+            </AccessibleButton>
+        );
+    }
+
+    let devicesSection;
+    if (isRoomEncrypted) {
+        devicesSection = <DevicesSection
+            loading={devices === undefined}
+            devices={devices}
+            userId={member.userId} />;
+    }
+
+    const securitySection = (
+        <div className="mx_UserInfo_container">
+            <h3>{ _t("Security") }</h3>
+            <p>{ text }</p>
+            { verifyButton }
+            { devicesSection }
+        </div>
+    );
+
+    return <React.Fragment>
+        { memberDetails &&
+        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
+            <div className="mx_UserInfo_memberDetails">
+                { memberDetails }
+            </div>
+        </div> }
+
+        { securitySection }
+        <UserOptionsSection
+            devices={devices}
+            canInvite={roomPermissions.canInvite}
+            isIgnored={isIgnored}
+            member={member} />
+
+        { adminToolsContainer }
+
+        { spinner }
+    </React.Fragment>;
+};
+
+const UserInfoHeader = ({onClose, member, e2eStatus}) => {
+    const cli = useContext(MatrixClientContext);
+
+    let closeButton;
+    if (onClose) {
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
+            <div />
+        </AccessibleButton>;
+    }
+
+    const onMemberAvatarClick = useCallback(() => {
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
+        if (!avatarUrl) return;
+
+        const httpUrl = cli.mxcUrlToHttp(avatarUrl);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: httpUrl,
+            name: member.name,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    }, [cli, member]);
+
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <div>
+                    <MemberAvatar
+                        member={member}
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        resizeMethod="scale"
+                        fallbackUserId={member.userId}
+                        onClick={onMemberAvatarClick}
+                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
+                </div>
+            </div>
+        </div>
+    );
 
     let presenceState;
     let presenceLastActiveAgo;
@@ -1198,179 +1477,79 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-    const avatarElement = (
-        <div className="mx_UserInfo_avatar">
-            <div>
-                <div>
-                    <MemberAvatar
-                        member={member}
-                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        resizeMethod="scale"
-                        fallbackUserId={member.userId}
-                        onClick={onMemberAvatarClick}
-                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
-                </div>
-            </div>
-        </div>
-    );
-
-    let closeButton;
-    if (onClose) {
-        closeButton = <AccessibleButton
-            className="mx_UserInfo_cancel"
-            onClick={onClose}
-            title={_t('Close')} />;
-    }
-
-    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 (!userVerified && !isMe) {
-        verifyButton = <AccessibleButton className="mx_UserInfo_verify" onClick={() => verifyUser(user)}>
-            {_t("Verify")}
-        </AccessibleButton>;
-    }
-
-    const devicesSection = <DevicesSection
-        loading={devices === undefined}
-        devices={devices} userId={user.userId} />;
-
-    const securitySection = (
-        <div className="mx_UserInfo_container">
-            <h3>{ _t("Security") }</h3>
-            <p>{ text }</p>
-            { verifyButton }
-            { devicesSection }
-        </div>
-    );
-
     let e2eIcon;
-    if (isRoomEncrypted && devices) {
-        const e2eStatus = _getE2EStatus(cli, user.userId, devices);
+    if (e2eStatus) {
         e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
     }
 
-    return (
-        <div className="mx_UserInfo" role="tabpanel">
-            { closeButton }
-            { avatarElement }
+    const displayName = member.name || member.displayname;
+    return <React.Fragment>
+        { closeButton }
+        { avatarElement }
 
-            <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 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>
+    </React.Fragment>;
+};
 
-            { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
-                <div className="mx_UserInfo_memberDetails">
-                    { memberDetails }
-                </div>
-            </div> }
+const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.RoomMemberInfo, ...props}) => {
+    const cli = useContext(MatrixClientContext);
 
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                { securitySection }
-                <UserOptionsSection
+    // Load room if we are given a room id and memoize it
+    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
+    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+
+    const isRoomEncrypted = useIsEncrypted(cli, room);
+    const devices = useDevices(user.userId);
+
+    let e2eStatus;
+    if (isRoomEncrypted && devices) {
+        e2eStatus = getE2EStatus(cli, user.userId, devices);
+    }
+
+    const classes = ["mx_UserInfo"];
+
+    let content;
+    switch (phase) {
+        case RIGHT_PANEL_PHASES.RoomMemberInfo:
+        case RIGHT_PANEL_PHASES.GroupMemberInfo:
+            content = (
+                <BasicUserInfo
+                    room={room}
+                    member={member}
+                    groupId={groupId}
                     devices={devices}
-                    canInvite={roomPermissions.canInvite}
-                    isIgnored={isIgnored}
-                    member={member} />
+                    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 }
+                { content }
             </AutoHideScrollbar>
         </div>
     );

src/components/views/right_panel/VerificationPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,86 +14,272 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+import PropTypes from "prop-types";
+
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+
+import VerificationQRCode from "../elements/crypto/VerificationQRCode";
+import {_t} from "../../../languageHandler";
+import E2EIcon from "../rooms/E2EIcon";
+import {
+    PHASE_UNSENT,
+    PHASE_REQUESTED,
+    PHASE_READY,
+    PHASE_DONE,
+    PHASE_STARTED,
+    PHASE_CANCELLED, VerificationRequest,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import Spinner from "../elements/Spinner";
 
 export default class VerificationPanel extends React.PureComponent {
+    static propTypes = {
+        layout: PropTypes.string,
+        request: PropTypes.object.isRequired,
+        member: PropTypes.object.isRequired,
+        phase: PropTypes.oneOf([
+            PHASE_UNSENT,
+            PHASE_REQUESTED,
+            PHASE_READY,
+            PHASE_STARTED,
+            PHASE_CANCELLED,
+            PHASE_DONE,
+        ]).isRequired,
+        onClose: PropTypes.func.isRequired,
+    };
+
     constructor(props) {
         super(props);
-        this.state = {};
-        this._hasVerifier = !!props.request.verifier;
-    }
-
-    render() {
-        return <div className="mx_UserInfo">
-            <div className="mx_UserInfo_container">
-                { this.renderStatus() }
-            </div>
-        </div>;
-    }
-
-    renderStatus() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const {request} = 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>);
-        } else if (request.started) {
-            if (this.state.sasWaitingForOtherParty) {
-                return <p>Waiting for {request.otherUserId} to confirm ...</p>;
-            } else if (this.state.sasEvent) {
-                const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-                return (<div>
-                    <VerificationShowSas
-                        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 <p>verified {request.otherUserId}!!</p>;
-        } else if (request.cancelled) {
-            return <p>cancelled by {request.cancellingUserId}!</p>;
+        this.state = {
+            qrCodeProps: null, // generated by the VerificationQRCode component itself
+        };
+        this._hasVerifier = false;
+        if (this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD)) {
+            this._generateQRCodeProps(props.request);
         }
     }
 
+    async _generateQRCodeProps(verificationRequest: VerificationRequest) {
+        try {
+            this.setState({qrCodeProps: await VerificationQRCode.getPropsForRequest(verificationRequest)});
+        } catch (e) {
+            console.error(e);
+            // Do nothing - we won't render a QR code.
+        }
+    }
+
+    renderQRPhase(pending) {
+        const {member, request} = this.props;
+        const showSAS = request.methods.includes(verificationMethods.SAS);
+        const showQR = this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const noCommonMethodError = !showSAS && !showQR ?
+            <p>{_t("The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.")}</p> :
+            null;
+
+        if (this.props.layout === 'dialog') {
+            // HACK: This is a terrible idea.
+            let qrBlock;
+            let sasBlock;
+            if (showQR) {
+                let qrCode;
+                if (this.state.qrCodeProps) {
+                    qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
+                } else {
+                    qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
+                }
+                qrBlock =
+                    <div className='mx_VerificationPanel_QRPhase_startOption'>
+                        <p>{_t("Scan this unique code")}</p>
+                        {qrCode}
+                    </div>;
+            }
+            if (showSAS) {
+                sasBlock =
+                    <div className='mx_VerificationPanel_QRPhase_startOption'>
+                        <p>{_t("Compare unique emoji")}</p>
+                        <span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                        <AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this._startSAS} kind='primary'>
+                            {_t("Start")}
+                        </AccessibleButton>
+                    </div>;
+            }
+            const or = qrBlock && sasBlock ?
+                <div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div> : null;
+            return (
+                <div>
+                    {_t("Verify this session by completing one of the following:")}
+                    <div className='mx_VerificationPanel_QRPhase_startOptions'>
+                        {qrBlock}
+                        {or}
+                        {sasBlock}
+                        {noCommonMethodError}
+                    </div>
+                </div>
+            );
+        }
+
+        let qrBlock;
+        if (this.state.qrCodeProps) {
+            qrBlock = <div className="mx_UserInfo_container">
+                <h3>{_t("Verify by scanning")}</h3>
+                <p>{_t("Ask %(displayName)s to scan your code:", {
+                    displayName: member.displayName || member.name || member.userId,
+                })}</p>
+
+                <div className="mx_VerificationPanel_qrCode">
+                    <VerificationQRCode {...this.state.qrCodeProps} />
+                </div>
+            </div>;
+        }
+
+        let sasBlock;
+        if (showSAS) {
+            let button;
+            if (pending) {
+                button = <Spinner />;
+            } else {
+                const disabled = this.state.emojiButtonClicked;
+                button = (
+                    <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
+                        {_t("Verify by emoji")}
+                    </AccessibleButton>
+                );
+            }
+            const sasLabel = this.state.qrCodeProps ?
+                _t("If you can't scan the code above, verify by comparing unique emoji.") :
+                _t("Verify by comparing unique emoji.");
+            sasBlock = <div className="mx_UserInfo_container">
+                <h3>{_t("Verify by emoji")}</h3>
+                <p>{sasLabel}</p>
+                { button }
+            </div>;
+        }
+
+        const noCommonMethodBlock = noCommonMethodError ?
+             <div className="mx_UserInfo_container">{noCommonMethodError}</div> :
+             null;
+
+        // TODO: add way to open camera to scan a QR code
+        return <React.Fragment>
+            {qrBlock}
+            {sasBlock}
+            {noCommonMethodBlock}
+        </React.Fragment>;
+    }
+
+    renderVerifiedPhase() {
+        const {member} = this.props;
+
+        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} hideTooltip={true} />
+                <p>Verify all users in a room to ensure it's secure.</p>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" 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_wideButton" onClick={this.props.onClose}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    render() {
+        const {member, phase} = this.props;
+
+        const displayName = member.displayName || member.name || member.userId;
+
+        switch (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();
+        }
+        console.error("VerificationPanel unhandled phase:", phase);
+        return null;
+    }
+
     _startSAS = async () => {
+        this.setState({emojiButtonClicked: true});
         const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
         try {
             await verifier.verify();
         } catch (err) {
             console.error(err);
-        } finally {
-            this.setState({sasEvent: null});
         }
     };
 
     _onSasMatchesClick = () => {
-        this.setState({sasWaitingForOtherParty: true});
         this.state.sasEvent.confirm();
     };
 
     _onSasMismatchesClick = () => {
-        this.state.sasEvent.cancel();
+        this.state.sasEvent.mismatch();
     };
 
     _onVerifierShowSas = (sasEvent) => {
+        const {request} = this.props;
+        request.verifier.off('show_sas', this._onVerifierShowSas);
         this.setState({sasEvent});
     };
 
     _onRequestChange = async () => {
         const {request} = this.props;
-        if (!this._hasVerifier && !!request.verifier) {
+        const hadVerifier = this._hasVerifier;
+        this._hasVerifier = !!request.verifier;
+        if (!hadVerifier && this._hasVerifier) {
             request.verifier.on('show_sas', this._onVerifierShowSas);
             try {
                 // on the requester side, this is also awaited in _startSAS,
@@ -102,18 +288,23 @@ export default class VerificationPanel extends React.PureComponent {
             } catch (err) {
                 console.error("error verify", err);
             }
-        } else if (this._hasVerifier && !request.verifier) {
-            request.verifier.removeListener('show_sas', this._onVerifierShowSas);
         }
-        this._hasVerifier = !!request.verifier;
-        this.forceUpdate();
     };
 
     componentDidMount() {
-        this.props.request.on("change", this._onRequestChange);
+        const {request} = this.props;
+        request.on("change", this._onRequestChange);
+        if (request.verifier) {
+            this.setState({sasEvent: request.verifier.sasEvent});
+        }
+        this._onRequestChange();
     }
 
     componentWillUnmount() {
-        this.props.request.off("change", this._onRequestChange);
+        const {request} = this.props;
+        if (request.verifier) {
+            request.verifier.off('show_sas', this._onVerifierShowSas);
+        }
+        request.off("change", this._onRequestChange);
     }
 }

src/components/views/room_settings/AliasSettings.js

@@ -74,7 +74,6 @@ export default class AliasSettings extends React.Component {
         roomId: PropTypes.string.isRequired,
         canSetCanonicalAlias: PropTypes.bool.isRequired,
         canSetAliases: PropTypes.bool.isRequired,
-        aliasEvents: PropTypes.array, // [MatrixEvent]
         canonicalAliasEvent: PropTypes.object, // MatrixEvent
     };
 
@@ -92,14 +91,9 @@ export default class AliasSettings extends React.Component {
             remoteDomains: [], // [ domain.com, foobar.com ]
             canonicalAlias: null, // #canonical:domain.com
             updatingCanonicalAlias: false,
+            localAliasesLoading: true,
         };
 
-        const localDomain = MatrixClientPeg.get().getDomain();
-        state.domainToAliases = this.aliasEventsToDictionary(props.aliasEvents || []);
-        state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
-            return domain !== localDomain && state.domainToAliases[domain].length > 0;
-        });
-
         if (props.canonicalAliasEvent) {
             state.canonicalAlias = props.canonicalAliasEvent.getContent().alias;
         }
@@ -107,6 +101,46 @@ export default class AliasSettings extends React.Component {
         this.state = state;
     }
 
+    async componentWillMount() {
+        const cli = MatrixClientPeg.get();
+        try {
+            if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
+                const response = await cli.unstableGetLocalAliases(this.props.roomId);
+                const localAliases = response.aliases;
+                const localDomain = cli.getDomain();
+                const domainToAliases = Object.assign(
+                    {},
+                    // FIXME, any localhost alt_aliases will be ignored as they are overwritten by localAliases
+                    this.aliasesToDictionary(this._getAltAliases()),
+                    {[localDomain]: localAliases || []},
+                );
+                const remoteDomains = Object.keys(domainToAliases).filter((domain) => {
+                    return domain !== localDomain && domainToAliases[domain].length > 0;
+                });
+                this.setState({ domainToAliases, remoteDomains });
+            } else {
+                const state = {};
+                const localDomain = cli.getDomain();
+                state.domainToAliases = this.aliasEventsToDictionary(this.props.aliasEvents || []);
+                state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
+                    return domain !== localDomain && state.domainToAliases[domain].length > 0;
+                });
+                this.setState(state);
+            }
+        } finally {
+            this.setState({localAliasesLoading: false});
+        }
+    }
+
+    aliasesToDictionary(aliases) {
+        return aliases.reduce((dict, alias) => {
+            const domain = alias.split(":")[1];
+            dict[domain] = dict[domain] || [];
+            dict[domain].push(alias);
+            return dict;
+        }, {});
+    }
+
     aliasEventsToDictionary(aliasEvents) { // m.room.alias events
         const dict = {};
         aliasEvents.forEach((event) => {
@@ -117,6 +151,16 @@ export default class AliasSettings extends React.Component {
         return dict;
     }
 
+    _getAltAliases() {
+        if (this.props.canonicalAliasEvent) {
+            const altAliases = this.props.canonicalAliasEvent.getContent().alt_aliases;
+            if (Array.isArray(altAliases)) {
+                return altAliases;
+            }
+        }
+        return [];
+    }
+
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
@@ -126,6 +170,8 @@ export default class AliasSettings extends React.Component {
         });
 
         const eventContent = {};
+        const altAliases = this._getAltAliases();
+        if (altAliases) eventContent["alt_aliases"] = altAliases;
         if (alias) eventContent["alias"] = alias;
 
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.canonical_alias",
@@ -261,26 +307,34 @@ export default class AliasSettings extends React.Component {
             );
         }
 
+        let localAliasesList;
+        if (this.state.localAliasesLoading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            localAliasesList = <Spinner />;
+        } else {
+            localAliasesList = <EditableAliasesList
+                id="roomAliases"
+                className={"mx_RoomSettings_localAliases"}
+                items={this.state.domainToAliases[localDomain] || []}
+                newItem={this.state.newAlias}
+                onNewItemChanged={this.onNewAliasChanged}
+                canRemove={this.props.canSetAliases}
+                canEdit={this.props.canSetAliases}
+                onItemAdded={this.onLocalAliasAdded}
+                onItemRemoved={this.onLocalAliasDeleted}
+                itemsLabel={_t('Local addresses for this room:')}
+                noItemsLabel={_t('This room has no local addresses')}
+                placeholder={_t(
+                    'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
+                )}
+                domain={localDomain}
+            />;
+        }
+
         return (
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
-                <EditableAliasesList
-                    id="roomAliases"
-                    className={"mx_RoomSettings_localAliases"}
-                    items={this.state.domainToAliases[localDomain] || []}
-                    newItem={this.state.newAlias}
-                    onNewItemChanged={this.onNewAliasChanged}
-                    canRemove={this.props.canSetAliases}
-                    canEdit={this.props.canSetAliases}
-                    onItemAdded={this.onLocalAliasAdded}
-                    onItemRemoved={this.onLocalAliasDeleted}
-                    itemsLabel={_t('Local addresses for this room:')}
-                    noItemsLabel={_t('This room has no local addresses')}
-                    placeholder={_t(
-                        'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
-                    )}
-                    domain={localDomain}
-                />
+                {localAliasesList}
                 {remoteAliasesSection}
             </div>
         );

src/components/views/rooms/AuxPanel.js

@@ -219,7 +219,7 @@ export default createReactClass({
 
                 if (link) {
                     span = (
-                        <a href={link} target="_blank" rel="noopener">
+                        <a href={link} target="_blank" rel="noreferrer noopener">
                             { span }
                         </a>
                     );

src/components/views/rooms/BasicMessageComposer.js

@@ -94,6 +94,17 @@ export default class BasicMessageEditor extends React.Component {
         this._emoticonSettingHandle = null;
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
+            const {isEmpty} = this.props.model;
+            if (isEmpty) {
+                this._showPlaceholder();
+            } else {
+                this._hidePlaceholder();
+            }
+        }
+    }
+
     _replaceEmoticon = (caretPosition, inputType, diff) => {
         const {model} = this.props;
         const range = model.startRange(caretPosition);
@@ -209,6 +220,7 @@ export default class BasicMessageEditor extends React.Component {
             const range = getRangeForSelection(this._editorRef, model, selection);
             const selectedParts = range.parts.map(p => p.serialize());
             event.clipboardData.setData("application/x-riot-composer", JSON.stringify(selectedParts));
+            event.clipboardData.setData("text/plain", text); // so plain copy/paste works
             if (type === "cut") {
                 // Remove the text, updating the model as appropriate
                 this._modifiedFlag = true;
@@ -380,6 +392,20 @@ export default class BasicMessageEditor extends React.Component {
         } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
             this._insertText("\n");
             handled = true;
+        // move selection to start of composer
+        } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
+            setSelection(this._editorRef, model, {
+                index: 0,
+                offset: 0,
+            });
+            handled = true;
+        // move selection to end of composer
+        } else if (modKey && event.key === Key.END && !event.shiftKey) {
+            setSelection(this._editorRef, model, {
+                index: model.parts.length - 1,
+                offset: model.parts[model.parts.length - 1].text.length,
+            });
+            handled = true;
         // autocomplete or enter to send below shouldn't have any modifier keys pressed.
         } else {
             const metaOrAltPressed = event.metaKey || event.altKey;
@@ -445,10 +471,14 @@ export default class BasicMessageEditor extends React.Component {
                 const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
                 return model.positionForOffset(caret.offset + addedLen, true);
             });
-            await model.autoComplete.onTab();
-            if (!model.autoComplete.hasSelection()) {
-                this.setState({showVisualBell: true});
-                model.autoComplete.close();
+
+            // Don't try to do things with the autocomplete if there is none shown
+            if (model.autoComplete) {
+                await model.autoComplete.onTab();
+                if (!model.autoComplete.hasSelection()) {
+                    this.setState({showVisualBell: true});
+                    model.autoComplete.close();
+                }
             }
         } catch (err) {
             console.error(err);
@@ -478,6 +508,7 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     componentWillUnmount() {
+        document.removeEventListener("selectionchange", this._onSelectionChange);
         this._editorRef.removeEventListener("input", this._onInput, true);
         this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
         this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
@@ -532,6 +563,7 @@ export default class BasicMessageEditor extends React.Component {
             return;
         }
         this.historyManager.ensureLastChangesPushed(this.props.model);
+        this._modifiedFlag = true;
         switch (action) {
             case "bold":
                 toggleInlineFormat(range, "**");

src/components/views/rooms/E2EIcon.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+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.
@@ -14,76 +15,102 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React, {useState} from "react";
+import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { _t } from '../../../languageHandler';
-import AccessibleButton from '../elements/AccessibleButton';
-import SettingsStore from '../../../settings/SettingsStore';
 
-export default function(props) {
-    const { isUser } = props;
-    const isNormal = props.status === "normal";
-    const isWarning = props.status === "warning";
-    const isVerified = props.status === "verified";
-    const e2eIconClasses = classNames({
+import {_t, _td} from '../../../languageHandler';
+import {useFeatureEnabled} from "../../../hooks/useSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import Tooltip from "../elements/Tooltip";
+
+export const E2E_STATE = {
+    VERIFIED: "verified",
+    WARNING: "warning",
+    UNKNOWN: "unknown",
+    NORMAL: "normal",
+};
+
+const crossSigningUserTitles = {
+    [E2E_STATE.WARNING]: _td("This user has not verified all of their sessions."),
+    [E2E_STATE.NORMAL]: _td("You have not verified this user."),
+    [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their sessions."),
+};
+const crossSigningRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Someone is using an unknown session"),
+    [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
+    [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
+};
+
+const legacyUserTitles = {
+    [E2E_STATE.WARNING]: _td("Some sessions for this user are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All sessions for this user are trusted"),
+};
+const legacyRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Some sessions in this encrypted room are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All sessions in this encrypted room are trusted"),
+};
+
+const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
+    const [hover, setHover] = useState(false);
+
+    const classes = classNames({
         mx_E2EIcon: true,
-        mx_E2EIcon_warning: isWarning,
-        mx_E2EIcon_normal: isNormal,
-        mx_E2EIcon_verified: isVerified,
-    }, props.className);
+        mx_E2EIcon_warning: status === E2E_STATE.WARNING,
+        mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
+        mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+    }, className);
+
     let e2eTitle;
-
-    const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
+    const crossSigning = useFeatureEnabled("feature_cross_signing");
     if (crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "This user has not verified all of their devices.",
-            );
-        } else if (isNormal) {
-            e2eTitle = _t(
-                "You have not verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "You have verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        }
+        e2eTitle = crossSigningUserTitles[status];
     } else if (crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "Some users in this encrypted room are not verified by you or " +
-                "they have not verified their own devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "All users in this encrypted room are verified by you and " +
-                "they have verified their own devices.",
-            );
-        }
+        e2eTitle = crossSigningRoomTitles[status];
     } else if (!crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices for this user are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices for this user are trusted");
-        }
+        e2eTitle = legacyUserTitles[status];
     } else if (!crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices in this encrypted room are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices in this encrypted room are trusted");
-        }
+        e2eTitle = legacyRoomTitles[status];
     }
 
-    let style = null;
-    if (props.size) {
-        style = {width: `${props.size}px`, height: `${props.size}px`};
+    let style;
+    if (size) {
+        style = {width: `${size}px`, height: `${size}px`};
     }
 
-    const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />);
-    if (props.onClick) {
-        return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
-    } else {
-        return icon;
+    const onMouseOver = () => setHover(true);
+    const onMouseOut = () => setHover(false);
+
+    let tip;
+    if (hover && !hideTooltip) {
+        tip = <Tooltip label={e2eTitle ? _t(e2eTitle) : ""} />;
     }
-}
+
+    if (onClick) {
+        return (
+            <AccessibleButton
+                onClick={onClick}
+                onMouseOver={onMouseOver}
+                onMouseOut={onMouseOut}
+                className={classes}
+                style={style}
+            >
+                { tip }
+            </AccessibleButton>
+        );
+    }
+
+    return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+        { tip }
+    </div>;
+};
+
+E2EIcon.propTypes = {
+    isUser: PropTypes.bool,
+    status: PropTypes.oneOf(Object.values(E2E_STATE)),
+    className: PropTypes.string,
+    size: PropTypes.number,
+    onClick: PropTypes.func,
+};
+
+export default E2EIcon;

src/components/views/rooms/EntityTile.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+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.
@@ -22,7 +23,7 @@ import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
-
+import E2EIcon from './E2EIcon';
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
@@ -30,7 +31,6 @@ const PRESENCE_CLASS = {
     "unavailable": "mx_EntityTile_unavailable",
 };
 
-
 function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     if (showPresence === false) {
         return 'mx_EntityTile_online_beenactive';
@@ -69,6 +69,7 @@ const EntityTile = createReactClass({
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
         subtextLabel: PropTypes.string,
+        e2eStatus: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -156,23 +157,26 @@ const EntityTile = createReactClass({
             );
         }
 
-        let power;
+        let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            const src = {
-                [EntityTile.POWER_STATUS_MODERATOR]: require("../../../../res/img/mod.svg"),
-                [EntityTile.POWER_STATUS_ADMIN]: require("../../../../res/img/admin.svg"),
-            }[powerStatus];
-            const alt = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+            const powerText = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
                 [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
             }[powerStatus];
-            power = <img src={src} className="mx_EntityTile_power" width="16" height="17" alt={alt} />;
+            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
+        }
+
+        let e2eIcon;
+        const { e2eStatus } = this.props;
+        if (e2eStatus) {
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
 
-        const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
+        const av = this.props.avatarJsx ||
+            <BaseAvatar name={this.props.name} width={36} height={36} aria-hidden="true" />;
 
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
@@ -181,9 +185,10 @@ const EntityTile = createReactClass({
                                   onClick={this.props.onClick}>
                     <div className="mx_EntityTile_avatar">
                         { av }
-                        { power }
+                        { e2eIcon }
                     </div>
                     { nameEl }
+                    { powerLabel }
                     { inviteButton }
                 </AccessibleButton>
             </div>
@@ -194,5 +199,4 @@ const EntityTile = createReactClass({
 EntityTile.POWER_STATUS_MODERATOR = "moderator";
 EntityTile.POWER_STATUS_ADMIN = "admin";
 
-
 export default EntityTile;

src/components/views/rooms/EventTile.js

@@ -33,18 +33,21 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
 import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {E2E_STATE} from "./E2EIcon";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
     'm.sticker': 'messages.MessageEvent',
     'm.key.verification.cancel': 'messages.MKeyVerificationConclusion',
     'm.key.verification.done': 'messages.MKeyVerificationConclusion',
+    'm.room.encryption': 'messages.EncryptionEvent',
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
+    'm.room.encryption': 'messages.EncryptionEvent',
     'm.room.aliases': 'messages.TextualEvent',
     // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
     'm.room.canonical_alias': 'messages.TextualEvent',
@@ -54,7 +57,6 @@ const stateEventTileTypes = {
     'm.room.avatar': 'messages.RoomAvatarEvent',
     'm.room.third_party_invite': 'messages.TextualEvent',
     'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.encryption': 'messages.TextualEvent',
     'm.room.topic': 'messages.TextualEvent',
     'm.room.power_levels': 'messages.TextualEvent',
     'm.room.pinned_events': 'messages.TextualEvent',
@@ -98,6 +100,17 @@ export function getHandlerTile(ev) {
         }
     }
 
+    // sometimes MKeyVerificationConclusion declines to render.  Jankily decline to render and
+    // fall back to showing hidden events, if we're viewing hidden events
+    // XXX: This is extremely a hack. Possibly these components should have an interface for
+    // declining to render?
+    if (type === "m.key.verification.cancel" && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+        const MKeyVerificationConclusion = sdk.getComponent("messages.MKeyVerificationConclusion");
+        if (!MKeyVerificationConclusion.prototype._shouldRender.call(null, ev, ev.request)) {
+            return;
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -235,6 +248,7 @@ export default createReactClass({
         this._suppressReadReceiptAnimation = false;
         const client = this.context;
         client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        client.on("userTrustStatusChanged", this.onUserVerificationChanged);
         this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
         if (this.props.showReactions) {
             this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
@@ -260,6 +274,7 @@ export default createReactClass({
     componentWillUnmount: function() {
         const client = this.context;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
         this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
         if (this.props.showReactions) {
             this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
@@ -282,18 +297,56 @@ export default createReactClass({
         }
     },
 
+    onUserVerificationChanged: function(userId, _trustStatus) {
+        if (userId === this.props.mxEvent.getSender()) {
+            this._verifyEvent(this.props.mxEvent);
+        }
+    },
+
     _verifyEvent: async function(mxEvent) {
         if (!mxEvent.isEncrypted()) {
             return;
         }
 
+        // If we directly trust the device, short-circuit here
         const verified = await this.context.isEventSenderVerified(mxEvent);
+        if (verified) {
+            this.setState({
+                verified: E2E_STATE.VERIFIED,
+            }, () => {
+                // Decryption may have caused a change in size
+                this.props.onHeightChanged();
+            });
+            return;
+        }
+
+        // If cross-signing is off, the old behaviour is to scream at the user
+        // as if they've done something wrong, which they haven't
+        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            this.setState({
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged);
+            return;
+        }
+
+        if (!this.context.checkUserTrust(mxEvent.getSender()).isCrossSigningVerified()) {
+            this.setState({
+                verified: E2E_STATE.NORMAL,
+            }, this.props.onHeightChanged);
+            return;
+        }
+
+        const eventSenderTrust = await this.context.checkEventSenderTrust(mxEvent);
+        if (!eventSenderTrust) {
+            this.setState({
+                verified: E2E_STATE.UNKNOWN,
+            }, this.props.onHeightChanged); // Decryption may have cause a change in size
+            return;
+        }
+
         this.setState({
-            verified: verified,
-        }, () => {
-            // Decryption may have caused a change in size
-            this.props.onHeightChanged();
-        });
+            verified: eventSenderTrust.isVerified() ? E2E_STATE.VERIFIED : E2E_STATE.WARNING,
+        }, this.props.onHeightChanged); // Decryption may have caused a change in size
     },
 
     _propsEqual: function(objA, objB) {
@@ -473,8 +526,12 @@ export default createReactClass({
 
         // event is encrypted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted()) {
-            if (this.state.verified) {
+            if (this.state.verified === E2E_STATE.NORMAL) {
+                return; // no icon if we've not even cross-signed the user
+            } else if (this.state.verified === E2E_STATE.VERIFIED) {
                 return; // no icon for verified
+            } else if (this.state.verified === E2E_STATE.UNKNOWN) {
+                return (<E2ePadlockUnknown />);
             } else {
                 return (<E2ePadlockUnverified />);
             }
@@ -527,6 +584,7 @@ export default createReactClass({
             console.error("EventTile attempted to get relations for an event without an ID");
             // Use event's special `toJSON` method to log key data.
             console.log(JSON.stringify(this.props.mxEvent, null, 4));
+            console.trace("Stacktrace for https://github.com/vector-im/riot-web/issues/11120");
         }
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     },
@@ -554,7 +612,8 @@ export default createReactClass({
 
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
-            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification"));
+            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
+            (eventType === "m.room.encryption");
         let isInfoMessage = (
             !isBubbleMessage && eventType !== 'm.room.message' &&
             eventType !== 'm.sticker' && eventType !== 'm.room.create'
@@ -604,8 +663,9 @@ export default createReactClass({
             mx_EventTile_last: this.props.last,
             mx_EventTile_contextual: this.props.contextual,
             mx_EventTile_actionBarFocused: this.state.actionBarFocused,
-            mx_EventTile_verified: !isBubbleMessage && this.state.verified === true,
-            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === false,
+            mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED,
+            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2E_STATE.WARNING,
+            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
             mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_redacted: isRedacted,
@@ -686,15 +746,15 @@ export default createReactClass({
             <div className="mx_EventTile_keyRequestInfo_tooltip_contents">
                 <p>
                     { this.state.previouslyRequestedKeys ?
-                        _t( 'Your key share request has been sent - please check your other devices ' +
+                        _t( 'Your key share request has been sent - please check your other sessions ' +
                             'for key share requests.') :
-                        _t( 'Key share requests are sent to your other devices automatically. If you ' +
-                            'rejected or dismissed the key share request on your other devices, click ' +
+                        _t( 'Key share requests are sent to your other sessions automatically. If you ' +
+                            'rejected or dismissed the key share request on your other sessions, click ' +
                             'here to request the keys for this session again.')
                     }
                 </p>
                 <p>
-                    { _t( 'If your other devices do not have the key for this message you will not ' +
+                    { _t( 'If your other sessions do not have the key for this message you will not ' +
                             'be able to decrypt them.')
                     }
                 </p>
@@ -702,7 +762,7 @@ export default createReactClass({
         const keyRequestInfoContent = this.state.previouslyRequestedKeys ?
             _t('Key request sent.') :
             _t(
-                '<requestLink>Re-request encryption keys</requestLink> from your other devices.',
+                '<requestLink>Re-request encryption keys</requestLink> from your other sessions.',
                 {},
                 {'requestLink': (sub) => <a onClick={this.onRequestKeysClick}>{ sub }</a>},
             );
@@ -891,7 +951,7 @@ function E2ePadlockUndecryptable(props) {
 
 function E2ePadlockUnverified(props) {
     return (
-        <E2ePadlock title={_t("Encrypted by an unverified device")} icon="unverified" {...props} />
+        <E2ePadlock title={_t("Encrypted by an unverified session")} icon="unverified" {...props} />
     );
 }
 
@@ -901,6 +961,12 @@ function E2ePadlockUnencrypted(props) {
     );
 }
 
+function E2ePadlockUnknown(props) {
+    return (
+        <E2ePadlock title={_t("Encrypted by a deleted session")} icon="unknown" {...props} />
+    );
+}
+
 class E2ePadlock extends React.Component {
     static propTypes = {
         icon: PropTypes.string.isRequired,

src/components/views/rooms/InviteOnlyIcon.js

@@ -0,0 +1,58 @@
+/*
+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.
+*/
+
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import SettingsStore from '../../../settings/SettingsStore';
+
+export default class InviteOnlyIcon extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const classes = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
+
+        if (!SettingsStore.isFeatureEnabled("feature_invite_only_padlocks")) {
+            return null;
+        }
+
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        let tooltip;
+        if (this.state.hover) {
+            tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
+        }
+        return (<div className={classes}
+          onMouseEnter={this.onHoverStart}
+          onMouseLeave={this.onHoverEnd}
+        >
+          { tooltip }
+        </div>);
+    }
+}

src/components/views/rooms/LinkPreviewWidget.js

@@ -136,7 +136,7 @@ export default createReactClass({
             <div className="mx_LinkPreviewWidget" >
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
-                    <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
+                    <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
                     <div className="mx_LinkPreviewWidget_description" ref={this._description}>
                         { description }

src/components/views/rooms/MemberInfo.js

@@ -260,7 +260,7 @@ export default createReactClass({
                 e2eStatus: self._getE2EStatus(devices),
             });
         }, function(err) {
-            console.log("Error downloading devices", err);
+            console.log("Error downloading sessions", err);
             self.setState({devicesLoading: false});
         });
     },
@@ -766,9 +766,9 @@ export default createReactClass({
             // still loading
             devComponents = <Spinner />;
         } else if (devices === null) {
-            devComponents = _t("Unable to load device list");
+            devComponents = _t("Unable to load session list");
         } else if (devices.length === 0) {
-            devComponents = _t("No devices with registered encryption keys");
+            devComponents = _t("No sessions with registered encryption keys");
         } else {
             devComponents = [];
             for (let i = 0; i < devices.length; i++) {
@@ -780,7 +780,7 @@ export default createReactClass({
 
         return (
             <div>
-                <h3>{ _t("Devices") }</h3>
+                <h3>{ _t("Sessions") }</h3>
                 <div className="mx_MemberInfo_devices">
                     { devComponents }
                 </div>
@@ -1113,7 +1113,8 @@ export default createReactClass({
             }
         }
 
-        const avatarUrl = this.props.member.getMxcAvatarUrl();
+        const {member} = this.props;
+        const avatarUrl = member.avatarUrl || (member.getMxcAvatarUrl && member.getMxcAvatarUrl());
         let avatarElement;
         if (avatarUrl) {
             const httpUrl = this.context.mxcUrlToHttp(avatarUrl, 800, 800);

src/components/views/rooms/MemberTile.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@ import createReactClass from 'create-react-class';
 import * as sdk from "../../../index";
 import dis from "../../../dispatcher";
 import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 export default createReactClass({
     displayName: 'MemberTile',
@@ -40,29 +41,101 @@ export default createReactClass({
     getInitialState: function() {
         return {
             statusMessage: this.getStatusMessage(),
+            isRoomEncrypted: false,
+            e2eStatus: null,
         };
     },
 
     componentDidMount() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return;
+        const cli = MatrixClientPeg.get();
+
+        if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            const { user } = this.props.member;
+            if (user) {
+                user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+            }
         }
-        const { user } = this.props.member;
-        if (!user) {
-            return;
+
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            const { roomId } = this.props.member;
+            if (roomId) {
+                const isRoomEncrypted = cli.isRoomEncrypted(roomId);
+                this.setState({
+                    isRoomEncrypted,
+                });
+                if (isRoomEncrypted) {
+                    cli.on("userTrustStatusChanged", this.onUserTrustStatusChanged);
+                    this.updateE2EStatus();
+                } else {
+                    // Listen for room to become encrypted
+                    cli.on("RoomState.events", this.onRoomStateEvents);
+                }
+            }
         }
-        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     },
 
     componentWillUnmount() {
+        const cli = MatrixClientPeg.get();
+
         const { user } = this.props.member;
-        if (!user) {
+        if (user) {
+            user.removeListener(
+                "User._unstable_statusMessage",
+                this._onStatusMessageCommitted,
+            );
+        }
+
+        if (cli) {
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
+            cli.removeListener("userTrustStatusChanged", this.onUserTrustStatusChanged);
+        }
+    },
+
+    onRoomStateEvents: function(ev) {
+        if (ev.getType() !== "m.room.encryption") return;
+        const { roomId } = this.props.member;
+        if (ev.getRoomId() !== roomId) return;
+
+        // The room is encrypted now.
+        const cli = MatrixClientPeg.get();
+        cli.removeListener("RoomState.events", this.onRoomStateEvents);
+        this.setState({
+            isRoomEncrypted: true,
+        });
+        this.updateE2EStatus();
+    },
+
+    onUserTrustStatusChanged: function(userId, trustStatus) {
+        if (userId !== this.props.member.userId) return;
+        this.updateE2EStatus();
+    },
+
+    updateE2EStatus: async function() {
+        const cli = MatrixClientPeg.get();
+        const { userId } = this.props.member;
+        const isMe = userId === cli.getUserId();
+        const userVerified = cli.checkUserTrust(userId).isCrossSigningVerified();
+        if (!userVerified) {
+            this.setState({
+                e2eStatus: "normal",
+            });
             return;
         }
-        user.removeListener(
-            "User._unstable_statusMessage",
-            this._onStatusMessageCommitted,
-        );
+
+        const devices = await cli.getStoredDevicesForUser(userId);
+        const anyDeviceUnverified = devices.some(device => {
+            const { deviceId } = device;
+            // For your own devices, we use the stricter check of cross-signing
+            // verification to encourage everyone to trust their own devices via
+            // cross-signing so that other users can then safely trust you.
+            // For other people's devices, the more general verified check that
+            // includes locally verified devices can be used.
+            const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
+            return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
+        });
+        this.setState({
+            e2eStatus: anyDeviceUnverified ? "warning" : "verified",
+        });
     },
 
     getStatusMessage() {
@@ -94,6 +167,12 @@ export default createReactClass({
         ) {
             return true;
         }
+        if (
+            nextState.isRoomEncrypted !== this.state.isRoomEncrypted ||
+            nextState.e2eStatus !== this.state.e2eStatus
+        ) {
+            return true;
+        }
         return false;
     },
 
@@ -129,7 +208,7 @@ export default createReactClass({
         }
 
         const av = (
-            <MemberAvatar member={member} width={36} height={36} />
+            <MemberAvatar member={member} width={36} height={36} aria-hidden="true" />
         );
 
         if (member.user) {
@@ -153,14 +232,26 @@ export default createReactClass({
 
         const powerStatus = powerStatusMap.get(powerLevel);
 
+        let e2eStatus;
+        if (this.state.isRoomEncrypted) {
+            e2eStatus = this.state.e2eStatus;
+        }
+
         return (
-            <EntityTile {...this.props} presenceState={presenceState}
+            <EntityTile
+                {...this.props}
+                presenceState={presenceState}
                 presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
-                avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+                avatarJsx={av}
+                title={this.getPowerLabel()}
+                name={name}
+                powerStatus={powerStatus}
+                showPresence={this.props.showPresence}
                 subtextLabel={statusMessage}
+                e2eStatus={e2eStatus}
+                onClick={this.onClick}
             />
         );
     },

src/components/views/rooms/MessageComposer.js

@@ -26,6 +26,7 @@ import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
+import SettingsStore from "../../../settings/SettingsStore";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -168,7 +169,6 @@ export default class MessageComposer extends React.Component {
     constructor(props) {
         super(props);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this.onEvent = this.onEvent.bind(this);
         this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
         this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
@@ -182,11 +182,6 @@ export default class MessageComposer extends React.Component {
     }
 
     componentDidMount() {
-        // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
-        // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
-        // marked as encrypted.
-        // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
-        MatrixClientPeg.get().on("event", this.onEvent);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._waitForOwnMember();
@@ -210,7 +205,6 @@ export default class MessageComposer extends React.Component {
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("event", this.onEvent);
             MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
         }
         if (this._roomStoreToken) {
@@ -218,13 +212,6 @@ export default class MessageComposer extends React.Component {
         }
     }
 
-    onEvent(event) {
-        if (event.getType() !== 'm.room.encryption') return;
-        if (event.getRoomId() !== this.props.room.roomId) return;
-        // TODO: put (encryption state??) in state
-        this.forceUpdate();
-    }
-
     _onRoomStateEvents(ev, state) {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
@@ -282,18 +269,33 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
-        if (this.state.isQuoting) {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted reply…');
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (this.state.isQuoting) {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted reply…');
+                } else {
+                    return _t('Send a reply…');
+                }
             } else {
-                return _t('Send a reply (unencrypted)…');
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted message…');
+                } else {
+                    return _t('Send a message…');
+                }
             }
         } else {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted message…');
+            if (this.state.isQuoting) {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted reply…');
+                } else {
+                    return _t('Send a reply (unencrypted)…');
+                }
             } else {
-                return _t('Send a message (unencrypted)…');
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted message…');
+                } else {
+                    return _t('Send a message (unencrypted)…');
+                }
             }
         }
     }
@@ -339,7 +341,7 @@ export default class MessageComposer extends React.Component {
                 </a>
             ) : '';
 
-            controls.push(<div className="mx_MessageComposer_replaced_wrapper">
+            controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
                     <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
                     <span className="mx_MessageComposer_roomReplaced_header">

src/components/views/rooms/RoomBreadcrumbs.js

@@ -363,7 +363,7 @@ export default class RoomBreadcrumbs extends React.Component {
             }
 
             let dmIndicator;
-            if (this._isDmRoom(r.room)) {
+            if (this._isDmRoom(r.room) && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
                 dmIndicator = <img
                     src={require("../../../../res/img/icon_person.svg")}
                     className="mx_RoomBreadcrumbs_dmIndicator"

src/components/views/rooms/RoomHeader.js

@@ -31,7 +31,9 @@ import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
+import DMRoomMap from '../../../utils/DMRoomMap';
 import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -160,13 +162,16 @@ export default createReactClass({
             <E2EIcon status={this.props.e2eStatus} /> :
             undefined;
 
+        const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
         const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
         const joinRule = joinRules && joinRules.getContent().join_rule;
-        const joinRuleClass = classNames("mx_RoomHeader_PrivateIcon",
-                                         {"mx_RoomHeader_isPrivate": joinRule === "invite"});
-        const privateIcon = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
-            <div className={joinRuleClass} /> :
-            undefined;
+        let privateIcon;
+        // Don't show an invite-only icon for DMs. Users know they're invite-only.
+        if (!dmUserId && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (joinRule == "invite") {
+                privateIcon = <InviteOnlyIcon />;
+            }
+        }
 
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
@@ -309,9 +314,8 @@ export default createReactClass({
 
         return (
             <div className="mx_RoomHeader light-panel">
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
-                    { e2eIcon }
+                <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
                     { privateIcon }
                     { name }
                     { topicElement }

src/components/views/rooms/RoomList.js

@@ -28,7 +28,7 @@ import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import RoomListStore from '../../../stores/RoomListStore';
+import RoomListStore, {TAG_DM} from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
@@ -39,6 +39,7 @@ import * as sdk from "../../../index";
 import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
+import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -699,13 +700,11 @@ export default createReactClass({
                 list: [],
                 extraTiles: this._makeGroupInviteTiles(this.props.searchFilter),
                 label: _t('Community Invites'),
-                order: "recent",
                 isInvite: true,
             },
             {
                 list: this.state.lists['im.vector.fake.invite'],
                 label: _t('Invites'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.invite'),
                 isInvite: true,
             },
@@ -713,22 +712,19 @@ export default createReactClass({
                 list: this.state.lists['m.favourite'],
                 label: _t('Favourites'),
                 tagName: "m.favourite",
-                order: "manual",
                 incomingCall: incomingCallIfTaggedAs('m.favourite'),
             },
             {
-                list: this.state.lists['im.vector.fake.direct'],
-                label: _t('People'),
-                tagName: "im.vector.fake.direct",
-                order: "recent",
-                incomingCall: incomingCallIfTaggedAs('im.vector.fake.direct'),
+                list: this.state.lists[TAG_DM],
+                label: _t('Direct Messages'),
+                tagName: TAG_DM,
+                incomingCall: incomingCallIfTaggedAs(TAG_DM),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
                 addRoomLabel: _t("Start chat"),
             },
             {
                 list: this.state.lists['im.vector.fake.recent'],
                 label: _t('Rooms'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_room'});},
             },
@@ -743,7 +739,6 @@ export default createReactClass({
                     key: tagName,
                     label: labelForTagName(tagName),
                     tagName: tagName,
-                    order: "manual",
                     incomingCall: incomingCallIfTaggedAs(tagName),
                 };
             });
@@ -753,13 +748,11 @@ export default createReactClass({
                 list: this.state.lists['m.lowpriority'],
                 label: _t('Low priority'),
                 tagName: "m.lowpriority",
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('m.lowpriority'),
             },
             {
                 list: this.state.lists['im.vector.fake.archived'],
                 label: _t('Historical'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.archived'),
                 startAsHidden: true,
                 showSpinner: this.state.isLoadingLeftRooms,
@@ -769,26 +762,28 @@ export default createReactClass({
                 list: this.state.lists['m.server_notice'],
                 label: _t('System Alerts'),
                 tagName: "m.lowpriority",
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('m.server_notice'),
             },
         ]);
 
         const subListComponents = this._mapSubListProps(subLists);
 
-        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, ...props} = this.props; // eslint-disable-line
+        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, onKeyDown, ...props} = this.props; // eslint-disable-line
         return (
-            <div
-                {...props}
-                ref={this._collectResizeContainer}
-                className="mx_RoomList"
-                role="tree"
-                aria-label={_t("Rooms")}
-                onMouseMove={this.onMouseMove}
-                onMouseLeave={this.onMouseLeave}
-            >
-                { subListComponents }
-            </div>
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+                {({onKeyDownHandler}) => <div
+                    {...props}
+                    onKeyDown={onKeyDownHandler}
+                    ref={this._collectResizeContainer}
+                    className="mx_RoomList"
+                    role="tree"
+                    aria-label={_t("Rooms")}
+                    onMouseMove={this.onMouseMove}
+                    onMouseLeave={this.onMouseLeave}
+                >
+                    { subListComponents }
+                </div> }
+            </RovingTabIndexProvider>
         );
     },
 });