Merge branch 'develop' into fix-register-auth-with-new-spec

src/components/structures/ContextMenu.js

@@ -245,7 +245,6 @@ export class ContextMenu extends React.Component {
         }
 
         const contextMenuRect = this.state.contextMenuElem ? this.state.contextMenuElem.getBoundingClientRect() : null;
-        const padding = 10;
 
         const chevronOffset = {};
         if (props.chevronFace) {
@@ -264,7 +263,8 @@ export class ContextMenu extends React.Component {
             // If we know the dimensions of the context menu, adjust its position
             // such that it does not leave the (padded) window.
             if (contextMenuRect) {
-                adjusted = Math.min(position.top, document.body.clientHeight - contextMenuRect.height - padding);
+                const padding = 10;
+                adjusted = Math.min(position.top, document.body.clientHeight - contextMenuRect.height + padding);
             }
 
             position.top = adjusted;

src/components/structures/CustomRoomTagPanel.js

@@ -18,7 +18,7 @@ import React from 'react';
 import CustomRoomTagStore from '../../stores/CustomRoomTagStore';
 import AutoHideScrollbar from './AutoHideScrollbar';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 

src/components/structures/EmbeddedPage.js

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import classnames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";

src/components/structures/GroupView.js

@@ -21,7 +21,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import { getHostingLink } from '../../utils/HostingLink';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
@@ -92,7 +92,7 @@ const CategoryRoomList = createReactClass({
         Modal.createTrackedDialog('Add Rooms to Group Summary', '', AddressPickerDialog, {
             title: _t('Add rooms to the community summary'),
             description: _t("Which rooms would you like to add to this summary?"),
-            placeholder: _t("Room name or alias"),
+            placeholder: _t("Room name or address"),
             button: _t("Add to summary"),
             pickerType: 'room',
             validAddressTypes: ['mx-room-id'],

src/components/structures/HomePage.tsx

@@ -21,7 +21,7 @@ import { getHomePageUrl } from "../../utils/pages";
 import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import * as sdk from "../../index";
-import dis from "../../dispatcher";
+import dis from "../../dispatcher/dispatcher";
 
 const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
 const onClickExplore = () => dis.dispatch({action: 'view_room_directory'});

src/components/structures/LeftPanel.js

@@ -21,11 +21,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Key } from '../../Keyboard';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
+import RoomList2 from "../views/rooms/RoomList2";
 
 
 const LeftPanel = createReactClass({
@@ -273,6 +274,29 @@ const LeftPanel = createReactClass({
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 
+        let roomList = null;
+        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
+            roomList = <RoomList2
+                onKeyDown={this._onKeyDown}
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapsed}
+                searchFilter={this.state.searchFilter}
+                ref={this.collectRoomList}
+                onFocus={this._onFocus}
+                onBlur={this._onBlur}
+            />;
+        } else {
+            roomList = <RoomList
+                onKeyDown={this._onKeyDown}
+                onFocus={this._onFocus}
+                onBlur={this._onBlur}
+                ref={this.collectRoomList}
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapsed}
+                searchFilter={this.state.searchFilter}
+                ConferenceHandler={VectorConferenceHandler} />;
+        }
+
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }
@@ -284,15 +308,7 @@ const LeftPanel = createReactClass({
                         { exploreButton }
                         { searchBox }
                     </div>
-                    <RoomList
-                        onKeyDown={this._onKeyDown}
-                        onFocus={this._onFocus}
-                        onBlur={this._onBlur}
-                        ref={this.collectRoomList}
-                        resizeNotifier={this.props.resizeNotifier}
-                        collapsed={this.props.collapsed}
-                        searchFilter={this.state.searchFilter}
-                        ConferenceHandler={VectorConferenceHandler} />
+                    {roomList}
                 </aside>
             </div>
         );

src/components/structures/LoggedInView.tsx

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017, 2018 New Vector Ltd
+Copyright 2017, 2018, 2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,10 +16,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClient } from 'matrix-js-sdk';
-import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { DragDropContext } from 'react-beautiful-dnd';
 
 import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent} from '../../Keyboard';
@@ -27,11 +27,10 @@ import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import sessionStore from '../../stores/SessionStore';
-import {MatrixClientPeg} from '../../MatrixClientPeg';
+import {MatrixClientPeg, IMatrixClientCreds} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
-import RoomListStore from "../../stores/RoomListStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
@@ -40,6 +39,10 @@ import {Resizer, CollapseDistributor} from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts";
 import HomePage from "./HomePage";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import PlatformPeg from "../../PlatformPeg";
+import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
+import { DefaultTagID } from "../../stores/room-list/models";
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -52,6 +55,52 @@ function canElementReceiveInput(el) {
         !!el.getAttribute("contenteditable");
 }
 
+interface IProps {
+    matrixClient: MatrixClient;
+    onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
+    viaServers?: string[];
+    hideToSRUsers: boolean;
+    resizeNotifier: ResizeNotifier;
+    middleDisabled: boolean;
+    initialEventPixelOffset: number;
+    leftDisabled: boolean;
+    rightDisabled: boolean;
+    showCookieBar: boolean;
+    hasNewVersion: boolean;
+    userHasGeneratedPassword: boolean;
+    showNotifierToolbar: boolean;
+    page_type: string;
+    autoJoin: boolean;
+    thirdPartyInvite?: object;
+    roomOobData?: object;
+    currentRoomId: string;
+    ConferenceHandler?: object;
+    collapseLhs: boolean;
+    checkingForUpdate: boolean;
+    config: {
+        piwik: {
+            policyUrl: string;
+        },
+        [key: string]: any,
+    };
+    currentUserId?: string;
+    currentGroupId?: string;
+    currentGroupIsNew?: boolean;
+    version?: string;
+    newVersion?: string;
+    newVersionReleaseNotes?: string;
+}
+interface IState {
+    mouseDown?: {
+        x: number;
+        y: number;
+    };
+    syncErrorData: any;
+    useCompactLayout: boolean;
+    serverNoticeEvents: MatrixEvent[];
+    userHasGeneratedPassword: boolean;
+}
+
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
  * determined by the page_type property.
@@ -61,10 +110,10 @@ function canElementReceiveInput(el) {
  *
  * Components mounted below us can access the matrix client via the react context.
  */
-const LoggedInView = createReactClass({
-    displayName: 'LoggedInView',
+class LoggedInView extends React.PureComponent<IProps, IState> {
+    static displayName = 'LoggedInView';
 
-    propTypes: {
+    static propTypes = {
         matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
         page_type: PropTypes.string.isRequired,
         onRoomCreated: PropTypes.func,
@@ -77,25 +126,28 @@ const LoggedInView = createReactClass({
         viaServers: PropTypes.arrayOf(PropTypes.string),
 
         // and lots and lots of other stuff.
-    },
+    };
 
-    getInitialState: function() {
-        return {
+    protected readonly _matrixClient: MatrixClient;
+    protected readonly _roomView: React.RefObject<any>;
+    protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
+    protected readonly _sessionStore: sessionStore;
+    protected readonly _sessionStoreToken: { remove: () => void };
+    protected resizer: Resizer;
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            mouseDown: undefined,
+            syncErrorData: undefined,
+            userHasGeneratedPassword: false,
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             // any currently active server notice events
             serverNoticeEvents: [],
         };
-    },
 
-    componentDidMount: function() {
-        this.resizer = this._createResizer();
-        this.resizer.attach();
-        this._loadResizerPreferences();
-    },
-
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
 
@@ -117,22 +169,29 @@ const LoggedInView = createReactClass({
 
         fixupColorFonts();
 
-        this._roomView = createRef();
-    },
+        this._roomView = React.createRef();
+        this._resizeContainer = React.createRef();
+    }
 
-    componentDidUpdate(prevProps) {
+    componentDidMount() {
+        this.resizer = this._createResizer();
+        this.resizer.attach();
+        this._loadResizerPreferences();
+    }
+
+    componentDidUpdate(prevProps, prevState) {
         // attempt to guess when a banner was opened or closed
         if (
             (prevProps.showCookieBar !== this.props.showCookieBar) ||
             (prevProps.hasNewVersion !== this.props.hasNewVersion) ||
-            (prevProps.userHasGeneratedPassword !== this.props.userHasGeneratedPassword) ||
+            (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword) ||
             (prevProps.showNotifierToolbar !== this.props.showNotifierToolbar)
         ) {
             this.props.resizeNotifier.notifyBannersChanged();
         }
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         document.removeEventListener('keydown', this._onNativeKeyDown, false);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
@@ -141,7 +200,7 @@ const LoggedInView = createReactClass({
             this._sessionStoreToken.remove();
         }
         this.resizer.detach();
-    },
+    }
 
     // Child components assume that the client peg will not be null, so give them some
     // sort of assurance here by only allowing a re-render if the client is truthy.
@@ -149,22 +208,22 @@ const LoggedInView = createReactClass({
     // This is required because `LoggedInView` maintains its own state and if this state
     // updates after the client peg has been made null (during logout), then it will
     // attempt to re-render and the children will throw errors.
-    shouldComponentUpdate: function() {
+    shouldComponentUpdate() {
         return Boolean(MatrixClientPeg.get());
-    },
+    }
 
-    canResetTimelineInRoom: function(roomId) {
+    canResetTimelineInRoom = (roomId) => {
         if (!this._roomView.current) {
             return true;
         }
         return this._roomView.current.canResetTimeline();
-    },
+    };
 
-    _setStateFromSessionStore() {
+    _setStateFromSessionStore = () => {
         this.setState({
             userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
         });
-    },
+    };
 
     _createResizer() {
         const classNames = {
@@ -188,24 +247,22 @@ const LoggedInView = createReactClass({
             },
         };
         const resizer = new Resizer(
-            this.resizeContainer,
+            this._resizeContainer.current,
             CollapseDistributor,
             collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
-    },
+    }
 
     _loadResizerPreferences() {
-        let lhsSize = window.localStorage.getItem("mx_lhs_size");
-        if (lhsSize !== null) {
-            lhsSize = parseInt(lhsSize, 10);
-        } else {
+        let lhsSize = parseInt(window.localStorage.getItem("mx_lhs_size"), 10);
+        if (isNaN(lhsSize)) {
             lhsSize = 350;
         }
         this.resizer.forHandleAt(0).resize(lhsSize);
-    },
+    }
 
-    onAccountData: function(event) {
+    onAccountData = (event) => {
         if (event.getType() === "im.vector.web.settings") {
             this.setState({
                 useCompactLayout: event.getContent().useCompactLayout,
@@ -214,9 +271,9 @@ const LoggedInView = createReactClass({
         if (event.getType() === "m.ignored_user_list") {
             dis.dispatch({action: "ignore_state_changed"});
         }
-    },
+    };
 
-    onSync: function(syncState, oldSyncState, data) {
+    onSync = (syncState, oldSyncState, data) => {
         const oldErrCode = (
             this.state.syncErrorData &&
             this.state.syncErrorData.error &&
@@ -238,21 +295,21 @@ const LoggedInView = createReactClass({
         if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
             this._updateServerNoticeEvents();
         }
-    },
+    };
 
-    onRoomStateEvents: function(ev, state) {
-        const roomLists = RoomListStore.getRoomLists();
-        if (roomLists['m.server_notice'] && roomLists['m.server_notice'].some(r => r.roomId === ev.getRoomId())) {
+    onRoomStateEvents = (ev, state) => {
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
             this._updateServerNoticeEvents();
         }
-    },
+    };
 
-    _updateServerNoticeEvents: async function() {
-        const roomLists = RoomListStore.getRoomLists();
-        if (!roomLists['m.server_notice']) return [];
+    _updateServerNoticeEvents = async () => {
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (!roomLists[DefaultTagID.ServerNotice]) return [];
 
         const pinnedEvents = [];
-        for (const room of roomLists['m.server_notice']) {
+        for (const room of roomLists[DefaultTagID.ServerNotice]) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
@@ -260,16 +317,16 @@ const LoggedInView = createReactClass({
             const pinnedEventIds = pinStateEvent.getContent().pinned.slice(0, MAX_PINNED_NOTICES_PER_ROOM);
             for (const eventId of pinnedEventIds) {
                 const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId, 0);
-                const ev = timeline.getEvents().find(ev => ev.getId() === eventId);
-                if (ev) pinnedEvents.push(ev);
+                const event = timeline.getEvents().find(ev => ev.getId() === eventId);
+                if (event) pinnedEvents.push(event);
             }
         }
         this.setState({
             serverNoticeEvents: pinnedEvents,
         });
-    },
+    };
 
-    _onPaste: function(ev) {
+    _onPaste = (ev) => {
         let canReceiveInput = false;
         let element = ev.target;
         // test for all parents because the target can be a child of a contenteditable element
@@ -283,7 +340,7 @@ const LoggedInView = createReactClass({
             // so dispatch synchronously before paste happens
             dis.dispatch({action: 'focus_composer'}, true);
         }
-    },
+    };
 
     /*
     SOME HACKERY BELOW:
@@ -307,22 +364,22 @@ const LoggedInView = createReactClass({
     We also listen with a native listener on the document to get keydown events when no element is focused.
     Bubbling is irrelevant here as the target is the body element.
     */
-    _onReactKeyDown: function(ev) {
+    _onReactKeyDown = (ev) => {
         // events caught while bubbling up on the root element
         // of this component, so something must be focused.
         this._onKeyDown(ev);
-    },
+    };
 
-    _onNativeKeyDown: function(ev) {
+    _onNativeKeyDown = (ev) => {
         // only pass this if there is no focused element.
         // if there is, _onKeyDown will be called by the
         // react keydown handler that respects the react bubbling order.
         if (ev.target === document.body) {
             this._onKeyDown(ev);
         }
-    },
+    };
 
-    _onKeyDown: function(ev) {
+    _onKeyDown = (ev) => {
             /*
             // Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
             // Will need to find a better meta key if anyone actually cares about using this.
@@ -407,6 +464,11 @@ const LoggedInView = createReactClass({
                     });
                     handled = true;
                 }
+                break;
+
+            default:
+                // if we do not have a handler for it, pass it to the platform which might
+                handled = PlatformPeg.get().onKeyDown(ev);
         }
 
         if (handled) {
@@ -432,19 +494,19 @@ const LoggedInView = createReactClass({
                 // that would prevent typing in the now-focussed composer
             }
         }
-    },
+    };
 
     /**
      * dispatch a page-up/page-down/etc to the appropriate component
      * @param {Object} ev The key event
      */
-    _onScrollKeyPressed: function(ev) {
+    _onScrollKeyPressed = (ev) => {
         if (this._roomView.current) {
             this._roomView.current.handleScrollKey(ev);
         }
-    },
+    };
 
-    _onDragEnd: function(result) {
+    _onDragEnd = (result) => {
         // Dragged to an invalid destination, not onto a droppable
         if (!result.destination) {
             return;
@@ -467,9 +529,9 @@ const LoggedInView = createReactClass({
         } else if (dest.startsWith('room-sub-list-droppable_')) {
             this._onRoomTileEndDrag(result);
         }
-    },
+    };
 
-    _onRoomTileEndDrag: function(result) {
+    _onRoomTileEndDrag = (result) => {
         let newTag = result.destination.droppableId.split('_')[1];
         let prevTag = result.source.droppableId.split('_')[1];
         if (newTag === 'undefined') newTag = undefined;
@@ -486,9 +548,9 @@ const LoggedInView = createReactClass({
             prevTag, newTag,
             oldIndex, newIndex,
         ), true);
-    },
+    };
 
-    _onMouseDown: function(ev) {
+    _onMouseDown = (ev) => {
         // When the panels are disabled, clicking on them results in a mouse event
         // which bubbles to certain elements in the tree. When this happens, close
         // any settings page that is currently open (user/room/group).
@@ -507,9 +569,9 @@ const LoggedInView = createReactClass({
                 });
             }
         }
-    },
+    };
 
-    _onMouseUp: function(ev) {
+    _onMouseUp = (ev) => {
         if (!this.state.mouseDown) return;
 
         const deltaX = ev.pageX - this.state.mouseDown.x;
@@ -528,13 +590,9 @@ const LoggedInView = createReactClass({
         // Always clear the mouseDown state to ensure we don't accidentally
         // use stale values due to the mouseDown checks.
         this.setState({mouseDown: null});
-    },
+    };
 
-    _setResizeContainerRef(div) {
-        this.resizeContainer = div;
-    },
-
-    render: function() {
+    render() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserView = sdk.getComponent('structures.UserView');
@@ -647,7 +705,7 @@ const LoggedInView = createReactClass({
                     { topBar }
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>
-                        <div ref={this._setResizeContainerRef} className={bodyClasses}>
+                        <div ref={this._resizeContainer} className={bodyClasses}>
                             <LeftPanel
                                 resizeNotifier={this.props.resizeNotifier}
                                 collapsed={this.props.collapseLhs || false}
@@ -660,7 +718,7 @@ const LoggedInView = createReactClass({
                 </div>
             </MatrixClientContext.Provider>
         );
-    },
-});
+    }
+}
 
 export default LoggedInView;

src/components/structures/MessagePanel.js

@@ -29,6 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
 import {textForEvent} from "../../TextForEvent";
+import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -109,14 +110,16 @@ export default class MessagePanel extends React.Component {
         showReactions: PropTypes.bool,
     };
 
-    constructor() {
-        super();
+    // Force props to be loaded for useIRCLayout
+    constructor(props) {
+        super(props);
 
         this.state = {
             // previous positions the read marker has been in, so we can
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -169,6 +172,8 @@ export default class MessagePanel extends React.Component {
 
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
+
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
     }
 
     componentDidMount() {
@@ -178,6 +183,7 @@ export default class MessagePanel extends React.Component {
     componentWillUnmount() {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+        SettingsStore.unwatchSetting(this._layoutWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -196,6 +202,17 @@ export default class MessagePanel extends React.Component {
         });
     };
 
+    onLayoutChange = () => {
+        this.setState({
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
+        });
+    }
+
+    useIRCLayout(ircLayoutSelected) {
+        // if room is null we are not in a normal room list
+        return ircLayoutSelected && this.props.room;
+    }
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -503,6 +520,7 @@ export default class MessagePanel extends React.Component {
     }
 
     _getTilesForEvent(prevEvent, mxEv, last) {
+        const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
@@ -577,25 +595,28 @@ export default class MessagePanel extends React.Component {
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
-                <EventTile mxEvent={mxEv}
-                    continuation={continuation}
-                    isRedacted={mxEv.isRedacted()}
-                    replacingEventId={mxEv.replacingEventId()}
-                    editState={isEditing && this.props.editState}
-                    onHeightChanged={this._onHeightChanged}
-                    readReceipts={readReceipts}
-                    readReceiptMap={this._readReceiptMap}
-                    showUrlPreview={this.props.showUrlPreview}
-                    checkUnmounting={this._isUnmounting.bind(this)}
-                    eventSendStatus={mxEv.getAssociatedStatus()}
-                    tileShape={this.props.tileShape}
-                    isTwelveHour={this.props.isTwelveHour}
-                    permalinkCreator={this.props.permalinkCreator}
-                    last={last}
-                    isSelectedEvent={highlight}
-                    getRelationsForEvent={this.props.getRelationsForEvent}
-                    showReactions={this.props.showReactions}
-                />
+                <TileErrorBoundary mxEvent={mxEv}>
+                    <EventTile mxEvent={mxEv}
+                        continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
+                        replacingEventId={mxEv.replacingEventId()}
+                        editState={isEditing && this.props.editState}
+                        onHeightChanged={this._onHeightChanged}
+                        readReceipts={readReceipts}
+                        readReceiptMap={this._readReceiptMap}
+                        showUrlPreview={this.props.showUrlPreview}
+                        checkUnmounting={this._isUnmounting.bind(this)}
+                        eventSendStatus={mxEv.getAssociatedStatus()}
+                        tileShape={this.props.tileShape}
+                        isTwelveHour={this.props.isTwelveHour}
+                        permalinkCreator={this.props.permalinkCreator}
+                        last={last}
+                        isSelectedEvent={highlight}
+                        getRelationsForEvent={this.props.getRelationsForEvent}
+                        showReactions={this.props.showReactions}
+                        useIRCLayout={this.state.useIRCLayout}
+                    />
+                </TileErrorBoundary>
             </li>,
         );
 
@@ -757,6 +778,7 @@ export default class MessagePanel extends React.Component {
     }
 
     render() {
+        const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary');
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
@@ -775,6 +797,8 @@ export default class MessagePanel extends React.Component {
             this.props.className,
             {
                 "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+                "mx_IRCLayout": this.state.useIRCLayout,
+                "mx_GroupLayout": !this.state.useIRCLayout,
             },
         );
 
@@ -788,23 +812,35 @@ export default class MessagePanel extends React.Component {
             );
         }
 
+        let ircResizer = null;
+        if (this.state.useIRCLayout) {
+            ircResizer = <IRCTimelineProfileResizer
+                minWidth={20}
+                maxWidth={600}
+                roomId={this.props.room ? this.props.roomroomId : null}
+            />;
+        }
+
         return (
-            <ScrollPanel
-                ref={this._scrollPanel}
-                className={className}
-                onScroll={this.props.onScroll}
-                onResize={this.onResize}
-                onFillRequest={this.props.onFillRequest}
-                onUnfillRequest={this.props.onUnfillRequest}
-                style={style}
-                stickyBottom={this.props.stickyBottom}
-                resizeNotifier={this.props.resizeNotifier}
-            >
-                { topSpinner }
-                { this._getEventTiles() }
-                { whoIsTyping }
-                { bottomSpinner }
-            </ScrollPanel>
+            <ErrorBoundary>
+                <ScrollPanel
+                    ref={this._scrollPanel}
+                    className={className}
+                    onScroll={this.props.onScroll}
+                    onResize={this.onResize}
+                    onFillRequest={this.props.onFillRequest}
+                    onUnfillRequest={this.props.onUnfillRequest}
+                    style={style}
+                    stickyBottom={this.props.stickyBottom}
+                    resizeNotifier={this.props.resizeNotifier}
+                    fixedChildren={ircResizer}
+                >
+                    { topSpinner }
+                    { this._getEventTiles() }
+                    { whoIsTyping }
+                    { bottomSpinner }
+                </ScrollPanel>
+            </ErrorBoundary>
         );
     }
 }

src/components/structures/MyGroups.js

@@ -19,7 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../index';
 import { _t } from '../../languageHandler';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";

src/components/structures/RightPanel.js

@@ -22,7 +22,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GroupStore from '../../stores/GroupStore';
@@ -30,6 +30,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases";
 import RightPanelStore from "../../stores/RightPanelStore";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
+import {Action} from "../../dispatcher/actions";
 
 export default class RightPanel extends React.Component {
     static get propTypes() {
@@ -219,12 +220,29 @@ export default class RightPanel extends React.Component {
                 break;
             case RIGHT_PANEL_PHASES.RoomMemberInfo:
             case RIGHT_PANEL_PHASES.EncryptionPanel:
-                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                if (SettingsStore.getValue("feature_cross_signing")) {
                     const onClose = () => {
-                        dis.dispatch({
-                            action: "view_user",
-                            member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
-                        });
+                        // XXX: There are three different ways of 'closing' this panel depending on what state
+                        // things are in... this knows far more than it should do about the state of the rest
+                        // of the app and is generally a bit silly.
+                        if (this.props.user) {
+                            // If we have a user prop then we're displaying a user from the 'user' page type
+                            // in LoggedInView, so need to change the page type to close the panel (we switch
+                            // to the home page which is not obviously the correct thing to do, but I'm not sure
+                            // anything else is - we could hide the close button altogether?)
+                            dis.dispatch({
+                                action: "view_home_page",
+                            });
+                        } else {
+                            // Otherwise we have got our user from RoomViewStore which means we're being shown
+                            // within a room, so go back to the member panel if we were in the encryption panel,
+                            // or the member list if we were in the member panel... phew.
+                            dis.dispatch({
+                                action: Action.ViewUser,
+                                member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ?
+                                    this.state.member : null,
+                            });
+                        }
                     };
                     panel = <UserInfo
                         user={this.state.member}
@@ -246,10 +264,10 @@ export default class RightPanel extends React.Component {
                 panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
                 break;
             case RIGHT_PANEL_PHASES.GroupMemberInfo:
-                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                if (SettingsStore.getValue("feature_cross_signing")) {
                     const onClose = () => {
                         dis.dispatch({
-                            action: "view_user",
+                            action: Action.ViewUser,
                             member: null,
                         });
                     };

src/components/structures/RoomDirectory.js

@@ -20,7 +20,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
-import dis from "../../dispatcher";
+import dis from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import PropTypes from 'prop-types';
@@ -199,7 +199,7 @@ export default createReactClass({
 
         let desc;
         if (alias) {
-            desc = _t('Delete the room alias %(alias)s and remove %(name)s from the directory?', {alias: alias, name: name});
+            desc = _t('Delete the room address %(alias)s and remove %(name)s from the directory?', {alias, name});
         } else {
             desc = _t('Remove %(name)s from the directory?', {name: name});
         }
@@ -216,7 +216,7 @@ export default createReactClass({
 
                 MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
                     if (!alias) return;
-                    step = _t('delete the alias.');
+                    step = _t('delete the address.');
                     return MatrixClientPeg.get().deleteAlias(alias);
                 }).then(() => {
                     modal.close();
@@ -367,7 +367,10 @@ export default createReactClass({
 
     onCreateRoomClick: function(room) {
         this.props.onFinished();
-        dis.dispatch({action: 'view_create_room'});
+        dis.dispatch({
+            action: 'view_create_room',
+            public: true,
+        });
     },
 
     showRoomAlias: function(alias, autoJoin=false) {

src/components/structures/RoomStatusBar.js

@@ -25,7 +25,7 @@ import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import * as cryptodevices from '../../cryptodevices';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
 
 const STATUS_BAR_HIDDEN = 0;

src/components/structures/RoomSubList.js

@@ -20,7 +20,7 @@ limitations under the License.
 import React, {createRef} from 'react';
 import classNames from 'classnames';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import * as Unread from '../../Unread';
 import * as RoomNotifs from '../../RoomNotifs';
 import * as FormattingUtils from '../../utils/FormattingUtils';
@@ -32,10 +32,47 @@ import RoomTile from "../views/rooms/RoomTile";
 import LazyRenderList from "../views/elements/LazyRenderList";
 import {_t} from "../../languageHandler";
 import {RovingTabIndexWrapper} from "../../accessibility/RovingTabIndex";
+import {toPx} from "../../utils/units";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
 
+class RoomTileErrorBoundary extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Side effects are not permitted here, so we only update the state so
+        // that the next render shows an error message.
+        return { error };
+    }
+
+    componentDidCatch(error, { componentStack }) {
+        // Browser consoles are better at formatting output when native errors are passed
+        // in their own `console.error` invocation.
+        console.error(error);
+        console.error(
+            "The above error occured while React was rendering the following components:",
+            componentStack,
+        );
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<div className="mx_RoomTile mx_RoomTileError">
+                {this.props.roomId}
+            </div>);
+        } else {
+            return this.props.children;
+        }
+    }
+}
+
 export default class RoomSubList extends React.PureComponent {
     static displayName = 'RoomSubList';
     static debug = debug;
@@ -207,7 +244,7 @@ export default class RoomSubList extends React.PureComponent {
     };
 
     makeRoomTile = (room) => {
-        return <RoomTile
+        return <RoomTileErrorBoundary roomId={room.roomId}><RoomTile
             room={room}
             roomSubList={this}
             tagName={this.props.tagName}
@@ -220,7 +257,7 @@ export default class RoomSubList extends React.PureComponent {
             refreshSubList={this._updateSubListCount}
             incomingCall={null}
             onClick={this.onRoomTileClick}
-        />;
+        /></RoomTileErrorBoundary>;
     };
 
     _onNotifBadgeClick = (e) => {
@@ -383,7 +420,7 @@ export default class RoomSubList extends React.PureComponent {
 
     setHeight = (height) => {
         if (this._subList.current) {
-            this._subList.current.style.height = `${height}px`;
+            this._subList.current.style.height = toPx(height);
         }
         this._updateLazyRenderHeight(height);
     };

src/components/structures/RoomView.js

@@ -34,14 +34,14 @@ import ContentMessages from '../../ContentMessages';
 import Modal from '../../Modal';
 import * as sdk from '../../index';
 import CallHandler from '../../CallHandler';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import Tinter from '../../Tinter';
 import rate_limited_func from '../../ratelimitedfunc';
 import * as ObjectUtils from '../../ObjectUtils';
 import * as Rooms from '../../Rooms';
 import eventSearch from '../../Searching';
 
-import {isOnlyCtrlOrCmdKeyEvent, Key} from '../../Keyboard';
+import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isOnlyCtrlOrCmdKeyEvent, Key} from '../../Keyboard';
 
 import MainSplit from './MainSplit';
 import RightPanel from './RightPanel';
@@ -49,7 +49,6 @@ import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
-import WidgetUtils from '../../utils/WidgetUtils';
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -165,6 +164,8 @@ export default createReactClass({
 
             canReact: false,
             canReply: false,
+
+            matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
     },
 
@@ -182,6 +183,7 @@ export default createReactClass({
         this.context.on("crypto.keyBackupStatus", this.onKeyBackupStatus);
         this.context.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         this.context.on("userTrustStatusChanged", this.onUserVerificationChanged);
+        this.context.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
@@ -232,7 +234,8 @@ export default createReactClass({
             initialEventId: RoomViewStore.getInitialEventId(),
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             forwardingEvent: RoomViewStore.getForwardingEvent(),
-            shouldPeek: RoomViewStore.shouldPeek(),
+            // we should only peek once we have a ready client
+            shouldPeek: this.state.matrixClientIsReady && RoomViewStore.shouldPeek(),
             showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", roomId),
             showReadReceipts: SettingsStore.getValue("showReadReceipts", roomId),
         };
@@ -405,13 +408,9 @@ export default createReactClass({
         const hideWidgetDrawer = localStorage.getItem(
             room.roomId + "_hide_widget_drawer");
 
-        if (hideWidgetDrawer === "true") {
-            return false;
-        }
-
-        const widgets = WidgetEchoStore.getEchoedRoomWidgets(room.roomId, WidgetUtils.getRoomWidgets(room));
-
-        return widgets.length > 0 || WidgetEchoStore.roomHasPendingWidgets(room.roomId, WidgetUtils.getRoomWidgets(room));
+        // This is confusing, but it means to say that we default to the tray being
+        // hidden unless the user clicked to open it.
+        return hideWidgetDrawer === "false";
     },
 
     componentDidMount: function() {
@@ -429,7 +428,7 @@ export default createReactClass({
         }
         this.onResize();
 
-        document.addEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onNativeKeyDown);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -504,6 +503,7 @@ export default createReactClass({
             this.context.removeListener("crypto.keyBackupStatus", this.onKeyBackupStatus);
             this.context.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
             this.context.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
+            this.context.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
@@ -511,7 +511,7 @@ export default createReactClass({
             this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
         }
 
-        document.removeEventListener("keydown", this.onKeyDown);
+        document.removeEventListener("keydown", this.onNativeKeyDown);
 
         // Remove RoomStore listener
         if (this._roomStoreToken) {
@@ -553,7 +553,8 @@ export default createReactClass({
         }
     },
 
-    onKeyDown: function(ev) {
+    // we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
+    onNativeKeyDown: function(ev) {
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
 
@@ -579,6 +580,37 @@ export default createReactClass({
         }
     },
 
+    onReactKeyDown: function(ev) {
+        let handled = false;
+
+        switch (ev.key) {
+            case Key.ESCAPE:
+                if (!ev.altKey && !ev.ctrlKey && !ev.shiftKey && !ev.metaKey) {
+                    this._messagePanel.forgetReadMarker();
+                    this.jumpToLiveTimeline();
+                    handled = true;
+                }
+                break;
+            case Key.PAGE_UP:
+                if (!ev.altKey && !ev.ctrlKey && ev.shiftKey && !ev.metaKey) {
+                    this.jumpToReadMarker();
+                    handled = true;
+                }
+                break;
+            case Key.U.toUpperCase():
+                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
+                    dis.dispatch({ action: "upload_file" })
+                    handled = true;
+                }
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
     onAction: function(payload) {
         switch (payload.action) {
             case 'message_send_failed':
@@ -652,6 +684,16 @@ export default createReactClass({
                     });
                 }
                 break;
+            case 'sync_state':
+                if (!this.state.matrixClientIsReady) {
+                    this.setState({
+                        matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
+                    }, () => {
+                        // send another "initial" RVS update to trigger peeking if needed
+                        this._onRoomViewStoreUpdate(true);
+                    });
+                }
+                break;
         }
     },
 
@@ -805,6 +847,13 @@ export default createReactClass({
         this._updateE2EStatus(room);
     },
 
+    onCrossSigningKeysChanged: function() {
+        const room = this.state.room;
+        if (room) {
+            this._updateE2EStatus(room);
+        }
+    },
+
     _updateE2EStatus: async function(room) {
         if (!this.context.isRoomEncrypted(room.roomId)) {
             return;
@@ -818,7 +867,7 @@ export default createReactClass({
             });
             return;
         }
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             room.hasUnverifiedDevices().then((hasUnverifiedDevices) => {
                 this.setState({
                     e2eStatus: hasUnverifiedDevices ? "warning" : "verified",
@@ -1203,7 +1252,7 @@ export default createReactClass({
             });
         }, function(error) {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            console.error("Search failed: " + error);
+            console.error("Search failed", error);
             Modal.createTrackedDialog('Search failed', '', ErrorDialog, {
                 title: _t("Search failed"),
                 description: ((error && error.message) ? error.message : _t("Server may be unavailable, overloaded, or search timed out :(")),
@@ -1627,14 +1676,16 @@ export default createReactClass({
         const ErrorBoundary = sdk.getComponent("elements.ErrorBoundary");
 
         if (!this.state.room) {
-            const loading = this.state.roomLoading || this.state.peekLoading;
+            const loading = !this.state.matrixClientIsReady || this.state.roomLoading || this.state.peekLoading;
             if (loading) {
+                // Assume preview loading if we don't have a ready client or a room ID (still resolving the alias)
+                const previewLoading = !this.state.matrixClientIsReady || !this.state.roomId || this.state.peekLoading;
                 return (
                     <div className="mx_RoomView">
                         <ErrorBoundary>
                             <RoomPreviewBar
                                 canPreview={false}
-                                previewLoading={this.state.peekLoading}
+                                previewLoading={previewLoading && !this.state.roomLoadError}
                                 error={this.state.roomLoadError}
                                 loading={loading}
                                 joining={this.state.joining}
@@ -1659,7 +1710,8 @@ export default createReactClass({
                 return (
                     <div className="mx_RoomView">
                         <ErrorBoundary>
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                            <RoomPreviewBar
+                                onJoinClick={this.onJoinButtonClicked}
                                 onForgetClick={this.onForgetClick}
                                 onRejectClick={this.onRejectThreepidInviteButtonClicked}
                                 canPreview={false} error={this.state.roomLoadError}
@@ -1693,8 +1745,11 @@ export default createReactClass({
             } else {
                 const myUserId = this.context.credentials.userId;
                 const myMember = this.state.room.getMember(myUserId);
-                const inviteEvent = myMember.events.member;
-                var inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
+                const inviteEvent = myMember ? myMember.events.member : null;
+                let inviterName = _t("Unknown");
+                if (inviteEvent) {
+                    inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
+                }
 
                 // We deliberately don't try to peek into invites, even if we have permission to peek
                 // as they could be a spam vector.
@@ -1764,7 +1819,7 @@ export default createReactClass({
         const showRoomRecoveryReminder = (
             SettingsStore.getValue("showRoomRecoveryReminder") &&
             this.context.isRoomEncrypted(this.state.room.roomId) &&
-            !this.context.getKeyBackupEnabled()
+            this.context.getKeyBackupEnabled() === false
         );
 
         const hiddenHighlightCount = this._getHiddenHighlightCount();
@@ -2004,9 +2059,13 @@ export default createReactClass({
             mx_RoomView_timeline_rr_enabled: this.state.showReadReceipts,
         });
 
+        const mainClasses = classNames("mx_RoomView", {
+            mx_RoomView_inCall: inCall,
+        });
+
         return (
             <RoomContext.Provider value={this.state}>
-                <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref={this._roomView}>
+                <main className={mainClasses} ref={this._roomView} onKeyDown={this.onReactKeyDown}>
                     <ErrorBoundary>
                         <RoomHeader
                             room={this.state.room}

src/components/structures/ScrollPanel.js

@@ -144,6 +144,11 @@ export default createReactClass({
         /* resizeNotifier: ResizeNotifier to know when middle column has changed size
          */
         resizeNotifier: PropTypes.object,
+
+        /* fixedChildren: allows for children to be passed which are rendered outside
+         * of the wrapper
+         */
+        fixedChildren: PropTypes.node,
     },
 
     getDefaultProps: function() {
@@ -881,6 +886,7 @@ export default createReactClass({
         return (<AutoHideScrollbar wrappedRef={this._collectScroll}
                 onScroll={this.onScroll}
                 className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
+                    { this.props.fixedChildren }
                     <div className="mx_RoomView_messageListWrapper">
                         <ol ref={this._itemlist} className="mx_RoomView_MessageList" aria-live="polite" role="list">
                             { this.props.children }

src/components/structures/SearchBox.js

@@ -19,7 +19,7 @@ import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { Key } from '../../Keyboard';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import { throttle } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import classNames from 'classnames';

src/components/structures/TagPanel.js

@@ -22,7 +22,7 @@ import TagOrderStore from '../../stores/TagOrderStore';
 import GroupActions from '../../actions/GroupActions';
 
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';

src/components/structures/TagPanelButtons.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../index';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 

src/components/structures/TimelinePanel.js

@@ -29,7 +29,7 @@ import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as ObjectUtils from "../../ObjectUtils";
 import UserActivity from "../../UserActivity";
 import Modal from "../../Modal";
-import dis from "../../dispatcher";
+import dis from "../../dispatcher/dispatcher";
 import * as sdk from "../../index";
 import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';

src/components/structures/ToastContainer.tsx

@@ -15,14 +15,21 @@ limitations under the License.
 */
 
 import * as React from "react";
-import { _t } from '../../languageHandler';
-import ToastStore from "../../stores/ToastStore";
+import ToastStore, {IToast} from "../../stores/ToastStore";
 import classNames from "classnames";
 
-export default class ToastContainer extends React.Component {
-    constructor() {
-        super();
-        this.state = {toasts: ToastStore.sharedInstance().getToasts()};
+interface IState {
+    toasts: IToast<any>[];
+    countSeen: number;
+}
+
+export default class ToastContainer extends React.Component<{}, IState> {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            toasts: ToastStore.sharedInstance().getToasts(),
+            countSeen: ToastStore.sharedInstance().getCountSeen(),
+        };
 
         // Start listening here rather than in componentDidMount because
         // toasts may dismiss themselves in their didMount if they find
@@ -36,7 +43,10 @@ export default class ToastContainer extends React.Component {
     }
 
     _onToastStoreUpdate = () => {
-        this.setState({toasts: ToastStore.sharedInstance().getToasts()});
+        this.setState({
+            toasts: ToastStore.sharedInstance().getToasts(),
+            countSeen: ToastStore.sharedInstance().getCountSeen(),
+        });
     };
 
     render() {
@@ -50,14 +60,21 @@ export default class ToastContainer extends React.Component {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
-            const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
+
+            let countIndicator;
+            if (isStacked || this.state.countSeen > 0) {
+                countIndicator = ` (${this.state.countSeen + 1}/${this.state.countSeen + totalCount})`;
+            }
 
             const toastProps = Object.assign({}, props, {
                 key,
                 toastKey: key,
             });
             toast = (<div className={toastClasses}>
-                <h2>{title}{countIndicator}</h2>
+                <div className="mx_Toast_title">
+                    <h2>{title}</h2>
+                    <span>{countIndicator}</span>
+                </div>
                 <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
             </div>);
         }

src/components/structures/TopLeftMenuButton.js

@@ -22,7 +22,7 @@ import BaseAvatar from '../views/avatars/BaseAvatar';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import * as Avatar from '../../Avatar';
 import { _t } from '../../languageHandler';
-import dis from "../../dispatcher";
+import dis from "../../dispatcher/dispatcher";
 import {ContextMenu, ContextMenuButton} from "./ContextMenu";
 
 const AVATAR_SIZE = 28;

src/components/structures/UploadBar.js

@@ -19,7 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import ContentMessages from '../../ContentMessages';
-import dis from "../../dispatcher";
+import dis from "../../dispatcher/dispatcher";
 import filesize from "filesize";
 import { _t } from '../../languageHandler';
 

src/components/structures/UserView.js

@@ -22,6 +22,7 @@ import {MatrixClientPeg} from "../../MatrixClientPeg";
 import * as sdk from "../../index";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
+import HomePage from "./HomePage";
 
 export default class UserView extends React.Component {
     static get propTypes() {
@@ -42,7 +43,10 @@ export default class UserView extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.userId !== this.props.userId) {
+        // XXX: We shouldn't need to null check the userId here, but we declare
+        // it as optional and MatrixChat sometimes fires in a way which results
+        // in an NPE when we try to update the profile info.
+        if (prevProps.userId !== this.props.userId && this.props.userId) {
             this._loadProfileInfo();
         }
     }
@@ -76,7 +80,7 @@ export default class UserView extends React.Component {
             const RightPanel = sdk.getComponent('structures.RightPanel');
             const MainSplit = sdk.getComponent('structures.MainSplit');
             const panel = <RightPanel user={this.state.member} />;
-            return (<MainSplit panel={panel}><div style={{flex: "1"}} /></MainSplit>);
+            return (<MainSplit panel={panel}><HomePage /></MainSplit>);
         } else {
             return (<div />);
         }

src/components/structures/auth/CompleteSecurity.js

@@ -59,17 +59,17 @@ export default class CompleteSecurity extends React.Component {
         let title;
 
         if (phase === PHASE_INTRO) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
-            title = _t("Complete security");
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+            title = _t("Verify this login");
         } else if (phase === PHASE_DONE) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified"></span>;
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
             title = _t("Session verified");
         } else if (phase === PHASE_CONFIRM_SKIP) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Are you sure?");
         } else if (phase === PHASE_BUSY) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
-            title = _t("Complete security");
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+            title = _t("Verify this login");
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }

src/components/structures/auth/Login.js

@@ -84,11 +84,13 @@ export default createReactClass({
         onServerConfigChange: PropTypes.func.isRequired,
 
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        isSyncing: PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
             busy: false,
+            busyLoggingIn: null,
             errorText: null,
             loginIncorrect: false,
             canTryLogin: true, // can we attempt to log in or are there validation errors?
@@ -169,6 +171,7 @@ export default createReactClass({
                 const componentState = AutoDiscoveryUtils.authComponentStateForError(e);
                 this.setState({
                     busy: false,
+                    busyLoggingIn: false,
                     ...componentState,
                 });
                 aliveAgain = !componentState.serverErrorIsFatal;
@@ -182,6 +185,7 @@ export default createReactClass({
 
         this.setState({
             busy: true,
+            busyLoggingIn: true,
             errorText: null,
             loginIncorrect: false,
         });
@@ -250,6 +254,7 @@ export default createReactClass({
 
             this.setState({
                 busy: false,
+                busyLoggingIn: 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
@@ -350,7 +355,8 @@ export default createReactClass({
             ev.preventDefault();
             ev.stopPropagation();
             const ssoKind = step === 'm.login.sso' ? 'sso' : 'cas';
-            PlatformPeg.get().startSingleSignOn(this._loginLogic.createTemporaryClient(), ssoKind);
+            PlatformPeg.get().startSingleSignOn(this._loginLogic.createTemporaryClient(), ssoKind,
+                this.props.fragmentAfterLogin);
         } else {
             // Don't intercept - just go through to the register page
             this.onRegisterClick(ev);
@@ -594,6 +600,7 @@ export default createReactClass({
                loginIncorrect={this.state.loginIncorrect}
                serverConfig={this.props.serverConfig}
                disableSubmit={this.isBusy()}
+               busy={this.props.isSyncing || this.state.busyLoggingIn}
             />
         );
     },
@@ -622,16 +629,20 @@ export default createReactClass({
                 <SSOButton
                     className="mx_Login_sso_link mx_Login_submit"
                     matrixClient={this._loginLogic.createTemporaryClient()}
-                    loginType={loginType} />
+                    loginType={loginType}
+                    fragmentAfterLogin={this.props.fragmentAfterLogin}
+                />
             </div>
         );
     },
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const InlineSpinner = sdk.getComponent("elements.InlineSpinner");
         const AuthHeader = sdk.getComponent("auth.AuthHeader");
         const AuthBody = sdk.getComponent("auth.AuthBody");
-        const loader = this.isBusy() ? <div className="mx_Login_loader"><Loader /></div> : null;
+        const loader = this.isBusy() && !this.state.busyLoggingIn ?
+            <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.state.errorText;
 
@@ -658,9 +669,28 @@ export default createReactClass({
             );
         }
 
+        let footer;
+        if (this.props.isSyncing || this.state.busyLoggingIn) {
+            footer = <div className="mx_AuthBody_paddedFooter">
+                <div className="mx_AuthBody_paddedFooter_title">
+                    <InlineSpinner w={20} h={20} />
+                    { this.props.isSyncing ? _t("Syncing...") : _t("Signing In...") }
+                </div>
+                { this.props.isSyncing && <div className="mx_AuthBody_paddedFooter_subtitle">
+                    {_t("If you've joined lots of rooms, this might take a while")}
+                </div> }
+            </div>;
+        } else {
+            footer = (
+                <a className="mx_AuthBody_changeFlow" onClick={this.onTryRegisterClick} href="#">
+                    { _t('Create account') }
+                </a>
+            );
+        }
+
         return (
             <AuthPage>
-                <AuthHeader />
+                <AuthHeader disableLanguageSelector={this.props.isSyncing || this.state.busyLoggingIn} />
                 <AuthBody>
                     <h2>
                         {_t('Sign in')}
@@ -670,9 +700,7 @@ export default createReactClass({
                     { serverDeadSection }
                     { this.renderServerComponent() }
                     { this.renderLoginComponentForStep() }
-                    <a className="mx_AuthBody_changeFlow" onClick={this.onTryRegisterClick} href="#">
-                        { _t('Create account') }
-                    </a>
+                    { footer }
                 </AuthBody>
             </AuthPage>
         );

src/components/structures/auth/Registration.js

@@ -32,7 +32,7 @@ import * as Lifecycle from '../../../Lifecycle';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import AuthPage from "../../views/auth/AuthPage";
 import Login from "../../../Login";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 
 // Phases
 // Show controls to configure server details
@@ -243,9 +243,15 @@ export default createReactClass({
             });
         };
         try {
-            await this._makeRegisterRequest(null);
-            // This should never succeed since we're doing UIA
-            console.log("Expecting 401 from register request but got success!");
+            // We do the first registration request ourselves to discover whether we need to
+            // do SSO instead. If we've already started the UI Auth process though, we don't
+            // need to.
+            if (!this.state.doingUIAuth) {
+                await this._makeRegisterRequest(null);
+                // This should never succeed since we specified an empty
+                // auth object.
+                console.log("Expecting 401 from register request but got success!");
+            }
         } catch (e) {
             if (e.httpStatus === 401) {
                 this.setState({
@@ -266,6 +272,7 @@ export default createReactClass({
                         dis.dispatch({action: 'start_login'});
                     } else {
                         this.setState({
+                            serverErrorIsFatal: true, // fatal because user cannot continue on this server
                             errorText: _t("Registration has been disabled on this homeserver."),
                             // add empty flows array to get rid of spinner
                             flows: [],

src/components/structures/auth/SetupEncryptionBody.js

@@ -108,29 +108,33 @@ export default class SetupEncryptionBody extends React.Component {
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
         } else if (phase === PHASE_INTRO) {
-            const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
             return (
                 <div>
                     <p>{_t(
-                        "Open an existing session & use it to verify this one, " +
+                        "Confirm your identity by verifying this login from one of your other sessions, " +
                         "granting it access to encrypted messages.",
                     )}</p>
-                    <p className="mx_CompleteSecurity_waiting"><InlineSpinner />{_t("Waiting…")}</p>
                     <p>{_t(
-                        "If you can’t access one, <button>use your recovery key or passphrase.</button>",
-                    {}, {
-                        button: sub => <AccessibleButton element="span"
-                            className="mx_linkButton"
-                            onClick={this._onUsePassphraseClick}
-                        >
-                            {sub}
-                        </AccessibleButton>,
-                    })}</p>
+                        "This requires the latest Riot on your other devices:",
+                    )}</p>
+
+                    <div className="mx_CompleteSecurity_clients">
+                        <div className="mx_CompleteSecurity_clients_desktop">
+                            <div>Riot Web</div>
+                            <div>Riot Desktop</div>
+                        </div>
+                        <div className="mx_CompleteSecurity_clients_mobile">
+                            <div>Riot iOS</div>
+                            <div>Riot X for Android</div>
+                        </div>
+                        <p>{_t("or another cross-signing capable Matrix client")}</p>
+                    </div>
+
                     <div className="mx_CompleteSecurity_actionRow">
-                        <AccessibleButton
-                            kind="danger"
-                            onClick={this.onSkipClick}
-                        >
+                        <AccessibleButton kind="link" onClick={this._onUsePassphraseClick}>
+                            {_t("Use Recovery Passphrase or Key")}
+                        </AccessibleButton>
+                        <AccessibleButton kind="danger" onClick={this.onSkipClick}>
                             {_t("Skip")}
                         </AccessibleButton>
                     </div>
@@ -150,7 +154,7 @@ export default class SetupEncryptionBody extends React.Component {
             }
             return (
                 <div>
-                    <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified"></div>
+                    <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified" />
                     {message}
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton

src/components/structures/auth/SoftLogout.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from '../../../languageHandler';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as Lifecycle from '../../../Lifecycle';
 import Modal from '../../../Modal';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -244,7 +244,9 @@ export default class SoftLogout extends React.Component {
                     <p>{introText}</p>
                     <SSOButton
                         matrixClient={MatrixClientPeg.get()}
-                        loginType={this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso"} />
+                        loginType={this.state.loginView === LOGIN_VIEW.CAS ? "cas" : "sso"}
+                        fragmentAfterLogin={this.props.fragmentAfterLogin}
+                    />
                 </div>
             );
         }

src/components/views/auth/AuthHeader.js

@@ -16,12 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 
 export default createReactClass({
     displayName: 'AuthHeader',
 
+    propTypes: {
+        disableLanguageSelector: PropTypes.bool,
+    },
+
     render: function() {
         const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
         const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
@@ -29,7 +34,7 @@ export default createReactClass({
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />
-                <LanguageSelector />
+                <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
         );
     },

src/components/views/auth/CountryDropdown.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 
-import { COUNTRIES } from '../../../phonenumber';
+import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 
@@ -80,7 +80,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
+        return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
     _getShortOption(iso2) {

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -412,14 +412,14 @@ export const EmailIdentityAuthEntry = createReactClass({
         this.props.onPhaseChange(DEFAULT_PHASE);
     },
 
-    getInitialState: function() {
-        return {
-            requestingToken: false,
-        };
-    },
-
     render: function() {
-        if (this.state.requestingToken) {
+        // This component is now only displayed once the token has been requested,
+        // so we know the email has been sent. It can also get loaded after the user
+        // has clicked the validation link if the server takes a while to propagate
+        // the validation internally. If we're in the session spawned from clicking
+        // the validation link, we won't know the email address, so if we don't have it,
+        // assume that the link has been clicked and the server will realise when we poll.
+        if (this.props.inputs.emailAddress === undefined) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
         } else {

src/components/views/auth/LanguageSelector.js

@@ -28,12 +28,14 @@ function onChange(newLang) {
     }
 }
 
-export default function LanguageSelector() {
+export default function LanguageSelector({disabled}) {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-    return <LanguageDropdown className="mx_AuthBody_language"
+    return <LanguageDropdown
+        className="mx_AuthBody_language"
         onOptionChange={onChange}
         value={getCurrentLanguage()}
+        disabled={disabled}
     />;
 }

src/components/views/auth/PassphraseField.tsx

@@ -0,0 +1,125 @@
+/*
+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, {PureComponent, RefCallback, RefObject} from "react";
+import classNames from "classnames";
+import zxcvbn from "zxcvbn";
+
+import SdkConfig from "../../../SdkConfig";
+import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
+import {_t, _td} from "../../../languageHandler";
+import Field from "../elements/Field";
+
+interface IProps {
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+    minScore: 0 | 1 | 2 | 3 | 4;
+    value: string;
+    fieldRef?: RefCallback<Field> | RefObject<Field>;
+
+    label?: string;
+    labelEnterPassword?: string;
+    labelStrongPassword?: string;
+    labelAllowedButUnsafe?: string;
+
+    onChange(ev: React.FormEvent<HTMLElement>);
+    onValidate(result: IValidationResult);
+}
+
+interface IState {
+    complexity: zxcvbn.ZXCVBNResult;
+}
+
+class PassphraseField extends PureComponent<IProps, IState> {
+    static defaultProps = {
+        label: _td("Password"),
+        labelEnterPassword: _td("Enter password"),
+        labelStrongPassword: _td("Nice, strong password!"),
+        labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
+    };
+
+    state = { complexity: null };
+
+    public readonly validate = withValidation<this>({
+        description: function() {
+            const complexity = this.state.complexity;
+            const score = complexity ? complexity.score : 0;
+            return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
+        },
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t(this.props.labelEnterPassword),
+            },
+            {
+                key: "complexity",
+                test: async function({ value }) {
+                    if (!value) {
+                        return false;
+                    }
+                    const { scorePassword } = await import('../../../utils/PasswordScorer');
+                    const complexity = scorePassword(value);
+                    this.setState({ complexity });
+                    const safe = complexity.score >= this.props.minScore;
+                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
+                    return allowUnsafe || safe;
+                },
+                valid: function() {
+                    // Unsafe passwords that are valid are only possible through a
+                    // configuration flag. We'll print some helper text to signal
+                    // to the user that their password is allowed, but unsafe.
+                    if (this.state.complexity.score >= this.props.minScore) {
+                        return _t(this.props.labelStrongPassword);
+                    }
+                    return _t(this.props.labelAllowedButUnsafe);
+                },
+                invalid: function() {
+                    const complexity = this.state.complexity;
+                    if (!complexity) {
+                        return null;
+                    }
+                    const { feedback } = complexity;
+                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
+                },
+            },
+        ],
+    });
+
+    onValidate = async (fieldState: IFieldState) => {
+        const result = await this.validate(fieldState);
+        this.props.onValidate(result);
+        return result;
+    };
+
+    render() {
+        return <Field
+            id={this.props.id}
+            autoFocus={this.props.autoFocus}
+            className={classNames("mx_PassphraseField", this.props.className)}
+            ref={this.props.fieldRef}
+            type="password"
+            autoComplete="new-password"
+            label={_t(this.props.label)}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            onValidate={this.onValidate}
+        />
+    }
+}
+
+export default PassphraseField;

src/components/views/auth/PasswordLogin.js

@@ -23,6 +23,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AccessibleButton from "../elements/AccessibleButton";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -44,6 +45,7 @@ export default class PasswordLogin extends React.Component {
         loginIncorrect: PropTypes.bool,
         disableSubmit: PropTypes.bool,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        busy: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -183,7 +185,7 @@ export default class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType) {
+    renderLoginField(loginType, autoFocus) {
         const Field = sdk.getComponent('elements.Field');
 
         const classes = {};
@@ -202,7 +204,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
@@ -216,7 +218,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
@@ -240,7 +242,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             }
         }
@@ -265,12 +267,16 @@ export default class PasswordLogin extends React.Component {
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = <span>
                 {_t('Not sure of your password? <a>Set a new one</a>', {}, {
-                    a: sub => <a className="mx_Login_forgot"
-                        onClick={this.onForgotPasswordClick}
-                        href="#"
-                    >
-                        {sub}
-                    </a>,
+                    a: sub => (
+                        <AccessibleButton
+                            className="mx_Login_forgot"
+                            disabled={this.props.busy}
+                            kind="link"
+                            onClick={this.onForgotPasswordClick}
+                        >
+                            {sub}
+                        </AccessibleButton>
+                    ),
                 })}
             </span>;
         }
@@ -279,7 +285,10 @@ export default class PasswordLogin extends React.Component {
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
-        const loginField = this.renderLoginField(this.state.loginType);
+        // If login is empty, autoFocus login, otherwise autoFocus password.
+        // this is for when auto server discovery remounts us when the user tries to tab from username to password
+        const autoFocusPassword = !this.isLoginEmpty();
+        const loginField = this.renderLoginField(this.state.loginType, !autoFocusPassword);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
@@ -330,13 +339,14 @@ export default class PasswordLogin extends React.Component {
                         value={this.state.password}
                         onChange={this.onPasswordChanged}
                         disabled={this.props.disableSubmit}
+                        autoFocus={autoFocusPassword}
                     />
                     {forgotPasswordJsx}
-                    <input className="mx_Login_submit"
+                    { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}
                         disabled={this.props.disableSubmit}
-                    />
+                    /> }
                 </form>
             </div>
         );

src/components/views/auth/RegistrationForm.js

@@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import PassphraseField from "./PassphraseField";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -76,9 +77,8 @@ export default createReactClass({
             email: this.props.defaultEmail || "",
             phoneNumber: this.props.defaultPhoneNumber || "",
             password: this.props.defaultPassword || "",
-            passwordConfirm: "",
+            passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
-            passwordSafe: false,
         };
     },
 
@@ -102,11 +102,15 @@ export default createReactClass({
                     "No identity server is configured so you cannot add an email address in order to " +
                     "reset your password in the future.",
                 );
-            } else {
+            } else if (this._showEmail()) {
                 desc = _t(
                     "If you don't specify an email address, you won't be able to reset your password. " +
                     "Are you sure?",
                 );
+            } else {
+                // user can't set an e-mail so don't prompt them to
+                self._doSubmit(ev);
+                return;
             }
 
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -260,65 +264,10 @@ export default createReactClass({
         });
     },
 
-    async onPasswordValidate(fieldState) {
-        const result = await this.validatePasswordRules(fieldState);
+    onPasswordValidate(result) {
         this.markFieldValid(FIELD_PASSWORD, result.valid);
-        return result;
     },
 
-    validatePasswordRules: withValidation({
-        description: function() {
-            const complexity = this.state.passwordComplexity;
-            const score = complexity ? complexity.score : 0;
-            return <progress
-                className="mx_AuthBody_passwordScore"
-                max={PASSWORD_MIN_SCORE}
-                value={score}
-            />;
-        },
-        rules: [
-            {
-                key: "required",
-                test: ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Enter password"),
-            },
-            {
-                key: "complexity",
-                test: async function({ value }) {
-                    if (!value) {
-                        return false;
-                    }
-                    const { scorePassword } = await import('../../../utils/PasswordScorer');
-                    const complexity = scorePassword(value);
-                    const safe = complexity.score >= PASSWORD_MIN_SCORE;
-                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
-                    this.setState({
-                        passwordComplexity: complexity,
-                        passwordSafe: safe,
-                    });
-                    return allowUnsafe || safe;
-                },
-                valid: function() {
-                    // Unsafe passwords that are valid are only possible through a
-                    // configuration flag. We'll print some helper text to signal
-                    // to the user that their password is allowed, but unsafe.
-                    if (!this.state.passwordSafe) {
-                        return _t("Password is allowed, but unsafe");
-                    }
-                    return _t("Nice, strong password!");
-                },
-                invalid: function() {
-                    const complexity = this.state.passwordComplexity;
-                    if (!complexity) {
-                        return null;
-                    }
-                    const { feedback } = complexity;
-                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
-                },
-            },
-        ],
-    }),
-
     onPasswordConfirmChange(ev) {
         this.setState({
             passwordConfirm: ev.target.value,
@@ -480,13 +429,10 @@ export default createReactClass({
     },
 
     renderPassword() {
-        const Field = sdk.getComponent('elements.Field');
-        return <Field
+        return <PassphraseField
             id="mx_RegistrationForm_password"
-            ref={field => this[FIELD_PASSWORD] = field}
-            type="password"
-            autoComplete="new-password"
-            label={_t("Password")}
+            fieldRef={field => this[FIELD_PASSWORD] = field}
+            minScore={PASSWORD_MIN_SCORE}
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}

src/components/views/auth/Welcome.js

@@ -45,7 +45,8 @@ export default class Welcome extends React.PureComponent {
             idBaseUrl: isUrl,
         });
         const plaf = PlatformPeg.get();
-        const callbackUrl = plaf.getSSOCallbackUrl(tmpClient.getHomeserverUrl(), tmpClient.getIdentityServerUrl());
+        const callbackUrl = plaf.getSSOCallbackUrl(tmpClient.getHomeserverUrl(), tmpClient.getIdentityServerUrl(),
+            this.props.fragmentAfterLogin);
 
         return (
             <AuthPage>

src/components/views/avatars/BaseAvatar.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector 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.
@@ -17,207 +17,182 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {toPx} from "../../../utils/units";
 
-export default createReactClass({
-    displayName: 'BaseAvatar',
+const useImageUrl = ({url, urls}) => {
+    const [imageUrls, setUrls] = useState([]);
+    const [urlsIndex, setIndex] = useState();
 
-    propTypes: {
-        name: PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: PropTypes.string, // ID for generating hash colours
-        title: PropTypes.string, // onHover title text
-        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: PropTypes.number,
-        height: PropTypes.number,
-        // XXX resizeMethod not actually used.
-        resizeMethod: PropTypes.string,
-        defaultToInitialLetter: PropTypes.bool, // true to add default url
-        inputRef: PropTypes.oneOfType([
-            // Either a function
-            PropTypes.func,
-            // Or the instance of a DOM native element
-            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-        ]),
-    },
+    const onError = useCallback(() => {
+        setIndex(i => i + 1); // try the next one
+    }, []);
+    const memoizedUrls = useMemo(() => urls, [JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            defaultToInitialLetter: true,
-        };
-    },
-
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
-
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    },
-
-    componentWillUnmount() {
-        this.unmounted = true;
-        this.context.removeListener('sync', this.onClientSync);
-    },
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps: function(nextProps) {
-        // work out if we need to call setState (if the image URLs array has changed)
-        const newState = this._getState(nextProps);
-        const newImageUrls = newState.imageUrls;
-        const oldImageUrls = this.state.imageUrls;
-        if (newImageUrls.length !== oldImageUrls.length) {
-            this.setState(newState); // detected a new entry
-        } else {
-            // check each one to see if they are the same
-            for (let i = 0; i < newImageUrls.length; i++) {
-                if (oldImageUrls[i] !== newImageUrls[i]) {
-                    this.setState(newState); // detected a diff
-                    break;
-                }
-            }
-        }
-    },
-
-    onClientSync: function(syncState, prevState) {
-        if (this.unmounted) return;
-
-        // Consider the client reconnected if there is no error with syncing.
-        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
-        const reconnected = syncState !== "ERROR" && prevState !== syncState;
-        if (reconnected &&
-            // Did we fall back?
-            this.state.urlsIndex > 0
-        ) {
-            // Start from the highest priority URL again
-            this.setState({
-                urlsIndex: 0,
-            });
-        }
-    },
-
-    _getState: function(props) {
+    useEffect(() => {
         // work out the full set of urls to try to load. This is formed like so:
-        // imageUrls: [ props.url, props.urls, default image ]
+        // imageUrls: [ props.url, ...props.urls ]
 
-        let urls = [];
+        let _urls = [];
         if (!SettingsStore.getValue("lowBandwidth")) {
-            urls = props.urls || [];
+            _urls = memoizedUrls || [];
 
-            if (props.url) {
-                urls.unshift(props.url); // put in urls[0]
+            if (url) {
+                _urls.unshift(url); // put in urls[0]
             }
         }
 
-        let defaultImageUrl = null;
-        if (props.defaultToInitialLetter) {
-            defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name,
-            );
-            urls.push(defaultImageUrl); // lowest priority
-        }
-
         // deduplicate URLs
-        urls = Array.from(new Set(urls));
+        _urls = Array.from(new Set(_urls));
 
-        return {
-            imageUrls: urls,
-            defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0,
-        };
-    },
+        setIndex(0);
+        setUrls(_urls);
+    }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    onError: function(ev) {
-        const nextIndex = this.state.urlsIndex + 1;
-        if (nextIndex < this.state.imageUrls.length) {
-            // try the next one
-            this.setState({
-                urlsIndex: nextIndex,
-            });
+    const cli = useContext(MatrixClientContext);
+    const onClientSync = useCallback((syncState, prevState) => {
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected) {
+            setIndex(0);
         }
-    },
+    }, []);
+    useEventEmitter(cli, "sync", onClientSync);
 
-    render: function() {
-        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
+    const imageUrl = imageUrls[urlsIndex];
+    return [imageUrl, onError];
+};
 
-        const {
-            name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter, onClick, inputRef,
-            ...otherProps
-        } = this.props;
+const BaseAvatar = (props) => {
+    const {
+        name,
+        idName,
+        title,
+        url,
+        urls,
+        width=40,
+        height=40,
+        resizeMethod="crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter=true,
+        onClick,
+        inputRef,
+        ...otherProps
+    } = props;
+
+    const [imageUrl, onError] = useImageUrl({url, urls});
+
+    if (!imageUrl && defaultToInitialLetter) {
+        const initialLetter = AvatarLogic.getInitialLetter(name);
+        const textNode = (
+            <span
+                className="mx_BaseAvatar_initial"
+                aria-hidden="true"
+                style={{
+                    fontSize: toPx(width * 0.65),
+                    width: toPx(width),
+                    lineHeight: toPx(height),
+                }}
+            >
+                { initialLetter }
+            </span>
+        );
+        const imgNode = (
+            <img
+                className="mx_BaseAvatar_image"
+                src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
+                alt=""
+                title={title}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                aria-hidden="true" />
+        );
 
-        if (imageUrl === this.state.defaultImageUrl) {
-            const initialLetter = AvatarLogic.getInitialLetter(name);
-            const textNode = (
-                <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                    style={{ fontSize: (width * 0.65) + "px",
-                    width: width + "px",
-                    lineHeight: height + "px" }}
-                >
-                    { initialLetter }
-                </span>
-            );
-            const imgNode = (
-                <img className="mx_BaseAvatar_image" src={imageUrl}
-                    alt="" title={title} onError={this.onError}
-                    width={width} height={height} aria-hidden="true" />
-            );
-            if (onClick != null) {
-                return (
-                    <AccessibleButton element='span' className="mx_BaseAvatar"
-                        onClick={onClick} inputRef={inputRef} {...otherProps}
-                    >
-                        { textNode }
-                        { imgNode }
-                    </AccessibleButton>
-                );
-            } else {
-                return (
-                    <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
-                        { textNode }
-                        { imgNode }
-                    </span>
-                );
-            }
-        }
         if (onClick != null) {
             return (
                 <AccessibleButton
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
-                    element='img'
-                    src={imageUrl}
+                    {...otherProps}
+                    element="span"
+                    className="mx_BaseAvatar"
                     onClick={onClick}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
                     inputRef={inputRef}
-                    {...otherProps} />
+                >
+                    { textNode }
+                    { imgNode }
+                </AccessibleButton>
             );
         } else {
             return (
-                <img
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
-                    src={imageUrl}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    ref={inputRef}
-                    {...otherProps} />
+                <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
+                    { textNode }
+                    { imgNode }
+                </span>
             );
         }
-    },
-});
+    }
+
+    if (onClick != null) {
+        return (
+            <AccessibleButton
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                element='img'
+                src={imageUrl}
+                onClick={onClick}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                inputRef={inputRef}
+                {...otherProps} />
+        );
+    } else {
+        return (
+            <img
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                src={imageUrl}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                ref={inputRef}
+                {...otherProps} />
+        );
+    }
+};
+
+BaseAvatar.displayName = "BaseAvatar";
+
+BaseAvatar.propTypes = {
+    name: PropTypes.string.isRequired, // The name (first initial used as default)
+    idName: PropTypes.string, // ID for generating hash colours
+    title: PropTypes.string, // onHover title text
+    url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+    urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+    width: PropTypes.number,
+    height: PropTypes.number,
+    // XXX resizeMethod not actually used.
+    resizeMethod: PropTypes.string,
+    defaultToInitialLetter: PropTypes.bool, // true to add default url
+    onClick: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        // Either a function
+        PropTypes.func,
+        // Or the instance of a DOM native element
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+};
+
+export default BaseAvatar;

src/components/views/avatars/MemberAvatar.js

@@ -18,9 +18,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import * as Avatar from '../../../Avatar';
 import * as sdk from "../../../index";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 export default createReactClass({
     displayName: 'MemberAvatar',
@@ -33,7 +34,7 @@ export default createReactClass({
         resizeMethod: PropTypes.string,
         // The onClick to give the avatar
         onClick: PropTypes.func,
-        // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
+        // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
         viewUserOnClick: PropTypes.bool,
         title: PropTypes.string,
     },
@@ -61,10 +62,14 @@ export default createReactClass({
             return {
                 name: props.member.name,
                 title: props.title || props.member.userId,
-                imageUrl: Avatar.avatarUrlForMember(props.member,
-                                             props.width,
-                                             props.height,
-                                             props.resizeMethod),
+                imageUrl: props.member.getAvatarUrl(
+                    MatrixClientPeg.get().getHomeserverUrl(),
+                    Math.floor(props.width * window.devicePixelRatio),
+                    Math.floor(props.height * window.devicePixelRatio),
+                    props.resizeMethod,
+                    false,
+                    false,
+                ),
             };
         } else if (props.fallbackUserId) {
             return {
@@ -85,7 +90,7 @@ export default createReactClass({
         if (viewUserOnClick) {
             onClick = () => {
                 dis.dispatch({
-                    action: 'view_user',
+                    action: Action.ViewUser,
                     member: this.props.member,
                 });
             };

src/components/views/context_menus/MessageContextMenu.js

@@ -23,7 +23,7 @@ import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
@@ -116,11 +116,6 @@ export default createReactClass({
         this.closeMenu();
     },
 
-    e2eInfoClicked: function() {
-        this.props.e2eInfoCallback();
-        this.closeMenu();
-    },
-
     onReportEventClick: function() {
         const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
         Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
@@ -130,22 +125,24 @@ export default createReactClass({
     },
 
     onViewSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
-            content: this.props.mxEvent.event,
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
+            content: ev.event,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },
 
     onViewClearSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
             // FIXME: _clearEvent is private
-            content: this.props.mxEvent._clearEvent,
+            content: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },
@@ -463,15 +460,6 @@ export default createReactClass({
             );
         }
 
-        let e2eInfo;
-        if (this.props.e2eInfoCallback) {
-            e2eInfo = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.e2eInfoClicked}>
-                    { _t('End-to-end encryption information') }
-                </MenuItem>
-            );
-        }
-
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
@@ -498,7 +486,6 @@ export default createReactClass({
                 { quoteButton }
                 { externalURLButton }
                 { collapseReplyThread }
-                { e2eInfo }
                 { reportEventButton }
             </div>
         );

src/components/views/context_menus/RoomTileContextMenu.js

@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import * as Rooms from '../../../Rooms';
 import * as RoomNotifs from '../../../RoomNotifs';

src/components/views/context_menus/TagTileContextMenu.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
 import * as sdk from '../../../index';
 import {MenuItem} from "../../structures/ContextMenu";

src/components/views/context_menus/TopLeftMenu.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import LogoutDialog from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
@@ -27,6 +27,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
 import * as sdk from "../../../index";
 import {getHomePageUrl} from "../../../utils/pages";
+import {Action} from "../../../dispatcher/actions";
 
 export default class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -134,7 +135,7 @@ export default class TopLeftMenu extends React.Component {
     }
 
     openSettings() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.fire(Action.ViewUserSettings);
         this.closeMenu();
     }
 

src/components/views/create_room/RoomAlias.js

@@ -98,7 +98,7 @@ export default createReactClass({
 
     render: function() {
         return (
-            <input type="text" className="mx_RoomAlias" placeholder={_t("Alias (optional)")}
+            <input type="text" className="mx_RoomAlias" placeholder={_t("Address (optional)")}
                 onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
                 value={this.props.alias} />
         );

src/components/views/dialogs/AddressPickerDialog.js

@@ -24,7 +24,7 @@ import createReactClass from 'create-react-class';
 import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
@@ -33,6 +33,7 @@ import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../
 import { abbreviateUrl } from '../../../utils/UrlUtils';
 import {sleep} from "../../../utils/promise";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -615,7 +616,7 @@ export default createReactClass({
 
     onManageSettingsClick(e) {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.onCancel();
     },
 

src/components/views/dialogs/BugReportDialog.js

@@ -137,12 +137,20 @@ export default class BugReportDialog extends React.Component {
             );
         }
 
+        let warning;
+        if (window.Modernizr && Object.values(window.Modernizr).some(support => support === false)) {
+            warning = <p><b>
+                { _t("Reminder: Your browser is unsupported, so your experience may be unpredictable.") }
+            </b></p>;
+        }
+
         return (
             <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
                     title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    { warning }
                     <p>
                         { _t(
                             "Debug logs contain application usage data including your " +

src/components/views/dialogs/CreateGroupDialog.js

@@ -18,7 +18,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 

src/components/views/dialogs/CreateRoomDialog.js

@@ -24,17 +24,20 @@ import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'CreateRoomDialog',
     propTypes: {
         onFinished: PropTypes.func.isRequired,
+        defaultPublic: PropTypes.bool,
     },
 
     getInitialState() {
         const config = SdkConfig.get();
         return {
-            isPublic: false,
+            isPublic: this.props.defaultPublic || false,
+            isEncrypted: true,
             name: "",
             topic: "",
             alias: "",
@@ -62,6 +65,11 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
+
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+            opts.encryption = this.state.isEncrypted;
+        }
+
         return opts;
     },
 
@@ -127,6 +135,10 @@ export default createReactClass({
         this.setState({isPublic});
     },
 
+    onEncryptedChange(isEncrypted) {
+        this.setState({isEncrypted});
+    },
+
     onAliasChange(alias) {
         this.setState({alias});
     },
@@ -166,11 +178,10 @@ export default createReactClass({
         const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
 
-        let privateLabel;
-        let publicLabel;
+        let publicPrivateLabel;
         let aliasField;
         if (this.state.isPublic) {
-            publicLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
+            publicPrivateLabel = (<p>{_t("Set a room address to easily share your room with other people.")}</p>);
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
@@ -178,7 +189,20 @@ export default createReactClass({
                 </div>
             );
         } else {
-            privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+            publicPrivateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+        }
+
+        let e2eeSection;
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+            e2eeSection = <React.Fragment>
+                <LabelledToggleSwitch
+                    label={ _t("Enable end-to-end encryption")}
+                    onChange={this.onEncryptedChange}
+                    value={this.state.isEncrypted}
+                    className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
+                />
+                <p>{ _t("You can’t disable this later. Bridges & most bots won’t work yet.") }</p>
+            </React.Fragment>;
         }
 
         const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
@@ -189,10 +213,10 @@ export default createReactClass({
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
                         <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
+                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
-                        { privateLabel }
-                        { publicLabel }
+                        { publicPrivateLabel }
+                        { e2eeSection }
                         { aliasField }
                         <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
                             <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>

src/components/views/dialogs/CryptoStoreTooNewDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 
@@ -42,11 +42,9 @@ export default (props) => {
     };
 
     const description =
-        _t("You've previously used a newer version of Riot on %(host)s. " +
+        _t("You've previously used a newer version of Riot with this session. " +
             "To use this version again with end to end encryption, you will " +
-            "need to sign out and back in again. ",
-            {host: props.host},
-        );
+            "need to sign out and back in again.");
 
     const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -26,30 +26,6 @@ import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
-const dialogAesthetics = {
-    [SSOAuthEntry.PHASE_PREAUTH]: {
-        body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
-        continueText: _t("Single Sign On"),
-        continueKind: "danger",
-    },
-    [SSOAuthEntry.PHASE_POSTAUTH]: {
-        body: _t("Are you sure you want to deactivate your account? This is irreversible."),
-        continueText: _t("Confirm account deactivation"),
-        continueKind: "danger",
-    },
-};
-
-// This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
-const DEACTIVATE_AESTHETICS = {
-    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
-    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
-    [PasswordAuthEntry.LOGIN_TYPE]: {
-        [DEFAULT_PHASE]: {
-            body: _t("To continue, please enter your password:"),
-        },
-    },
-};
-
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
         super(props);
@@ -58,6 +34,7 @@ export default class DeactivateAccountDialog extends React.Component {
             shouldErase: false,
             errStr: null,
             authData: null, // for UIA
+            authEnabled: true, // see usages for information
 
             // A few strings that are passed to InteractiveAuth for design or are displayed
             // next to the InteractiveAuth component.
@@ -66,24 +43,34 @@ export default class DeactivateAccountDialog extends React.Component {
             continueKind: null,
         };
 
-        MatrixClientPeg.get().deactivateAccount(null, false).then(r => {
-            // If we got here, oops. The server didn't require any auth.
-            // Our application lifecycle will catch the error and do the logout bits.
-            // We'll try to log something in an vain attempt to record what happened (storage
-            // is also obliterated on logout).
-            console.warn("User's account got deactivated without confirmation: Server had no auth");
-            this.setState({errStr: _t("Server did not require any authentication")});
-        }).catch(e => {
-            if (e && e.httpStatus === 401 && e.data) {
-                // Valid UIA response
-                this.setState({authData: e.data});
-            } else {
-                this.setState({errStr: _t("Server did not return valid authentication information.")});
-            }
-        });
+        this._initAuth(/* shouldErase= */false);
     }
 
     _onStagePhaseChange = (stage, phase) => {
+        const dialogAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "danger",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                body: _t("Are you sure you want to deactivate your account? This is irreversible."),
+                continueText: _t("Confirm account deactivation"),
+                continueKind: "danger",
+            },
+        };
+
+        // This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
+        const DEACTIVATE_AESTHETICS = {
+            [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+            [PasswordAuthEntry.LOGIN_TYPE]: {
+                [DEFAULT_PHASE]: {
+                    body: _t("To continue, please enter your password:"),
+                },
+            },
+        };
+
         const aesthetics = DEACTIVATE_AESTHETICS[stage];
         let bodyText = null;
         let continueText = null;
@@ -124,13 +111,40 @@ export default class DeactivateAccountDialog extends React.Component {
     _onEraseFieldChange = (ev) => {
         this.setState({
             shouldErase: ev.target.checked,
+
+            // Disable the auth form because we're going to have to reinitialize the auth
+            // information. We do this because we can't modify the parameters in the UIA
+            // session, and the user will have selected something which changes the request.
+            // Therefore, we throw away the last auth session and try a new one.
+            authEnabled: false,
         });
+
+        // As mentioned above, set up for auth again to get updated UIA session info
+        this._initAuth(/* shouldErase= */ev.target.checked);
     };
 
     _onCancel() {
         this.props.onFinished(false);
     }
 
+    _initAuth(shouldErase) {
+        MatrixClientPeg.get().deactivateAccount(null, shouldErase).then(r => {
+            // If we got here, oops. The server didn't require any auth.
+            // Our application lifecycle will catch the error and do the logout bits.
+            // We'll try to log something in an vain attempt to record what happened (storage
+            // is also obliterated on logout).
+            console.warn("User's account got deactivated without confirmation: Server had no auth");
+            this.setState({errStr: _t("Server did not require any authentication")});
+        }).catch(e => {
+            if (e && e.httpStatus === 401 && e.data) {
+                // Valid UIA response
+                this.setState({authData: e.data, authEnabled: true});
+            } else {
+                this.setState({errStr: _t("Server did not return valid authentication information.")});
+            }
+        });
+    }
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -142,7 +156,7 @@ export default class DeactivateAccountDialog extends React.Component {
         }
 
         let auth = <div>{_t("Loading...")}</div>;
-        if (this.state.authData) {
+        if (this.state.authData && this.state.authEnabled) {
             auth = (
                 <div>
                     {this.state.bodyText}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -25,7 +25,7 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {ensureDMExists} from "../../../createRoom";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from '../../../settings/SettingsStore';
 import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
@@ -131,7 +131,7 @@ export default class DeviceVerifyDialog extends React.Component {
                 } else {
                     this._verifier = request.verifier;
                 }
-            } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            } else if (verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
                 this._request = await client.requestVerification(this.props.userId, [
                     verificationMethods.SAS,
                     SHOW_QR_CODE_METHOD,

src/components/views/dialogs/DevtoolsDialog.js

@@ -696,6 +696,9 @@ class VerificationExplorer extends React.Component {
                     <VerificationRequest txnId={txnId} request={request} key={txnId} />,
                 )}
             </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>{_t("Back")}</button>
+            </div>
         </div>);
     }
 }

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -18,7 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
+import {Action} from "../../../dispatcher/actions";
 
 export default class IntegrationsDisabledDialog extends React.Component {
     static propTypes = {
@@ -31,7 +32,7 @@ export default class IntegrationsDisabledDialog extends React.Component {
 
     _onOpenSettingsClick = () => {
         this.props.onFinished();
-        dis.dispatch({action: "view_user_settings"});
+        dis.fire(Action.ViewUserSettings);
     };
 
     render() {

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -25,6 +25,7 @@ import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
 import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
+import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
 export default createReactClass({
     displayName: 'InteractiveAuthDialog',
@@ -66,6 +67,8 @@ export default createReactClass({
         //         }
         //     }
         // }
+        //
+        // Default is defined in _getDefaultDialogAesthetics()
         aestheticsForStagePhases: PropTypes.object,
     },
 
@@ -79,6 +82,28 @@ export default createReactClass({
         };
     },
 
+    _getDefaultDialogAesthetics: function() {
+        const ssoAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                title: _t("Use Single Sign On to continue"),
+                body: _t("To continue, use Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "primary",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                title: _t("Confirm to continue"),
+                body: _t("Click the button below to confirm your identity."),
+                continueText: _t("Confirm"),
+                continueKind: "primary",
+            },
+        };
+
+        return {
+            [SSOAuthEntry.LOGIN_TYPE]: ssoAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: ssoAesthetics,
+        };
+    },
+
     _onAuthFinished: function(success, result) {
         if (success) {
             this.props.onFinished(true, result);
@@ -113,9 +138,10 @@ export default createReactClass({
         let body = this.state.authError ? null : this.props.body;
         let continueText = null;
         let continueKind = null;
-        if (!this.state.authError && this.props.aestheticsForStagePhases) {
-            if (this.props.aestheticsForStagePhases[this.state.uiaStage]) {
-                const aesthetics = this.props.aestheticsForStagePhases[this.state.uiaStage][this.state.uiaStagePhase];
+        const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics();
+        if (!this.state.authError && dialogAesthetics) {
+            if (dialogAesthetics[this.state.uiaStage]) {
+                const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
                 if (aesthetics && aesthetics.title) title = aesthetics.title;
                 if (aesthetics && aesthetics.body) body = aesthetics.body;
                 if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;

src/components/views/dialogs/InviteDialog.js

@@ -27,15 +27,17 @@ import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import * as Email from "../../../email";
 import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
 import {abbreviateUrl} from "../../../utils/UrlUtils";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
 import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import SettingsStore from '../../../settings/SettingsStore';
-import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
+import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
+import {DefaultTagID} from "../../../stores/room-list/models";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -343,10 +345,10 @@ export default class InviteDialog extends React.PureComponent {
     _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
+        // Also pull in all the rooms tagged as DefaultTagID.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 taggedRooms = RoomListStoreTempProxy.getRoomLists();
+        const dmTaggedRooms = taggedRooms[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);
@@ -574,13 +576,16 @@ export default class InviteDialog extends React.PureComponent {
 
         const createRoomOptions = {inlineErrors: true};
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("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;
+            const has3PidMembers = targets.some(t => t instanceof ThreepidMember);
+            if (!has3PidMembers) {
+                const client = MatrixClientPeg.get();
+                const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
+                if (allHaveDeviceKeys) {
+                    createRoomOptions.encryption = true;
+                }
             }
         }
 
@@ -899,7 +904,7 @@ export default class InviteDialog extends React.PureComponent {
 
     _onManageSettingsClick = (e) => {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.props.onFinished();
     };
 
@@ -1067,9 +1072,8 @@ export default class InviteDialog extends React.PureComponent {
         let buttonText;
         let goButtonFn;
 
+        const userId = MatrixClientPeg.get().getUserId();
         if (this.props.kind === KIND_DM) {
-            const userId = MatrixClientPeg.get().getUserId();
-
             title = _t("Direct Messages");
             helpText = _t(
                 "Start a conversation with someone using their name, username (like <userId/>) or email address.",
@@ -1083,9 +1087,11 @@ export default class InviteDialog extends React.PureComponent {
         } else { // KIND_INVITE
             title = _t("Invite to this room");
             helpText = _t(
-                "If you can't find someone, ask them for their username (e.g. @user:server.com) or " +
-                "<a>share this room</a>.", {},
+                "Invite someone using their name, username (like <userId/>), email address or <a>share this room</a>.",
+                {},
                 {
+                    userId: () =>
+                        <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
                     a: (sub) =>
                         <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
                 },

src/components/views/dialogs/KeyShareDialog.js

@@ -1,178 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import Modal from '../../../Modal';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-
-import { _t, _td } from '../../../languageHandler';
-
-// TODO: We can remove this once cross-signing is the only way.
-// https://github.com/vector-im/riot-web/issues/11908
-
-/**
- * Dialog which asks the user whether they want to share their keys with
- * an unverified device.
- *
- * onFinished is called with `true` if the key should be shared, `false` if it
- * should not, and `undefined` if the dialog is cancelled. (In other words:
- * truthy: do the key share. falsy: don't share the keys).
- */
-export default createReactClass({
-    propTypes: {
-        matrixClient: PropTypes.object.isRequired,
-        userId: PropTypes.string.isRequired,
-        deviceId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            deviceInfo: null,
-            wasNewDevice: false,
-        };
-    },
-
-    componentDidMount: function() {
-        this._unmounted = false;
-        const userId = this.props.userId;
-        const deviceId = this.props.deviceId;
-
-        // give the client a chance to refresh the device list
-        this.props.matrixClient.downloadKeys([userId], false).then((r) => {
-            if (this._unmounted) { return; }
-
-            const deviceInfo = r[userId][deviceId];
-
-            if (!deviceInfo) {
-                console.warn(`No details found for session ${userId}:${deviceId}`);
-
-                this.props.onFinished(false);
-                return;
-            }
-
-            const wasNewDevice = !deviceInfo.isKnown();
-
-            this.setState({
-                deviceInfo: deviceInfo,
-                wasNewDevice: wasNewDevice,
-            });
-
-            // if the device was new before, it's not any more.
-            if (wasNewDevice) {
-                this.props.matrixClient.setDeviceKnown(
-                    userId,
-                    deviceId,
-                    true,
-                );
-            }
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-
-    _onVerifyClicked: function() {
-        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-
-        console.log("KeyShareDialog: Starting verify dialog");
-        Modal.createTrackedDialog('Key Share', 'Starting dialog', DeviceVerifyDialog, {
-            userId: this.props.userId,
-            device: this.state.deviceInfo,
-            onFinished: (verified) => {
-                if (verified) {
-                    // can automatically share the keys now.
-                    this.props.onFinished(true);
-                }
-            },
-        }, null, /* priority = */ false, /* static = */ true);
-    },
-
-    _onShareClicked: function() {
-        console.log("KeyShareDialog: User clicked 'share'");
-        this.props.onFinished(true);
-    },
-
-    _onIgnoreClicked: function() {
-        console.log("KeyShareDialog: User clicked 'ignore'");
-        this.props.onFinished(false);
-    },
-
-    _renderContent: function() {
-        const displayName = this.state.deviceInfo.getDisplayName() ||
-            this.state.deviceInfo.deviceId;
-
-        let text;
-        if (this.state.wasNewDevice) {
-            text = _td("You added a new session '%(displayName)s', which is"
-                + " requesting encryption keys.");
-        } else {
-            text = _td("Your unverified session '%(displayName)s' is requesting"
-                + " encryption keys.");
-        }
-        text = _t(text, {displayName: displayName});
-
-        return (
-            <div id='mx_Dialog_content'>
-                <p>{ text }</p>
-
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this._onVerifyClicked} autoFocus="true">
-                        { _t('Start verification') }
-                    </button>
-                    <button onClick={this._onShareClicked}>
-                        { _t('Share without verifying') }
-                    </button>
-                    <button onClick={this._onIgnoreClicked}>
-                        { _t('Ignore request') }
-                    </button>
-                </div>
-            </div>
-        );
-    },
-
-    render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-
-        let content;
-
-        if (this.state.deviceInfo) {
-            content = this._renderContent();
-        } else {
-            content = (
-                <div id='mx_Dialog_content'>
-                    <p>{ _t('Loading session info...') }</p>
-                    <Spinner />
-                </div>
-            );
-        }
-
-        return (
-            <BaseDialog className='mx_KeyShareRequestDialog'
-                onFinished={this.props.onFinished}
-                title={_t('Encryption key request')}
-                contentId='mx_Dialog_content'
-            >
-                { content }
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -85,7 +85,7 @@ export default function KeySignatureUploadFailedDialog({
               <span>{_t("Upload completed")}</span> :
               cancelled ?
                 <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unabled to upload")}</span>}
+                <span>{_t("Unable to upload")}</span>}
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}

src/components/views/dialogs/LogoutDialog.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 

src/components/views/dialogs/RoomSettingsDialog.js

@@ -27,7 +27,7 @@ import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsT
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 
 export default class RoomSettingsDialog extends React.Component {

src/components/views/dialogs/SetupEncryptionDialog.js

@@ -14,16 +14,52 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
+import PropTypes from 'prop-types';
 import SetupEncryptionBody from '../../structures/auth/SetupEncryptionBody';
 import BaseDialog from './BaseDialog';
 import { _t } from '../../../languageHandler';
+import { SetupEncryptionStore, PHASE_DONE } from '../../../stores/SetupEncryptionStore';
 
-export default function SetupEncryptionDialog({onFinished}) {
-    return <BaseDialog
-        headerImage={require("../../../../res/img/e2e/warning.svg")}
-        onFinished={onFinished}
-        title={_t("Verify this session")}
-    >
-        <SetupEncryptionBody onFinished={onFinished} />
-    </BaseDialog>;
+function iconFromPhase(phase) {
+    if (phase === PHASE_DONE) {
+        return require("../../../../res/img/e2e/verified.svg");
+    } else {
+        return require("../../../../res/img/e2e/warning.svg");
+    }
+}
+
+export default class SetupEncryptionDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.store = SetupEncryptionStore.sharedInstance();
+        this.state = {icon: iconFromPhase(this.store.phase)};
+    }
+
+    componentDidMount() {
+        this.store.on("update", this._onStoreUpdate);
+    }
+
+    componentWillUnmount() {
+        this.store.removeListener("update", this._onStoreUpdate);
+    }
+
+    _onStoreUpdate = () => {
+        this.setState({icon: iconFromPhase(this.store.phase)});
+    };
+
+    render() {
+        return <BaseDialog
+            headerImage={this.state.icon}
+            onFinished={this.props.onFinished}
+            title={_t("Verify this session")}
+        >
+            <SetupEncryptionBody onFinished={this.props.onFinished} />
+        </BaseDialog>;
+    }
 }

src/components/views/dialogs/ShareDialog.tsx

@@ -1,5 +1,6 @@
 /*
 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.
@@ -14,15 +15,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {User} from "matrix-js-sdk/src/models/user";
+import {Group} from "matrix-js-sdk/src/models/group";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import QRCode from 'qrcode-react';
+import QRCode from "../elements/QRCode";
 import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext, selectText} from "../../../utils/strings";
 
 const socials = [
     {
@@ -52,7 +58,18 @@ const socials = [
     },
 ];
 
-export default class ShareDialog extends React.Component {
+interface IProps {
+    onFinished: () => void;
+    target: Room | User | Group | RoomMember | MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IState {
+    linkSpecificEvent: boolean;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+export default class ShareDialog extends React.PureComponent<IProps, IState> {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         target: PropTypes.oneOfType([
@@ -64,6 +81,8 @@ export default class ShareDialog extends React.Component {
         ]).isRequired,
     };
 
+    protected closeCopiedTooltip: () => void;
+
     constructor(props) {
         super(props);
 
@@ -81,45 +100,26 @@ export default class ShareDialog extends React.Component {
             linkSpecificEvent: this.props.target instanceof MatrixEvent,
             permalinkCreator,
         };
-
-        this._link = createRef();
-    }
-
-    static _selectText(target) {
-        const range = document.createRange();
-        range.selectNodeContents(target);
-
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
     }
 
     static onLinkClick(e) {
         e.preventDefault();
-        const {target} = e;
-        ShareDialog._selectText(target);
+        selectText(e.target);
     }
 
-    onCopyClick(e) {
+    async onCopyClick(e) {
         e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
 
-        ShareDialog._selectText(this._link.current);
-
-        let successful;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.error('Failed to copy: ', err);
-        }
-
-        const buttonRect = e.target.getBoundingClientRect();
+        const successful = await copyPlaintext(this.getUrl());
+        const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
         const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
         // Drop a reference to this close handler for componentWillUnmount
-        this.closeCopiedTooltip = e.target.onmouseleave = close;
+        this.closeCopiedTooltip = target.onmouseleave = close;
     }
 
     onLinkSpecificEventCheckboxClick() {
@@ -134,10 +134,32 @@ export default class ShareDialog extends React.Component {
         if (this.closeCopiedTooltip) this.closeCopiedTooltip();
     }
 
-    render() {
-        let title;
+    getUrl() {
         let matrixToUrl;
 
+        if (this.props.target instanceof Room) {
+            if (this.state.linkSpecificEvent) {
+                const events = this.props.target.getLiveTimeline().getEvents();
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+            } else {
+                matrixToUrl = this.state.permalinkCreator.forRoom();
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+            } else {
+                matrixToUrl = this.props.permalinkCreator.forRoom();
+            }
+        }
+        return matrixToUrl;
+    }
+
+    render() {
+        let title;
         let checkbox;
 
         if (this.props.target instanceof Room) {
@@ -155,18 +177,10 @@ export default class ShareDialog extends React.Component {
                     </label>
                 </div>;
             }
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
-            } else {
-                matrixToUrl = this.state.permalinkCreator.forRoom();
-            }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
-            matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof Group) {
             title = _t('Share Community');
-            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
@@ -178,14 +192,9 @@ export default class ShareDialog extends React.Component {
                     { _t('Link to selected message') }
                 </label>
             </div>;
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
-            } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
-            }
         }
 
+        const matrixToUrl = this.getUrl();
         const encodedUrl = encodeURIComponent(matrixToUrl);
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -196,8 +205,7 @@ export default class ShareDialog extends React.Component {
         >
             <div className="mx_ShareDialog_content">
                 <div className="mx_ShareDialog_matrixto">
-                    <a ref={this._link}
-                       href={matrixToUrl}
+                    <a href={matrixToUrl}
                        onClick={ShareDialog.onLinkClick}
                        className="mx_ShareDialog_matrixto_link"
                     >
@@ -213,20 +221,21 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
+                        <QRCode data={matrixToUrl} width={256} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
-                        {
-                            socials.map((social) => <a rel="noreferrer noopener"
-                                                       target="_blank"
-                                                       key={social.name}
-                                                       name={social.name}
-                                                       href={social.url(encodedUrl)}
-                                                       className="mx_ShareDialog_social_icon"
+                        { socials.map((social) => (
+                            <a
+                                rel="noreferrer noopener"
+                                target="_blank"
+                                key={social.name}
+                                title={social.name}
+                                href={social.url(encodedUrl)}
+                                className="mx_ShareDialog_social_icon"
                             >
                                 <img src={social.img} alt={social.name} height={64} width={64} />
-                            </a>)
-                        }
+                            </a>
+                        )) }
                     </div>
                 </div>
             </div>

src/components/views/dialogs/UserSettingsDialog.js

@@ -22,6 +22,7 @@ import {_t, _td} from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
 import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
 import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
 import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
@@ -66,6 +67,11 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
+        tabs.push(new Tab(
+            _td("Appearance"),
+            "mx_UserSettingsDialog_appearanceIcon",
+            <AppearanceUserSettingsTab />,
+        ));
         tabs.push(new Tab(
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
@@ -89,7 +95,7 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
-            <SecurityUserSettingsTab />,
+            <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         if (SdkConfig.get()['showLabsSettings'] || SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(

src/components/views/dialogs/VerificationRequestDialog.js

@@ -48,7 +48,7 @@ export default class VerificationRequestDialog extends React.Component {
         const member = this.props.member ||
             otherUserId && MatrixClientPeg.get().getUser(otherUserId);
         const title = request && request.isSelfVerification ?
-            _t("Verify this session") : _t("Verification Request");
+            _t("Verify other session") : _t("Verification Request");
 
         return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
                 contentId="mx_Dialog_content"

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

@@ -23,6 +23,7 @@ import { MatrixClient } from 'matrix-js-sdk';
 import Modal from '../../../../Modal';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../CrossSigningManager';
+import SettingsStore from "../../../../settings/SettingsStore";
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
@@ -59,6 +60,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             restoreType: null,
+            progress: { stage: "prefetch" },
         };
     }
 
@@ -80,16 +82,29 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
+    _progressCallback = (data) => {
+        this.setState({
+            progress: data,
+        });
+    }
+
     _onResetRecoveryClick = () => {
         this.props.onFinished(false);
-        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
-            import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
-            {
-                onFinished: () => {
-                    this._loadBackupStatus();
-                },
-            }, null, /* priority = */ false, /* static = */ true,
-        );
+
+        if (SettingsStore.getValue("feature_cross_signing")) {
+            // If cross-signing is enabled, we reset the SSSS recovery passphrase (and cross-signing keys)
+            this.props.onFinished(false);
+            accessSecretStorage(() => {}, /* forceReset = */ true);
+        } else {
+            Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
+                import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
+                {
+                    onFinished: () => {
+                        this._loadBackupStatus();
+                    },
+                }, null, /* priority = */ false, /* static = */ true,
+            );
+        }
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -110,6 +125,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // is the right one and restoring it is currently the only way we can do this.
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = await MatrixClientPeg.get().keyBackupKeyFromPassword(
@@ -146,6 +162,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
             if (this.props.keyCallback) {
                 const key = MatrixClientPeg.get().keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
@@ -184,7 +201,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // `accessSecretStorage` may prompt for storage access as needed.
             const recoverInfo = await accessSecretStorage(async () => {
                 return MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
-                    this.state.backupInfo,
+                    this.state.backupInfo, undefined, undefined,
+                    { progressCallback: this._progressCallback },
                 );
             });
             this.setState({
@@ -207,6 +225,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 undefined, /* targetRoomId */
                 undefined, /* targetSessionId */
                 backupInfo,
+                { progressCallback: this._progressCallback },
             );
             this.setState({
                 recoverInfo,
@@ -272,8 +291,20 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         let content;
         let title;
         if (this.state.loading) {
-            title = _t("Loading...");
-            content = <Spinner />;
+            title = _t("Restoring keys from backup");
+            let details;
+            if (this.state.progress.stage === "fetch") {
+                details = _t("Fetching keys from server...");
+            } else if (this.state.progress.stage === "load_keys") {
+                const { total, successes, failures } = this.state.progress;
+                details = _t("%(completed)s of %(total)s keys restored", { total, completed: successes + failures });
+            } else if (this.state.progress.stage === "prefetch") {
+                details = _t("Fetching keys from server...");
+            }
+            content = <div>
+                <div>{details}</div>
+                <Spinner />
+            </div>;
         } else if (this.state.loadError) {
             title = _t("Error");
             content = _t("Unable to load backup status");
@@ -283,7 +314,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Recovery key mismatch");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this key: " +
+                            "Backup could not be decrypted with this recovery key: " +
                             "please verify that you entered the correct recovery key.",
                         )}</p>
                     </div>;
@@ -291,7 +322,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Incorrect recovery passphrase");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this passphrase: " +
+                            "Backup could not be decrypted with this recovery passphrase: " +
                             "please verify that you entered the correct recovery passphrase.",
                         )}</p>
                     </div>;
@@ -305,7 +336,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            title = _t("Backup restored");
+            title = _t("Keys restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -314,7 +345,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 )}</p>;
             }
             content = <div>
-                <p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
+                <p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p>
                 {failedToDecrypt}
                 <DialogButtons primaryButton={_t('OK')}
                     onPrimaryButtonClick={this._onDone}
@@ -435,7 +466,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div>
+            <div className='mx_RestoreKeyBackupDialog_content'>
                 {content}
             </div>
             </BaseDialog>

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

@@ -21,6 +21,7 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 
 import { _t } from '../../../../languageHandler';
+import { accessSecretStorage } from '../../../../CrossSigningManager';
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -55,8 +56,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     _onResetRecoveryClick = () => {
+        // Re-enter the access flow, but resetting storage this time around.
         this.props.onFinished(false);
-        throw new Error("Resetting secret storage unimplemented");
+        accessSecretStorage(() => {}, /* forceReset = */ true);
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -119,14 +121,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter secret storage passphrase");
+            title = _t("Enter recovery passphrase");
 
             let keyStatus;
             if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct passphrase.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery passphrase.",
                     )}
                 </div>;
             } else {
@@ -135,13 +137,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your passphrase.",
+                    "identity for verifying other sessions by entering your recovery passphrase.",
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -164,7 +165,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     />
                 </form>
                 {_t(
-                    "If you've forgotten your passphrase you can "+
+                    "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
                     "<button2>set up new recovery options</button2>."
                 , {}, {
@@ -183,7 +184,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter secret storage recovery key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -193,8 +194,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct recovery key.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery key.",
                     )}
                 </div>;
             } else if (this.state.recoveryKeyValid) {
@@ -209,8 +210,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(

src/components/views/elements/ActionButton.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import AccessibleButton from './AccessibleButton';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
 

src/components/views/elements/AppTile.js

@@ -31,13 +31,14 @@ import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../utils/WidgetUtils';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
+import {WidgetType} from "../../../widgets/WidgetType";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -187,13 +188,14 @@ export default class AppTile extends React.Component {
         }
     }
 
+    // TODO: Generify the name of this function. It's not just scalar tokens.
     /**
      * Adds a scalar token to the widget URL, if required
      * Component initialisation is only complete when this function has resolved
      */
     setScalarToken() {
         if (!WidgetUtils.isScalarUrl(this.props.app.url)) {
-            console.warn('Non-scalar widget, not setting scalar token!', url);
+            console.warn('Widget does not match integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
                 widgetUrl: this._addWurlParams(this.props.app.url),
@@ -217,7 +219,7 @@ export default class AppTile extends React.Component {
 
         const defaultManager = managers.getPrimaryManager();
         if (!WidgetUtils.isScalarUrl(defaultManager.apiUrl)) {
-            console.warn('Non-scalar manager, not setting scalar token!', url);
+            console.warn('Unknown integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
                 widgetUrl: this._addWurlParams(this.props.app.url),
@@ -269,7 +271,9 @@ export default class AppTile extends React.Component {
             if (this.props.show && this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.show && !this.props.show) {
+        }
+
+        if (nextProps.show && !this.props.show) {
             // We assume that persisted widgets are loaded and don't need a spinner.
             if (this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey)) {
                 this.setState({
@@ -280,7 +284,9 @@ export default class AppTile extends React.Component {
             if (this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
+        }
+
+        if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
             this.setState({
                 widgetPageTitle: nextProps.widgetPageTitle,
             });
@@ -332,6 +338,28 @@ export default class AppTile extends React.Component {
             });
     }
 
+    /**
+     * Ends all widget interaction, such as cancelling calls and disabling webcams.
+     * @private
+     */
+    _endWidgetActions() {
+        // HACK: This is a really dirty way to ensure that Jitsi cleans up
+        // its hold on the webcam. Without this, the widget holds a media
+        // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+        if (this._appFrame.current) {
+            // In practice we could just do `+= ''` to trick the browser
+            // into thinking the URL changed, however I can foresee this
+            // being optimized out by a browser. Instead, we'll just point
+            // the iframe at a page that is reasonably safe to use in the
+            // event the iframe doesn't wink away.
+            // This is relative to where the Riot instance is located.
+            this._appFrame.current.src = 'about:blank';
+        }
+
+        // Delete the widget from the persisted store for good measure.
+        PersistedElement.destroyElement(this._persistKey);
+    }
+
     /* If user has permission to modify widgets, delete the widget,
      * otherwise revoke access for the widget to load in the user's browser
     */
@@ -353,18 +381,7 @@ export default class AppTile extends React.Component {
                     }
                     this.setState({deleting: true});
 
-                    // HACK: This is a really dirty way to ensure that Jitsi cleans up
-                    // its hold on the webcam. Without this, the widget holds a media
-                    // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
-                    if (this._appFrame.current) {
-                        // In practice we could just do `+= ''` to trick the browser
-                        // into thinking the URL changed, however I can foresee this
-                        // being optimized out by a browser. Instead, we'll just point
-                        // the iframe at a page that is reasonably safe to use in the
-                        // event the iframe doesn't wink away.
-                        // This is relative to where the Riot instance is located.
-                        this._appFrame.current.src = 'about:blank';
-                    }
+                    this._endWidgetActions();
 
                     WidgetUtils.setRoomWidget(
                         this.props.room.roomId,
@@ -408,7 +425,12 @@ export default class AppTile extends React.Component {
         // FIXME: There's probably no reason to do this here: it should probably be done entirely
         // in ActiveWidgetStore.
         const widgetMessaging = new WidgetMessaging(
-            this.props.app.id, this._getRenderedUrl(), this.props.userWidget, this._appFrame.current.contentWindow);
+            this.props.app.id,
+            this.props.app.url,
+            this._getRenderedUrl(),
+            this.props.userWidget,
+            this._appFrame.current.contentWindow,
+        );
         ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging);
         widgetMessaging.getCapabilities().then((requestedCapabilities) => {
             console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities);
@@ -439,7 +461,7 @@ export default class AppTile extends React.Component {
 
             // We only tell Jitsi widgets that we're ready because they're realistically the only ones
             // using this custom extension to the widget API.
-            if (this.props.app.type === 'jitsi') {
+            if (WidgetType.JITSI.matches(this.props.app.type)) {
                 widgetMessaging.flagReadyToContinue();
             }
         }).catch((err) => {
@@ -529,6 +551,10 @@ export default class AppTile extends React.Component {
         if (this.props.userWidget) {
             this._onMinimiseClick();
         } else {
+            if (this.props.show) {
+                // if we were being shown, end the widget as we're about to be minimized.
+                this._endWidgetActions();
+            }
             dis.dispatch({
                 action: 'appsDrawer',
                 show: !this.props.show,
@@ -540,15 +566,18 @@ export default class AppTile extends React.Component {
      * Replace the widget template variables in a url with their values
      *
      * @param {string} u The URL with template variables
+     * @param {string} widgetType The widget's type
      *
      * @returns {string} url with temlate variables replaced
      */
-    _templatedUrl(u) {
+    _templatedUrl(u, widgetType: string) {
+        const targetData = {};
+        if (WidgetType.JITSI.matches(widgetType)) {
+            targetData['domain'] = 'jitsi.riot.im'; // v1 jitsi widgets have this hardcoded
+        }
         const myUserId = MatrixClientPeg.get().credentials.userId;
         const myUser = MatrixClientPeg.get().getUser(myUserId);
-        const vars = Object.assign({
-            domain: "jitsi.riot.im", // v1 widgets have this hardcoded
-        }, this.props.app.data, {
+        const vars = Object.assign(targetData, this.props.app.data, {
             'matrix_user_id': myUserId,
             'matrix_room_id': this.props.room.roomId,
             'matrix_display_name': myUser ? myUser.displayName : myUserId,
@@ -578,25 +607,26 @@ export default class AppTile extends React.Component {
     _getRenderedUrl() {
         let url;
 
-        if (this.props.app.type === 'jitsi') {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
             console.log("Replacing Jitsi widget URL with local wrapper");
             url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true});
             url = this._addWurlParams(url);
         } else {
             url = this._getSafeUrl(this.state.widgetUrl);
         }
-        return this._templatedUrl(url);
+        return this._templatedUrl(url, this.props.app.type);
     }
 
     _getPopoutUrl() {
-        if (this.props.app.type === 'jitsi') {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
             return this._templatedUrl(
                 WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: false}),
+                this.props.app.type,
             );
         } else {
             // use app.url, not state.widgetUrl, because we want the one without
             // the wURL params for the popped-out version.
-            return this._templatedUrl(this._getSafeUrl(this.props.app.url));
+            return this._templatedUrl(this._getSafeUrl(this.props.app.url), this.props.app.type);
         }
     }
 
@@ -610,7 +640,10 @@ export default class AppTile extends React.Component {
         if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
-        return safeWidgetUrl;
+
+        // Replace all the dollar signs back to dollar signs as they don't affect HTTP at all.
+        // We also need the dollar signs in-tact for variable substitution.
+        return safeWidgetUrl.replace(/%24/g, '$');
     }
 
     _getTileTitle() {

src/components/views/elements/DNDTagTile.js

@@ -19,8 +19,22 @@ import TagTile from './TagTile';
 
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
+import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
+import * as sdk from '../../../index';
 
 export default function DNDTagTile(props) {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu = null;
+    if (menuDisplayed && handle.current) {
+        const elementRect = handle.current.getBoundingClientRect();
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        contextMenu = (
+            <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+            </ContextMenu>
+        );
+    }
     return <div>
         <Draggable
             key={props.tag}
@@ -28,18 +42,21 @@ export default function DNDTagTile(props) {
             index={props.index}
             type="draggable-TagTile"
         >
-            { (provided, snapshot) => (
-                <div>
-                    <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                    >
-                        <TagTile {...props} />
-                    </div>
-                    { provided.placeholder }
+            {(provided, snapshot) => (
+                <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                >
+                    <TagTile
+                        {...props}
+                        contextMenuButtonRef={handle}
+                        menuDisplayed={menuDisplayed}
+                        openMenu={openMenu}
+                    />
                 </div>
-            ) }
+            )}
         </Draggable>
+        {contextMenu}
     </div>;
 }

src/components/views/elements/Draggable.tsx

@@ -0,0 +1,84 @@
+/*
+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';
+
+interface IProps {
+    className: string,
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
+    onMouseUp: (event: MouseEvent) => void,
+}
+
+interface IState {
+    onMouseMove: (event: MouseEvent) => void,
+    onMouseUp: (event: MouseEvent) => void,
+    location: ILocationState,
+}
+
+export interface ILocationState {
+    currentX: number,
+    currentY: number,
+}
+
+export default class Draggable extends React.Component<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            onMouseMove: this.onMouseMove.bind(this),
+            onMouseUp: this.onMouseUp.bind(this),
+            location: {
+                currentX: 0,
+                currentY: 0,
+            },
+        };
+    }
+
+    private onMouseDown = (event: MouseEvent): void => {
+        this.setState({
+            location: {
+                currentX: event.clientX,
+                currentY: event.clientY,
+            },
+        });
+
+        document.addEventListener("mousemove", this.state.onMouseMove);
+        document.addEventListener("mouseup", this.state.onMouseUp);
+        console.log("Mouse down")
+    }
+
+    private onMouseUp = (event: MouseEvent): void => {
+        document.removeEventListener("mousemove", this.state.onMouseMove);
+        document.removeEventListener("mouseup", this.state.onMouseUp);
+        this.props.onMouseUp(event);
+        console.log("Mouse up")
+    }
+
+    private onMouseMove(event: MouseEvent): void {
+        console.log("Mouse Move")
+        const newLocation = this.props.dragFunc(this.state.location, event);
+
+        this.setState({
+            location: newLocation,
+        });
+    }
+
+    render() {
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+    }
+
+}

src/components/views/elements/EventListSummary.js

@@ -66,12 +66,12 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
     }
 
     return (
-        <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
             <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
             { body }
-        </div>
+        </li>
     );
 };
 
@@ -90,7 +90,7 @@ EventListSummary.propTypes = {
     // The list of room members for which to show avatars next to the summary
     summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
     // The text to show as the summary of this event list
-    summaryText: PropTypes.string.isRequired,
+    summaryText: PropTypes.string,
 };
 
 export default EventListSummary;

src/components/views/elements/Field.tsx

@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { debounce } from 'lodash';
+import {IFieldState, IValidationResult} from "../elements/Validation";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -29,58 +29,93 @@ function getId() {
     return `${BASE_ID}_${count++}`;
 }
 
-export default class Field extends React.PureComponent {
-    static propTypes = {
-        // The field's ID, which binds the input and label together. Immutable.
-        id: PropTypes.string,
-        // The element to create. Defaults to "input".
-        // To define options for a select, use <Field><option ... /></Field>
-        element: PropTypes.oneOf(["input", "select", "textarea"]),
-        // The field's type (when used as an <input>). Defaults to "text".
-        type: PropTypes.string,
-        // id of a <datalist> element for suggestions
-        list: PropTypes.string,
-        // The field's label string.
-        label: PropTypes.string,
-        // The field's placeholder string. Defaults to the label.
-        placeholder: PropTypes.string,
-        // The field's value.
-        // This is a controlled component, so the value is required.
-        value: PropTypes.string.isRequired,
-        // Optional component to include inside the field before the input.
-        prefix: PropTypes.node,
-        // Optional component to include inside the field after the input.
-        postfix: PropTypes.node,
-        // The callback called whenever the contents of the field
-        // changes.  Returns an object with `valid` boolean field
-        // and a `feedback` react component field to provide feedback
-        // to the user.
-        onValidate: PropTypes.func,
-        // If specified, overrides the value returned by onValidate.
-        flagInvalid: PropTypes.bool,
-        // If specified, contents will appear as a tooltip on the element and
-        // validation feedback tooltips will be suppressed.
-        tooltipContent: PropTypes.node,
-        // If specified alongside tooltipContent, the class name to apply to the
-        // tooltip itself.
-        tooltipClassName: PropTypes.string,
-        // If specified, an additional class name to apply to the field container
-        className: PropTypes.string,
-        // All other props pass through to the <input>.
-    };
+interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInputElement> {
+    // The field's ID, which binds the input and label together. Immutable.
+    id?: string,
+    // The element to create. Defaults to "input".
+    // To define options for a select, use <Field><option ... /></Field>
+    element?: "input" | " select" | "textarea",
+    // The field's type (when used as an <input>). Defaults to "text".
+    type?: string,
+    // id of a <datalist> element for suggestions
+    list?: string,
+    // The field's label string.
+    label?: string,
+    // The field's placeholder string. Defaults to the label.
+    placeholder?: string,
+    // The field's value.
+    // This is a controlled component, so the value is required.
+    value: string,
+    // Optional component to include inside the field before the input.
+    prefixComponent?: React.ReactNode,
+    // Optional component to include inside the field after the input.
+    postfixComponent?: React.ReactNode,
+    // The callback called whenever the contents of the field
+    // changes.  Returns an object with `valid` boolean field
+    // and a `feedback` react component field to provide feedback
+    // to the user.
+    onValidate?: (input: IFieldState) => Promise<IValidationResult>,
+    // If specified, overrides the value returned by onValidate.
+    flagInvalid?: boolean,
+    // If specified, contents will appear as a tooltip on the element and
+    // validation feedback tooltips will be suppressed.
+    tooltipContent?: React.ReactNode,
+    // If specified alongside tooltipContent, the class name to apply to the
+    // tooltip itself.
+    tooltipClassName?: string,
+    // If specified, an additional class name to apply to the field container
+    className?: string,
+    // All other props pass through to the <input>.
+}
+
+interface IState {
+    valid: boolean,
+    feedback: React.ReactNode,
+    feedbackVisible: boolean,
+    focused: boolean,
+}
+
+export default class Field extends React.PureComponent<IProps, IState> {
+    private id: string;
+    private input: HTMLInputElement;
+
+    private static defaultProps = {
+        element: "input",
+        type: "text",
+    }
+
+    /*
+     * This was changed from throttle to debounce: this is more traditional for
+     * form validation since it means that the validation doesn't happen at all
+     * until the user stops typing for a bit (debounce defaults to not running on
+     * the leading edge). If we're doing an HTTP hit on each validation, we have more
+     * incentive to prevent validating input that's very unlikely to be valid.
+     * We may find that we actually want different behaviour for registration
+     * fields, in which case we can add some options to control it.
+     */
+    private validateOnChange = debounce(() => {
+        this.validate({
+            focused: true,
+        });
+    }, VALIDATION_THROTTLE_MS);
 
     constructor(props) {
         super(props);
         this.state = {
             valid: undefined,
             feedback: undefined,
+            feedbackVisible: false,
             focused: false,
         };
 
         this.id = this.props.id || getId();
     }
 
-    onFocus = (ev) => {
+    public focus() {
+        this.input.focus();
+    }
+
+    private onFocus = (ev) => {
         this.setState({
             focused: true,
         });
@@ -93,7 +128,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    onChange = (ev) => {
+    private onChange = (ev) => {
         this.validateOnChange();
         // Parent component may have supplied its own `onChange` as well
         if (this.props.onChange) {
@@ -101,7 +136,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    onBlur = (ev) => {
+    private onBlur = (ev) => {
         this.setState({
             focused: false,
         });
@@ -114,11 +149,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    focus() {
-        this.input.focus();
-    }
-
-    async validate({ focused, allowEmpty = true }) {
+    private async validate({ focused, allowEmpty = true }: {focused: boolean, allowEmpty?: boolean}) {
         if (!this.props.onValidate) {
             return;
         }
@@ -149,56 +180,42 @@ export default class Field extends React.PureComponent {
         }
     }
 
-    /*
-     * This was changed from throttle to debounce: this is more traditional for
-     * form validation since it means that the validation doesn't happen at all
-     * until the user stops typing for a bit (debounce defaults to not running on
-     * the leading edge). If we're doing an HTTP hit on each validation, we have more
-     * incentive to prevent validating input that's very unlikely to be valid.
-     * We may find that we actually want different behaviour for registration
-     * fields, in which case we can add some options to control it.
-     */
-    validateOnChange = debounce(() => {
-        this.validate({
-            focused: true,
-        });
-    }, VALIDATION_THROTTLE_MS);
 
-    render() {
+
+    public render() {
         const {
-            element, prefix, postfix, className, onValidate, children,
+            element, prefixComponent, postfixComponent, className, onValidate, children,
             tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
 
-        const inputElement = element || "input";
-
         // Set some defaults for the <input> element
-        inputProps.type = inputProps.type || "text";
-        inputProps.ref = input => this.input = input;
+        const ref = input => this.input = input;
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
         inputProps.id = this.id; // this overwrites the id from props
 
         inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
         inputProps.onBlur = this.onBlur;
-        inputProps.list = list;
 
-        const fieldInput = React.createElement(inputElement, inputProps, children);
+        // Appease typescript's inference
+        const inputProps_ = {...inputProps, ref, list};
+
+        const fieldInput = React.createElement(this.props.element, inputProps_, children);
 
         let prefixContainer = null;
-        if (prefix) {
-            prefixContainer = <span className="mx_Field_prefix">{prefix}</span>;
+        if (prefixComponent) {
+            prefixContainer = <span className="mx_Field_prefix">{prefixComponent}</span>;
         }
         let postfixContainer = null;
-        if (postfix) {
-            postfixContainer = <span className="mx_Field_postfix">{postfix}</span>;
+        if (postfixComponent) {
+            postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
         }
 
         const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
-        const fieldClasses = classNames("mx_Field", `mx_Field_${inputElement}`, className, {
+        const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
             // If we have a prefix element, leave the label always at the top left and
             // don't animate it, as it looks a bit clunky and would add complexity to do
             // properly.
-            mx_Field_labelAlwaysTopLeft: prefix,
+            mx_Field_labelAlwaysTopLeft: prefixComponent,
             mx_Field_valid: onValidate && this.state.valid === true,
             mx_Field_invalid: hasValidationFlag
                 ? flagInvalid

src/components/views/elements/Flair.js

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FlairStore from '../../../stores/FlairStore';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -0,0 +1,88 @@
+/*
+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 SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import Draggable, {ILocationState} from './Draggable';
+
+interface IProps {
+    // Current room
+    roomId: string,
+    minWidth: number,
+    maxWidth: number,
+};
+
+interface IState {
+    width: number,
+    IRCLayoutRoot: HTMLElement,
+};
+
+export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
+            IRCLayoutRoot: null,
+        }
+    };
+
+    componentDidMount() {
+        this.setState({
+            IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
+        }, () => this.updateCSSWidth(this.state.width))
+    }
+
+    private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
+        const offset = event.clientX - location.currentX;
+        const newWidth = this.state.width + offset;
+
+        console.log({offset})
+        // If we're trying to go smaller than min width, don't.
+        if (newWidth < this.props.minWidth) {
+            return location;
+        }
+
+        if (newWidth > this.props.maxWidth) {
+            return location;
+        }
+
+        this.setState({
+            width: newWidth,
+        });
+
+        this.updateCSSWidth.bind(this)(newWidth);
+
+        return {
+            currentX: event.clientX,
+            currentY: location.currentY,
+        }
+    }
+
+    private updateCSSWidth(newWidth: number) {
+        this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+    }
+
+    private onMoueUp(event: MouseEvent) {
+        if (this.props.roomId) {
+            SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        }
+    }
+
+    render() {
+        return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc.bind(this)} onMouseUp={this.onMoueUp.bind(this)}/>
+    }
+};

src/components/views/elements/ImageView.js

@@ -73,6 +73,7 @@ export default class ImageView extends React.Component {
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
+                this.props.onFinished();
                 MatrixClientPeg.get().redactEvent(
                     this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
                 ).catch(function(e) {

src/components/views/elements/LabelledToggleSwitch.js

@@ -35,6 +35,9 @@ export default class LabelledToggleSwitch extends React.Component {
         // True to put the toggle in front of the label
         // Default false.
         toggleInFront: PropTypes.bool,
+
+        // Additional class names to append to the switch. Optional.
+        className: PropTypes.string,
     };
 
     render() {
@@ -50,8 +53,9 @@ export default class LabelledToggleSwitch extends React.Component {
             secondPart = temp;
         }
 
+        const classes = `mx_SettingsFlag ${this.props.className || ""}`;
         return (
-            <div className="mx_SettingsFlag">
+            <div className={classes}>
                 {firstPart}
                 {secondPart}
             </div>

src/components/views/elements/LanguageDropdown.js

@@ -114,6 +114,7 @@ export default class LanguageDropdown extends React.Component {
             searchEnabled={true}
             value={value}
             label={_t("Language Dropdown")}
+            disabled={this.props.disabled}
         >
             { options }
         </Dropdown>;

src/components/views/elements/PersistedElement.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 
 import ResizeObserver from 'resize-observer-polyfill';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -156,16 +156,70 @@ export default class PersistedElement extends React.Component {
         child.style.display = visible ? 'block' : 'none';
     }
 
+    /*
+     * Clip element bounding rectangle to that of the parent elements.
+     * This is not a full visibility check, but prevents the persisted
+     * element from overflowing parent containers when inside a scrolled
+     * area.
+     */
+    _getClippedBoundingClientRect(element) {
+        let parentElement = element.parentElement;
+        let rect = element.getBoundingClientRect();
+
+        rect = new DOMRect(rect.left, rect.top, rect.width, rect.height);
+
+        while (parentElement) {
+            const parentRect = parentElement.getBoundingClientRect();
+
+            if (parentRect.left > rect.left) {
+                rect.width = rect.width - (parentRect.left - rect.left);
+                rect.x = parentRect.x;
+            }
+
+            if (parentRect.top > rect.top) {
+                rect.height = rect.height - (parentRect.top - rect.top);
+                rect.y = parentRect.y;
+            }
+
+            if (parentRect.right < rect.right) {
+                rect.width = rect.width - (rect.right - parentRect.right);
+            }
+
+            if (parentRect.bottom < rect.bottom) {
+                rect.height = rect.height - (rect.bottom - parentRect.bottom);
+            }
+
+            parentElement = parentElement.parentElement;
+        }
+
+        if (rect.width < 0) rect.width = 0;
+        if (rect.height < 0) rect.height = 0;
+
+        return rect;
+    }
+
     updateChildPosition(child, parent) {
         if (!child || !parent) return;
 
         const parentRect = parent.getBoundingClientRect();
+        const clipRect = this._getClippedBoundingClientRect(parent);
+
+        Object.assign(child.parentElement.style, {
+            position: 'absolute',
+            top: clipRect.top + 'px',
+            left: clipRect.left + 'px',
+            width: clipRect.width + 'px',
+            height: clipRect.height + 'px',
+            overflow: "hidden",
+        });
+
         Object.assign(child.style, {
             position: 'absolute',
-            top: parentRect.top + 'px',
-            left: parentRect.left + 'px',
+            top: (parentRect.top - clipRect.top) + 'px',
+            left: (parentRect.left - clipRect.left) + 'px',
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
+            overflow: "hidden",
         });
     }
 

src/components/views/elements/Pill.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -26,6 +26,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
@@ -191,7 +192,7 @@ const Pill = createReactClass({
 
     onUserPillClicked: function() {
         dis.dispatch({
-            action: 'view_user',
+            action: Action.ViewUser,
             member: this.state.member,
         });
     },

src/components/views/elements/QRCode.tsx

@@ -0,0 +1,51 @@
+/*
+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 * as React from "react";
+import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import Spinner from "./Spinner";
+
+interface IProps extends QRCodeToDataURLOptions {
+    data: string | QRCodeSegment[];
+    className?: string;
+}
+
+const defaultOptions: QRCodeToDataURLOptions = {
+    errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
+};
+
+const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
+    const [dataUri, setUri] = React.useState<string>(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        toDataURL(data, {...defaultOptions, ...options}).then(uri => {
+            if (cancelled) return;
+            setUri(uri);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [JSON.stringify(data), options]);
+
+    return <div className={classNames("mx_QRCode", className)}>
+        { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
+    </div>;
+};
+
+export default QRCode;

src/components/views/elements/ReplyThread.js

@@ -19,7 +19,7 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {_t} from '../../../languageHandler';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk';
 import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
@@ -37,6 +37,8 @@ export default class ReplyThread extends React.Component {
         // called when the ReplyThread contents has changed, including EventTiles thereof
         onHeightChanged: PropTypes.func.isRequired,
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
+        // Specifies which layout to use.
+        useIRCLayout: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -176,12 +178,17 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
         if (!ReplyThread.getParentEventId(parentEv)) {
-            return <div />;
+            return <div className="mx_ReplyThread_wrapper_empty" />;
         }
-        return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} />;
+        return <ReplyThread
+            parentEv={parentEv}
+            onHeightChanged={onHeightChanged}
+            ref={ref}
+            permalinkCreator={permalinkCreator}
+            useIRCLayout={useIRCLayout}
+        />;
     }
 
     componentDidMount() {
@@ -331,11 +338,13 @@ export default class ReplyThread extends React.Component {
                     onHeightChanged={this.props.onHeightChanged}
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
-                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                    useIRCLayout={this.props.useIRCLayout}
+                />
             </blockquote>;
         });
 
-        return <div>
+        return <div className="mx_ReplyThread_wrapper">
             <div>{ header }</div>
             <div>{ evTiles }</div>
         </div>;

src/components/views/elements/RoomAliasField.js

@@ -45,7 +45,7 @@ export default class RoomAliasField extends React.PureComponent {
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
                 <Field
-                    label={_t("Room alias")}
+                    label={_t("Room address")}
                     className="mx_RoomAliasField"
                     prefix={poundSign}
                     postfix={domain}
@@ -87,7 +87,7 @@ export default class RoomAliasField extends React.PureComponent {
             }, {
                 key: "required",
                 test: async ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Please provide a room alias"),
+                invalid: () => _t("Please provide a room address"),
             }, {
                 key: "taken",
                 final: true,
@@ -107,8 +107,8 @@ export default class RoomAliasField extends React.PureComponent {
                         return !!err.errcode;
                     }
                 },
-                valid: () => _t("This alias is available to use"),
-                invalid: () => _t("This alias is already in use"),
+                valid: () => _t("This address is available to use"),
+                invalid: () => _t("This address is already in use"),
             },
         ],
     });

src/components/views/elements/SSOButton.js

@@ -21,9 +21,9 @@ import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
 import {_t} from "../../../languageHandler";
 
-const SSOButton = ({matrixClient, loginType, ...props}) => {
+const SSOButton = ({matrixClient, loginType, fragmentAfterLogin, ...props}) => {
     const onClick = () => {
-        PlatformPeg.get().startSingleSignOn(matrixClient, loginType);
+        PlatformPeg.get().startSingleSignOn(matrixClient, loginType, fragmentAfterLogin);
     };
 
     return (
@@ -36,6 +36,7 @@ const SSOButton = ({matrixClient, loginType, ...props}) => {
 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
+    fragmentAfterLogin: PropTypes.string,
 };
 
 export default SSOButton;

src/components/views/elements/Slider.tsx

@@ -0,0 +1,146 @@
+/*
+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 * as React from 'react';
+
+interface IProps {
+    // A callback for the selected value
+    onSelectionChange: (value: number) => void;
+
+    // The current value of the slider
+    value: number;
+
+    // The range and values of the slider
+    // Currently only supports an ascending, constant interval range
+    values: number[];
+
+    // A function for formatting the the values
+    displayFunc: (value: number) => string;
+
+    // Whether the slider is disabled
+    disabled: boolean;
+}
+
+export default class Slider extends React.Component<IProps> {
+    // offset is a terrible inverse approximation.
+    // if the values represents some function f(x) = y where x is the
+    // index of the array and y = values[x] then offset(f, y) = x
+    // s.t f(x) = y.
+    // it assumes a monotonic function and interpolates linearly between
+    // y values.
+    // Offset is used for finding the location of a value on a
+    // non linear slider.
+    private offset(values: number[], value: number): number {
+        // the index of the first number greater than value.
+        let closest = values.reduce((prev, curr) => {
+            return (value > curr ? prev + 1 : prev);
+        }, 0);
+
+        // Off the left
+        if (closest === 0) {
+            return 0;
+        }
+
+        // Off the right
+        if (closest === values.length) {
+            return 100;
+        }
+
+        // Now
+        const closestLessValue = values[closest - 1];
+        const closestGreaterValue = values[closest];
+
+        const intervalWidth = 1 / (values.length - 1);
+
+        const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
+
+        return 100 * (closest - 1 + linearInterpolation) * intervalWidth
+
+    }
+
+    render(): React.ReactNode {
+        const dots = this.props.values.map(v =>
+            <Dot active={v <= this.props.value}
+                 label={this.props.displayFunc(v)}
+                 onClick={this.props.disabled ? () => {} : () => this.props.onSelectionChange(v)}
+                 key={v}
+                 disabled={this.props.disabled}
+            />);
+
+        let selection = null;
+
+        if (!this.props.disabled) {
+            const offset = this.offset(this.props.values, this.props.value);
+            selection = <div className="mx_Slider_selection">
+                <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
+                <hr style={{width: offset + "%"}} />
+            </div>
+        }
+
+        return <div className="mx_Slider">
+            <div>
+                <div className="mx_Slider_bar">
+                    <hr onClick={this.props.disabled ? () => {} : this.onClick.bind(this)}/>
+                    { selection }
+                </div>
+                <div className="mx_Slider_dotContainer">
+                    {dots}
+                </div>
+            </div>
+        </div>;
+    }
+
+    onClick(event: React.MouseEvent) {
+        const width = (event.target as HTMLElement).clientWidth;
+        // nativeEvent is safe to use because https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX
+        // is supported by all modern browsers
+        const relativeClick = (event.nativeEvent.offsetX / width);
+        const nearestValue = this.props.values[Math.round(relativeClick * (this.props.values.length - 1))];
+        this.props.onSelectionChange(nearestValue);
+    }
+}
+
+interface IDotProps {
+    // Callback for behavior onclick
+    onClick: () => void,
+
+    // Whether the dot should appear active
+    active: boolean,
+
+    // The label on the dot
+    label: string,
+
+    // Whether the slider is disabled
+    disabled: boolean;
+}
+
+class Dot extends React.PureComponent<IDotProps> {
+    render(): React.ReactNode {
+        let className = "mx_Slider_dot"
+        if (!this.props.disabled && this.props.active) {
+            className += " mx_Slider_dotActive";
+        }
+
+        return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
+            <div className={className} />
+            <div className="mx_Slider_labelContainer">
+                <div className="mx_Slider_label">
+                    {this.props.label}
+                </div>
+            </div>
+        </span>;
+    }
+}

src/components/views/elements/TagTile.js

@@ -16,19 +16,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
@@ -43,6 +42,9 @@ export default createReactClass({
         // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
         // For now, only group IDs are handled.
         tag: PropTypes.string,
+        contextMenuButtonRef: PropTypes.object,
+        openMenu: PropTypes.func,
+        menuDisplayed: PropTypes.bool,
     },
 
     statics: {
@@ -55,14 +57,10 @@ export default createReactClass({
             hover: false,
             // The profile data of the group if this.props.tag is a group ID
             profile: null,
-            // Whether or not the context menu is open
-            menuDisplayed: false,
         };
     },
 
     componentDidMount() {
-        this._contextMenuButton = createRef();
-
         this.unmounted = false;
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
@@ -86,7 +84,7 @@ export default createReactClass({
             this.props.tag,
         ).then((profile) => {
             if (this.unmounted) return;
-            this.setState({profile});
+            this.setState({ profile });
         }).catch((err) => {
             console.warn('Could not fetch group profile for ' + this.props.tag, err);
         });
@@ -113,28 +111,19 @@ export default createReactClass({
     },
 
     onMouseOver: function() {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     },
 
     onMouseOut: function() {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     },
 
     openMenu: function(e) {
         // Prevent the TagTile onClick event firing as well
         e.stopPropagation();
         e.preventDefault();
-
-        this.setState({
-            menuDisplayed: true,
-            hover: false,
-        });
-    },
-
-    closeMenu: function() {
-        this.setState({
-            menuDisplayed: false,
-        });
+        this.setState({ hover: false });
+        this.props.openMenu();
     },
 
     render: function() {
@@ -154,7 +143,7 @@ export default createReactClass({
 
         const badge = TagOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
-        if (badge && !this.state.hover) {
+        if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({
                 "mx_TagTile_badge": true,
                 "mx_TagTile_badgeHighlight": badge.highlight,
@@ -163,39 +152,34 @@ export default createReactClass({
         }
 
         // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
-        const contextButton = this.state.hover || this.state.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this._contextMenuButton}>
-                { "\u00B7\u00B7\u00B7" }
-            </div> : <div ref={this._contextMenuButton} />;
-
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            const elementRect = this._contextMenuButton.current.getBoundingClientRect();
-            const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
-            contextMenu = (
-                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
-                    <TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
+        const contextButton = this.state.hover || this.props.menuDisplayed ?
+            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+                {"\u00B7\u00B7\u00B7"}
+            </div> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
-        return <React.Fragment>
-            <AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                    <BaseAvatar
-                        name={name}
-                        idName={this.props.tag}
-                        url={httpUrl}
-                        width={avatarHeight}
-                        height={avatarHeight}
-                    />
-                    { contextButton }
-                    { badgeElement }
-                </div>
-            </AccessibleTooltipButton>
 
-            { contextMenu }
-        </React.Fragment>;
+        return <AccessibleTooltipButton
+            className={className}
+            onClick={this.onClick}
+            onContextMenu={this.openMenu}
+            title={name}
+        >
+            <div
+                className="mx_TagTile_avatar"
+                onMouseOver={this.onMouseOver}
+                onMouseOut={this.onMouseOut}
+            >
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.tag}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight}
+                />
+                {contextButton}
+                {badgeElement}
+            </div>
+        </AccessibleTooltipButton>;
     },
 });

src/components/views/elements/Tooltip.tsx

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 New Vector 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.
@@ -18,67 +18,68 @@ limitations under the License.
 */
 
 
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
+import { ViewTooltipPayload } from '../../../dispatcher/payloads/ViewTooltipPayload';
+import { Action } from '../../../dispatcher/actions';
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
-export default createReactClass({
-    displayName: 'Tooltip',
-
-    propTypes: {
+interface IProps {
         // Class applied to the element used to position the tooltip
-        className: PropTypes.string,
+        className: string,
         // Class applied to the tooltip itself
-        tooltipClassName: PropTypes.string,
+        tooltipClassName?: string,
         // Whether the tooltip is visible or hidden.
         // The hidden state allows animating the tooltip away via CSS.
         // Defaults to visible if unset.
-        visible: PropTypes.bool,
+        visible?: boolean,
         // the react element to put into the tooltip
-        label: PropTypes.node,
-    },
+        label: React.ReactNode,
+}
 
-    getDefaultProps() {
-        return {
-            visible: true,
-        };
-    },
+export default class Tooltip extends React.Component<IProps> {
+    private tooltipContainer: HTMLElement;
+    private tooltip: void | Element | Component<Element, any, any>;
+    private parent: Element;
+
+
+    public static readonly defaultProps = {
+        visible: true,
+    };
 
     // Create a wrapper for the tooltip outside the parent and attach it to the body element
-    componentDidMount: function() {
+    public componentDidMount() {
         this.tooltipContainer = document.createElement("div");
         this.tooltipContainer.className = "mx_Tooltip_wrapper";
         document.body.appendChild(this.tooltipContainer);
-        window.addEventListener('scroll', this._renderTooltip, true);
+        window.addEventListener('scroll', this.renderTooltip, true);
 
-        this.parent = ReactDOM.findDOMNode(this).parentNode;
+        this.parent = ReactDOM.findDOMNode(this).parentNode as Element;
 
-        this._renderTooltip();
-    },
+        this.renderTooltip();
+    }
 
-    componentDidUpdate: function() {
-        this._renderTooltip();
-    },
+    public componentDidUpdate() {
+        this.renderTooltip();
+    }
 
     // Remove the wrapper element, as the tooltip has finished using it
-    componentWillUnmount: function() {
-        dis.dispatch({
-            action: 'view_tooltip',
+    public componentWillUnmount() {
+        dis.dispatch<ViewTooltipPayload>({
+            action: Action.ViewTooltip,
             tooltip: null,
             parent: null,
         });
 
         ReactDOM.unmountComponentAtNode(this.tooltipContainer);
         document.body.removeChild(this.tooltipContainer);
-        window.removeEventListener('scroll', this._renderTooltip, true);
-    },
+        window.removeEventListener('scroll', this.renderTooltip, true);
+    }
 
-    _updatePosition(style) {
+    private updatePosition(style: {[key: string]: any}) {
         const parentBox = this.parent.getBoundingClientRect();
         let offset = 0;
         if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
@@ -91,16 +92,15 @@ export default createReactClass({
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
         style.left = 6 + parentBox.right + window.pageXOffset;
         return style;
-    },
+    }
 
-    _renderTooltip: function() {
+    private renderTooltip() {
         // Add the parent's position to the tooltips, so it's correctly
         // positioned, also taking into account any window zoom
         // NOTE: The additional 6 pixels for the left position, is to take account of the
         // tooltips chevron
-        const parent = ReactDOM.findDOMNode(this).parentNode;
-        let style = {};
-        style = this._updatePosition(style);
+        const parent = ReactDOM.findDOMNode(this).parentNode as Element;
+        const style = this.updatePosition({});
         // Hide the entire container when not visible. This prevents flashing of the tooltip
         // if it is not meant to be visible on first mount.
         style.display = this.props.visible ? "block" : "none";
@@ -118,21 +118,21 @@ export default createReactClass({
         );
 
         // Render the tooltip manually, as we wish it not to be rendered within the parent
-        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+        this.tooltip = ReactDOM.render<Element>(tooltip, this.tooltipContainer);
 
         // Tell the roomlist about us so it can manipulate us if it wishes
-        dis.dispatch({
-            action: 'view_tooltip',
+        dis.dispatch<ViewTooltipPayload>({
+            action: Action.ViewTooltip,
             tooltip: this.tooltip,
             parent: parent,
         });
-    },
+    }
 
-    render: function() {
+    public render() {
         // Render a placeholder
         return (
             <div className={this.props.className} >
             </div>
         );
-    },
-});
+    }
+}

src/components/views/elements/Validation.tsx

@@ -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.
@@ -15,11 +16,39 @@ limitations under the License.
 */
 
 /* eslint-disable babel/no-invalid-this */
+import React from "react";
+import classNames from "classnames";
 
-import classNames from 'classnames';
+type Data = Pick<IFieldState, "value" | "allowEmpty">;
+
+interface IRule<T> {
+    key: string;
+    final?: boolean;
+    skip?(this: T, data: Data): boolean;
+    test(this: T, data: Data): boolean | Promise<boolean>;
+    valid?(this: T): string;
+    invalid?(this: T): string;
+}
+
+interface IArgs<T> {
+    rules: IRule<T>[];
+    description(this: T): React.ReactChild;
+}
+
+export interface IFieldState {
+    value: string;
+    focused: boolean;
+    allowEmpty: boolean;
+}
+
+export interface IValidationResult {
+    valid?: boolean;
+    feedback?: React.ReactChild;
+}
 
 /**
  * Creates a validation function from a set of rules describing what to validate.
+ * Generic T is the "this" type passed to the rule methods
  *
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
@@ -37,8 +66,8 @@ import classNames from 'classnames';
  *     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.
  */
-export default function withValidation({ description, rules }) {
-    return async function onValidate({ value, focused, allowEmpty = true }) {
+export default function withValidation<T = undefined>({ description, rules }: IArgs<T>) {
+    return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
         if (!value && allowEmpty) {
             return {
                 valid: null,

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

@@ -17,8 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {replaceableComponent} from "../../../../utils/replaceableComponent";
-import Spinner from "../Spinner";
-import * as QRCode from "qrcode";
+import QRCode from "../QRCode";
 
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
 export default class VerificationQRCode extends React.PureComponent {
@@ -26,33 +25,12 @@ export default class VerificationQRCode extends React.PureComponent {
         qrCodeData: PropTypes.object.isRequired,
     };
 
-    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() {
-        // Now actually assemble the QR code's data URI
-        const uri = await QRCode.toDataURL([{data: this.props.qrCodeData.buffer, 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' />;
+        return (
+            <QRCode
+                data={[{data: this.props.qrCodeData.buffer, mode: 'byte'}]}
+                className="mx_VerificationQRCode"
+                width={196} />
+        );
     }
 }

src/components/views/emojipicker/Category.js

@@ -67,7 +67,13 @@ class Category extends React.PureComponent {
         const localScrollTop = Math.max(0, scrollTop - listTop);
 
         return (
-            <section className="mx_EmojiPicker_category" data-category-id={this.props.id}>
+            <section
+                id={`mx_EmojiPicker_category_${this.props.id}`}
+                className="mx_EmojiPicker_category"
+                data-category-id={this.props.id}
+                role="tabpanel"
+                aria-label={name}
+            >
                 <h2 className="mx_EmojiPicker_category_label">
                     {name}
                 </h2>

src/components/views/emojipicker/Emoji.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {MenuItem} from "../../structures/ContextMenu";
 
 class Emoji extends React.PureComponent {
     static propTypes = {
@@ -30,14 +31,18 @@ class Emoji extends React.PureComponent {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
         const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);
         return (
-            <li onClick={() => onClick(emoji)}
+            <MenuItem
+                element="li"
+                onClick={() => onClick(emoji)}
                 onMouseEnter={() => onMouseEnter(emoji)}
                 onMouseLeave={() => onMouseLeave(emoji)}
-                className="mx_EmojiPicker_item_wrapper">
+                className="mx_EmojiPicker_item_wrapper"
+                label={emoji.unicode}
+            >
                 <div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
                     {emoji.unicode}
                 </div>
-            </li>
+            </MenuItem>
         );
     }
 }

src/components/views/emojipicker/EmojiPicker.js

@@ -147,8 +147,12 @@ class EmojiPicker extends React.Component {
             // We update this here instead of through React to avoid re-render on scroll.
             if (cat.visible) {
                 cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
+                cat.ref.current.setAttribute("aria-selected", true);
+                cat.ref.current.setAttribute("tabindex", 0);
             } else {
                 cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
+                cat.ref.current.setAttribute("aria-selected", false);
+                cat.ref.current.setAttribute("tabindex", -1);
             }
         }
     }

src/components/views/emojipicker/Header.js

@@ -16,23 +16,89 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import {Key} from "../../../Keyboard";
 
 class Header extends React.PureComponent {
     static propTypes = {
         categories: PropTypes.arrayOf(PropTypes.object).isRequired,
         onAnchorClick: PropTypes.func.isRequired,
-        refs: PropTypes.object,
+    };
+
+    findNearestEnabled(index, delta) {
+        index += this.props.categories.length;
+        const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
+
+        while (index < cats.length && index >= 0) {
+            if (cats[index].enabled) return index % this.props.categories.length;
+            index += delta > 0 ? 1 : -1;
+        }
+    }
+
+    changeCategoryRelative(delta) {
+        const current = this.props.categories.findIndex(c => c.visible);
+        this.changeCategoryAbsolute(current + delta, delta);
+    }
+
+    changeCategoryAbsolute(index, delta=1) {
+        const category = this.props.categories[this.findNearestEnabled(index, delta)];
+        if (category) {
+            this.props.onAnchorClick(category.id);
+            category.ref.current.focus();
+        }
+    }
+
+    // Implements ARIA Tabs with Automatic Activation pattern
+    // https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
+    onKeyDown = (ev) => {
+        let handled = true;
+        switch (ev.key) {
+            case Key.ARROW_LEFT:
+                this.changeCategoryRelative(-1);
+                break;
+            case Key.ARROW_RIGHT:
+                this.changeCategoryRelative(1);
+                break;
+
+            case Key.HOME:
+                this.changeCategoryAbsolute(0);
+                break;
+            case Key.END:
+                this.changeCategoryAbsolute(this.props.categories.length - 1, -1);
+                break;
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
     };
 
     render() {
         return (
-            <nav className="mx_EmojiPicker_header">
-                {this.props.categories.map(category => (
-                    <button disabled={!category.enabled} key={category.id} ref={category.ref}
-                        className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}
-                            mx_EmojiPicker_anchor_${category.id}`}
-                        onClick={() => this.props.onAnchorClick(category.id)} title={category.name} />
-                ))}
+            <nav className="mx_EmojiPicker_header" role="tablist" aria-label={_t("Categories")} onKeyDown={this.onKeyDown}>
+                {this.props.categories.map(category => {
+                    const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
+                        mx_EmojiPicker_anchor_visible: category.visible,
+                    });
+                    // Properties of this button are also modified by EmojiPicker's updateVisibility in DOM.
+                    return <button
+                        disabled={!category.enabled}
+                        key={category.id}
+                        ref={category.ref}
+                        className={classes}
+                        onClick={() => this.props.onAnchorClick(category.id)}
+                        title={category.name}
+                        role="tab"
+                        tabIndex={category.visible ? 0 : -1} // roving
+                        aria-selected={category.visible}
+                        aria-controls={`mx_EmojiPicker_category_${category.id}`}
+                    />;
+                })}
             </nav>
         );
     }

src/components/views/emojipicker/QuickReactions.js

@@ -72,7 +72,7 @@ class QuickReactions extends React.Component {
                         </React.Fragment>
                     }
                 </h2>
-                <ul className="mx_EmojiPicker_list">
+                <ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
                     {QUICK_REACTIONS.map(emoji => <Emoji
                         key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
                         onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}

src/components/views/emojipicker/ReactionPicker.js

@@ -18,6 +18,7 @@ import React from 'react';
 import PropTypes from "prop-types";
 import EmojiPicker from "./EmojiPicker";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import dis from "../../../dispatcher/dispatcher";
 
 class ReactionPicker extends React.Component {
     static propTypes = {
@@ -105,6 +106,7 @@ class ReactionPicker extends React.Component {
                     "key": reaction,
                 },
             });
+            dis.dispatch({action: "message_sent"});
             return true;
         }
     }

src/components/views/globals/CookieBar.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';

src/components/views/groups/GroupInviteTile.js

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import {_t} from '../../../languageHandler';
 import classNames from 'classnames';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";

src/components/views/groups/GroupMemberInfo.js

@@ -19,7 +19,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -28,6 +28,7 @@ import GroupStore from '../../../stores/GroupStore';
 import AccessibleButton from '../elements/AccessibleButton';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import {Action} from "../../../dispatcher/actions";
 
 export default createReactClass({
     displayName: 'GroupMemberInfo',
@@ -103,7 +104,7 @@ export default createReactClass({
                 ).then(() => {
                     // return to the user list
                     dis.dispatch({
-                        action: "view_user",
+                        action: Action.ViewUser,
                         member: null,
                     });
                 }).catch((e) => {
@@ -124,7 +125,7 @@ export default createReactClass({
     _onCancel: function(e) {
         // Go back to the user list
         dis.dispatch({
-            action: "view_user",
+            action: Action.ViewUser,
             member: null,
         });
     },

src/components/views/groups/GroupMemberList.js

@@ -19,7 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import GroupStore from '../../../stores/GroupStore';
 import PropTypes from 'prop-types';
 import { showGroupInviteDialog } from '../../../GroupAddressPicker';

src/components/views/groups/GroupMemberTile.js

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { GroupMemberType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 

src/components/views/groups/GroupRoomInfo.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';

src/components/views/groups/GroupRoomTile.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { GroupRoomType } from '../../../groups';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";