Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

src/components/structures/GroupView.js

@@ -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/LeftPanel.js

@@ -26,7 +26,7 @@ import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
-import RoomList2 from "../views/rooms/RoomList2";
+import {Action} from "../../dispatcher/actions";
 
 
 const LeftPanel = createReactClass({
@@ -198,7 +198,7 @@ const LeftPanel = createReactClass({
 
     onSearchCleared: function(source) {
         if (source === "keyboard") {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
         }
         this.setState({searchExpanded: false});
     },
@@ -274,28 +274,15 @@ 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} />;
-        }
+        const 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}>

src/components/structures/LeftPanel2.tsx

@@ -0,0 +1,154 @@
+/*
+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 TagPanel from "./TagPanel";
+import classNames from "classnames";
+import dis from "../../dispatcher/dispatcher";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import { _t } from "../../languageHandler";
+import SearchBox from "./SearchBox";
+import RoomList2 from "../views/rooms/RoomList2";
+import TopLeftMenuButton from "./TopLeftMenuButton";
+import { Action } from "../../dispatcher/actions";
+
+/*******************************************************************
+ *   CAUTION                                                       *
+ *******************************************************************
+ * This is a work in progress implementation and isn't complete or *
+ * even useful as a component. Please avoid using it until this    *
+ * warning disappears.                                             *
+ *******************************************************************/
+
+interface IProps {
+    // TODO: Support collapsed state
+}
+
+interface IState {
+    searchExpanded: boolean;
+    searchFilter: string; // TODO: Move search into room list?
+}
+
+export default class LeftPanel2 extends React.Component<IProps, IState> {
+    // TODO: Properly support TagPanel
+    // TODO: Properly support searching/filtering
+    // TODO: Properly support breadcrumbs
+    // TODO: Properly support TopLeftMenu (User Settings)
+    // TODO: a11y
+    // TODO: actually make this useful in general (match design proposals)
+    // TODO: Fadable support (is this still needed?)
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            searchExpanded: false,
+            searchFilter: "",
+        };
+    }
+
+    private onSearch = (term: string): void => {
+        this.setState({searchFilter: term});
+    };
+
+    private onSearchCleared = (source: string): void => {
+        if (source === "keyboard") {
+            dis.fire(Action.FocusComposer);
+        }
+        this.setState({searchExpanded: false});
+    }
+
+    private onSearchFocus = (): void => {
+        this.setState({searchExpanded: true});
+    };
+
+    private onSearchBlur = (event: FocusEvent): void => {
+        const target = event.target as HTMLInputElement;
+        if (target.value.length === 0) {
+            this.setState({searchExpanded: false});
+        }
+    }
+
+    public render(): React.ReactNode {
+        const tagPanel = (
+            <div className="mx_LeftPanel_tagPanelContainer">
+                <TagPanel/>
+            </div>
+        );
+
+        const exploreButton = (
+            <div
+                className={classNames("mx_LeftPanel_explore", {"mx_LeftPanel_explore_hidden": this.state.searchExpanded})}>
+                <AccessibleButton onClick={() => dis.dispatch({action: 'view_room_directory'})}>
+                    {_t("Explore")}
+                </AccessibleButton>
+            </div>
+        );
+
+        const searchBox = (<SearchBox
+            className="mx_LeftPanel_filterRooms"
+            enableRoomSearchFocus={true}
+            blurredPlaceholder={_t('Filter')}
+            placeholder={_t('Filter rooms…')}
+            onKeyDown={() => {/*TODO*/}}
+            onSearch={this.onSearch}
+            onCleared={this.onSearchCleared}
+            onFocus={this.onSearchFocus}
+            onBlur={this.onSearchBlur}
+            collapsed={false}/>); // TODO: Collapsed support
+
+        // TODO: Improve props for RoomList2
+        const roomList = <RoomList2
+            onKeyDown={() => {/*TODO*/}}
+            resizeNotifier={null}
+            collapsed={false}
+            searchFilter={this.state.searchFilter}
+            onFocus={() => {/*TODO*/}}
+            onBlur={() => {/*TODO*/}}
+        />;
+
+        // TODO: Breadcrumbs
+        // TODO: Conference handling / calls
+
+        const containerClasses = classNames({
+            "mx_LeftPanel_container": true,
+            "mx_fadable": true,
+            "collapsed": false, // TODO: Collapsed support
+            "mx_LeftPanel_container_hasTagPanel": true, // TODO: TagPanel support
+            "mx_fadable_faded": false,
+            "mx_LeftPanel2": true, // TODO: Remove flag when RoomList2 ships (used as an indicator)
+        });
+
+        return (
+            <div className={containerClasses}>
+                {tagPanel}
+                <aside className="mx_LeftPanel dark-panel">
+                    <TopLeftMenuButton collapsed={false}/>
+                    <div
+                        className="mx_LeftPanel_exploreAndFilterRow"
+                        onKeyDown={() => {/*TODO*/}}
+                        onFocus={() => {/*TODO*/}}
+                        onBlur={() => {/*TODO*/}}
+                    >
+                        {exploreButton}
+                        {searchBox}
+                    </div>
+                    {roomList}
+                </aside>
+            </div>
+        );
+    }
+}

src/components/structures/LoggedInView.tsx

@@ -29,7 +29,7 @@ import { fixupColorFonts } from '../../utils/FontManager';
 import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import sessionStore from '../../stores/SessionStore';
-import {MatrixClientPeg, MatrixClientCreds} from '../../MatrixClientPeg';
+import {MatrixClientPeg, IMatrixClientCreds} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
@@ -43,6 +43,17 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
 import { DefaultTagID } from "../../stores/room-list/models";
+import {
+    showToast as showSetPasswordToast,
+    hideToast as hideSetPasswordToast
+} from "../../toasts/SetPasswordToast";
+import {
+    showToast as showServerLimitToast,
+    hideToast as hideServerLimitToast
+} from "../../toasts/ServerLimitToast";
+import { Action } from "../../dispatcher/actions";
+import LeftPanel2 from "./LeftPanel2";
+
 // 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.
@@ -57,7 +68,7 @@ function canElementReceiveInput(el) {
 
 interface IProps {
     matrixClient: MatrixClient;
-    onRegistered: (credentials: MatrixClientCreds) => Promise<MatrixClient>;
+    onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
     viaServers?: string[];
     hideToSRUsers: boolean;
     resizeNotifier: ResizeNotifier;
@@ -65,10 +76,6 @@ interface IProps {
     initialEventPixelOffset: number;
     leftDisabled: boolean;
     rightDisabled: boolean;
-    showCookieBar: boolean;
-    hasNewVersion: boolean;
-    userHasGeneratedPassword: boolean;
-    showNotifierToolbar: boolean;
     page_type: string;
     autoJoin: boolean;
     thirdPartyInvite?: object;
@@ -76,7 +83,6 @@ interface IProps {
     currentRoomId: string;
     ConferenceHandler?: object;
     collapseLhs: boolean;
-    checkingForUpdate: boolean;
     config: {
         piwik: {
             policyUrl: string;
@@ -86,19 +92,26 @@ interface IProps {
     currentUserId?: string;
     currentGroupId?: string;
     currentGroupIsNew?: boolean;
-    version?: string;
-    newVersion?: string;
-    newVersionReleaseNotes?: string;
 }
+
+interface IUsageLimit {
+    limit_type: "monthly_active_user" | string;
+    admin_contact?: string;
+}
+
 interface IState {
     mouseDown?: {
         x: number;
         y: number;
     };
-    syncErrorData: any;
+    syncErrorData?: {
+        error: {
+            data: IUsageLimit;
+            errcode: string;
+        };
+    };
+    usageLimitEventContent?: IUsageLimit;
     useCompactLayout: boolean;
-    serverNoticeEvents: MatrixEvent[];
-    userHasGeneratedPassword: boolean;
 }
 
 /**
@@ -141,11 +154,8 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         this.state = {
             mouseDown: undefined,
             syncErrorData: undefined,
-            userHasGeneratedPassword: false,
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
-            // any currently active server notice events
-            serverNoticeEvents: [],
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -179,18 +189,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         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) ||
-            (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword) ||
-            (prevProps.showNotifierToolbar !== this.props.showNotifierToolbar)
-        ) {
-            this.props.resizeNotifier.notifyBannersChanged();
-        }
-    }
-
     componentWillUnmount() {
         document.removeEventListener('keydown', this._onNativeKeyDown, false);
         this._matrixClient.removeListener("accountData", this.onAccountData);
@@ -220,9 +218,11 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     };
 
     _setStateFromSessionStore = () => {
-        this.setState({
-            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
-        });
+        if (this._sessionStore.getCachedPassword()) {
+            showSetPasswordToast();
+        } else {
+            hideSetPasswordToast();
+        }
     };
 
     _createResizer() {
@@ -294,6 +294,8 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
 
         if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
             this._updateServerNoticeEvents();
+        } else {
+            this._calculateServerLimitToast(this.state.syncErrorData, this.state.usageLimitEventContent);
         }
     };
 
@@ -304,11 +306,24 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         }
     };
 
+    _calculateServerLimitToast(syncErrorData: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
+        const error = syncErrorData && syncErrorData.error && syncErrorData.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
+        if (error) {
+            usageLimitEventContent = syncErrorData.error.data;
+        }
+
+        if (usageLimitEventContent) {
+            showServerLimitToast(usageLimitEventContent.limit_type, usageLimitEventContent.admin_contact, error);
+        } else {
+            hideServerLimitToast();
+        }
+    }
+
     _updateServerNoticeEvents = async () => {
         const roomLists = RoomListStoreTempProxy.getRoomLists();
         if (!roomLists[DefaultTagID.ServerNotice]) return [];
 
-        const pinnedEvents = [];
+        const events = [];
         for (const room of roomLists[DefaultTagID.ServerNotice]) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
@@ -318,12 +333,19 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             for (const eventId of pinnedEventIds) {
                 const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId, 0);
                 const event = timeline.getEvents().find(ev => ev.getId() === eventId);
-                if (event) pinnedEvents.push(event);
+                if (event) events.push(event);
             }
         }
-        this.setState({
-            serverNoticeEvents: pinnedEvents,
+
+        const usageLimitEvent = events.find((e) => {
+            return (
+                e && e.getType() === 'm.room.message' &&
+                e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
+            );
         });
+        const usageLimitEventContent = usageLimitEvent && usageLimitEvent.getContent();
+        this._calculateServerLimitToast(this.state.syncErrorData, usageLimitEventContent);
+        this.setState({ usageLimitEventContent });
     };
 
     _onPaste = (ev) => {
@@ -338,7 +360,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             // refocusing during a paste event will make the
             // paste end up in the newly focused element,
             // so dispatch synchronously before paste happens
-            dis.dispatch({action: 'focus_composer'}, true);
+            dis.fire(Action.FocusComposer, true);
         }
     };
 
@@ -488,7 +510,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
 
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
-                dis.dispatch({action: 'focus_composer'}, true);
+                dis.fire(Action.FocusComposer, true);
                 ev.stopPropagation();
                 // we should *not* preventDefault() here as
                 // that would prevent typing in the now-focussed composer
@@ -599,12 +621,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
         const ToastContainer = sdk.getComponent('structures.ToastContainer');
-        const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
-        const CookieBar = sdk.getComponent('globals.CookieBar');
-        const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
-        const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
-        const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
-        const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
         let pageElement;
 
@@ -648,50 +664,25 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                 break;
         }
 
-        const usageLimitEvent = this.state.serverNoticeEvents.find((e) => {
-            return (
-                e && e.getType() === 'm.room.message' &&
-                e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
-            );
-        });
-
-        let topBar;
-        if (this.state.syncErrorData && this.state.syncErrorData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
-            topBar = <ServerLimitBar kind='hard'
-                adminContact={this.state.syncErrorData.error.data.admin_contact}
-                limitType={this.state.syncErrorData.error.data.limit_type}
-            />;
-        } else if (usageLimitEvent) {
-            topBar = <ServerLimitBar kind='soft'
-                adminContact={usageLimitEvent.getContent().admin_contact}
-                limitType={usageLimitEvent.getContent().limit_type}
-            />;
-        } else if (this.props.showCookieBar &&
-            this.props.config.piwik &&
-            navigator.doNotTrack !== "1"
-        ) {
-            const policyUrl = this.props.config.piwik.policyUrl || null;
-            topBar = <CookieBar policyUrl={policyUrl} />;
-        } else if (this.props.hasNewVersion) {
-            topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
-                                    releaseNotes={this.props.newVersionReleaseNotes}
-            />;
-        } else if (this.props.checkingForUpdate) {
-            topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
-        } else if (this.state.userHasGeneratedPassword) {
-            topBar = <PasswordNagBar />;
-        } else if (this.props.showNotifierToolbar) {
-            topBar = <MatrixToolbar />;
-        }
-
         let bodyClasses = 'mx_MatrixChat';
-        if (topBar) {
-            bodyClasses += ' mx_MatrixChat_toolbarShowing';
-        }
         if (this.state.useCompactLayout) {
             bodyClasses += ' mx_MatrixChat_useCompactLayout';
         }
 
+        let leftPanel = (
+            <LeftPanel
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapseLhs || false}
+                disabled={this.props.leftDisabled}
+            />
+        );
+        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
+            // TODO: Supply props like collapsed and disabled to LeftPanel2
+            leftPanel = (
+                <LeftPanel2 />
+            );
+        }
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <div
@@ -702,15 +693,10 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
                     onMouseDown={this._onMouseDown}
                     onMouseUp={this._onMouseUp}
                 >
-                    { topBar }
                     <ToastContainer />
                     <DragDropContext onDragEnd={this._onDragEnd}>
                         <div ref={this._resizeContainer} className={bodyClasses}>
-                            <LeftPanel
-                                resizeNotifier={this.props.resizeNotifier}
-                                collapsed={this.props.collapseLhs || false}
-                                disabled={this.props.leftDisabled}
-                            />
+                            { leftPanel }
                             <ResizeHandle />
                             { pageElement }
                         </div>

src/components/structures/MatrixChat.tsx

@@ -49,7 +49,6 @@ import PageTypes from '../../PageTypes';
 import { getHomePageUrl } from '../../utils/pages';
 
 import createRoom from "../../createRoom";
-import KeyRequestHandler from '../../KeyRequestHandler';
 import { _t, getCurrentLanguage } from '../../languageHandler';
 import SettingsStore, { SettingLevel } from "../../settings/SettingsStore";
 import ThemeController from "../../settings/controllers/ThemeController";
@@ -59,8 +58,8 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
 import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../utils/AutoDiscoveryUtils";
 import DMRoomMap from '../../utils/DMRoomMap';
 import { countRoomsWithNotif } from '../../RoomNotifs';
-import { ThemeWatcher } from "../../theme";
-import { FontWatcher } from '../../FontWatcher';
+import ThemeWatcher from "../../settings/watchers/ThemeWatcher";
+import { FontWatcher } from '../../settings/watchers/FontWatcher';
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
 import { defer, IDeferred } from "../../utils/promise";
 import ToastStore from "../../stores/ToastStore";
@@ -68,6 +67,11 @@ import * as StorageManager from "../../utils/StorageManager";
 import type LoggedInViewType from "./LoggedInView";
 import { ViewUserPayload } from "../../dispatcher/payloads/ViewUserPayload";
 import { Action } from "../../dispatcher/actions";
+import {
+    showToast as showAnalyticsToast,
+    hideToast as hideAnalyticsToast
+} from "../../toasts/AnalyticsToast";
+import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -169,12 +173,6 @@ interface IState {
     leftDisabled: boolean;
     middleDisabled: boolean;
     // the right panel's disabled state is tracked in its store.
-    version?: string;
-    newVersion?: string;
-    hasNewVersion: boolean;
-    newVersionReleaseNotes?: string;
-    checkingForUpdate?: string; // updateCheckStatusEnum
-    showCookieBar: boolean;
     // Parameters used in the registration dance with the IS
     register_client_secret?: string;
     register_session_id?: string;
@@ -184,7 +182,6 @@ interface IState {
     hideToSRUsers: boolean;
     syncError?: Error;
     resizeNotifier: ResizeNotifier;
-    showNotifierToolbar: boolean;
     serverConfig?: ValidatedServerConfig;
     ready: boolean;
     thirdPartyInvite?: object;
@@ -228,17 +225,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             leftDisabled: false,
             middleDisabled: false,
 
-            hasNewVersion: false,
-            newVersionReleaseNotes: null,
-            checkingForUpdate: null,
-
-            showCookieBar: false,
-
             hideToSRUsers: false,
 
             syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
             resizeNotifier: new ResizeNotifier(),
-            showNotifierToolbar: false,
             ready: false,
         };
 
@@ -339,12 +329,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             });
         }
 
-        if (SettingsStore.getValue("showCookieBar")) {
-            this.setState({
-                showCookieBar: true,
-            });
-        }
-
         if (SettingsStore.getValue("analyticsOptIn")) {
             Analytics.enable();
         }
@@ -363,7 +347,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             Analytics.trackPageChange(durationMs);
         }
         if (this.focusComposer) {
-            dis.dispatch({action: 'focus_composer'});
+            dis.fire(Action.FocusComposer);
             this.focusComposer = false;
         }
     }
@@ -686,9 +670,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     dis.dispatch({action: 'view_my_groups'});
                 }
                 break;
-            case 'notifier_enabled':
-                this.setState({showNotifierToolbar: Notifier.shouldShowToolbar()});
-                break;
             case 'hide_left_panel':
                 this.setState({
                     collapseLhs: true,
@@ -736,15 +717,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'client_started':
                 this.onClientStarted();
                 break;
-            case 'new_version':
-                this.onVersion(
-                    payload.currentVersion, payload.newVersion,
-                    payload.releaseNotes,
-                );
-                break;
-            case 'check_updates':
-                this.setState({ checkingForUpdate: payload.value });
-                break;
             case 'send_event':
                 this.onSendEvent(payload.room_id, payload.event);
                 break;
@@ -761,19 +733,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             case 'accept_cookies':
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, true);
                 SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
-
-                this.setState({
-                    showCookieBar: false,
-                });
+                hideAnalyticsToast();
                 Analytics.enable();
                 break;
             case 'reject_cookies':
                 SettingsStore.setValue("analyticsOptIn", null, SettingLevel.DEVICE, false);
                 SettingsStore.setValue("showCookieBar", null, SettingLevel.DEVICE, false);
-
-                this.setState({
-                    showCookieBar: false,
-                });
+                hideAnalyticsToast();
                 break;
         }
     };
@@ -932,9 +898,20 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    private viewGroup(payload) {
+    private async viewGroup(payload) {
         const groupId = payload.group_id;
+
+        // Wait for the first sync to complete
+        if (!this.firstSyncComplete) {
+            if (!this.firstSyncPromise) {
+                console.warn('Cannot view a group before first sync. group_id:', groupId);
+                return;
+            }
+            await this.firstSyncPromise.promise;
+        }
+
         this.setState({
+            view: Views.LOGGED_IN,
             currentGroupId: groupId,
             currentGroupIsNew: payload.group_is_new,
         });
@@ -1251,6 +1228,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         StorageManager.tryPersistStorage();
+
+        if (SettingsStore.getValue("showCookieBar") && this.props.config.piwik && navigator.doNotTrack !== "1") {
+            showAnalyticsToast(this.props.config.piwik && this.props.config.piwik.policyUrl);
+        }
     }
 
     private showScreenAfterLogin() {
@@ -1378,10 +1359,13 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             this.firstSyncComplete = true;
             this.firstSyncPromise.resolve();
 
-            dis.dispatch({action: 'focus_composer'});
+            if (Notifier.shouldShowToolbar()) {
+                showNotificationsToast();
+            }
+
+            dis.fire(Action.FocusComposer);
             this.setState({
                 ready: true,
-                showNotifierToolbar: Notifier.shouldShowToolbar(),
             });
         });
         cli.on('Call.incoming', function(call) {
@@ -1460,16 +1444,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         cli.on("Session.logged_out", () => dft.stop());
         cli.on("Event.decrypted", (e, err) => dft.eventDecrypted(e, err));
 
-        // TODO: We can remove this once cross-signing is the only way.
-        // https://github.com/vector-im/riot-web/issues/11908
-        const krh = new KeyRequestHandler(cli);
-        cli.on("crypto.roomKeyRequest", (req) => {
-            krh.handleKeyRequest(req);
-        });
-        cli.on("crypto.roomKeyRequestCancellation", (req) => {
-            krh.handleKeyRequestCancellation(req);
-        });
-
         cli.on("Room", (room) => {
             if (MatrixClientPeg.get().isCryptoEnabled()) {
                 const blacklistEnabled = SettingsStore.getValueAt(
@@ -1540,13 +1514,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
 
         cli.on("crypto.verification.request", request => {
-            const isFlagOn = SettingsStore.getValue("feature_cross_signing");
-
-            if (!isFlagOn && !request.channel.deviceId) {
-                request.cancel({code: "m.invalid_message", reason: "This client has cross-signing disabled"});
-                return;
-            }
-
             if (request.verifier) {
                 const IncomingSasDialog = sdk.getComponent("views.dialogs.IncomingSasDialog");
                 Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
@@ -1559,7 +1526,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     icon: "verification",
                     props: {request},
                     component: sdk.getComponent("toasts.VerificationRequestToast"),
-                    priority: ToastStore.PRIORITY_REALTIME,
+                    priority: 90,
                 });
             }
         });
@@ -1589,9 +1556,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             // be aware of will be signalled through the room shield
             // changing colour. More advanced behaviour will come once
             // we implement more settings.
-            cli.setGlobalErrorOnUnknownDevices(
-                !SettingsStore.getValue("feature_cross_signing"),
-            );
+            cli.setGlobalErrorOnUnknownDevices(false);
         }
     }
 
@@ -1833,16 +1798,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.showScreen("settings");
     };
 
-    onVersion(current: string, latest: string, releaseNotes?: string) {
-        this.setState({
-            version: current,
-            newVersion: latest,
-            hasNewVersion: current !== latest,
-            newVersionReleaseNotes: releaseNotes,
-            checkingForUpdate: null,
-        });
-    }
-
     onSendEvent(roomId: string, event: MatrixEvent) {
         const cli = MatrixClientPeg.get();
         if (!cli) {
@@ -1949,17 +1904,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         // whether cross-signing has been set up on the account.
         const masterKeyInStorage = !!cli.getAccountData("m.cross_signing.master");
         if (masterKeyInStorage) {
-            // Auto-enable cross-signing for the new session when key found in
-            // secret storage.
-            SettingsStore.setValue("feature_cross_signing", null, SettingLevel.DEVICE, true);
             this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
-        } else if (
-            SettingsStore.getValue("feature_cross_signing") &&
-            await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")
-        ) {
-            // This will only work if the feature is set to 'enable' in the config,
-            // since it's too early in the lifecycle for users to have turned the
-            // labs flag on.
+        } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
             this.setStateForNewView({ view: Views.E2E_SETUP });
         } else {
             this.onLoggedIn();
@@ -1978,7 +1924,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         // console.log(`Rendering MatrixChat with view ${this.state.view}`);
 
         let fragmentAfterLogin = "";
-        if (this.props.initialScreenAfterLogin) {
+        if (this.props.initialScreenAfterLogin &&
+            // XXX: workaround for https://github.com/vector-im/riot-web/issues/11643 causing a login-loop
+            !["welcome", "login", "register"].includes(this.props.initialScreenAfterLogin.screen)
+        ) {
             fragmentAfterLogin = `/${this.props.initialScreenAfterLogin.screen}`;
         }
 
@@ -2037,7 +1986,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                         onCloseAllSettings={this.onCloseAllSettings}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
-                        showCookieBar={this.state.showCookieBar}
                     />
                 );
             } else {

src/components/structures/MessagePanel.js

@@ -34,6 +34,30 @@ import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResiz
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
 
+// check if there is a previous event and it has the same sender as this event
+// and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
+function shouldFormContinuation(prevEvent, mxEvent) {
+    // sanity check inputs
+    if (!prevEvent || !prevEvent.sender || !mxEvent.sender) return false;
+    // check if within the max continuation period
+    if (mxEvent.getTs() - prevEvent.getTs() > CONTINUATION_MAX_INTERVAL) return false;
+
+    // Some events should appear as continuations from previous events of different types.
+    if (mxEvent.getType() !== prevEvent.getType() &&
+        (!continuedTypes.includes(mxEvent.getType()) ||
+            !continuedTypes.includes(prevEvent.getType()))) return false;
+
+    // Check if the sender is the same and hasn't changed their displayname/avatar between these events
+    if (mxEvent.sender.userId !== prevEvent.sender.userId ||
+        mxEvent.sender.name !== prevEvent.sender.name ||
+        mxEvent.sender.getMxcAvatarUrl() !== prevEvent.sender.getMxcAvatarUrl()) return false;
+
+    // if we don't have tile for previous event then it was shown by showHiddenEvents and has no SenderProfile
+    if (!haveTileForEvent(prevEvent)) return false;
+
+    return true;
+}
+
 const isMembershipChange = (e) => e.getType() === 'm.room.member' || e.getType() === 'm.room.third_party_invite';
 
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
@@ -108,6 +132,9 @@ export default class MessagePanel extends React.Component {
 
         // whether to show reactions for an event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     };
 
     // Force props to be loaded for useIRCLayout
@@ -119,7 +146,6 @@ export default class MessagePanel extends React.Component {
             // 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
@@ -172,8 +198,6 @@ 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() {
@@ -183,7 +207,6 @@ export default class MessagePanel extends React.Component {
     componentWillUnmount() {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
-        SettingsStore.unwatchSetting(this._layoutWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -202,17 +225,6 @@ 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) {
@@ -527,39 +539,6 @@ export default class MessagePanel extends React.Component {
 
         const isEditing = this.props.editState &&
             this.props.editState.getEvent().getId() === mxEv.getId();
-        // is this a continuation of the previous message?
-        let continuation = false;
-
-        // Some events should appear as continuations from previous events of
-        // different types.
-
-        const eventTypeContinues =
-            prevEvent !== null &&
-            continuedTypes.includes(mxEv.getType()) &&
-            continuedTypes.includes(prevEvent.getType());
-
-        // if there is a previous event and it has the same sender as this event
-        // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
-        if (prevEvent !== null && prevEvent.sender && mxEv.sender && mxEv.sender.userId === prevEvent.sender.userId &&
-            // if we don't have tile for previous event then it was shown by showHiddenEvents and has no SenderProfile
-            haveTileForEvent(prevEvent) && (mxEv.getType() === prevEvent.getType() || eventTypeContinues) &&
-            (mxEv.getTs() - prevEvent.getTs() <= CONTINUATION_MAX_INTERVAL)) {
-            continuation = true;
-        }
-
-/*
-        // Work out if this is still a continuation, as we are now showing commands
-        // and /me messages with their own little avatar. The case of a change of
-        // event type (commands) is handled above, but we need to handle the /me
-        // messages seperately as they have a msgtype of 'm.emote' but are classed
-        // as normal messages
-        if (prevEvent !== null && prevEvent.sender && mxEv.sender
-                && mxEv.sender.userId === prevEvent.sender.userId
-                && mxEv.getType() == prevEvent.getType()
-                && prevEvent.getContent().msgtype === 'm.emote') {
-            continuation = false;
-        }
-*/
 
         // local echoes have a fake date, which could even be yesterday. Treat them
         // as 'today' for the date separators.
@@ -571,12 +550,15 @@ export default class MessagePanel extends React.Component {
         }
 
         // do we need a date separator since the last event?
-        if (this._wantsDateSeparator(prevEvent, eventDate)) {
+        const wantsDateSeparator = this._wantsDateSeparator(prevEvent, eventDate);
+        if (wantsDateSeparator) {
             const dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} /></li>;
             ret.push(dateSeparator);
-            continuation = false;
         }
 
+        // is this a continuation of the previous message?
+        const continuation = !wantsDateSeparator && shouldFormContinuation(prevEvent, mxEv);
+
         const eventId = mxEv.getId();
         const highlight = (eventId === this.props.highlightedEventId);
 
@@ -614,7 +596,7 @@ export default class MessagePanel extends React.Component {
                         isSelectedEvent={highlight}
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
-                        useIRCLayout={this.state.useIRCLayout}
+                        useIRCLayout={this.props.useIRCLayout}
                     />
                 </TileErrorBoundary>
             </li>,
@@ -797,8 +779,6 @@ 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,
             },
         );
 
@@ -813,11 +793,11 @@ export default class MessagePanel extends React.Component {
         }
 
         let ircResizer = null;
-        if (this.state.useIRCLayout) {
+        if (this.props.useIRCLayout) {
             ircResizer = <IRCTimelineProfileResizer
                 minWidth={20}
                 maxWidth={600}
-                roomId={this.props.room ? this.props.roomroomId : null}
+                roomId={this.props.room ? this.props.room.roomId : null}
             />;
         }
 

src/components/structures/RightPanel.js

@@ -26,7 +26,6 @@ import dis from '../../dispatcher/dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import GroupStore from '../../stores/GroupStore';
-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";
@@ -189,16 +188,37 @@ export default class RightPanel extends React.Component {
         }
     }
 
+    onCloseUserInfo = () => {
+        // 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/group, 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,
+            });
+        }
+    };
+
     render() {
         const MemberList = sdk.getComponent('rooms.MemberList');
-        const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const UserInfo = sdk.getComponent('right_panel.UserInfo');
         const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
 
         const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
-        const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
         const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
         const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
 
@@ -220,71 +240,25 @@ export default class RightPanel extends React.Component {
                 break;
             case RIGHT_PANEL_PHASES.RoomMemberInfo:
             case RIGHT_PANEL_PHASES.EncryptionPanel:
-                if (SettingsStore.getValue("feature_cross_signing")) {
-                    const onClose = () => {
-                        // 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}
-                        roomId={this.props.roomId}
-                        key={this.props.roomId || this.state.member.userId}
-                        onClose={onClose}
-                        phase={this.state.phase}
-                        verificationRequest={this.state.verificationRequest}
-                        verificationRequestPromise={this.state.verificationRequestPromise}
-                    />;
-                } else {
-                    panel = <MemberInfo
-                        member={this.state.member}
-                        key={this.props.roomId || this.state.member.userId}
-                    />;
-                }
+                panel = <UserInfo
+                    user={this.state.member}
+                    roomId={this.props.roomId}
+                    key={this.props.roomId || this.state.member.userId}
+                    onClose={this.onCloseUserInfo}
+                    phase={this.state.phase}
+                    verificationRequest={this.state.verificationRequest}
+                    verificationRequestPromise={this.state.verificationRequestPromise}
+                />;
                 break;
             case RIGHT_PANEL_PHASES.Room3pidMemberInfo:
                 panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
                 break;
             case RIGHT_PANEL_PHASES.GroupMemberInfo:
-                if (SettingsStore.getValue("feature_cross_signing")) {
-                    const onClose = () => {
-                        dis.dispatch({
-                            action: Action.ViewUser,
-                            member: null,
-                        });
-                    };
-                    panel = <UserInfo
-                        user={this.state.member}
-                        groupId={this.props.groupId}
-                        key={this.state.member.userId}
-                        onClose={onClose} />;
-                } else {
-                    panel = (
-                        <GroupMemberInfo
-                            groupMember={this.state.member}
-                            groupId={this.props.groupId}
-                            key={this.state.member.user_id}
-                        />
-                    );
-                }
+                panel = <UserInfo
+                    user={this.state.member}
+                    groupId={this.props.groupId}
+                    key={this.state.member.userId}
+                    onClose={this.onCloseUserInfo} />;
                 break;
             case RIGHT_PANEL_PHASES.GroupRoomInfo:
                 panel = <GroupRoomInfo

src/components/structures/RoomDirectory.js

@@ -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();

src/components/structures/RoomStatusBar.js

@@ -24,9 +24,9 @@ import { _t, _td } from '../../languageHandler';
 import * as sdk from '../../index';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
-import * as cryptodevices from '../../cryptodevices';
 import dis from '../../dispatcher/dispatcher';
 import {messageForResourceLimitError, messageForSendError} from '../../utils/ErrorUtils';
+import {Action} from "../../dispatcher/actions";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -126,25 +126,14 @@ export default createReactClass({
         });
     },
 
-    _onSendWithoutVerifyingClick: function() {
-        cryptodevices.getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((devices) => {
-            cryptodevices.markAllDevicesKnown(MatrixClientPeg.get(), devices);
-            Resend.resendUnsentEvents(this.props.room);
-        });
-    },
-
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
-        dis.dispatch({action: 'focus_composer'});
-    },
-
-    _onShowDevicesClick: function() {
-        cryptodevices.showUnknownDeviceDialogForMessages(MatrixClientPeg.get(), this.props.room);
+        dis.fire(Action.FocusComposer);
     },
 
     _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
@@ -213,82 +202,65 @@ export default createReactClass({
         if (!unsentMessages.length) return null;
 
         let title;
-        let content;
 
-        const hasUDE = unsentMessages.some((m) => {
-            return m.error && m.error.name === "UnknownDeviceError";
-        });
-
-        if (hasUDE) {
-            title = _t("Message not sent due to unknown sessions being present");
-            content = _t(
-                "<showSessionsText>Show sessions</showSessionsText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
+        let consentError = null;
+        let resourceLimitError = null;
+        for (const m of unsentMessages) {
+            if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
+                consentError = m.error;
+                break;
+            } else if (m.error && m.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
+                resourceLimitError = m.error;
+                break;
+            }
+        }
+        if (consentError) {
+            title = _t(
+                "You can't send any messages until you review and agree to " +
+                "<consentLink>our terms and conditions</consentLink>.",
                 {},
                 {
-                    'showSessionsText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onShowDevicesClick}>{ sub }</a>,
-                    'sendAnywayText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="sendAnyway" onClick={this._onSendWithoutVerifyingClick}>{ sub }</a>,
-                    'cancelText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
+                    'consentLink': (sub) =>
+                        <a href={consentError.data && consentError.data.consent_uri} target="_blank">
+                            { sub }
+                        </a>,
                 },
             );
+        } else if (resourceLimitError) {
+            title = messageForResourceLimitError(
+                resourceLimitError.data.limit_type,
+                resourceLimitError.data.admin_contact, {
+                'monthly_active_user': _td(
+                    "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
+                    "Please <a>contact your service administrator</a> to continue using the service.",
+                ),
+                '': _td(
+                    "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
+                    "Please <a>contact your service administrator</a> to continue using the service.",
+                ),
+            });
+        } else if (
+            unsentMessages.length === 1 &&
+            unsentMessages[0].error &&
+            unsentMessages[0].error.data &&
+            unsentMessages[0].error.data.error
+        ) {
+            title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
         } else {
-            let consentError = null;
-            let resourceLimitError = null;
-            for (const m of unsentMessages) {
-                if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
-                    consentError = m.error;
-                    break;
-                } else if (m.error && m.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
-                    resourceLimitError = m.error;
-                    break;
-                }
-            }
-            if (consentError) {
-                title = _t(
-                    "You can't send any messages until you review and agree to " +
-                    "<consentLink>our terms and conditions</consentLink>.",
-                    {},
-                    {
-                        'consentLink': (sub) =>
-                            <a href={consentError.data && consentError.data.consent_uri} target="_blank">
-                                { sub }
-                            </a>,
-                    },
-                );
-            } else if (resourceLimitError) {
-                title = messageForResourceLimitError(
-                    resourceLimitError.data.limit_type,
-                    resourceLimitError.data.admin_contact, {
-                    'monthly_active_user': _td(
-                        "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
-                        "Please <a>contact your service administrator</a> to continue using the service.",
-                    ),
-                    '': _td(
-                        "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
-                        "Please <a>contact your service administrator</a> to continue using the service.",
-                    ),
-                });
-            } else if (
-                unsentMessages.length === 1 &&
-                unsentMessages[0].error &&
-                unsentMessages[0].error.data &&
-                unsentMessages[0].error.data.error
-            ) {
-                title = messageForSendError(unsentMessages[0].error.data) || unsentMessages[0].error.data.error;
-            } else {
-                title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
-            }
-            content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. " +
-               "You can also select individual messages to resend or cancel.",
-                { count: unsentMessages.length },
-                {
-                    'resendText': (sub) =>
-                        <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
-                    'cancelText': (sub) =>
-                        <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
-                },
-            );
+            title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
         }
 
+        const content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> " +
+            "now. You can also select individual messages to resend or cancel.",
+            { count: unsentMessages.length },
+            {
+                'resendText': (sub) =>
+                    <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
+                'cancelText': (sub) =>
+                    <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
+            },
+        );
+
         return <div className="mx_RoomStatusBar_connectionLostBar">
             <img src={require("../../../res/img/feather-customised/warning-triangle.svg")} width="24" height="24" title={_t("Warning")} alt="" />
             <div>

src/components/structures/RoomView.js

@@ -55,6 +55,7 @@ import {haveTileForEvent} from "../views/rooms/EventTile";
 import RoomContext from "../../contexts/RoomContext";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { shieldStatusForRoom } from '../../utils/ShieldUtils';
+import {Action} from "../../dispatcher/actions";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -164,6 +165,10 @@ export default createReactClass({
 
             canReact: false,
             canReply: false,
+
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+
+            matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
         };
     },
 
@@ -193,6 +198,8 @@ export default createReactClass({
 
         this._roomView = createRef();
         this._searchResultsPanel = createRef();
+
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
     },
 
     _onReadReceiptsChange: function() {
@@ -232,7 +239,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),
         };
@@ -532,6 +540,14 @@ export default createReactClass({
         // no need to do this as Dir & Settings are now overlays. It just burnt CPU.
         // console.log("Tinter.tint from RoomView.unmount");
         // Tinter.tint(); // reset colourscheme
+
+        SettingsStore.unwatchSetting(this._layoutWatcherRef);
+    },
+
+    onLayoutChange: function() {
+        this.setState({
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+        });
     },
 
     _onRightPanelStoreUpdate: function() {
@@ -681,6 +697,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;
         }
     },
 
@@ -854,15 +880,6 @@ export default createReactClass({
             });
             return;
         }
-        if (!SettingsStore.getValue("feature_cross_signing")) {
-            room.hasUnverifiedDevices().then((hasUnverifiedDevices) => {
-                this.setState({
-                    e2eStatus: hasUnverifiedDevices ? "warning" : "verified",
-                });
-            });
-            debuglog("e2e check is warning/verified only as cross-signing is off");
-            return;
-        }
 
         /* At this point, the user has encryption on and cross-signing on */
         this.setState({
@@ -1146,7 +1163,7 @@ export default createReactClass({
             ev.dataTransfer.files, this.state.room.roomId, this.context,
         );
         this.setState({ draggingFile: false });
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onDragLeaveOrEnd: function(ev) {
@@ -1352,7 +1369,7 @@ export default createReactClass({
                 event: null,
             });
         }
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     onLeaveClick: function() {
@@ -1463,7 +1480,7 @@ export default createReactClass({
     // jump down to the bottom of this room, where new events are arriving
     jumpToLiveTimeline: function() {
         this._messagePanel.jumpToLiveTimeline();
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     },
 
     // jump up to wherever our read marker is
@@ -1663,14 +1680,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}
@@ -1695,7 +1714,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}
@@ -1980,6 +2000,13 @@ export default createReactClass({
             highlightedEventId = this.state.initialEventId;
         }
 
+        const messagePanelClassNames = classNames(
+            "mx_RoomView_messagePanel",
+            {
+                "mx_IRCLayout": this.state.useIRCLayout,
+                "mx_GroupLayout": !this.state.useIRCLayout,
+            });
+
         // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
         const messagePanel = (
             <TimelinePanel
@@ -1995,11 +2022,12 @@ export default createReactClass({
                 onScroll={this.onMessageListScroll}
                 onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
                 showUrlPreview = {this.state.showUrlPreview}
-                className="mx_RoomView_messagePanel"
+                className={messagePanelClassNames}
                 membersLoaded={this.state.membersLoaded}
                 permalinkCreator={this._getPermalinkCreatorForRoom(this.state.room)}
                 resizeNotifier={this.props.resizeNotifier}
                 showReactions={true}
+                useIRCLayout={this.state.useIRCLayout}
             />);
 
         let topUnreadMessagesBar = null;

src/components/structures/TagPanelButtons.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../index';
-import dis from '../../dispatcher/dispatcher';
-import Modal from '../../Modal';
-import { _t } from '../../languageHandler';
-
-const TagPanelButtons = createReactClass({
-    displayName: 'TagPanelButtons',
-
-
-    componentDidMount: function() {
-        this._dispatcherRef = dis.register(this._onAction);
-    },
-
-    componentWillUnmount() {
-        if (this._dispatcherRef) {
-            dis.unregister(this._dispatcherRef);
-            this._dispatcherRef = null;
-        }
-    },
-
-    _onAction(payload) {
-        if (payload.action === "show_redesign_feedback_dialog") {
-            const RedesignFeedbackDialog =
-                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
-            Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
-        }
-    },
-
-    render() {
-        const GroupsButton = sdk.getComponent('elements.GroupsButton');
-        const ActionButton = sdk.getComponent("elements.ActionButton");
-
-        return (<div className="mx_TagPanelButtons">
-            <GroupsButton />
-            <ActionButton
-                className="mx_TagPanelButtons_report" action="show_redesign_feedback_dialog"
-                label={_t("Report bugs & give feedback")} tooltip={true} />
-        </div>);
-    },
-});
-export default TagPanelButtons;

src/components/structures/TimelinePanel.js

@@ -112,6 +112,9 @@ const TimelinePanel = createReactClass({
 
         // whether to show reactions for an event
         showReactions: PropTypes.bool,
+
+        // whether to use the irc layout
+        useIRCLayout: PropTypes.bool,
     },
 
     statics: {
@@ -1447,6 +1450,7 @@ const TimelinePanel = createReactClass({
                 getRelationsForEvent={this.getRelationsForEvent}
                 editState={this.state.editState}
                 showReactions={this.props.showReactions}
+                useIRCLayout={this.props.useIRCLayout}
             />
         );
     },

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/auth/Registration.js

@@ -247,9 +247,8 @@ export default createReactClass({
             // 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({});
-                // This should never succeed since we specified an empty
-                // auth object.
+                await this._makeRegisterRequest(null);
+                // This should never succeed since we specified no auth object.
                 console.log("Expecting 401 from register request but got success!");
             }
         } catch (e) {

src/components/structures/auth/SoftLogout.js

@@ -25,6 +25,7 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {sendLoginRequest} from "../../../Login";
 import AuthPage from "../../views/auth/AuthPage";
 import SSOButton from "../../views/elements/SSOButton";
+import {HOMESERVER_URL_KEY, ID_SERVER_URL_KEY} from "../../../BasePlatform";
 
 const LOGIN_VIEW = {
     LOADING: 1,
@@ -43,7 +44,7 @@ const FLOWS_TO_VIEWS = {
 export default class SoftLogout extends React.Component {
     static propTypes = {
         // Query parameters from MatrixChat
-        realQueryParams: PropTypes.object, // {homeserver, identityServer, loginToken}
+        realQueryParams: PropTypes.object, // {loginToken}
 
         // Called when the SSO login completes
         onTokenLoginCompleted: PropTypes.func,
@@ -90,7 +91,7 @@ export default class SoftLogout extends React.Component {
 
     async _initLogin() {
         const queryParams = this.props.realQueryParams;
-        const hasAllParams = queryParams && queryParams['homeserver'] && queryParams['loginToken'];
+        const hasAllParams = queryParams && queryParams['loginToken'];
         if (hasAllParams) {
             this.setState({loginView: LOGIN_VIEW.LOADING});
             this.trySsoLogin();
@@ -157,8 +158,8 @@ export default class SoftLogout extends React.Component {
     async trySsoLogin() {
         this.setState({busy: true});
 
-        const hsUrl = this.props.realQueryParams['homeserver'];
-        const isUrl = this.props.realQueryParams['identityServer'] || MatrixClientPeg.get().getIdentityServerUrl();
+        const hsUrl = localStorage.getItem(HOMESERVER_URL_KEY);
+        const isUrl = localStorage.getItem(ID_SERVER_URL_KEY) || MatrixClientPeg.get().getIdentityServerUrl();
         const loginType = "m.login.token";
         const loginParams = {
             token: this.props.realQueryParams['loginToken'],

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -355,6 +355,7 @@ export const TermsAuthEntry = createReactClass({
             allChecked = allChecked && checked;
 
             checkboxes.push(
+                // XXX: replace with StyledCheckbox
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
                     <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
@@ -538,6 +539,7 @@ export const MsisdnAuthEntry = createReactClass({
                     type: MsisdnAuthEntry.LOGIN_TYPE,
                     // TODO: Remove `threepid_creds` once servers support proper UIA
                     // See https://github.com/vector-im/riot-web/issues/10312
+                    // See https://github.com/matrix-org/matrix-doc/issues/2220
                     threepid_creds: creds,
                     threepidCreds: creds,
                 });

src/components/views/auth/ModularServerConfig.js

@@ -23,7 +23,8 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as ServerType from '../../views/auth/ServerTypeSelector';
 import ServerConfig from "./ServerConfig";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
+    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
 // TODO: TravisR - Can this extend ServerConfig for most things?
 

src/components/views/auth/PassphraseField.tsx

@@ -36,7 +36,7 @@ interface IProps {
     labelStrongPassword?: string;
     labelAllowedButUnsafe?: string;
 
-    onChange(ev: KeyboardEvent);
+    onChange(ev: React.FormEvent<HTMLElement>);
     onValidate(result: IValidationResult);
 }
 

src/components/views/auth/PasswordLogin.js

@@ -238,7 +238,7 @@ export default class PasswordLogin extends React.Component {
                     type="text"
                     label={_t("Phone")}
                     value={this.state.phoneNumber}
-                    prefix={phoneCountry}
+                    prefixComponent={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}

src/components/views/auth/RegistrationForm.js

@@ -473,7 +473,7 @@ export default createReactClass({
             type="text"
             label={phoneLabel}
             value={this.state.phoneNumber}
-            prefix={phoneCountry}
+            prefixComponent={phoneCountry}
             onChange={this.onPhoneNumberChange}
             onValidate={this.onPhoneNumberValidate}
         />;

src/components/views/auth/ServerTypeSelector.js

@@ -22,7 +22,8 @@ import classnames from 'classnames';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import {makeType} from "../../../utils/TypeUtils";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://modular.im/services/matrix-hosting-riot' +
+    '?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
 export const FREE = 'Free';
 export const PREMIUM = 'Premium';

src/components/views/avatars/BaseAvatar.js

@@ -26,58 +26,48 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {toPx} from "../../../utils/units";
 
-const useImageUrl = ({url, urls, idName, name, defaultToInitialLetter}) => {
+const useImageUrl = ({url, urls}) => {
     const [imageUrls, setUrls] = useState([]);
     const [urlsIndex, setIndex] = useState();
 
-    const onError = () => {
-        const nextIndex = urlsIndex + 1;
-        if (nextIndex < imageUrls.length) {
-            // try the next one
-            setIndex(nextIndex);
-        }
-    };
-
-    const defaultImageUrl = useMemo(() => AvatarLogic.defaultAvatarUrlForString(idName || name), [idName, name]);
+    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
 
     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 = [];
         if (!SettingsStore.getValue("lowBandwidth")) {
-            _urls = urls || [];
+            _urls = memoizedUrls || [];
 
             if (url) {
                 _urls.unshift(url); // put in urls[0]
             }
         }
 
-        if (defaultToInitialLetter) {
-            _urls.push(defaultImageUrl); // lowest priority
-        }
-
         // deduplicate URLs
         _urls = Array.from(new Set(_urls));
 
         setIndex(0);
         setUrls(_urls);
-    }, [url, ...(urls || [])]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
 
     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 && urlsIndex > 0 ) { // Did we fall back?
-            // Start from the highest priority URL again
+        if (reconnected) {
             setIndex(0);
         }
-    }, [urlsIndex]);
+    }, []);
     useEventEmitter(cli, "sync", onClientSync);
 
     const imageUrl = imageUrls[urlsIndex];
-    return [imageUrl, imageUrl === defaultImageUrl, onError];
+    return [imageUrl, onError];
 };
 
 const BaseAvatar = (props) => {
@@ -96,9 +86,9 @@ const BaseAvatar = (props) => {
         ...otherProps
     } = props;
 
-    const [imageUrl, isDefault, onError] = useImageUrl({url, urls, idName, name, defaultToInitialLetter});
+    const [imageUrl, onError] = useImageUrl({url, urls});
 
-    if (isDefault) {
+    if (!imageUrl && defaultToInitialLetter) {
         const initialLetter = AvatarLogic.getInitialLetter(name);
         const textNode = (
             <span
@@ -116,7 +106,7 @@ const BaseAvatar = (props) => {
         const imgNode = (
             <img
                 className="mx_BaseAvatar_image"
-                src={imageUrl}
+                src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
                 alt=""
                 title={title}
                 onError={onError}

src/components/views/avatars/MemberAvatar.js

@@ -18,10 +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/dispatcher";
 import {Action} from "../../../dispatcher/actions";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 export default createReactClass({
     displayName: 'MemberAvatar',
@@ -62,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 {

src/components/views/context_menus/MessageContextMenu.js

@@ -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, {
@@ -465,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 = (
@@ -500,7 +486,6 @@ export default createReactClass({
                 { quoteButton }
                 { externalURLButton }
                 { collapseReplyThread }
-                { e2eInfo }
                 { reportEventButton }
             </div>
         );

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/BaseDialog.js

@@ -144,6 +144,7 @@ export default createReactClass({
                 >
                     <div className={classNames('mx_Dialog_header', {
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                        'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                             {headerImage}

src/components/views/dialogs/CreateRoomDialog.js

@@ -24,7 +24,7 @@ import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
-import SettingsStore from "../../../settings/SettingsStore";
+import {privateShouldBeEncrypted} from "../../../createRoom";
 
 export default createReactClass({
     displayName: 'CreateRoomDialog',
@@ -37,7 +37,7 @@ export default createReactClass({
         const config = SdkConfig.get();
         return {
             isPublic: this.props.defaultPublic || false,
-            isEncrypted: true,
+            isEncrypted: privateShouldBeEncrypted(),
             name: "",
             topic: "",
             alias: "",
@@ -66,7 +66,7 @@ export default createReactClass({
             createOpts.creation_content = {'m.federate': false};
         }
 
-        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+        if (!this.state.isPublic) {
             opts.encryption = this.state.isEncrypted;
         }
 
@@ -181,7 +181,7 @@ export default createReactClass({
         let publicPrivateLabel;
         let aliasField;
         if (this.state.isPublic) {
-            publicPrivateLabel = (<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">
@@ -193,7 +193,14 @@ export default createReactClass({
         }
 
         let e2eeSection;
-        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+        if (!this.state.isPublic) {
+            let microcopy;
+            if (privateShouldBeEncrypted()) {
+                microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
+            } else {
+                microcopy = _t("Your server admin has disabled end-to-end encryption by default " +
+                    "in private rooms & Direct Messages.");
+            }
             e2eeSection = <React.Fragment>
                 <LabelledToggleSwitch
                     label={ _t("Enable end-to-end encryption")}
@@ -201,7 +208,7 @@ export default createReactClass({
                     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>
+                <p>{ microcopy }</p>
             </React.Fragment>;
         }
 

src/components/views/dialogs/CryptoStoreTooNewDialog.js

@@ -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

@@ -25,6 +25,7 @@ import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import StyledCheckbox from "../elements/StyledCheckbox";
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
@@ -209,21 +210,18 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     <div className="mx_DeactivateAccountDialog_input_section">
                         <p>
-                            <label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
-                                <input
-                                    id="mx_DeactivateAccountDialog_erase_account_input"
-                                    type="checkbox"
-                                    checked={this.state.shouldErase}
-                                    onChange={this._onEraseFieldChange}
-                                />
-                                { _t(
+                            <StyledCheckbox
+                                checked={this.state.shouldErase}
+                                onChange={this._onEraseFieldChange}
+                            >
+                                {_t(
                                     "Please forget all messages I have sent when my account is deactivated " +
                                     "(<b>Warning:</b> this will cause future users to see an incomplete view " +
                                     "of conversations)",
                                     {},
                                     { b: (sub) => <b>{ sub }</b> },
-                                ) }
-                            </label>
+                                )}
+                            </StyledCheckbox>
                         </p>
 
                         {error}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -1,377 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
-import * 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/dispatcher";
-import SettingsStore from '../../../settings/SettingsStore';
-import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
-import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
-
-const MODE_LEGACY = 'legacy';
-const MODE_SAS = 'sas';
-
-const PHASE_START = 0;
-const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
-const PHASE_PICK_VERIFICATION_OPTION = 2;
-const PHASE_SHOW_SAS = 3;
-const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 4;
-const PHASE_VERIFIED = 5;
-const PHASE_CANCELLED = 6;
-
-export default class DeviceVerifyDialog extends React.Component {
-    static propTypes = {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    constructor() {
-        super();
-        this._verifier = null;
-        this._showSasEvent = null;
-        this._request = null;
-        this.state = {
-            phase: PHASE_START,
-            mode: MODE_SAS,
-            sasVerified: false,
-        };
-    }
-
-    componentWillUnmount() {
-        if (this._verifier) {
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier.cancel('User cancel');
-        }
-    }
-
-    _onSwitchToLegacyClick = () => {
-        if (this._verifier) {
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier.cancel('User cancel');
-            this._verifier = null;
-        }
-        this.setState({mode: MODE_LEGACY});
-    }
-
-    _onSwitchToSasClick = () => {
-        this.setState({mode: MODE_SAS});
-    }
-
-    _onCancelClick = () => {
-        this.props.onFinished(false);
-    }
-
-    _onUseSasClick = async () => {
-        try {
-            this._verifier = this._request.beginKeyVerification(verificationMethods.SAS);
-            this._verifier.on('show_sas', this._onVerifierShowSas);
-            // throws upon cancellation
-            await this._verifier.verify();
-            this.setState({phase: PHASE_VERIFIED});
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier = null;
-        } catch (e) {
-            console.log("Verification failed", e);
-            this.setState({
-                phase: PHASE_CANCELLED,
-            });
-            this._verifier = null;
-            this._request = null;
-        }
-    };
-
-    _onLegacyFinished = (confirm) => {
-        if (confirm) {
-            MatrixClientPeg.get().setDeviceVerified(
-                this.props.userId, this.props.device.deviceId, true,
-            );
-        }
-        this.props.onFinished(confirm);
-    }
-
-    _onSasRequestClick = async () => {
-        this.setState({
-            phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
-        });
-        const client = MatrixClientPeg.get();
-        const verifyingOwnDevice = this.props.userId === client.getUserId();
-        try {
-            if (!verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
-                const roomId = await ensureDMExistsAndOpen(this.props.userId);
-                // throws upon cancellation before having started
-                const request = await client.requestVerificationDM(
-                    this.props.userId, roomId,
-                );
-                await request.waitFor(r => r.ready || r.started);
-                if (request.ready) {
-                    this._verifier = request.beginKeyVerification(verificationMethods.SAS);
-                } else {
-                    this._verifier = request.verifier;
-                }
-            } else if (verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
-                this._request = await client.requestVerification(this.props.userId, [
-                    verificationMethods.SAS,
-                    SHOW_QR_CODE_METHOD,
-                    verificationMethods.RECIPROCATE_QR_CODE,
-                ]);
-
-                await this._request.waitFor(r => r.ready || r.started);
-                this.setState({phase: PHASE_PICK_VERIFICATION_OPTION});
-            } else {
-                this._verifier = client.beginKeyVerification(
-                    verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
-                );
-            }
-            if (!this._verifier) return;
-            this._verifier.on('show_sas', this._onVerifierShowSas);
-            // throws upon cancellation
-            await this._verifier.verify();
-            this.setState({phase: PHASE_VERIFIED});
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier = null;
-        } catch (e) {
-            console.log("Verification failed", e);
-            this.setState({
-                phase: PHASE_CANCELLED,
-            });
-            this._verifier = null;
-        }
-    }
-
-    _onSasMatchesClick = () => {
-        this._showSasEvent.confirm();
-        this.setState({
-            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
-        });
-    }
-
-    _onVerifiedDoneClick = () => {
-        this.props.onFinished(true);
-    }
-
-    _onVerifierShowSas = (e) => {
-        this._showSasEvent = e;
-        this.setState({
-            phase: PHASE_SHOW_SAS,
-        });
-    }
-
-    _renderSasVerification() {
-        let body;
-        switch (this.state.phase) {
-            case PHASE_START:
-                body = this._renderVerificationPhaseStart();
-                break;
-            case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
-                body = this._renderVerificationPhaseWaitAccept();
-                break;
-            case PHASE_PICK_VERIFICATION_OPTION:
-                body = this._renderVerificationPhasePick();
-                break;
-            case PHASE_SHOW_SAS:
-                body = this._renderSasVerificationPhaseShowSas();
-                break;
-            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
-                body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
-                break;
-            case PHASE_VERIFIED:
-                body = this._renderVerificationPhaseVerified();
-                break;
-            case PHASE_CANCELLED:
-                body = this._renderVerificationPhaseCancelled();
-                break;
-        }
-
-        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
-        return (
-            <BaseDialog
-                title={_t("Verify session")}
-                onFinished={this._onCancelClick}
-            >
-                {body}
-            </BaseDialog>
-        );
-    }
-
-    _renderVerificationPhaseStart() {
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return (
-            <div>
-                <AccessibleButton
-                    element="span" className="mx_linkButton" onClick={this._onSwitchToLegacyClick}
-                >
-                    {_t("Use Legacy Verification (for older clients)")}
-                </AccessibleButton>
-                <p>
-                    { _t("Verify by comparing a short text string.") }
-                </p>
-                <p>
-                    {_t("To be secure, do this in person or use a trusted way to communicate.")}
-                </p>
-                <DialogButtons
-                    primaryButton={_t('Begin Verifying')}
-                    hasCancel={true}
-                    onPrimaryButtonClick={this._onSasRequestClick}
-                    onCancel={this._onCancelClick}
-                />
-            </div>
-        );
-    }
-
-    _renderVerificationPhaseWaitAccept() {
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-
-        return (
-            <div>
-                <Spinner />
-                <p>{_t("Waiting for partner to accept...")}</p>
-                <p>{_t(
-                    "Nothing appearing? Not all clients support interactive verification yet. " +
-                    "<button>Use legacy verification</button>.",
-                    {}, {button: sub => <AccessibleButton element='span' className="mx_linkButton"
-                        onClick={this._onSwitchToLegacyClick}
-                    >
-                        {sub}
-                    </AccessibleButton>},
-                )}</p>
-            </div>
-        );
-    }
-
-    _renderVerificationPhasePick() {
-        return <VerificationQREmojiOptions
-            request={this._request}
-            onCancel={this._onCancelClick}
-            onStartEmoji={this._onUseSasClick}
-        />;
-    }
-
-    _renderSasVerificationPhaseShowSas() {
-        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-        return <VerificationShowSas
-            sas={this._showSasEvent.sas}
-            onCancel={this._onCancelClick}
-            onDone={this._onSasMatchesClick}
-            isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
-            onStartEmoji={this._onUseSasClick}
-            inDialog={true}
-        />;
-    }
-
-    _renderSasVerificationPhaseWaitForPartnerToConfirm() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-        return <div>
-            <Spinner />
-            <p>{_t(
-                "Waiting for %(userId)s to confirm...", {userId: this.props.userId},
-            )}</p>
-        </div>;
-    }
-
-    _renderVerificationPhaseVerified() {
-        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
-        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
-    }
-
-    _renderVerificationPhaseCancelled() {
-        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
-        return <VerificationCancelled onDone={this._onCancelClick} />;
-    }
-
-    _renderLegacyVerification() {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-
-        let text;
-        if (MatrixClientPeg.get().getUserId() === this.props.userId) {
-            text = _t("To verify that this session can be trusted, please check that the key you see " +
-                "in User Settings on that device matches the key below:");
-        } else {
-            text = _t("To verify that this session can be trusted, please contact its owner using some other " +
-                "means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings " +
-                "for this session matches the key below:");
-        }
-
-        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
-        const body = (
-            <div>
-                <AccessibleButton
-                    element="span" className="mx_linkButton" onClick={this._onSwitchToSasClick}
-                >
-                    {_t("Use two-way text verification")}
-                </AccessibleButton>
-                <p>
-                    { text }
-                </p>
-                <div className="mx_DeviceVerifyDialog_cryptoSection">
-                    <ul>
-                        <li><label>{ _t("Session name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                        <li><label>{ _t("Session ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
-                        <li><label>{ _t("Session key") }:</label> <span><code><b>{ key }</b></code></span></li>
-                    </ul>
-                </div>
-                <p>
-                    { _t("If it matches, press the verify button below. " +
-                        "If it doesn't, then someone else is intercepting this session " +
-                        "and you probably want to press the blacklist button instead.") }
-                </p>
-            </div>
-        );
-
-        return (
-            <QuestionDialog
-                title={_t("Verify session")}
-                description={body}
-                button={_t("I verify that the keys match")}
-                onFinished={this._onLegacyFinished}
-            />
-        );
-    }
-
-    render() {
-        if (this.state.mode === MODE_LEGACY) {
-            return this._renderLegacyVerification();
-        } else {
-            return <div>
-                {this._renderSasVerification()}
-            </div>;
-        }
-    }
-}
-
-async function ensureDMExistsAndOpen(userId) {
-    const roomId = await ensureDMExists(MatrixClientPeg.get(), userId);
-    // don't use andView and spinner in createRoom, together, they cause this dialog to close and reopen,
-    // we causes us to loose the verifier and restart, and we end up having two verification requests
-    dis.dispatch({
-        action: 'view_room',
-        room_id: roomId,
-        should_peek: false,
-    });
-    return roomId;
-}

src/components/views/dialogs/InviteDialog.js

@@ -31,9 +31,8 @@ import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
-import SettingsStore from '../../../settings/SettingsStore';
 import {Key} from "../../../Keyboard";
 import {Action} from "../../../dispatcher/actions";
 import {RoomListStoreTempProxy} from "../../../stores/room-list/RoomListStoreTempProxy";
@@ -576,7 +575,7 @@ export default class InviteDialog extends React.PureComponent {
 
         const createRoomOptions = {inlineErrors: true};
 
-        if (SettingsStore.getValue("feature_cross_signing")) {
+        if (privateShouldBeEncrypted()) {
             // Check whether all users have uploaded device keys before.
             // If so, enable encryption in the new room.
             const has3PidMembers = targets.some(t => t instanceof ThreepidMember);

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/ShareDialog.tsx

@@ -29,6 +29,7 @@ import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../..
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext, selectText} from "../../../utils/strings";
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 const socials = [
     {
@@ -168,13 +169,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             const events = this.props.target.getLiveTimeline().getEvents();
             if (events.length > 0) {
                 checkbox = <div>
-                    <input type="checkbox"
-                           id="mx_ShareDialog_checkbox"
-                           checked={this.state.linkSpecificEvent}
-                           onChange={this.onLinkSpecificEventCheckboxClick} />
-                    <label htmlFor="mx_ShareDialog_checkbox">
+                    <StyledCheckbox
+                        checked={this.state.linkSpecificEvent}
+                        onChange={this.onLinkSpecificEventCheckboxClick}
+                    >
                         { _t('Link to most recent message') }
-                    </label>
+                    </StyledCheckbox>
                 </div>;
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
@@ -184,13 +184,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
-                <input type="checkbox"
-                       id="mx_ShareDialog_checkbox"
+                <StyledCheckbox
                        checked={this.state.linkSpecificEvent}
-                       onClick={this.onLinkSpecificEventCheckboxClick} />
-                <label htmlFor="mx_ShareDialog_checkbox">
+                       onClick={this.onLinkSpecificEventCheckboxClick}
+                >
                     { _t('Link to selected message') }
-                </label>
+                </StyledCheckbox>
             </div>;
         }
 

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -1,187 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { _t } from '../../../languageHandler';
-import SettingsStore from "../../../settings/SettingsStore";
-import { markAllDevicesKnown } from '../../../cryptodevices';
-
-function UserUnknownDeviceList(props) {
-    const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
-    const {userId, userDevices} = props;
-
-    const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-        <li key={deviceId}><MemberDeviceInfo device={userDevices[deviceId]} userId={userId} showDeviceId={true} /></li>,
-    );
-
-    return (
-        <ul className="mx_UnknownDeviceDialog_deviceList">
-            { deviceListEntries }
-        </ul>
-    );
-}
-
-UserUnknownDeviceList.propTypes = {
-    userId: PropTypes.string.isRequired,
-
-    // map from deviceid -> deviceinfo
-    userDevices: PropTypes.object.isRequired,
-};
-
-
-function UnknownDeviceList(props) {
-    const {devices} = props;
-
-    const userListEntries = Object.keys(devices).map((userId) =>
-        <li key={userId}>
-            <p>{ userId }:</p>
-            <UserUnknownDeviceList userId={userId} userDevices={devices[userId]} />
-        </li>,
-    );
-
-    return <ul>{ userListEntries }</ul>;
-}
-
-UnknownDeviceList.propTypes = {
-    // map from userid -> deviceid -> deviceinfo
-    devices: PropTypes.object.isRequired,
-};
-
-
-export default createReactClass({
-    displayName: 'UnknownDeviceDialog',
-
-    propTypes: {
-        room: PropTypes.object.isRequired,
-
-        // map from userid -> deviceid -> deviceinfo or null if devices are not yet loaded
-        devices: PropTypes.object,
-
-        onFinished: PropTypes.func.isRequired,
-
-        // Label for the button that marks all devices known and tries the send again
-        sendAnywayLabel: PropTypes.string.isRequired,
-
-        // Label for the button that to send the event if you've verified all devices
-        sendLabel: PropTypes.string.isRequired,
-
-        // function to retry the request once all devices are verified / known
-        onSend: PropTypes.func.isRequired,
-    },
-
-    componentDidMount: function() {
-        MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
-    },
-
-    componentWillUnmount: function() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("deviceVerificationChanged", this._onDeviceVerificationChanged);
-        }
-    },
-
-    _onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
-        if (this.props.devices[userId] && this.props.devices[userId][deviceId]) {
-            // XXX: Mutating props :/
-            this.props.devices[userId][deviceId] = deviceInfo;
-            this.forceUpdate();
-        }
-    },
-
-    _onDismissClicked: function() {
-        this.props.onFinished();
-    },
-
-    _onSendAnywayClicked: function() {
-        markAllDevicesKnown(MatrixClientPeg.get(), this.props.devices);
-
-        this.props.onFinished();
-        this.props.onSend();
-    },
-
-    _onSendClicked: function() {
-        this.props.onFinished();
-        this.props.onSend();
-    },
-
-    render: function() {
-        if (this.props.devices === null) {
-            const Spinner = sdk.getComponent("elements.Spinner");
-            return <Spinner />;
-        }
-
-        let warning;
-        if (SettingsStore.getValue("blacklistUnverifiedDevices", this.props.room.roomId)) {
-            warning = (
-                <h4>
-                    { _t("You are currently blacklisting unverified sessions; to send " +
-                    "messages to these sessions you must verify them.") }
-                </h4>
-            );
-        } else {
-            warning = (
-                <div>
-                    <p>
-                        { _t("We recommend you go through the verification process " +
-                            "for each session to confirm they belong to their legitimate owner, " +
-                            "but you can resend the message without verifying if you prefer.") }
-                    </p>
-                </div>
-            );
-        }
-
-        let haveUnknownDevices = false;
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                const device = this.props.devices[userId][deviceId];
-                if (device.isUnverified() && !device.isKnown()) {
-                    haveUnknownDevices = true;
-                }
-            });
-        });
-        const sendButtonOnClick = haveUnknownDevices ? this._onSendAnywayClicked : this._onSendClicked;
-        const sendButtonLabel = haveUnknownDevices ? this.props.sendAnywayLabel : this.props.sendAnywayLabel;
-
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return (
-            <BaseDialog className='mx_UnknownDeviceDialog'
-                onFinished={this.props.onFinished}
-                title={_t('Room contains unknown sessions')}
-                contentId='mx_Dialog_content'
-            >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    <h4>
-                        { _t('"%(RoomName)s" contains sessions that you haven\'t seen before.', {RoomName: this.props.room.name}) }
-                    </h4>
-                    { warning }
-                    { _t("Unknown sessions") }:
-
-                    <UnknownDeviceList devices={this.props.devices} />
-                </div>
-                <DialogButtons primaryButton={sendButtonLabel}
-                    onPrimaryButtonClick={sendButtonOnClick}
-                    onCancel={this._onDismissClicked} />
-            </BaseDialog>
-        );
-        // XXX: do we want to give the user the option to enable blacklistUnverifiedDevices for this room (or globally) at this point?
-        // It feels like confused users will likely turn it on and then disappear in a cloud of UISIs...
-    },
-});

src/components/views/dialogs/UploadConfirmDialog.js

@@ -84,7 +84,7 @@ export default class UploadConfirmDialog extends React.Component {
             preview = <div>
                 <div>
                     <img className="mx_UploadConfirmDialog_fileIcon"
-                        src={require("../../../../res/img/files.png")}
+                        src={require("../../../../res/img/feather-customised/files.svg")}
                     />
                     {this.props.file.name} ({filesize(this.props.file.size)})
                 </div>

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

@@ -20,10 +20,8 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk';
-import Modal from '../../../../Modal';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../CrossSigningManager';
-import SettingsStore from "../../../../settings/SettingsStore";
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
@@ -90,21 +88,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
 
     _onResetRecoveryClick = () => {
         this.props.onFinished(false);
-
-        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,
-            );
-        }
+        accessSecretStorage(() => {}, /* forceReset = */ true);
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -243,8 +227,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             loadError: null,
         });
         try {
-            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
-            const backupKeyStored = await MatrixClientPeg.get().isKeyBackupKeyStored();
+            const cli = MatrixClientPeg.get();
+            const backupInfo = await cli.getKeyBackupVersion();
+            const has4S = await cli.hasSecretStorageKey();
+            const backupKeyStored = has4S && await cli.isKeyBackupKeyStored();
             this.setState({
                 backupInfo,
                 backupKeyStored,

src/components/views/elements/DeviceVerifyButtons.js

@@ -1,127 +0,0 @@
-/*
-Copyright 2016 OpenMarket 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 React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
-
-// XXX: This component is *not* cross-signing aware. Once everything is
-// cross-signing, this component should just go away.
-export default createReactClass({
-    displayName: 'DeviceVerifyButtons',
-
-    propTypes: {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            device: this.props.device,
-        };
-    },
-
-    componentDidMount: function() {
-        const cli = MatrixClientPeg.get();
-        cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-    },
-
-    componentWillUnmount: function() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        }
-    },
-
-    onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
-        if (userId === this.props.userId && deviceId === this.props.device.deviceId) {
-            this.setState({ device: deviceInfo });
-        }
-    },
-
-    onVerifyClick: function() {
-        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-        Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
-            userId: this.props.userId,
-            device: this.state.device,
-        }, null, /* priority = */ false, /* static = */ true);
-    },
-
-    onUnverifyClick: function() {
-        MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.state.device.deviceId, false,
-        );
-    },
-
-    onBlacklistClick: function() {
-        MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, true,
-        );
-    },
-
-    onUnblacklistClick: function() {
-        MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, false,
-        );
-    },
-
-    render: function() {
-        let blacklistButton = null; let verifyButton = null;
-
-        if (this.state.device.isBlocked()) {
-            blacklistButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
-                  onClick={this.onUnblacklistClick}>
-                    { _t("Unblacklist") }
-                </button>
-            );
-        } else {
-            blacklistButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
-                  onClick={this.onBlacklistClick}>
-                    { _t("Blacklist") }
-                </button>
-            );
-        }
-
-        if (this.state.device.isVerified()) {
-            verifyButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
-                  onClick={this.onUnverifyClick}>
-                    { _t("Unverify") }
-                </button>
-            );
-        } else {
-            verifyButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
-                  onClick={this.onVerifyClick}>
-                    { _t("Verify...") }
-                </button>
-            );
-        }
-
-        return (
-            <div className="mx_DeviceVerifyButtons" >
-                { verifyButton }
-                { blacklistButton }
-            </div>
-        );
-    },
-});

src/components/views/elements/Draggable.tsx

@@ -58,18 +58,15 @@ export default class Draggable extends React.Component<IProps, IState> {
 
         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({

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/GroupsButton.js

@@ -1,37 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import * as sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const GroupsButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton className="mx_GroupsButton" action="toggle_my_groups"
-            label={_t("Communities")}
-            size={props.size}
-            tooltip={true}
-        />
-    );
-};
-
-GroupsButton.propTypes = {
-    size: PropTypes.string,
-};
-
-export default GroupsButton;

src/components/views/elements/ImageView.js

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -27,6 +25,7 @@ import AccessibleButton from "./AccessibleButton";
 import Modal from "../../../Modal";
 import * as sdk from "../../../index";
 import {Key} from "../../../Keyboard";
+import FocusLock from "react-focus-lock";
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -50,16 +49,6 @@ export default class ImageView extends React.Component {
         this.state = { rotationDegrees: 0 };
     }
 
-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
-    // dialog base class somehow, surely...
-    componentDidMount() {
-        document.addEventListener("keydown", this.onKeyDown);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("keydown", this.onKeyDown);
-    }
-
     onKeyDown = (ev) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
@@ -195,7 +184,14 @@ export default class ImageView extends React.Component {
         const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
 
         return (
-            <div className="mx_ImageView">
+            <FocusLock
+                returnFocus={true}
+                lockProps={{
+                    onKeyDown: this.onKeyDown,
+                    role: "dialog",
+                }}
+                className="mx_ImageView"
+            >
                 <div className="mx_ImageView_lhs">
                 </div>
                 <div className="mx_ImageView_content">
@@ -231,7 +227,7 @@ export default class ImageView extends React.Component {
                 </div>
                 <div className="mx_ImageView_rhs">
                 </div>
-            </div>
+            </FocusLock>
         );
     }
 }

src/components/views/elements/PersistedElement.js

@@ -156,70 +156,16 @@ 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 - clipRect.top) + 'px',
-            left: (parentRect.left - clipRect.left) + 'px',
+            top: parentRect.top + 'px',
+            left: parentRect.left + 'px',
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
-            overflow: "hidden",
         });
     }
 

src/components/views/elements/ReplyThread.js

@@ -26,6 +26,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
+import {Action} from "../../../dispatcher/actions";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -290,7 +291,7 @@ export default class ReplyThread extends React.Component {
             events,
         }, this.loadNextEvent);
 
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     getReplyThreadColorClass(ev) {

src/components/views/elements/RoomAliasField.js

@@ -45,10 +45,10 @@ 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}
+                    prefixComponent={poundSign}
+                    postfixComponent={domain}
                     ref={ref => this._fieldRef = ref}
                     onValidate={this._onValidate}
                     placeholder={_t("e.g. my-room")}
@@ -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/StyledCheckbox.tsx

@@ -0,0 +1,56 @@
+/*
+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 { randomString } from "matrix-js-sdk/src/randomstring";
+
+const CHECK_BOX_SVG = require("../../../../res/img/feather-customised/check.svg");
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+interface IState {
+}
+
+export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
+    private id: string;
+
+    public static readonly defaultProps = {
+        className: "",
+    }
+
+    constructor(props: IProps) {
+        super(props);
+        // 56^10 so unlikely chance of collision.
+        this.id = "checkbox_" + randomString(10);
+    }
+
+    public render() {
+        const { children, className, ...otherProps } = this.props;
+        return <span className={"mx_Checkbox " + className}>
+            <input id={this.id} {...otherProps} type="checkbox" />
+            <label htmlFor={this.id}>
+                {/* Using the div to center the image */}
+                <div className="mx_Checkbox_background">
+                    <img src={CHECK_BOX_SVG}/>
+                </div>
+                <div>
+                    { this.props.children }
+                </div>
+            </label>
+        </span>
+    }
+}

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/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/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

@@ -27,8 +27,7 @@ const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀
     if (!data) {
         throw new Error(`Emoji ${emoji} doesn't exist in emojibase`);
     }
-    // Prefer our unicode value for quick reactions as we sometimes use variation selectors.
-    return Object.assign({}, data, { unicode: emoji });
+    return data;
 });
 
 class QuickReactions extends React.Component {
@@ -72,7 +71,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

@@ -1,103 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import dis from '../../../dispatcher/dispatcher';
-import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
-import Analytics from '../../../Analytics';
-
-export default class CookieBar extends React.Component {
-    static propTypes = {
-        policyUrl: PropTypes.string,
-    }
-
-    constructor() {
-        super();
-    }
-
-    onUsageDataClicked(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        Analytics.showDetailsModal();
-    }
-
-    onAccept() {
-        dis.dispatch({
-            action: 'accept_cookies',
-        });
-    }
-
-    onReject() {
-        dis.dispatch({
-            action: 'reject_cookies',
-        });
-    }
-
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const toolbarClasses = "mx_MatrixToolbar";
-        return (
-            <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                    { this.props.policyUrl ? _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie " +
-                        "(please see our <PolicyLink>Cookie Policy</PolicyLink>).",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                            // XXX: We need to link to the page that explains our cookies
-                            'PolicyLink': (sub) => <a
-                                    className="mx_MatrixToolbar_link"
-                                    target="_blank"
-                                    href={this.props.policyUrl}
-                                >
-                                    { sub }
-                                </a>
-                            ,
-                        },
-                    ) : _t(
-                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
-                        "This will use a cookie.",
-                        {},
-                        {
-                            'UsageDataLink': (sub) => <a
-                                className="mx_MatrixToolbar_link"
-                                onClick={this.onUsageDataClicked}
-                            >
-                                { sub }
-                            </a>,
-                        },
-                    ) }
-                </div>
-                <AccessibleButton element='button' className="mx_MatrixToolbar_action" onClick={this.onAccept}>
-                    { _t("Yes, I want to help!") }
-                </AccessibleButton>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
-                </AccessibleButton>
-            </div>
-        );
-    }
-}

src/components/views/globals/MatrixToolbar.js

@@ -1,45 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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 React from 'react';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-import Notifier from '../../../Notifier';
-import AccessibleButton from '../../../components/views/elements/AccessibleButton';
-
-export default createReactClass({
-    displayName: 'MatrixToolbar',
-
-    hideToolbar: function() {
-        Notifier.setToolbarHidden(true);
-    },
-
-    onClick: function() {
-        Notifier.setEnabled(true);
-    },
-
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                   { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
-                </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
-            </div>
-        );
-    },
-});

src/components/views/globals/NewVersionBar.js

@@ -1,108 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import PlatformPeg from '../../../PlatformPeg';
-import { _t } from '../../../languageHandler';
-
-/**
- * Check a version string is compatible with the Changelog
- * dialog ([vectorversion]-react-[react-sdk-version]-js-[js-sdk-version])
- */
-function checkVersion(ver) {
-    const parts = ver.split('-');
-    return parts.length == 5 && parts[1] == 'react' && parts[3] == 'js';
-}
-
-export default createReactClass({
-    propTypes: {
-        version: PropTypes.string.isRequired,
-        newVersion: PropTypes.string.isRequired,
-        releaseNotes: PropTypes.string,
-    },
-
-    displayReleaseNotes: function(releaseNotes) {
-        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-        Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
-            title: _t("What's New"),
-            description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>,
-            button: _t("Update"),
-            onFinished: (update) => {
-                if (update && PlatformPeg.get()) {
-                    PlatformPeg.get().installUpdate();
-                }
-            },
-        });
-    },
-
-    displayChangelog: function() {
-        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
-        Modal.createTrackedDialog('Display Changelog', '', ChangelogDialog, {
-            version: this.props.version,
-            newVersion: this.props.newVersion,
-            onFinished: (update) => {
-                if (update && PlatformPeg.get()) {
-                    PlatformPeg.get().installUpdate();
-                }
-            },
-        });
-    },
-
-    onUpdateClicked: function() {
-        PlatformPeg.get().installUpdate();
-    },
-
-    render: function() {
-        let action_button;
-        // If we have release notes to display, we display them. Otherwise,
-        // we display the Changelog Dialog which takes two versions and
-        // automatically tells you what's changed (provided the versions
-        // are in the right format)
-        if (this.props.releaseNotes) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.displayReleaseNotes}>
-                    { _t("What's new?") }
-                </button>
-            );
-        } else if (checkVersion(this.props.version) && checkVersion(this.props.newVersion)) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.displayChangelog}>
-                    { _t("What's new?") }
-                </button>
-            );
-        } else if (PlatformPeg.get()) {
-            action_button = (
-                <button className="mx_MatrixToolbar_action" onClick={this.onUpdateClicked}>
-                    { _t("Update") }
-                </button>
-            );
-        }
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
-                <div className="mx_MatrixToolbar_content">
-                    {_t("A new version of Riot is available.")}
-                </div>
-                {action_button}
-            </div>
-        );
-    },
-});

src/components/views/globals/PasswordNagBar.js

@@ -1,53 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    onUpdateClicked: function() {
-        const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
-        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
-    },
-
-    render: function() {
-        const toolbarClasses = "mx_MatrixToolbar mx_MatrixToolbar_clickable";
-        return (
-            <div className={toolbarClasses} onClick={this.onUpdateClicked}>
-                <img className="mx_MatrixToolbar_warning"
-                    src={require("../../../../res/img/warning.svg")}
-                    width="24"
-                    height="23"
-                    alt=""
-                />
-                <div className="mx_MatrixToolbar_content">
-                    { _t(
-                        "To return to your account in future you need to <u>set a password</u>",
-                        {},
-                        { 'u': (sub) => <u>{ sub }</u> },
-                    ) }
-                </div>
-                <button className="mx_MatrixToolbar_action">
-                    { _t("Set Password") }
-                </button>
-            </div>
-        );
-    },
-});

src/components/views/globals/ServerLimitBar.js

@@ -1,99 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import classNames from 'classnames';
-import { _td } from '../../../languageHandler';
-import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-
-export default createReactClass({
-    propTypes: {
-        // 'hard' if the logged in user has been locked out, 'soft' if they haven't
-        kind: PropTypes.string,
-        adminContact: PropTypes.string,
-        // The type of limit that has been hit.
-        limitType: PropTypes.string.isRequired,
-    },
-
-    getDefaultProps: function() {
-        return {
-            kind: 'hard',
-        };
-    },
-
-    render: function() {
-        const toolbarClasses = {
-            'mx_MatrixToolbar': true,
-        };
-
-        let adminContact;
-        let limitError;
-        if (this.props.kind === 'hard') {
-            toolbarClasses['mx_MatrixToolbar_error'] = true;
-
-            adminContact = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    '': _td("Please <a>contact your service administrator</a> to continue using the service."),
-                },
-            );
-            limitError = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    'monthly_active_user': _td("This homeserver has hit its Monthly Active User limit."),
-                    '': _td("This homeserver has exceeded one of its resource limits."),
-                },
-            );
-        } else {
-            toolbarClasses['mx_MatrixToolbar_info'] = true;
-            adminContact = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    '': _td("Please <a>contact your service administrator</a> to get this limit increased."),
-                },
-            );
-            limitError = messageForResourceLimitError(
-                this.props.limitType,
-                this.props.adminContact,
-                {
-                    'monthly_active_user': _td(
-                        "This homeserver has hit its Monthly Active User limit so " +
-                        "<b>some users will not be able to log in</b>.",
-                    ),
-                    '': _td(
-                        "This homeserver has exceeded one of its resource limits so " +
-                        "<b>some users will not be able to log in</b>.",
-                    ),
-                },
-                {'b': sub => <b>{sub}</b>},
-            );
-        }
-        return (
-            <div className={classNames(toolbarClasses)}>
-                <div className="mx_MatrixToolbar_content">
-                    {limitError}
-                    {' '}
-                    {adminContact}
-                </div>
-            </div>
-        );
-    },
-});

src/components/views/globals/UpdateCheckBar.js

@@ -1,91 +0,0 @@
-/*
-Copyright 2017, 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-import PlatformPeg from '../../../PlatformPeg';
-import AccessibleButton from '../../../components/views/elements/AccessibleButton';
-
-export default createReactClass({
-    propTypes: {
-        status: PropTypes.string.isRequired,
-        // Currently for error detail but will be usable for download progress
-        // once that is a thing that squirrel passes through electron.
-        detail: PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-        return {
-            detail: '',
-        };
-    },
-
-    getStatusText: function() {
-        // we can't import the enum from riot-web as we don't want matrix-react-sdk
-        // to depend on riot-web. so we grab it as a normal object via API instead.
-        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
-        switch (this.props.status) {
-            case updateCheckStatusEnum.ERROR:
-                return _t('Error encountered (%(errorDetail)s).', { errorDetail: this.props.detail });
-            case updateCheckStatusEnum.CHECKING:
-                return _t('Checking for an update...');
-            case updateCheckStatusEnum.NOTAVAILABLE:
-                return _t('No update available.');
-            case updateCheckStatusEnum.DOWNLOADING:
-                return _t('Downloading update...');
-        }
-    },
-
-    hideToolbar: function() {
-        PlatformPeg.get().stopUpdateCheck();
-    },
-
-    render: function() {
-        const message = this.getStatusText();
-        const warning = _t('Warning');
-
-        if (!('getUpdateCheckStatusEnum' in PlatformPeg.get())) {
-            return <div></div>;
-        }
-
-        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
-        const doneStatuses = [
-            updateCheckStatusEnum.ERROR,
-            updateCheckStatusEnum.NOTAVAILABLE,
-        ];
-
-        let image;
-        if (doneStatuses.includes(this.props.status)) {
-            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
-        } else {
-            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
-        }
-
-        return (
-            <div className="mx_MatrixToolbar">
-                {image}
-                <div className="mx_MatrixToolbar_content">
-                    {message}
-                </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
-                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
-                </AccessibleButton>
-            </div>
-        );
-    },
-});

src/components/views/groups/GroupMemberInfo.js

@@ -1,208 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import dis from '../../../dispatcher/dispatcher';
-import Modal from '../../../Modal';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import { GroupMemberType } from '../../../groups';
-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',
-
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    propTypes: {
-        groupId: PropTypes.string,
-        groupMember: GroupMemberType,
-        isInvited: PropTypes.bool,
-    },
-
-    getInitialState: function() {
-        return {
-            removingUser: false,
-            isUserPrivilegedInGroup: null,
-        };
-    },
-
-    componentDidMount: function() {
-        this._unmounted = false;
-        this._initGroupStore(this.props.groupId);
-    },
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(newProps) {
-        if (newProps.groupId !== this.props.groupId) {
-            this._unregisterGroupStore(this.props.groupId);
-            this._initGroupStore(newProps.groupId);
-        }
-    },
-
-    componentWillUnmount() {
-        this._unmounted = true;
-        this._unregisterGroupStore(this.props.groupId);
-    },
-
-    _initGroupStore(groupId) {
-        GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
-    },
-
-    _unregisterGroupStore(groupId) {
-        GroupStore.unregisterListener(this.onGroupStoreUpdated);
-    },
-
-    onGroupStoreUpdated: function() {
-        if (this._unmounted) return;
-        this.setState({
-            isUserInvited: GroupStore.getGroupInvitedMembers(this.props.groupId).some(
-                (m) => m.userId === this.props.groupMember.userId,
-            ),
-            isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
-        });
-    },
-
-    _onKick: function() {
-        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
-        Modal.createDialog(ConfirmUserActionDialog, {
-            matrixClient: this.context,
-            groupMember: this.props.groupMember,
-            action: this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community'),
-            title: this.state.isUserInvited ? _t('Disinvite this user from community?')
-                                            : _t('Remove this user from community?'),
-            danger: true,
-            onFinished: (proceed) => {
-                if (!proceed) return;
-
-                this.setState({removingUser: true});
-                this.context.removeUserFromGroup(
-                    this.props.groupId, this.props.groupMember.userId,
-                ).then(() => {
-                    // return to the user list
-                    dis.dispatch({
-                        action: Action.ViewUser,
-                        member: null,
-                    });
-                }).catch((e) => {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
-                        title: _t('Error'),
-                        description: this.state.isUserInvited ?
-                            _t('Failed to withdraw invitation') :
-                            _t('Failed to remove user from community'),
-                    });
-                }).finally(() => {
-                    this.setState({removingUser: false});
-                });
-            },
-        });
-    },
-
-    _onCancel: function(e) {
-        // Go back to the user list
-        dis.dispatch({
-            action: Action.ViewUser,
-            member: null,
-        });
-    },
-
-    onRoomTileClick(roomId) {
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
-        });
-    },
-
-    render: function() {
-        if (this.state.removingUser) {
-            const Spinner = sdk.getComponent("elements.Spinner");
-            return <div className="mx_MemberInfo">
-                <Spinner />
-            </div>;
-        }
-
-        let adminTools;
-        if (this.state.isUserPrivilegedInGroup) {
-            const kickButton = (
-                <AccessibleButton className="mx_MemberInfo_field"
-                        onClick={this._onKick}>
-                    { this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community') }
-                </AccessibleButton>
-            );
-
-            // No make/revoke admin API yet
-            /*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
-            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
-                {giveOpLabel}
-            </AccessibleButton>;*/
-
-            if (kickButton) {
-                adminTools =
-                    <div className="mx_MemberInfo_adminTools">
-                        <h3>{ _t("Admin Tools") }</h3>
-                        <div className="mx_MemberInfo_buttons">
-                            { kickButton }
-                        </div>
-                    </div>;
-            }
-        }
-
-
-        const avatarUrl = this.props.groupMember.avatarUrl;
-        let avatarElement;
-        if (avatarUrl) {
-            const httpUrl = this.context.mxcUrlToHttp(avatarUrl, 800, 800);
-            avatarElement = (<div className="mx_MemberInfo_avatar">
-                            <img src={httpUrl} />
-                        </div>);
-        }
-
-        const groupMemberName = (
-            this.props.groupMember.displayname || this.props.groupMember.userId
-        );
-
-        return (
-            <div className="mx_MemberInfo" role="tabpanel">
-                <AutoHideScrollbar>
-                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
-                    </AccessibleButton>
-                    { avatarElement }
-                    <h2>{ groupMemberName }</h2>
-
-                    <div className="mx_MemberInfo_profile">
-                        <div className="mx_MemberInfo_profileField">
-                            { this.props.groupMember.userId }
-                        </div>
-                    </div>
-
-                    { adminTools }
-                </AutoHideScrollbar>
-            </div>
-        );
-    },
-});

src/components/views/messages/MessageActionBar.js

@@ -1,7 +1,7 @@
 /*
 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.
@@ -22,11 +22,9 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
-import Modal from '../../../Modal';
 import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
-import SettingsStore from '../../../settings/SettingsStore';
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -41,18 +39,6 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         const tile = getTile && getTile();
         const replyThread = getReplyThread && getReplyThread();
 
-        const onCryptoClick = () => {
-            Modal.createTrackedDialogAsync('Encrypted Event Dialog', '',
-                import('../../../async-components/views/dialogs/EncryptedEventDialog'),
-                {event: mxEvent},
-            );
-        };
-
-        let e2eInfoCallback = null;
-        if (mxEvent.isEncrypted() && !SettingsStore.getValue("feature_cross_signing")) {
-            e2eInfoCallback = onCryptoClick;
-        }
-
         const buttonRect = button.current.getBoundingClientRect();
         contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
             <MessageContextMenu
@@ -60,7 +46,6 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
                 permalinkCreator={permalinkCreator}
                 eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
                 collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
-                e2eInfoCallback={e2eInfoCallback}
                 onFinished={closeMenu}
             />
         </ContextMenu>;

src/components/views/messages/ReactionsRowButton.js

@@ -22,6 +22,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
+import dis from "../../../dispatcher/dispatcher";
 
 export default class ReactionsRowButton extends React.PureComponent {
     static propTypes = {
@@ -60,6 +61,7 @@ export default class ReactionsRowButton extends React.PureComponent {
                     "key": content,
                 },
             });
+            dis.dispatch({action: "message_sent"});
         }
     };
 

src/components/views/right_panel/UserInfo.js

@@ -25,7 +25,7 @@ import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import createRoom from '../../../createRoom';
+import createRoom, {privateShouldBeEncrypted} from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
@@ -64,10 +64,6 @@ const _disambiguateDevices = (devices) => {
 };
 
 export const getE2EStatus = (cli, userId, devices) => {
-    if (!SettingsStore.getValue("feature_cross_signing")) {
-        const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
-        return hasUnverifiedDevice ? "warning" : "verified";
-    }
     const isMe = userId === cli.getUserId();
     const userTrust = cli.checkUserTrust(userId);
     if (!userTrust.isCrossSigningVerified()) {
@@ -112,7 +108,7 @@ async function openDMForUser(matrixClient, userId) {
         dmUserId: userId,
     };
 
-    if (SettingsStore.getValue("feature_cross_signing")) {
+    if (privateShouldBeEncrypted()) {
         // Check whether all users have uploaded device keys before.
         // If so, enable encryption in the new room.
         const usersToDevicesMap = await matrixClient.downloadKeys([userId]);
@@ -167,9 +163,7 @@ function DeviceItem({userId, device}) {
     // cross-signing so that other users can then safely trust you.
     // For other people's devices, the more general verified check that
     // includes locally verified devices can be used.
-    const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
-        deviceTrust.isCrossSigningVerified() :
-        deviceTrust.isVerified();
+    const isVerified = isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
 
     const classes = classNames("mx_UserInfo_device", {
         mx_UserInfo_device_verified: isVerified,
@@ -248,9 +242,7 @@ function DevicesSection({devices, userId, loading}) {
             // cross-signing so that other users can then safely trust you.
             // For other people's devices, the more general verified check that
             // includes locally verified devices can be used.
-            const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
-                deviceTrust.isCrossSigningVerified() :
-                deviceTrust.isVerified();
+            const isVerified = isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
 
             if (isVerified) {
                 expandSectionDevices.push(device);
@@ -1309,8 +1301,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const userTrust = cli.checkUserTrust(member.userId);
     const userVerified = userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
-    const canVerify = SettingsStore.getValue("feature_cross_signing") &&
-                        homeserverSupportsCrossSigning && !userVerified && !isMe;
+    const canVerify = homeserverSupportsCrossSigning && !userVerified && !isMe;
 
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));

src/components/views/room_settings/AliasSettings.js

@@ -220,10 +220,10 @@ export default class AliasSettings extends React.Component {
             }
         }).catch((err) => {
             console.error(err);
-            Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
-                title: _t("Error creating alias"),
+            Modal.createTrackedDialog('Error creating address', '', ErrorDialog, {
+                title: _t("Error creating address"),
                 description: _t(
-                    "There was an error creating that alias. It may not be allowed by the server " +
+                    "There was an error creating that address. It may not be allowed by the server " +
                     "or a temporary failure occurred.",
                 ),
             });
@@ -245,15 +245,15 @@ export default class AliasSettings extends React.Component {
             console.error(err);
             let description;
             if (err.errcode === "M_FORBIDDEN") {
-                description = _t("You don't have permission to delete the alias.");
+                description = _t("You don't have permission to delete the address.");
             } else {
                 description = _t(
-                    "There was an error removing that alias. It may no longer exist or a temporary " +
+                    "There was an error removing that address. It may no longer exist or a temporary " +
                     "error occurred.",
                 );
             }
-            Modal.createTrackedDialog('Error removing alias', '', ErrorDialog, {
-                title: _t("Error removing alias"),
+            Modal.createTrackedDialog('Error removing address', '', ErrorDialog, {
+                title: _t("Error removing address"),
                 description,
             });
         });

src/components/views/rooms/Autocomplete.tsx

@@ -15,8 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, {createRef} from 'react';
 import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import {ICompletion, ISelectionRange, IProviderCompletions} from '../../../autocomplete/Autocompleter';
@@ -54,7 +53,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     autocompleter: Autocompleter;
     queryRequested: string;
     debounceCompletionsRequest: NodeJS.Timeout;
-    containerRef: React.RefObject<HTMLDivElement>;
+    private containerRef = createRef<HTMLDivElement>();
 
     constructor(props) {
         super(props);
@@ -78,8 +77,6 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
 
             forceComplete: false,
         };
-
-        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
@@ -256,14 +253,15 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
     componentDidUpdate(prevProps: IProps) {
         this.applyNewProps(prevProps.query, prevProps.room);
         // this is the selected completion, so scroll it into view if needed
-        const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
-        if (selectedCompletion && this.containerRef.current) {
-            const domNode = ReactDOM.findDOMNode(selectedCompletion);
-            const offsetTop = domNode && (domNode as HTMLElement).offsetTop;
-            if (offsetTop > this.containerRef.current.scrollTop + this.containerRef.current.offsetHeight ||
-                offsetTop < this.containerRef.current.scrollTop) {
-                this.containerRef.current.scrollTop = offsetTop - this.containerRef.current.offsetTop;
-            }
+        const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`] as HTMLElement;
+
+        if (selectedCompletion) {
+            selectedCompletion.scrollIntoView({
+                behavior: "auto",
+                block: "nearest",
+            });
+        } else if (this.containerRef.current) {
+            this.containerRef.current.scrollTo({ top: 0 });
         }
     }
 

src/components/views/rooms/AuxPanel.js

@@ -141,15 +141,6 @@ export default createReactClass({
         return counters;
     },
 
-    _onScroll: function(rect) {
-        if (this.props.onResize) {
-            this.props.onResize();
-        }
-
-        /* Force refresh of PersistedElements which may be partially hidden */
-        window.dispatchEvent(new Event('resize'));
-    },
-
     render: function() {
         const CallView = sdk.getComponent("voip.CallView");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -274,7 +265,7 @@ export default createReactClass({
         }
 
         return (
-            <AutoHideScrollbar className={classes} style={style} onScroll={this._onScroll}>
+            <AutoHideScrollbar className={classes} style={style} >
                 { stateViews }
                 { appsDrawer }
                 { fileDropTarget }

src/components/views/rooms/BasicMessageComposer.js

@@ -74,6 +74,7 @@ function selectionEquals(a: Selection, b: Selection): boolean {
 export default class BasicMessageEditor extends React.Component {
     static propTypes = {
         onChange: PropTypes.func,
+        onPaste: PropTypes.func, // returns true if handled and should skip internal onPaste handler
         model: PropTypes.instanceOf(EditorModel).isRequired,
         room: PropTypes.instanceOf(Room).isRequired,
         placeholder: PropTypes.string,
@@ -254,6 +255,12 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     _onPaste = (event) => {
+        event.preventDefault(); // we always handle the paste ourselves
+        if (this.props.onPaste && this.props.onPaste(event, this.props.model)) {
+            // to prevent double handling, allow props.onPaste to skip internal onPaste
+            return true;
+        }
+
         const {model} = this.props;
         const {partCreator} = model;
         const partsText = event.clipboardData.getData("application/x-riot-composer");
@@ -269,7 +276,6 @@ export default class BasicMessageEditor extends React.Component {
         this._modifiedFlag = true;
         const range = getRangeForSelection(this._editorRef, model, document.getSelection());
         replaceRangeAndMoveCaret(range, parts);
-        event.preventDefault();
     }
 
     _onInput = (event) => {
@@ -353,6 +359,8 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     _onSelectionChange = () => {
+        const {isEmpty} = this.props.model;
+
         this._refreshLastCaretIfNeeded();
         const selection = document.getSelection();
         if (this._hasTextSelected && selection.isCollapsed) {
@@ -360,7 +368,7 @@ export default class BasicMessageEditor extends React.Component {
             if (this._formatBarRef) {
                 this._formatBarRef.hide();
             }
-        } else if (!selection.isCollapsed) {
+        } else if (!selection.isCollapsed && !isEmpty) {
             this._hasTextSelected = true;
             if (this._formatBarRef) {
                 const selectionRect = selection.getRangeAt(0).getBoundingClientRect();
@@ -503,10 +511,6 @@ export default class BasicMessageEditor extends React.Component {
         }
     }
 
-    getEditableRootNode() {
-        return this._editorRef;
-    }
-
     isModified() {
         return this._modifiedFlag;
     }

src/components/views/rooms/E2EIcon.js

@@ -20,7 +20,6 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 
 import {_t, _td} from '../../../languageHandler';
-import {useSettingValue} from "../../../hooks/useSettings";
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
 
@@ -42,15 +41,6 @@ const crossSigningRoomTitles = {
     [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
 };
 
-const legacyUserTitles = {
-    [E2E_STATE.WARNING]: _td("Some sessions for this user are not trusted"),
-    [E2E_STATE.VERIFIED]: _td("All sessions for this user are trusted"),
-};
-const legacyRoomTitles = {
-    [E2E_STATE.WARNING]: _td("Some sessions in this encrypted room are not trusted"),
-    [E2E_STATE.VERIFIED]: _td("All sessions in this encrypted room are trusted"),
-};
-
 const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
     const [hover, setHover] = useState(false);
 
@@ -62,15 +52,10 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
     }, className);
 
     let e2eTitle;
-    const crossSigning = useSettingValue("feature_cross_signing");
-    if (crossSigning && isUser) {
+    if (isUser) {
         e2eTitle = crossSigningUserTitles[status];
-    } else if (crossSigning && !isUser) {
+    } else {
         e2eTitle = crossSigningRoomTitles[status];
-    } else if (!crossSigning && isUser) {
-        e2eTitle = legacyUserTitles[status];
-    } else if (!crossSigning && !isUser) {
-        e2eTitle = legacyRoomTitles[status];
     }
 
     let style;

src/components/views/rooms/EditMessageComposer.js

@@ -31,6 +31,7 @@ import {EventStatus} from 'matrix-js-sdk';
 import BasicMessageComposer from "./BasicMessageComposer";
 import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 function _isReply(mxEvent) {
     const relatesTo = mxEvent.getContent()["m.relates_to"];
@@ -157,7 +158,7 @@ export default class EditMessageComposer extends React.Component {
                 dis.dispatch({action: 'edit_event', event: nextEvent});
             } else {
                 dis.dispatch({action: 'edit_event', event: null});
-                dis.dispatch({action: 'focus_composer'});
+                dis.fire(Action.FocusComposer);
             }
             event.preventDefault();
         }
@@ -165,7 +166,7 @@ export default class EditMessageComposer extends React.Component {
 
     _cancelEdit = () => {
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     }
 
     _isContentModified(newContent) {
@@ -190,11 +191,12 @@ export default class EditMessageComposer extends React.Component {
             const roomId = editedEvent.getRoomId();
             this._cancelPreviousPendingEdit();
             this.context.sendMessage(roomId, editContent);
+            dis.dispatch({action: "message_sent"});
         }
 
         // close the event editing and focus composer
         dis.dispatch({action: "edit_event", event: null});
-        dis.dispatch({action: 'focus_composer'});
+        dis.fire(Action.FocusComposer);
     };
 
     _cancelPreviousPendingEdit() {

src/components/views/rooms/EventTile.js

@@ -104,7 +104,7 @@ export function getHandlerTile(ev) {
     // fall back to showing hidden events, if we're viewing hidden events
     // XXX: This is extremely a hack. Possibly these components should have an interface for
     // declining to render?
-    if (type === "m.key.verification.cancel" && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+    if (type === "m.key.verification.cancel" || type === "m.key.verification.done") {
         const MKeyVerificationConclusion = sdk.getComponent("messages.MKeyVerificationConclusion");
         if (!MKeyVerificationConclusion.prototype._shouldRender.call(null, ev, ev.request)) {
             return;
@@ -325,15 +325,6 @@ export default createReactClass({
             return;
         }
 
-        // If cross-signing is off, the old behaviour is to scream at the user
-        // as if they've done something wrong, which they haven't
-        if (!SettingsStore.getValue("feature_cross_signing")) {
-            this.setState({
-                verified: E2E_STATE.WARNING,
-            }, this.props.onHeightChanged);
-            return;
-        }
-
         if (!this.context.checkUserTrust(mxEvent.getSender()).isCrossSigningVerified()) {
             this.setState({
                 verified: E2E_STATE.NORMAL,
@@ -403,7 +394,7 @@ export default createReactClass({
     },
 
     shouldHighlight: function() {
-        const actions = this.context.getPushActionsForEvent(this.props.mxEvent);
+        const actions = this.context.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
 
         // don't show self-highlights from another of our clients
@@ -802,6 +793,8 @@ export default createReactClass({
 
         const groupTimestamp = !this.props.useIRCLayout ? linkedTimestamp : null;
         const ircTimestamp = this.props.useIRCLayout ? linkedTimestamp : null;
+        const groupPadlock = !this.props.useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
+        const ircPadlock = this.props.useIRCLayout && !isBubbleMessage && this._renderE2EPadlock();
 
         switch (this.props.tileShape) {
             case 'notif': {
@@ -873,9 +866,10 @@ export default createReactClass({
                         { ircTimestamp }
                         { avatar }
                         { sender }
+                        { ircPadlock }
                         <div className="mx_EventTile_reply">
                             { groupTimestamp }
-                            { !isBubbleMessage && this._renderE2EPadlock() }
+                            { groupPadlock }
                             { thread }
                             <EventTileType ref={this._tile}
                                            mxEvent={this.props.mxEvent}
@@ -904,9 +898,10 @@ export default createReactClass({
                             { readAvatars }
                         </div>
                         { sender }
+                        { ircPadlock }
                         <div className="mx_EventTile_line">
                             { groupTimestamp }
-                            { !isBubbleMessage && this._renderE2EPadlock() }
+                            { groupPadlock }
                             { thread }
                             <EventTileType ref={this._tile}
                                            mxEvent={this.props.mxEvent}

src/components/views/rooms/MemberDeviceInfo.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2016 OpenMarket 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 React from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import classNames from 'classnames';
-
-export default class MemberDeviceInfo extends React.Component {
-    render() {
-        const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-        // XXX: These checks are not cross-signing aware but this component is only used
-        // from the old, pre-cross-signing memberinfopanel
-        const iconClasses = classNames({
-            mx_MemberDeviceInfo_icon: true,
-            mx_MemberDeviceInfo_icon_blacklisted: this.props.device.isBlocked(),
-            mx_MemberDeviceInfo_icon_verified: this.props.device.isVerified(),
-            mx_MemberDeviceInfo_icon_unverified: this.props.device.isUnverified(),
-        });
-        const indicator = (<div className={iconClasses} />);
-        const deviceName = (this.props.device.ambiguous || this.props.showDeviceId) ?
-            (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" :
-            this.props.device.getDisplayName();
-
-        // add the deviceId as a titletext to help with debugging
-        return (
-            <div className="mx_MemberDeviceInfo"
-                    title={_t("device id: ") + this.props.device.deviceId} >
-                { indicator }
-                <div className="mx_MemberDeviceInfo_deviceInfo">
-                    <div className="mx_MemberDeviceInfo_deviceId">
-                        { deviceName }
-                    </div>
-                </div>
-                <DeviceVerifyButtons userId={this.props.userId} device={this.props.device} />
-            </div>
-        );
-    }
-}
-
-MemberDeviceInfo.displayName = 'MemberDeviceInfo';
-MemberDeviceInfo.propTypes = {
-    userId: PropTypes.string.isRequired,
-    device: PropTypes.object.isRequired,
-};

src/components/views/rooms/MemberTile.js

@@ -57,21 +57,19 @@ export default createReactClass({
             }
         }
 
-        if (SettingsStore.getValue("feature_cross_signing")) {
-            const { roomId } = this.props.member;
-            if (roomId) {
-                const isRoomEncrypted = cli.isRoomEncrypted(roomId);
-                this.setState({
-                    isRoomEncrypted,
-                });
-                if (isRoomEncrypted) {
-                    cli.on("userTrustStatusChanged", this.onUserTrustStatusChanged);
-                    cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-                    this.updateE2EStatus();
-                } else {
-                    // Listen for room to become encrypted
-                    cli.on("RoomState.events", this.onRoomStateEvents);
-                }
+        const { roomId } = this.props.member;
+        if (roomId) {
+            const isRoomEncrypted = cli.isRoomEncrypted(roomId);
+            this.setState({
+                isRoomEncrypted,
+            });
+            if (isRoomEncrypted) {
+                cli.on("userTrustStatusChanged", this.onUserTrustStatusChanged);
+                cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+                this.updateE2EStatus();
+            } else {
+                // Listen for room to become encrypted
+                cli.on("RoomState.events", this.onRoomStateEvents);
             }
         }
     },

src/components/views/rooms/MessageComposer.js

@@ -27,6 +27,7 @@ import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
 import SettingsStore from "../../../settings/SettingsStore";
+import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from "../../structures/ContextMenu";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -103,6 +104,32 @@ HangupButton.propTypes = {
     roomId: PropTypes.string.isRequired,
 };
 
+const EmojiButton = ({addEmoji}) => {
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu;
+    if (menuDisplayed) {
+        const buttonRect = button.current.getBoundingClientRect();
+        const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
+            <EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
+        </ContextMenu>;
+    }
+
+    return <React.Fragment>
+        <ContextMenuButton className="mx_MessageComposer_button mx_MessageComposer_emoji"
+                           onClick={openMenu}
+                           isExpanded={menuDisplayed}
+                           label={_t('Emoji picker')}
+                           inputRef={button}
+        >
+
+        </ContextMenuButton>
+
+        { contextMenu }
+    </React.Fragment>;
+};
+
 class UploadButton extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -281,37 +308,28 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (SettingsStore.getValue("feature_cross_signing")) {
-            if (this.state.isQuoting) {
-                if (this.props.e2eStatus) {
-                    return _t('Send an encrypted reply…');
-                } else {
-                    return _t('Send a reply…');
-                }
+        if (this.state.isQuoting) {
+            if (this.props.e2eStatus) {
+                return _t('Send an encrypted reply…');
             } else {
-                if (this.props.e2eStatus) {
-                    return _t('Send an encrypted message…');
-                } else {
-                    return _t('Send a message…');
-                }
+                return _t('Send a reply…');
             }
         } else {
-            if (this.state.isQuoting) {
-                if (this.props.e2eStatus) {
-                    return _t('Send an encrypted reply…');
-                } else {
-                    return _t('Send a reply (unencrypted)…');
-                }
+            if (this.props.e2eStatus) {
+                return _t('Send an encrypted message…');
             } else {
-                if (this.props.e2eStatus) {
-                    return _t('Send an encrypted message…');
-                } else {
-                    return _t('Send a message (unencrypted)…');
-                }
+                return _t('Send a message…');
             }
         }
     }
 
+    addEmoji(emoji) {
+        dis.dispatch({
+            action: "insert_emoji",
+            emoji,
+        });
+    }
+
     render() {
         const controls = [
             this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -335,8 +353,9 @@ export default class MessageComposer extends React.Component {
                     room={this.props.room}
                     placeholder={this.renderPlaceholderText()}
                     permalinkCreator={this.props.permalinkCreator} />,
-                <Stickerpicker key='stickerpicker_controls_button' room={this.props.room} />,
                 <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+                <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
+                <Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />,
             );
 
             if (this.state.showCallButtons) {

src/components/views/rooms/RoomHeader.js

@@ -168,10 +168,8 @@ export default createReactClass({
         const joinRule = joinRules && joinRules.getContent().join_rule;
         let privateIcon;
         // Don't show an invite-only icon for DMs. Users know they're invite-only.
-        if (!dmUserId && SettingsStore.getValue("feature_cross_signing")) {
-            if (joinRule == "invite") {
-                privateIcon = <InviteOnlyIcon />;
-            }
+        if (!dmUserId && joinRule === "invite") {
+            privateIcon = <InviteOnlyIcon />;
         }
 
         if (this.props.onCancelClick) {

src/components/views/rooms/RoomList2.tsx

@@ -18,16 +18,17 @@ limitations under the License.
 
 import * as React from "react";
 import { _t, _td } from "../../../languageHandler";
-import { Layout } from '../../../resizer/distributors/roomsublist2';
 import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
 import { ResizeNotifier } from "../../../utils/ResizeNotifier";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore2";
+import RoomListStore, { LISTS_UPDATE_EVENT, RoomListStore2 } from "../../../stores/room-list/RoomListStore2";
 import { ITagMap } from "../../../stores/room-list/algorithms/models";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import { Dispatcher } from "flux";
 import dis from "../../../dispatcher/dispatcher";
 import RoomSublist2 from "./RoomSublist2";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import { NameFilterCondition } from "../../../stores/room-list/filters/NameFilterCondition";
+import { ListLayout } from "../../../stores/room-list/ListLayout";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -48,6 +49,7 @@ interface IProps {
 
 interface IState {
     sublists: ITagMap;
+    layouts: Map<TagID, ListLayout>;
 }
 
 const TAG_ORDER: TagID[] = [
@@ -125,64 +127,43 @@ const TAG_AESTHETICS: {
 };
 
 export default class RoomList2 extends React.Component<IProps, IState> {
-    private sublistRefs: { [tagId: string]: React.RefObject<RoomSublist2> } = {};
-    private sublistSizes: { [tagId: string]: number } = {};
-    private sublistCollapseStates: { [tagId: string]: boolean } = {};
-    private unfilteredLayout: Layout;
-    private filteredLayout: Layout;
+    private searchFilter: NameFilterCondition = new NameFilterCondition();
 
     constructor(props: IProps) {
         super(props);
 
-        this.state = {sublists: {}};
-        this.loadSublistSizes();
-        this.prepareLayouts();
+        this.state = {
+            sublists: {},
+            layouts: new Map<TagID, ListLayout>(),
+        };
+    }
+
+    public componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (prevProps.searchFilter !== this.props.searchFilter) {
+            const hadSearch = !!this.searchFilter.search.trim();
+            const haveSearch = !!this.props.searchFilter.trim();
+            this.searchFilter.search = this.props.searchFilter;
+            if (!hadSearch && haveSearch) {
+                // started a new filter - add the condition
+                RoomListStore.instance.addFilter(this.searchFilter);
+            } else if (hadSearch && !haveSearch) {
+                // cleared a filter - remove the condition
+                RoomListStore.instance.removeFilter(this.searchFilter);
+            } // else the filter hasn't changed enough for us to care here
+        }
     }
 
     public componentDidMount(): void {
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store) => {
-            console.log("new lists", store.orderedLists);
-            this.setState({sublists: store.orderedLists});
-        });
-    }
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, (store: RoomListStore2) => {
+            const newLists = store.orderedLists;
+            console.log("new lists", newLists);
 
-    private loadSublistSizes() {
-        const sizesJson = window.localStorage.getItem("mx_roomlist_sizes");
-        if (sizesJson) this.sublistSizes = JSON.parse(sizesJson);
-
-        const collapsedJson = window.localStorage.getItem("mx_roomlist_collapsed");
-        if (collapsedJson) this.sublistCollapseStates = JSON.parse(collapsedJson);
-    }
-
-    private saveSublistSizes() {
-        window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.sublistSizes));
-        window.localStorage.setItem("mx_roomlist_collapsed", JSON.stringify(this.sublistCollapseStates));
-    }
-
-    private prepareLayouts() {
-        // TODO: Change layout engine for FTUE support
-        this.unfilteredLayout = new Layout((tagId: string, height: number) => {
-            const sublist = this.sublistRefs[tagId];
-            if (sublist) sublist.current.setHeight(height);
-
-            // TODO: Check overflow (see old impl)
-
-            // Don't store a height for collapsed sublists
-            if (!this.sublistCollapseStates[tagId]) {
-                this.sublistSizes[tagId] = height;
-                this.saveSublistSizes();
+            const layoutMap = new Map<TagID, ListLayout>();
+            for (const tagId of Object.keys(newLists)) {
+                layoutMap.set(tagId, new ListLayout(tagId));
             }
-        }, this.sublistSizes, this.sublistCollapseStates, {
-            allowWhitespace: false,
-            handleHeight: 1,
-        });
 
-        this.filteredLayout = new Layout((tagId: string, height: number) => {
-            const sublist = this.sublistRefs[tagId];
-            if (sublist) sublist.current.setHeight(height);
-        }, null, null, {
-            allowWhitespace: false,
-            handleHeight: 0,
+            this.setState({sublists: newLists, layouts: layoutMap});
         });
     }
 
@@ -208,16 +189,19 @@ export default class RoomList2 extends React.Component<IProps, IState> {
             if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
             const onAddRoomFn = aesthetics.onAddRoom ? () => aesthetics.onAddRoom(dis) : null;
-            components.push(<RoomSublist2
-                key={`sublist-${orderedTagId}`}
-                forRooms={true}
-                rooms={orderedRooms}
-                startAsHidden={aesthetics.defaultHidden}
-                label={_t(aesthetics.sectionLabel)}
-                onAddRoom={onAddRoomFn}
-                addRoomLabel={aesthetics.addRoomLabel}
-                isInvite={aesthetics.isInvite}
-            />);
+            components.push(
+                <RoomSublist2
+                    key={`sublist-${orderedTagId}`}
+                    forRooms={true}
+                    rooms={orderedRooms}
+                    startAsHidden={aesthetics.defaultHidden}
+                    label={_t(aesthetics.sectionLabel)}
+                    onAddRoom={onAddRoomFn}
+                    addRoomLabel={aesthetics.addRoomLabel}
+                    isInvite={aesthetics.isInvite}
+                    layout={this.state.layouts.get(orderedTagId)}
+                />
+            );
         }
 
         return components;
@@ -232,7 +216,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
                         onFocus={this.props.onFocus}
                         onBlur={this.props.onBlur}
                         onKeyDown={onKeyDownHandler}
-                        className="mx_RoomList"
+                        className="mx_RoomList mx_RoomList2"
                         role="tree"
                         aria-label={_t("Rooms")}
                         // Firefox sometimes makes this element focusable due to

src/components/views/rooms/RoomSublist2.tsx

@@ -20,7 +20,6 @@ import * as React from "react";
 import { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
-import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
 import * as RoomNotifs from '../../../RoomNotifs';
 import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { _t } from "../../../languageHandler";
@@ -28,6 +27,8 @@ import AccessibleButton from "../../views/elements/AccessibleButton";
 import AccessibleTooltipButton from "../../views/elements/AccessibleTooltipButton";
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import RoomTile2 from "./RoomTile2";
+import { ResizableBox, ResizeCallbackData } from "react-resizable";
+import { ListLayout } from "../../../stores/room-list/ListLayout";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -45,9 +46,9 @@ interface IProps {
     onAddRoom?: () => void;
     addRoomLabel: string;
     isInvite: boolean;
+    layout: ListLayout;
 
     // TODO: Collapsed state
-    // TODO: Height
     // TODO: Group invites
     // TODO: Calls
     // TODO: forceExpand?
@@ -61,10 +62,6 @@ interface IState {
 export default class RoomSublist2 extends React.Component<IProps, IState> {
     private headerButton = createRef();
 
-    public setHeight(size: number) {
-        // TODO: Do a thing (maybe - height changes are different in FTUE)
-    }
-
     private hasTiles(): boolean {
         return this.numTiles > 0;
     }
@@ -79,6 +76,18 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         if (this.props.onAddRoom) this.props.onAddRoom();
     };
 
+    private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
+        const direction = e.movementY < 0 ? -1 : +1;
+        const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
+        this.props.layout.visibleTiles += tileDiff;
+        this.forceUpdate(); // because the layout doesn't trigger a re-render
+    };
+
+    private onShowAllClick = () => {
+        this.props.layout.visibleTiles = this.numTiles;
+        this.forceUpdate(); // because the layout doesn't trigger a re-render
+    };
+
     private renderTiles(): React.ReactElement[] {
         const tiles: React.ReactElement[] = [];
 
@@ -204,10 +213,57 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         if (tiles.length > 0) {
             // TODO: Lazy list rendering
             // TODO: Whatever scrolling magic needs to happen here
+            const layout = this.props.layout; // to shorten calls
+            const minTilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.minVisibleTiles));
+            const maxTilesPx = layout.tilesToPixels(tiles.length);
+            const tilesPx = layout.tilesToPixels(Math.min(tiles.length, layout.visibleTiles));
+            let handles = ['s'];
+            if (layout.visibleTiles >= tiles.length && tiles.length <= layout.minVisibleTiles) {
+                handles = []; // no handles, we're at a minimum
+            }
+
+            // TODO: This might need adjustment, however for now it is fine as a round.
+            const nVisible = Math.round(layout.visibleTiles);
+            const visibleTiles = tiles.slice(0, nVisible);
+
+            // If we're hiding rooms, show a 'show more' button to the user. This button
+            // replaces the last visible tile, so will always show 2+ rooms. We do this
+            // because if it said "show 1 more room" we had might as well show that room
+            // instead. We also replace the last item so we don't have to adjust our math
+            // on pixel heights, etc. It's much easier to pretend the button is a tile.
+            if (tiles.length > nVisible) {
+                // we have a cutoff condition - add the button to show all
+
+                // we +1 to account for the room we're about to hide with our 'show more' button
+                // this results in the button always being 1+, and not needing an i18n `count`.
+                const numMissing = (tiles.length - visibleTiles.length) + 1;
+
+                // TODO: CSS TBD
+                // TODO: Make this an actual tile
+                // TODO: This is likely to pop out of the list, consider that.
+                visibleTiles.splice(visibleTiles.length - 1, 1, (
+                    <div
+                        onClick={this.onShowAllClick}
+                        style={{height: '34px', lineHeight: '34px', cursor: 'pointer'}}
+                        key='showall'
+                    >
+                        {_t("Show %(n)s more", {n: numMissing})}
+                    </div>
+                ));
+            }
             content = (
-                <IndicatorScrollbar className='mx_RoomSubList_scroll'>
-                    {tiles}
-                </IndicatorScrollbar>
+                <ResizableBox
+                    width={-1}
+                    height={tilesPx}
+                    axis="y"
+                    minConstraints={[-1, minTilesPx]}
+                    maxConstraints={[-1, maxTilesPx]}
+                    resizeHandles={handles}
+                    onResize={this.onResize}
+                    className="mx_RoomSublist2_resizeBox"
+                >
+                    {visibleTiles}
+                </ResizableBox>
             )
         }
 

src/components/views/rooms/RoomTile.js

@@ -155,9 +155,6 @@ export default createReactClass({
         if (!cli.isRoomEncrypted(this.props.room.roomId)) {
             return;
         }
-        if (!SettingsStore.getValue("feature_cross_signing")) {
-            return;
-        }
 
         /* At this point, the user has encryption on and cross-signing on */
         this.setState({
@@ -515,10 +512,8 @@ export default createReactClass({
         }
 
         let privateIcon = null;
-        if (SettingsStore.getValue("feature_cross_signing")) {
-            if (this.state.joinRule == "invite" && !dmUserId) {
-                privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
-            }
+        if (this.state.joinRule === "invite" && !dmUserId) {
+            privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
         }
 
         let e2eIcon = null;

src/components/views/rooms/RoomTile2.tsx

@@ -30,6 +30,8 @@ import * as RoomNotifs from '../../../RoomNotifs';
 import { EffectiveMembership, getEffectiveMembership } from "../../../stores/room-list/membership";
 import * as Unread from '../../../Unread';
 import * as FormattingUtils from "../../../utils/FormattingUtils";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -86,10 +88,22 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             hover: false,
             notificationState: this.getNotificationState(),
         };
+
+        this.props.room.on("Room.receipt", this.handleRoomEventUpdate);
+        this.props.room.on("Room.timeline", this.handleRoomEventUpdate);
+        this.props.room.on("Room.redaction", this.handleRoomEventUpdate);
+        MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
     }
 
     public componentWillUnmount() {
-        // TODO: Listen for changes to the badge count and update as needed
+        if (this.props.room) {
+            this.props.room.removeListener("Room.receipt", this.handleRoomEventUpdate);
+            this.props.room.removeListener("Room.timeline", this.handleRoomEventUpdate);
+            this.props.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
+        }
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
+        }
     }
 
     // XXX: This is a bit of an awful-looking hack. We should probably be using state for
@@ -99,7 +113,15 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         return getEffectiveMembership(this.props.room.getMyMembership()) === EffectiveMembership.Invite;
     }
 
-    // TODO: Make use of this function when the notification state needs updating.
+    private handleRoomEventUpdate = (event: MatrixEvent) => {
+        const roomId = event.getRoomId();
+
+        // Sanity check: should never happen
+        if (roomId !== this.props.room.roomId) return;
+
+        this.updateNotificationState();
+    };
+
     private updateNotificationState() {
         this.setState({notificationState: this.getNotificationState()});
     }
@@ -214,7 +236,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         let tooltip = null;
         if (false) { // isCollapsed
             if (this.state.hover) {
-                tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto"/>
+                tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} />
             }
         }
 

src/components/views/rooms/SendMessageComposer.js

@@ -44,6 +44,7 @@ import {Key} from "../../../Keyboard";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import RateLimitedFunc from '../../../ratelimitedfunc';
+import {Action} from "../../../dispatcher/actions";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -312,6 +313,7 @@ export default class SendMessageComposer extends React.Component {
                     event: null,
                 });
             }
+            dis.dispatch({action: "message_sent"});
         }
 
         this.sendHistoryManager.save(this.model);
@@ -322,13 +324,8 @@ export default class SendMessageComposer extends React.Component {
         this._clearStoredEditorState();
     }
 
-    componentDidMount() {
-        this._editorRef.getEditableRootNode().addEventListener("paste", this._onPaste, true);
-    }
-
     componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
-        this._editorRef.getEditableRootNode().removeEventListener("paste", this._onPaste, true);
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
@@ -368,7 +365,7 @@ export default class SendMessageComposer extends React.Component {
     onAction = (payload) => {
         switch (payload.action) {
             case 'reply_to_event':
-            case 'focus_composer':
+            case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
             case 'insert_mention':
@@ -377,6 +374,9 @@ export default class SendMessageComposer extends React.Component {
             case 'quote':
                 this._insertQuotedMessage(payload.event);
                 break;
+            case 'insert_emoji':
+                this._insertEmoji(payload.emoji);
+                break;
         }
     };
 
@@ -414,6 +414,17 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef && this._editorRef.focus();
     }
 
+    _insertEmoji = (emoji) => {
+        const {model} = this;
+        const {partCreator} = model;
+        const caret = this._editorRef.getCaret();
+        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+        model.transform(() => {
+            const addedLen = model.insert([partCreator.plain(emoji)], position);
+            return model.positionForOffset(caret.offset + addedLen, true);
+        });
+    };
+
     _onPaste = (event) => {
         const {clipboardData} = event;
         if (clipboardData.files.length) {
@@ -424,6 +435,7 @@ export default class SendMessageComposer extends React.Component {
             ContentMessages.sharedInstance().sendContentListToRoom(
                 Array.from(clipboardData.files), this.props.room.roomId, this.context,
             );
+            return true; // to skip internal onPaste handler
         }
     }
 
@@ -440,6 +452,7 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onChange={this._saveStoredEditorState}
+                    onPaste={this._onPaste}
                 />
             </div>
         );

src/components/views/settings/ChangePassword.js

@@ -141,6 +141,12 @@ export default createReactClass({
     _changePassword: function(cli, oldPassword, newPassword) {
         const authDict = {
             type: 'm.login.password',
+            identifier: {
+                type: 'm.id.user',
+                user: cli.credentials.userId,
+            },
+            // TODO: Remove `user` once servers support proper UIA
+            // See https://github.com/matrix-org/synapse/issues/5665
             user: cli.credentials.userId,
             password: oldPassword,
         };

src/components/views/settings/CrossSigningPanel.js

@@ -194,6 +194,8 @@ export default class CrossSigningPanel extends React.PureComponent {
                 </div>
             );
         }
+
+        // TODO: determine how better to expose this to users in addition to prompts at login/toast
         let bootstrapButton;
         if (
             (!enabledForAccount || !crossSigningPublicKeysOnDevice) &&

src/components/views/settings/DevicesPanelEntry.js

@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {formatDate} from '../../../DateUtils';
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 export default class DevicesPanelEntry extends React.Component {
     constructor(props) {
@@ -81,7 +82,7 @@ export default class DevicesPanelEntry extends React.Component {
                     { lastSeen }
                 </div>
                 <div className="mx_DevicesPanel_deviceButtons">
-                    <input type="checkbox" onChange={this.onDeviceToggled} checked={this.props.selected} />
+                    <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
                 </div>
             </div>
         );

src/components/views/settings/EnableNotificationsButton.js

@@ -1,75 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket 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 React from "react";
-import createReactClass from 'create-react-class';
-import Notifier from "../../../Notifier";
-import dis from "../../../dispatcher/dispatcher";
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'EnableNotificationsButton',
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        if (payload.action !== "notifier_enabled") {
-            return;
-        }
-        this.forceUpdate();
-    },
-
-    enabled: function() {
-        return Notifier.isEnabled();
-    },
-
-    onClick: function() {
-        const self = this;
-        if (!Notifier.supportsDesktopNotifications()) {
-            return;
-        }
-        if (!Notifier.isEnabled()) {
-            Notifier.setEnabled(true, function() {
-                self.forceUpdate();
-            });
-        } else {
-            Notifier.setEnabled(false);
-        }
-        this.forceUpdate();
-    },
-
-    render: function() {
-        if (this.enabled()) {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    { _t("Disable Notifications") }
-                </button>
-            );
-        } else {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    { _t("Enable Notifications") }
-                </button>
-            );
-        }
-    },
-});

src/components/views/settings/KeyBackupPanel.js

@@ -21,7 +21,6 @@ import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import SettingsStore from '../../../settings/SettingsStore';
 
 export default class KeyBackupPanel extends React.PureComponent {
     constructor(props) {
@@ -316,7 +315,7 @@ export default class KeyBackupPanel extends React.PureComponent {
                 trustedLocally = _t("This backup is trusted because it has been restored on this session");
             }
 
-            let buttonRow = (
+            const buttonRow = (
                 <div className="mx_KeyBackupPanel_buttonRow">
                     <AccessibleButton kind="primary" onClick={this._restoreBackup}>
                         {restoreButtonCaption}
@@ -326,13 +325,6 @@ export default class KeyBackupPanel extends React.PureComponent {
                     </AccessibleButton>
                 </div>
             );
-            if (this.state.backupKeyStored && !SettingsStore.getValue("feature_cross_signing")) {
-                buttonRow = <p>⚠️ {_t(
-                    "Backup key stored in secret storage, but this feature is not " +
-                    "enabled on this session. Please enable cross-signing in Labs to " +
-                    "modify key backup state.",
-                )}</p>;
-            }
 
             return <div>
                 <div>{clientBackupStatus}</div>

src/components/views/settings/ProfileSettings.js

@@ -40,8 +40,8 @@ export default class ProfileSettings extends React.Component {
         if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
         this.state = {
             userId: user.userId,
-            originalDisplayName: user.displayName,
-            displayName: user.displayName,
+            originalDisplayName: user.rawDisplayName,
+            displayName: user.rawDisplayName,
             originalAvatarUrl: avatarUrl,
             avatarUrl: avatarUrl,
             avatarFile: null,

src/components/views/settings/UpdateCheckButton.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, {useState} from "react";
+
+import {UpdateCheckStatus} from "../../../BasePlatform";
+import PlatformPeg from "../../../PlatformPeg";
+import {useDispatcher} from "../../../hooks/useDispatcher";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {_t} from "../../../languageHandler";
+import InlineSpinner from "../../../components/views/elements/InlineSpinner";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import {CheckUpdatesPayload} from "../../../dispatcher/payloads/CheckUpdatesPayload";
+
+function installUpdate() {
+    PlatformPeg.get().installUpdate();
+}
+
+function getStatusText(status: UpdateCheckStatus, errorDetail?: string) {
+    switch (status) {
+        case UpdateCheckStatus.Error:
+            return _t('Error encountered (%(errorDetail)s).', { errorDetail });
+        case UpdateCheckStatus.Checking:
+            return _t('Checking for an update...');
+        case UpdateCheckStatus.NotAvailable:
+            return _t('No update available.');
+        case UpdateCheckStatus.Downloading:
+            return _t('Downloading update...');
+        case UpdateCheckStatus.Ready:
+            return _t("New version available. <a>Update now.</a>", {}, {
+                a: sub => <AccessibleButton kind="link" onClick={installUpdate}>{sub}</AccessibleButton>
+            });
+    }
+}
+
+const doneStatuses = [
+    UpdateCheckStatus.Ready,
+    UpdateCheckStatus.Error,
+    UpdateCheckStatus.NotAvailable,
+];
+
+const UpdateCheckButton = () => {
+    const [state, setState] = useState<CheckUpdatesPayload>(null);
+
+    const onCheckForUpdateClick = () => {
+        setState(null);
+        PlatformPeg.get().startUpdateCheck();
+    };
+
+    useDispatcher(dis, ({action, ...params}) => {
+        if (action === Action.CheckUpdates) {
+            setState(params as CheckUpdatesPayload);
+        }
+    });
+
+    const busy = state && !doneStatuses.includes(state.status);
+
+    let suffix;
+    if (state) {
+        suffix = <span className="mx_UpdateCheckButton_summary">
+            {getStatusText(state.status, state.detail)}
+            {busy && <InlineSpinner />}
+        </span>;
+    }
+
+    return <React.Fragment>
+        <AccessibleButton onClick={onCheckForUpdateClick} kind="primary" disabled={busy}>
+            {_t("Check for update")}
+        </AccessibleButton>
+        { suffix }
+    </React.Fragment>;
+};
+
+export default UpdateCheckButton;

src/components/views/settings/account/PhoneNumbers.js

@@ -267,7 +267,7 @@ export default class PhoneNumbers extends React.Component {
                             label={_t("Phone Number")}
                             autoComplete="off"
                             disabled={this.state.verifying}
-                            prefix={phoneCountry}
+                            prefixComponent={phoneCountry}
                             value={this.state.newPhoneNumber}
                             onChange={this._onChangeNewPhoneNumber}
                         />

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js

@@ -247,7 +247,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 <div className='mx_SecurityRoomSettingsTab_warning'>
                     <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
                     <span>
-                        {_t("To link to this room, please add an alias.")}
+                        {_t("To link to this room, please add an address.")}
                     </span>
                 </div>
             );

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -20,34 +20,64 @@ import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
 import * as sdk from "../../../../../index";
-import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
+import { enumerateThemes } from "../../../../../theme";
+import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
 import Field from "../../../elements/Field";
 import Slider from "../../../elements/Slider";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher/dispatcher";
-import { FontWatcher } from "../../../../../FontWatcher";
+import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
+import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
+import { Action } from '../../../../../dispatcher/actions';
+import { IValidationResult, IFieldState } from '../../../elements/Validation';
 
-export default class AppearanceUserSettingsTab extends React.Component {
-    constructor() {
-        super();
+interface IProps {
+}
+
+interface IThemeState {
+    theme: string,
+    useSystemTheme: boolean,
+}
+
+export interface CustomThemeMessage {
+    isError: boolean,
+    text: string
+};
+
+interface IState extends IThemeState {
+    // String displaying the current selected fontSize.
+    // Needs to be string for things like '17.' without
+    // trailing 0s.
+    fontSize: string,
+    customThemeUrl: string,
+    customThemeMessage: CustomThemeMessage,
+    useCustomFontSize: boolean,
+}
+
+export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
+
+    private themeTimer: NodeJS.Timeout;
+
+    constructor(props: IProps) {
+        super(props);
 
         this.state = {
-            fontSize: SettingsStore.getValue("fontSize", null),
-            ...this._calculateThemeState(),
+            fontSize: SettingsStore.getValue("fontSize", null).toString(),
+            ...this.calculateThemeState(),
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
             useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
         };
     }
 
-    _calculateThemeState() {
+    private calculateThemeState(): IThemeState {
         // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
         // show the right values for things.
 
-        const themeChoice = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
-        const systemThemeExplicit = SettingsStore.getValueAt(
+        const themeChoice: string = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme");
+        const systemThemeExplicit: boolean = SettingsStore.getValueAt(
             SettingLevel.DEVICE, "use_system_theme", null, false, true);
-        const themeExplicit = SettingsStore.getValueAt(
+        const themeExplicit: string = SettingsStore.getValueAt(
             SettingLevel.DEVICE, "theme", null, false, true);
 
         // If the user has enabled system theme matching, use that.
@@ -73,15 +103,15 @@ export default class AppearanceUserSettingsTab extends React.Component {
         };
     }
 
-    _onThemeChange = (e) => {
+    private onThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
         const newTheme = e.target.value;
         if (this.state.theme === newTheme) return;
 
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
-        const oldTheme = SettingsStore.getValue('theme');
+        const oldTheme: string = SettingsStore.getValue('theme');
         SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
-            dis.dispatch({action: 'recheck_theme'});
+            dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
             this.setState({theme: oldTheme});
         });
         this.setState({theme: newTheme});
@@ -91,23 +121,21 @@ export default class AppearanceUserSettingsTab extends React.Component {
         // XXX: The local echoed value appears to be unreliable, in particular
         // when settings custom themes(!) so adding forceTheme to override
         // the value from settings.
-        dis.dispatch({action: 'recheck_theme', forceTheme: newTheme});
+        dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme, forceTheme: newTheme});
     };
 
-    _onUseSystemThemeChanged = (checked) => {
+    private onUseSystemThemeChanged = (checked: boolean): void => {
         this.setState({useSystemTheme: checked});
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
-        dis.dispatch({action: 'recheck_theme'});
+        dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
     };
 
-    _onFontSizeChanged = (size) => {
-        this.setState({fontSize: size});
+    private onFontSizeChanged = (size: number): void => {
+        this.setState({fontSize: size.toString()});
         SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
     };
 
-    _onValidateFontSize = ({value}) => {
-        console.log({value});
-
+    private onValidateFontSize = async ({value}: Pick<IFieldState, "value">): Promise<IValidationResult> => {
         const parsedSize = parseFloat(value);
         const min = FontWatcher.MIN_SIZE;
         const max = FontWatcher.MAX_SIZE;
@@ -127,17 +155,18 @@ export default class AppearanceUserSettingsTab extends React.Component {
         return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
     }
 
-    _onAddCustomTheme = async () => {
-        let currentThemes = SettingsStore.getValue("custom_themes");
+    private onAddCustomTheme = async (): Promise<void> => {
+        let currentThemes: string[] = SettingsStore.getValue("custom_themes");
         if (!currentThemes) currentThemes = [];
         currentThemes = currentThemes.map(c => c); // cheap clone
 
-        if (this._themeTimer) {
-            clearTimeout(this._themeTimer);
+        if (this.themeTimer) {
+            clearTimeout(this.themeTimer);
         }
 
         try {
             const r = await fetch(this.state.customThemeUrl);
+            // XXX: need some schema for this
             const themeInfo = await r.json();
             if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
                 this.setState({customThemeMessage: {text: _t("Invalid theme schema."), isError: true}});
@@ -153,42 +182,32 @@ export default class AppearanceUserSettingsTab extends React.Component {
         await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
         this.setState({customThemeUrl: "", customThemeMessage: {text: _t("Theme added!"), isError: false}});
 
-        this._themeTimer = setTimeout(() => {
+        this.themeTimer = setTimeout(() => {
             this.setState({customThemeMessage: {text: "", isError: false}});
         }, 3000);
     };
 
-    _onCustomThemeChange = (e) => {
+    private onCustomThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
         this.setState({customThemeUrl: e.target.value});
     };
 
-    render() {
-        return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
-                {this._renderThemeSection()}
-                {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this._renderFontSection() : null}
-            </div>
-        );
-    }
-
-    _renderThemeSection() {
+    private renderThemeSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
 
         const themeWatcher = new ThemeWatcher();
-        let systemThemeSection;
+        let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
             systemThemeSection = <div>
                 <LabelledToggleSwitch
                     value={this.state.useSystemTheme}
                     label={SettingsStore.getDisplayName("use_system_theme")}
-                    onChange={this._onUseSystemThemeChanged}
+                    onChange={this.onUseSystemThemeChanged}
                 />
             </div>;
         }
 
-        let customThemeForm;
+        let customThemeForm: JSX.Element;
         if (SettingsStore.isFeatureEnabled("feature_custom_themes")) {
             let messageElement = null;
             if (this.state.customThemeMessage.text) {
@@ -200,17 +219,17 @@ export default class AppearanceUserSettingsTab extends React.Component {
             }
             customThemeForm = (
                 <div className='mx_SettingsTab_section'>
-                    <form onSubmit={this._onAddCustomTheme}>
+                    <form onSubmit={this.onAddCustomTheme}>
                         <Field
                             label={_t("Custom theme URL")}
                             type='text'
                             id='mx_GeneralUserSettingsTab_customThemeInput'
                             autoComplete="off"
-                            onChange={this._onCustomThemeChange}
+                            onChange={this.onCustomThemeChange}
                             value={this.state.customThemeUrl}
                         />
                         <AccessibleButton
-                            onClick={this._onAddCustomTheme}
+                            onClick={this.onAddCustomTheme}
                             type="submit" kind="primary_sm"
                             disabled={!this.state.customThemeUrl.trim()}
                         >{_t("Add theme")}</AccessibleButton>
@@ -220,7 +239,8 @@ export default class AppearanceUserSettingsTab extends React.Component {
             );
         }
 
-        const themes = Object.entries(enumerateThemes())
+        // XXX: replace any type here
+        const themes = Object.entries<any>(enumerateThemes())
             .map(p => ({id: p[0], name: p[1]})); // convert pairs to objects for code readability
         const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
         const customThemes = themes.filter(p => !builtInThemes.includes(p))
@@ -232,7 +252,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
                 {systemThemeSection}
                 <Field
                     id="theme" label={_t("Theme")} element="select"
-                    value={this.state.theme} onChange={this._onThemeChange}
+                    value={this.state.theme} onChange={this.onThemeChange}
                     disabled={this.state.useSystemTheme}
                 >
                     {orderedThemes.map(theme => {
@@ -245,7 +265,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
         );
     }
 
-    _renderFontSection() {
+    private renderFontSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
@@ -253,9 +273,9 @@ export default class AppearanceUserSettingsTab extends React.Component {
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
                     values={[13, 15, 16, 18, 20]}
-                    value={this.state.fontSize}
-                    onSelectionChange={this._onFontSizeChanged}
-                    displayFunc={value => {}}
+                    value={parseInt(this.state.fontSize, 10)}
+                    onSelectionChange={this.onFontSizeChanged}
+                    displayFunc={value => ""}
                     disabled={this.state.useCustomFontSize}
                 />
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
@@ -263,7 +283,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
             <SettingsFlag
                 name="useCustomFontSize"
                 level={SettingLevel.ACCOUNT}
-                onChange={(checked)=> this.setState({useCustomFontSize: checked})}
+                onChange={(checked) => this.setState({useCustomFontSize: checked})}
             />
             <Field
                 type="text"
@@ -272,10 +292,20 @@ export default class AppearanceUserSettingsTab extends React.Component {
                 placeholder={this.state.fontSize.toString()}
                 value={this.state.fontSize.toString()}
                 id="font_size_field"
-                onValidate={this._onValidateFontSize}
+                onValidate={this.onValidateFontSize}
                 onChange={(value) => this.setState({fontSize: value.target.value})}
                 disabled={!this.state.useCustomFontSize}
             />
         </div>;
     }
+
+    render() {
+        return (
+            <div className="mx_SettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
+                {this.renderThemeSection()}
+                {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
+            </div>
+        );
+    }
 }

src/components/views/settings/tabs/user/HelpUserSettingsTab.js

@@ -25,6 +25,7 @@ import Modal from "../../../../../Modal";
 import * as sdk from "../../../../../";
 import PlatformPeg from "../../../../../PlatformPeg";
 import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
+import UpdateCheckButton from "../../UpdateCheckButton";
 
 export default class HelpUserSettingsTab extends React.Component {
     static propTypes = {
@@ -177,12 +178,7 @@ export default class HelpUserSettingsTab extends React.Component {
 
         let updateButton = null;
         if (this.state.canUpdate) {
-            const platform = PlatformPeg.get();
-            updateButton = (
-                <AccessibleButton onClick={platform.startUpdateCheck} kind='primary'>
-                    {_t('Check for update')}
-                </AccessibleButton>
-            );
+            updateButton = <UpdateCheckButton />;
         }
 
         return (

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js

@@ -84,7 +84,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to subscribe to Mjolnir list', '', ErrorDialog, {
                 title: _t('Error subscribing to list'),
-                description: _t('Please verify the room ID or alias and try again.'),
+                description: _t('Please verify the room ID or address and try again.'),
             });
         } finally {
             this.setState({busy: false});
@@ -305,7 +305,7 @@ export default class MjolnirUserSettingsTab extends React.Component {
                         <form onSubmit={this._onSubscribeList} autoComplete="off">
                             <Field
                                 type="text"
-                                label={_t("Room ID or alias of ban list")}
+                                label={_t("Room ID or address of ban list")}
                                 value={this.state.newList}
                                 onChange={this._onNewListChanged}
                             />

src/components/views/settings/tabs/user/SecurityUserSettingsTab.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../../languageHandler";
-import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
+import {SettingLevel} from "../../../../../settings/SettingsStore";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as FormattingUtils from "../../../../../utils/FormattingUtils";
 import AccessibleButton from "../../../elements/AccessibleButton";
@@ -26,6 +26,7 @@ import Modal from "../../../../../Modal";
 import * as sdk from "../../../../..";
 import {sleep} from "../../../../../utils/promise";
 import dis from "../../../../../dispatcher/dispatcher";
+import {privateShouldBeEncrypted} from "../../../../../createRoom";
 
 export class IgnoredUser extends React.Component {
     static propTypes = {
@@ -306,9 +307,7 @@ export default class SecurityUserSettingsTab extends React.Component {
         // in having advanced details here once all flows are implemented, we
         // can remove this.
         const CrossSigningPanel = sdk.getComponent('views.settings.CrossSigningPanel');
-        let crossSigning;
-        if (SettingsStore.getValue("feature_cross_signing")) {
-            crossSigning = (
+        const crossSigning = (
                 <div className='mx_SettingsTab_section'>
                     <span className="mx_SettingsTab_subheading">{_t("Cross-signing")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
@@ -316,12 +315,20 @@ export default class SecurityUserSettingsTab extends React.Component {
                     </div>
                 </div>
             );
-        }
 
         const E2eAdvancedPanel = sdk.getComponent('views.settings.E2eAdvancedPanel');
 
+        let warning;
+        if (!privateShouldBeEncrypted()) {
+            warning = <div className="mx_SecurityUserSettingsTab_warning">
+                { _t("Your server admin has disabled end-to-end encryption by default " +
+                    "in private rooms & Direct Messages.") }
+            </div>;
+        }
+
         return (
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
+                {warning}
                 <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Where you’re logged in")}</span>

src/components/views/toasts/BulkUnverifiedSessionsToast.js

@@ -1,56 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import dis from "../../../dispatcher/dispatcher";
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import DeviceListener from '../../../DeviceListener';
-import FormButton from '../elements/FormButton';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
-
-@replaceableComponent("views.toasts.BulkUnverifiedSessionsToast")
-export default class BulkUnverifiedSessionsToast extends React.PureComponent {
-    static propTypes = {
-        deviceIds: PropTypes.array,
-    }
-
-    _onLaterClick = () => {
-        DeviceListener.sharedInstance().dismissUnverifiedSessions(this.props.deviceIds);
-    };
-
-    _onReviewClick = async () => {
-        DeviceListener.sharedInstance().dismissUnverifiedSessions(this.props.deviceIds);
-
-        dis.dispatch({
-            action: 'view_user_info',
-            userId: MatrixClientPeg.get().getUserId(),
-        });
-    };
-
-    render() {
-        return (<div>
-            <div className="mx_Toast_description">
-                {_t("Verify all your sessions to ensure your account & messages are safe")}
-            </div>
-            <div className="mx_Toast_buttons" aria-live="off">
-                <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
-                <FormButton label={_t("Review")} onClick={this._onReviewClick} />
-            </div>
-        </div>);
-    }
-}

src/components/views/toasts/GenericToast.tsx

@@ -0,0 +1,46 @@
+/*
+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, {ReactChild} from "react";
+
+import FormButton from "../elements/FormButton";
+import {XOR} from "../../../@types/common";
+
+interface IProps {
+    description: ReactChild;
+    acceptLabel: string;
+
+    onAccept();
+}
+
+interface IPropsExtended extends IProps {
+    rejectLabel: string;
+    onReject();
+}
+
+const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({description, acceptLabel, rejectLabel, onAccept, onReject}) => {
+    return <div>
+        <div className="mx_Toast_description">
+            { description }
+        </div>
+        <div className="mx_Toast_buttons" aria-live="off">
+            {onReject && rejectLabel && <FormButton label={rejectLabel} kind="danger" onClick={onReject} /> }
+            <FormButton label={acceptLabel} onClick={onAccept} />
+        </div>
+    </div>;
+};
+
+export default GenericToast;

src/components/views/toasts/SetupEncryptionToast.js

@@ -1,88 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import Modal from '../../../Modal';
-import * as sdk from "../../../index";
-import { _t } from '../../../languageHandler';
-import DeviceListener from '../../../DeviceListener';
-import SetupEncryptionDialog from "../dialogs/SetupEncryptionDialog";
-import { accessSecretStorage } from '../../../CrossSigningManager';
-
-export default class SetupEncryptionToast extends React.PureComponent {
-    static propTypes = {
-        toastKey: PropTypes.string.isRequired,
-        kind: PropTypes.oneOf([
-            'set_up_encryption',
-            'verify_this_session',
-            'upgrade_encryption',
-        ]).isRequired,
-    };
-
-    _onLaterClick = () => {
-        DeviceListener.sharedInstance().dismissEncryptionSetup();
-    };
-
-    _onSetupClick = async () => {
-        if (this.props.kind === "verify_this_session") {
-            Modal.createTrackedDialog('Verify session', 'Verify session', SetupEncryptionDialog,
-                {}, null, /* priority = */ false, /* static = */ true);
-        } else {
-            const Spinner = sdk.getComponent("elements.Spinner");
-            const modal = Modal.createDialog(
-                Spinner, null, 'mx_Dialog_spinner', /* priority */ false, /* static */ true,
-            );
-            try {
-                await accessSecretStorage();
-            } finally {
-                modal.close();
-            }
-        }
-    };
-
-    getDescription() {
-        switch (this.props.kind) {
-            case 'set_up_encryption':
-            case 'upgrade_encryption':
-                return _t('Verify yourself & others to keep your chats safe');
-            case 'verify_this_session':
-                return _t('Other users may not trust it');
-        }
-    }
-
-    getSetupCaption() {
-        switch (this.props.kind) {
-            case 'set_up_encryption':
-                return _t('Set up');
-            case 'upgrade_encryption':
-                return _t('Upgrade');
-            case 'verify_this_session':
-                return _t('Verify');
-        }
-    }
-
-    render() {
-        const FormButton = sdk.getComponent("elements.FormButton");
-        return (<div>
-            <div className="mx_Toast_description">{this.getDescription()}</div>
-            <div className="mx_Toast_buttons" aria-live="off">
-                <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
-                <FormButton label={this.getSetupCaption()} onClick={this._onSetupClick} />
-            </div>
-        </div>);
-    }
-}

src/components/views/toasts/UnverifiedSessionToast.js

@@ -1,66 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-import { MatrixClientPeg } from '../../../MatrixClientPeg';
-import Modal from '../../../Modal';
-import DeviceListener from '../../../DeviceListener';
-import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog';
-import FormButton from '../elements/FormButton';
-import { replaceableComponent } from '../../../utils/replaceableComponent';
-
-@replaceableComponent("views.toasts.UnverifiedSessionToast")
-export default class UnverifiedSessionToast extends React.PureComponent {
-    static propTypes = {
-        deviceId: PropTypes.string,
-    }
-
-    _onLaterClick = () => {
-        DeviceListener.sharedInstance().dismissUnverifiedSessions([this.props.deviceId]);
-    };
-
-    _onReviewClick = async () => {
-        const cli = MatrixClientPeg.get();
-        Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, {
-            userId: cli.getUserId(),
-            device: cli.getStoredDevice(cli.getUserId(), this.props.deviceId),
-            onFinished: (r) => {
-                if (!r) {
-                    /* This'll come back false if the user clicks "this wasn't me" and saw a warning dialog */
-                    DeviceListener.sharedInstance().dismissUnverifiedSessions([this.props.deviceId]);
-                }
-            },
-        }, null, /* priority = */ false, /* static = */ true);
-    };
-
-    render() {
-        const cli = MatrixClientPeg.get();
-        const device = cli.getStoredDevice(cli.getUserId(), this.props.deviceId);
-
-        return (<div>
-            <div className="mx_Toast_description">
-                {_t(
-                    "Verify the new login accessing your account: %(name)s", { name: device.getDisplayName()})}
-            </div>
-            <div className="mx_Toast_buttons" aria-live="off">
-                <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />
-                <FormButton label={_t("Verify")} onClick={this._onReviewClick} />
-            </div>
-        </div>);
-    }
-}

src/components/views/toasts/VerificationRequestToast.tsx

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+
 import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -24,8 +24,23 @@ import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver
 import dis from "../../../dispatcher/dispatcher";
 import ToastStore from "../../../stores/ToastStore";
 import Modal from "../../../Modal";
+import GenericToast from "./GenericToast";
+import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import {DeviceInfo} from "matrix-js-sdk/src/crypto/deviceinfo";
+
+interface IProps {
+    toastKey: string;
+    request: VerificationRequest;
+}
+
+interface IState {
+    counter: number;
+    device?: DeviceInfo;
+}
+
+export default class VerificationRequestToast extends React.PureComponent<IProps, IState> {
+    private intervalHandle: NodeJS.Timeout;
 
-export default class VerificationRequestToast extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {counter: Math.ceil(props.request.timeout / 1000)};
@@ -34,7 +49,7 @@ export default class VerificationRequestToast extends React.PureComponent {
     async componentDidMount() {
         const {request} = this.props;
         if (request.timeout && request.timeout > 0) {
-            this._intervalHandle = setInterval(() => {
+            this.intervalHandle = setInterval(() => {
                 let {counter} = this.state;
                 counter = Math.max(0, counter - 1);
                 this.setState({counter});
@@ -56,7 +71,7 @@ export default class VerificationRequestToast extends React.PureComponent {
     }
 
     componentWillUnmount() {
-        clearInterval(this._intervalHandle);
+        clearInterval(this.intervalHandle);
         const {request} = this.props;
         request.off("change", this._checkRequestIsPending);
     }
@@ -110,7 +125,6 @@ export default class VerificationRequestToast extends React.PureComponent {
     };
 
     render() {
-        const FormButton = sdk.getComponent("elements.FormButton");
         const {request} = this.props;
         let nameLabel;
         if (request.isSelfVerification) {
@@ -133,20 +147,16 @@ export default class VerificationRequestToast extends React.PureComponent {
                 }
             }
         }
-        const declineLabel = this.state.counter == 0 ?
+        const declineLabel = this.state.counter === 0 ?
             _t("Decline") :
             _t("Decline (%(counter)s)", {counter: this.state.counter});
-        return (<div>
-            <div className="mx_Toast_description">{nameLabel}</div>
-            <div className="mx_Toast_buttons" aria-live="off">
-                <FormButton label={declineLabel} kind="danger" onClick={this.cancel} />
-                <FormButton label={_t("Accept")} onClick={this.accept} />
-            </div>
-        </div>);
+
+        return <GenericToast
+            description={nameLabel}
+            acceptLabel={_t("Accept")}
+            onAccept={this.accept}
+            rejectLabel={declineLabel}
+            onReject={this.cancel}
+        />;
     }
 }
-
-VerificationRequestToast.propTypes = {
-    request: PropTypes.object.isRequired,
-    toastKey: PropTypes.string.isRequired,
-};