Merge branch 'develop' into thobyv/make-filepanel-remember-scroll-position

src/components/structures/ContextMenu.js

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

src/components/structures/HomePage.tsx

@@ -0,0 +1,66 @@
+/*
+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 AutoHideScrollbar from './AutoHideScrollbar';
+import { getHomePageUrl } from "../../utils/pages";
+import { _t } from "../../languageHandler";
+import SdkConfig from "../../SdkConfig";
+import * as sdk from "../../index";
+import dis from "../../dispatcher";
+
+const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'});
+const onClickExplore = () => dis.dispatch({action: 'view_room_directory'});
+const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'});
+
+const HomePage = () => {
+    const config = SdkConfig.get();
+    const pageUrl = getHomePageUrl(config);
+
+    if (pageUrl) {
+        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
+        return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
+    }
+
+    const brandingConfig = config.branding;
+    let logoUrl = "themes/riot/img/logos/riot-logo.svg";
+    if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
+        logoUrl = brandingConfig.authHeaderLogoUrl;
+    }
+
+    const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+    return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
+        <div className="mx_HomePage_default_wrapper">
+            <img src={logoUrl} alt="Riot" />
+            <h1>{ _t("Welcome to %(appName)s", { appName: config.brand || "Riot" }) }</h1>
+            <h4>{ _t("Liberate your communication") }</h4>
+            <div className="mx_HomePage_default_buttons">
+                <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
+                    { _t("Send a Direct Message") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
+                    { _t("Explore Public Rooms") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
+                    { _t("Create a Group Chat") }
+                </AccessibleButton>
+            </div>
+        </div>
+    </AutoHideScrollbar>;
+};
+
+export default HomePage;

src/components/structures/LoggedInView.tsx

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

src/components/structures/MatrixChat.js

@@ -1506,7 +1506,7 @@ export default createReactClass({
         });
 
         cli.on("crypto.verification.request", request => {
-            const isFlagOn = SettingsStore.isFeatureEnabled("feature_cross_signing");
+            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"});
@@ -1556,7 +1556,7 @@ export default createReactClass({
             // changing colour. More advanced behaviour will come once
             // we implement more settings.
             cli.setGlobalErrorOnUnknownDevices(
-                !SettingsStore.isFeatureEnabled("feature_cross_signing"),
+                !SettingsStore.getValue("feature_cross_signing"),
             );
         }
     },
@@ -1902,28 +1902,29 @@ export default createReactClass({
         const cli = MatrixClientPeg.get();
         // We're checking `isCryptoAvailable` here instead of `isCryptoEnabled`
         // because the client hasn't been started yet.
-        if (!isCryptoAvailable()) {
+        const cryptoAvailable = isCryptoAvailable();
+        if (!cryptoAvailable) {
             this._onLoggedIn();
         }
 
+        this.setState({ pendingInitialSync: true });
+        await this.firstSyncPromise.promise;
+
+        if (!cryptoAvailable) {
+            this.setState({ pendingInitialSync: false });
+            return setLoggedInPromise;
+        }
+
         // Test for the master cross-signing key in SSSS as a quick proxy for
         // whether cross-signing has been set up on the account.
-        let masterKeyInStorage = false;
-        try {
-            masterKeyInStorage = !!await cli.getAccountDataFromServer("m.cross_signing.master");
-        } catch (e) {
-            if (e.errcode !== "M_NOT_FOUND") {
-                console.warn("Secret storage account data check failed", e);
-            }
-        }
-
+        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.setFeatureEnabled("feature_cross_signing", true);
+            SettingsStore.setValue("feature_cross_signing", null, SettingLevel.DEVICE, true);
             this.setStateForNewView({ view: VIEWS.COMPLETE_SECURITY });
         } else if (
-            SettingsStore.isFeatureEnabled("feature_cross_signing") &&
+            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,
@@ -1933,6 +1934,7 @@ export default createReactClass({
         } else {
             this._onLoggedIn();
         }
+        this.setState({ pendingInitialSync: false });
 
         return setLoggedInPromise;
     },
@@ -2054,6 +2056,7 @@ export default createReactClass({
             const Login = sdk.getComponent('structures.auth.Login');
             view = (
                 <Login
+                    isSyncing={this.state.pendingInitialSync}
                     onLoggedIn={this.onUserCompletedLoginFlow}
                     onRegisterClick={this.onRegisterClick}
                     fallbackHsUrl={this.getFallbackHsUrl()}

src/components/structures/MessagePanel.js

@@ -503,6 +503,7 @@ export default class MessagePanel extends React.Component {
     }
 
     _getTilesForEvent(prevEvent, mxEv, last) {
+        const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
@@ -577,25 +578,27 @@ export default class MessagePanel extends React.Component {
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
-                <EventTile mxEvent={mxEv}
-                    continuation={continuation}
-                    isRedacted={mxEv.isRedacted()}
-                    replacingEventId={mxEv.replacingEventId()}
-                    editState={isEditing && this.props.editState}
-                    onHeightChanged={this._onHeightChanged}
-                    readReceipts={readReceipts}
-                    readReceiptMap={this._readReceiptMap}
-                    showUrlPreview={this.props.showUrlPreview}
-                    checkUnmounting={this._isUnmounting.bind(this)}
-                    eventSendStatus={mxEv.getAssociatedStatus()}
-                    tileShape={this.props.tileShape}
-                    isTwelveHour={this.props.isTwelveHour}
-                    permalinkCreator={this.props.permalinkCreator}
-                    last={last}
-                    isSelectedEvent={highlight}
-                    getRelationsForEvent={this.props.getRelationsForEvent}
-                    showReactions={this.props.showReactions}
-                />
+                <TileErrorBoundary mxEvent={mxEv}>
+                    <EventTile mxEvent={mxEv}
+                        continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
+                        replacingEventId={mxEv.replacingEventId()}
+                        editState={isEditing && this.props.editState}
+                        onHeightChanged={this._onHeightChanged}
+                        readReceipts={readReceipts}
+                        readReceiptMap={this._readReceiptMap}
+                        showUrlPreview={this.props.showUrlPreview}
+                        checkUnmounting={this._isUnmounting.bind(this)}
+                        eventSendStatus={mxEv.getAssociatedStatus()}
+                        tileShape={this.props.tileShape}
+                        isTwelveHour={this.props.isTwelveHour}
+                        permalinkCreator={this.props.permalinkCreator}
+                        last={last}
+                        isSelectedEvent={highlight}
+                        getRelationsForEvent={this.props.getRelationsForEvent}
+                        showReactions={this.props.showReactions}
+                    />
+                </TileErrorBoundary>
             </li>,
         );
 
@@ -757,6 +760,7 @@ export default class MessagePanel extends React.Component {
     }
 
     render() {
+        const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary');
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
@@ -789,22 +793,24 @@ export default class MessagePanel extends React.Component {
         }
 
         return (
-            <ScrollPanel
-                ref={this._scrollPanel}
-                className={className}
-                onScroll={this.props.onScroll}
-                onResize={this.onResize}
-                onFillRequest={this.props.onFillRequest}
-                onUnfillRequest={this.props.onUnfillRequest}
-                style={style}
-                stickyBottom={this.props.stickyBottom}
-                resizeNotifier={this.props.resizeNotifier}
-            >
-                { topSpinner }
-                { this._getEventTiles() }
-                { whoIsTyping }
-                { bottomSpinner }
-            </ScrollPanel>
+            <ErrorBoundary>
+                <ScrollPanel
+                    ref={this._scrollPanel}
+                    className={className}
+                    onScroll={this.props.onScroll}
+                    onResize={this.onResize}
+                    onFillRequest={this.props.onFillRequest}
+                    onUnfillRequest={this.props.onUnfillRequest}
+                    style={style}
+                    stickyBottom={this.props.stickyBottom}
+                    resizeNotifier={this.props.resizeNotifier}
+                >
+                    { topSpinner }
+                    { this._getEventTiles() }
+                    { whoIsTyping }
+                    { bottomSpinner }
+                </ScrollPanel>
+            </ErrorBoundary>
         );
     }
 }

src/components/structures/RightPanel.js

@@ -219,7 +219,7 @@ export default class RightPanel extends React.Component {
                 break;
             case RIGHT_PANEL_PHASES.RoomMemberInfo:
             case RIGHT_PANEL_PHASES.EncryptionPanel:
-                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                if (SettingsStore.getValue("feature_cross_signing")) {
                     const onClose = () => {
                         dis.dispatch({
                             action: "view_user",
@@ -246,7 +246,7 @@ export default class RightPanel extends React.Component {
                 panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
                 break;
             case RIGHT_PANEL_PHASES.GroupMemberInfo:
-                if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                if (SettingsStore.getValue("feature_cross_signing")) {
                     const onClose = () => {
                         dis.dispatch({
                             action: "view_user",

src/components/structures/RoomView.js

@@ -49,7 +49,6 @@ import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
-import WidgetUtils from '../../utils/WidgetUtils';
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
 import {haveTileForEvent} from "../views/rooms/EventTile";
@@ -182,6 +181,7 @@ export default createReactClass({
         this.context.on("crypto.keyBackupStatus", this.onKeyBackupStatus);
         this.context.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         this.context.on("userTrustStatusChanged", this.onUserVerificationChanged);
+        this.context.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
@@ -405,13 +405,9 @@ export default createReactClass({
         const hideWidgetDrawer = localStorage.getItem(
             room.roomId + "_hide_widget_drawer");
 
-        if (hideWidgetDrawer === "true") {
-            return false;
-        }
-
-        const widgets = WidgetEchoStore.getEchoedRoomWidgets(room.roomId, WidgetUtils.getRoomWidgets(room));
-
-        return widgets.length > 0 || WidgetEchoStore.roomHasPendingWidgets(room.roomId, WidgetUtils.getRoomWidgets(room));
+        // This is confusing, but it means to say that we default to the tray being
+        // hidden unless the user clicked to open it.
+        return hideWidgetDrawer === "false";
     },
 
     componentDidMount: function() {
@@ -504,6 +500,7 @@ export default createReactClass({
             this.context.removeListener("crypto.keyBackupStatus", this.onKeyBackupStatus);
             this.context.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
             this.context.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
+            this.context.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
@@ -805,6 +802,13 @@ export default createReactClass({
         this._updateE2EStatus(room);
     },
 
+    onCrossSigningKeysChanged: function() {
+        const room = this.state.room;
+        if (room) {
+            this._updateE2EStatus(room);
+        }
+    },
+
     _updateE2EStatus: async function(room) {
         if (!this.context.isRoomEncrypted(room.roomId)) {
             return;
@@ -818,7 +822,7 @@ export default createReactClass({
             });
             return;
         }
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             room.hasUnverifiedDevices().then((hasUnverifiedDevices) => {
                 this.setState({
                     e2eStatus: hasUnverifiedDevices ? "warning" : "verified",
@@ -1203,7 +1207,7 @@ export default createReactClass({
             });
         }, function(error) {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            console.error("Search failed: " + error);
+            console.error("Search failed", error);
             Modal.createTrackedDialog('Search failed', '', ErrorDialog, {
                 title: _t("Search failed"),
                 description: ((error && error.message) ? error.message : _t("Server may be unavailable, overloaded, or search timed out :(")),

src/components/structures/auth/CompleteSecurity.js

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

src/components/structures/auth/Login.js

@@ -84,11 +84,13 @@ export default createReactClass({
         onServerConfigChange: PropTypes.func.isRequired,
 
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        isSyncing: PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
             busy: false,
+            busyLoggingIn: null,
             errorText: null,
             loginIncorrect: false,
             canTryLogin: true, // can we attempt to log in or are there validation errors?
@@ -169,6 +171,7 @@ export default createReactClass({
                 const componentState = AutoDiscoveryUtils.authComponentStateForError(e);
                 this.setState({
                     busy: false,
+                    busyLoggingIn: false,
                     ...componentState,
                 });
                 aliveAgain = !componentState.serverErrorIsFatal;
@@ -182,6 +185,7 @@ export default createReactClass({
 
         this.setState({
             busy: true,
+            busyLoggingIn: true,
             errorText: null,
             loginIncorrect: false,
         });
@@ -250,6 +254,7 @@ export default createReactClass({
 
             this.setState({
                 busy: false,
+                busyLoggingIn: false,
                 errorText: errorText,
                 // 401 would be the sensible status code for 'incorrect password'
                 // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
@@ -594,6 +599,7 @@ export default createReactClass({
                loginIncorrect={this.state.loginIncorrect}
                serverConfig={this.props.serverConfig}
                disableSubmit={this.isBusy()}
+               busy={this.props.isSyncing || this.state.busyLoggingIn}
             />
         );
     },
@@ -629,9 +635,11 @@ export default createReactClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const InlineSpinner = sdk.getComponent("elements.InlineSpinner");
         const AuthHeader = sdk.getComponent("auth.AuthHeader");
         const AuthBody = sdk.getComponent("auth.AuthBody");
-        const loader = this.isBusy() ? <div className="mx_Login_loader"><Loader /></div> : null;
+        const loader = this.isBusy() && !this.state.busyLoggingIn ?
+            <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.state.errorText;
 
@@ -658,9 +666,28 @@ export default createReactClass({
             );
         }
 
+        let footer;
+        if (this.props.isSyncing || this.state.busyLoggingIn) {
+            footer = <div className="mx_AuthBody_paddedFooter">
+                <div className="mx_AuthBody_paddedFooter_title">
+                    <InlineSpinner w={20} h={20} />
+                    { this.props.isSyncing ? _t("Syncing...") : _t("Signing In...") }
+                </div>
+                { this.props.isSyncing && <div className="mx_AuthBody_paddedFooter_subtitle">
+                    {_t("If you've joined lots of rooms, this might take a while")}
+                </div> }
+            </div>;
+        } else {
+            footer = (
+                <a className="mx_AuthBody_changeFlow" onClick={this.onTryRegisterClick} href="#">
+                    { _t('Create account') }
+                </a>
+            );
+        }
+
         return (
             <AuthPage>
-                <AuthHeader />
+                <AuthHeader disableLanguageSelector={this.props.isSyncing || this.state.busyLoggingIn} />
                 <AuthBody>
                     <h2>
                         {_t('Sign in')}
@@ -670,9 +697,7 @@ export default createReactClass({
                     { serverDeadSection }
                     { this.renderServerComponent() }
                     { this.renderLoginComponentForStep() }
-                    <a className="mx_AuthBody_changeFlow" onClick={this.onTryRegisterClick} href="#">
-                        { _t('Create account') }
-                    </a>
+                    { footer }
                 </AuthBody>
             </AuthPage>
         );

src/components/structures/auth/SetupEncryptionBody.js

@@ -108,16 +108,15 @@ export default class SetupEncryptionBody extends React.Component {
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
         } else if (phase === PHASE_INTRO) {
-            const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+            const ButtonPlaceholder = sdk.getComponent("elements.ButtonPlaceholder");
             return (
                 <div>
                     <p>{_t(
-                        "Open an existing session & use it to verify this one, " +
+                        "Use an existing session to verify this one, " +
                         "granting it access to encrypted messages.",
                     )}</p>
-                    <p className="mx_CompleteSecurity_waiting"><InlineSpinner />{_t("Waiting…")}</p>
                     <p>{_t(
-                        "If you can’t access one, <button>use your recovery key or passphrase.</button>",
+                        "If you can’t access one, <button>use your recovery key or recovery passphrase.</button>",
                     {}, {
                         button: sub => <AccessibleButton element="span"
                             className="mx_linkButton"
@@ -133,6 +132,7 @@ export default class SetupEncryptionBody extends React.Component {
                         >
                             {_t("Skip")}
                         </AccessibleButton>
+                        <ButtonPlaceholder>{_t("Use your other device to continue…")}</ButtonPlaceholder>
                     </div>
                 </div>
             );

src/components/views/auth/AuthHeader.js

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

src/components/views/auth/LanguageSelector.js

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

src/components/views/auth/PasswordLogin.js

@@ -23,6 +23,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AccessibleButton from "../elements/AccessibleButton";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -44,6 +45,7 @@ export default class PasswordLogin extends React.Component {
         loginIncorrect: PropTypes.bool,
         disableSubmit: PropTypes.bool,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        busy: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -265,12 +267,16 @@ export default class PasswordLogin extends React.Component {
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = <span>
                 {_t('Not sure of your password? <a>Set a new one</a>', {}, {
-                    a: sub => <a className="mx_Login_forgot"
-                        onClick={this.onForgotPasswordClick}
-                        href="#"
-                    >
-                        {sub}
-                    </a>,
+                    a: sub => (
+                        <AccessibleButton
+                            className="mx_Login_forgot"
+                            disabled={this.props.busy}
+                            kind="link"
+                            onClick={this.onForgotPasswordClick}
+                        >
+                            {sub}
+                        </AccessibleButton>
+                    ),
                 })}
             </span>;
         }
@@ -332,11 +338,11 @@ export default class PasswordLogin extends React.Component {
                         disabled={this.props.disableSubmit}
                     />
                     {forgotPasswordJsx}
-                    <input className="mx_Login_submit"
+                    { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}
                         disabled={this.props.disableSubmit}
-                    />
+                    /> }
                 </form>
             </div>
         );

src/components/views/context_menus/TopLeftMenu.js

@@ -26,6 +26,7 @@ import { getHostingLink } from '../../../utils/HostingLink';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
 import * as sdk from "../../../index";
+import {getHomePageUrl} from "../../../utils/pages";
 
 export default class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -47,15 +48,7 @@ export default class TopLeftMenu extends React.Component {
     }
 
     hasHomePage() {
-        const config = SdkConfig.get();
-        const pagesConfig = config.embeddedPages;
-        if (pagesConfig && pagesConfig.homeUrl) {
-            return true;
-        }
-        // This is a deprecated config option for the home page
-        // (despite the name, given we also now have a welcome
-        // page, which is not the same).
-        return !!config.welcomePageUrl;
+        return !!getHomePageUrl(SdkConfig.get());
     }
 
     render() {

src/components/views/dialogs/BugReportDialog.js

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

src/components/views/dialogs/CreateRoomDialog.js

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

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,71 +23,109 @@ import Analytics from '../../../Analytics';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 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";
+
+const dialogAesthetics = {
+    [SSOAuthEntry.PHASE_PREAUTH]: {
+        body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
+        continueText: _t("Single Sign On"),
+        continueKind: "danger",
+    },
+    [SSOAuthEntry.PHASE_POSTAUTH]: {
+        body: _t("Are you sure you want to deactivate your account? This is irreversible."),
+        continueText: _t("Confirm account deactivation"),
+        continueKind: "danger",
+    },
+};
+
+// This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
+const DEACTIVATE_AESTHETICS = {
+    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+    [PasswordAuthEntry.LOGIN_TYPE]: {
+        [DEFAULT_PHASE]: {
+            body: _t("To continue, please enter your password:"),
+        },
+    },
+};
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._onOk = this._onOk.bind(this);
-        this._onCancel = this._onCancel.bind(this);
-        this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
-        this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
-
         this.state = {
-            password: "",
-            busy: false,
             shouldErase: false,
             errStr: null,
+            authData: null, // for UIA
+
+            // A few strings that are passed to InteractiveAuth for design or are displayed
+            // next to the InteractiveAuth component.
+            bodyText: null,
+            continueText: null,
+            continueKind: null,
         };
-    }
 
-    _onPasswordFieldChange(ev) {
-        this.setState({
-            password: ev.target.value,
-        });
-    }
-
-    _onEraseFieldChange(ev) {
-        this.setState({
-            shouldErase: ev.target.checked,
-        });
-    }
-
-    async _onOk() {
-        this.setState({busy: true});
-
-        try {
-            // This assumes that the HS requires password UI auth
-            // for this endpoint. In reality it could be any UI auth.
-            const auth = {
-                type: 'm.login.password',
-                // TODO: Remove `user` once servers support proper UIA
-                // See https://github.com/vector-im/riot-web/issues/10312
-                user: MatrixClientPeg.get().credentials.userId,
-                identifier: {
-                    type: "m.id.user",
-                    user: MatrixClientPeg.get().credentials.userId,
-                },
-                password: this.state.password,
-            };
-            await MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase);
-        } catch (err) {
-            let errStr = _t('Unknown error');
-            // https://matrix.org/jira/browse/SYN-744
-            if (err.httpStatus === 401 || err.httpStatus === 403) {
-                errStr = _t('Incorrect password');
+        MatrixClientPeg.get().deactivateAccount(null, false).then(r => {
+            // If we got here, oops. The server didn't require any auth.
+            // Our application lifecycle will catch the error and do the logout bits.
+            // We'll try to log something in an vain attempt to record what happened (storage
+            // is also obliterated on logout).
+            console.warn("User's account got deactivated without confirmation: Server had no auth");
+            this.setState({errStr: _t("Server did not require any authentication")});
+        }).catch(e => {
+            if (e && e.httpStatus === 401 && e.data) {
+                // Valid UIA response
+                this.setState({authData: e.data});
+            } else {
+                this.setState({errStr: _t("Server did not return valid authentication information.")});
             }
-            this.setState({
-                busy: false,
-                errStr: errStr,
-            });
+        });
+    }
+
+    _onStagePhaseChange = (stage, phase) => {
+        const aesthetics = DEACTIVATE_AESTHETICS[stage];
+        let bodyText = null;
+        let continueText = null;
+        let continueKind = null;
+        if (aesthetics) {
+            const phaseAesthetics = aesthetics[phase];
+            if (phaseAesthetics && phaseAesthetics.body) bodyText = phaseAesthetics.body;
+            if (phaseAesthetics && phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
+            if (phaseAesthetics && phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
+        }
+        this.setState({bodyText, continueText, continueKind});
+    };
+
+    _onUIAuthFinished = (success, result, extra) => {
+        if (success) return; // great! makeRequest() will be called too.
+
+        if (result === ERROR_USER_CANCELLED) {
+            this._onCancel();
             return;
         }
 
-        Analytics.trackEvent('Account', 'Deactivate Account');
-        Lifecycle.onLoggedOut();
-        this.props.onFinished(true);
-    }
+        console.error("Error during UI Auth:", {result, extra});
+        this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+    };
+
+    _onUIAuthComplete = (auth) => {
+        MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => {
+            // Deactivation worked - logout & close this dialog
+            Analytics.trackEvent('Account', 'Deactivate Account');
+            Lifecycle.onLoggedOut();
+            this.props.onFinished(true);
+        }).catch(e => {
+            console.error(e);
+            this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+        });
+    };
+
+    _onEraseFieldChange = (ev) => {
+        this.setState({
+            shouldErase: ev.target.checked,
+        });
+    };
 
     _onCancel() {
         this.props.onFinished(false);
@@ -95,34 +133,36 @@ export default class DeactivateAccountDialog extends React.Component {
 
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Loader = sdk.getComponent("elements.Spinner");
-        let passwordBoxClass = '';
 
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
                 { this.state.errStr }
             </div>;
-            passwordBoxClass = 'error';
         }
 
-        const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
-        const okEnabled = this.state.password && !this.state.busy;
-
-        let cancelButton = null;
-        if (!this.state.busy) {
-            cancelButton = <button onClick={this._onCancel} autoFocus={true}>
-                { _t("Cancel") }
-            </button>;
+        let auth = <div>{_t("Loading...")}</div>;
+        if (this.state.authData) {
+            auth = (
+                <div>
+                    {this.state.bodyText}
+                    <InteractiveAuth
+                        matrixClient={MatrixClientPeg.get()}
+                        authData={this.state.authData}
+                        makeRequest={this._onUIAuthComplete}
+                        onAuthFinished={this._onUIAuthFinished}
+                        onStagePhaseChange={this._onStagePhaseChange}
+                        continueText={this.state.continueText}
+                        continueKind={this.state.continueKind}
+                    />
+                </div>
+            );
         }
 
-        const Field = sdk.getComponent('elements.Field');
-
         // this is on purpose not a <form /> to prevent Enter triggering submission, to further prevent accidents
         return (
             <BaseDialog className="mx_DeactivateAccountDialog"
                 onFinished={this.props.onFinished}
-                onEnterPressed={this.onOk}
                 titleClass="danger"
                 title={_t("Deactivate Account")}
             >
@@ -172,28 +212,10 @@ export default class DeactivateAccountDialog extends React.Component {
                             </label>
                         </p>
 
-                        <p>{ _t("To continue, please enter your password:") }</p>
-                        <Field
-                            type="password"
-                            label={_t('Password')}
-                            onChange={this._onPasswordFieldChange}
-                            value={this.state.password}
-                            className={passwordBoxClass}
-                        />
+                        {error}
+                        {auth}
                     </div>
 
-                    { error }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button
-                        className="mx_Dialog_primary danger"
-                        onClick={this._onOk}
-                        disabled={!okEnabled}
-                    >
-                        { okLabel }
-                    </button>
-
-                    { cancelButton }
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -131,7 +131,7 @@ export default class DeviceVerifyDialog extends React.Component {
                 } else {
                     this._verifier = request.verifier;
                 }
-            } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            } else if (verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
                 this._request = await client.requestVerification(this.props.userId, [
                     verificationMethods.SAS,
                     SHOW_QR_CODE_METHOD,

src/components/views/dialogs/InviteDialog.js

@@ -574,7 +574,7 @@ export default class InviteDialog extends React.PureComponent {
 
         const createRoomOptions = {inlineErrors: true};
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             // Check whether all users have uploaded device keys before.
             // If so, enable encryption in the new room.
             const client = MatrixClientPeg.get();

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

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

src/components/views/dialogs/ShareDialog.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,15 +15,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {User} from "matrix-js-sdk/src/models/user";
+import {Group} from "matrix-js-sdk/src/models/group";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import QRCode from 'qrcode-react';
 import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext, selectText} from "../../../utils/strings";
 
 const socials = [
     {
@@ -52,7 +58,18 @@ const socials = [
     },
 ];
 
-export default class ShareDialog extends React.Component {
+interface IProps {
+    onFinished: () => void;
+    target: Room | User | Group | RoomMember | MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IState {
+    linkSpecificEvent: boolean;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+export default class ShareDialog extends React.PureComponent<IProps, IState> {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         target: PropTypes.oneOfType([
@@ -64,55 +81,45 @@ export default class ShareDialog extends React.Component {
         ]).isRequired,
     };
 
+    protected closeCopiedTooltip: () => void;
+
     constructor(props) {
         super(props);
 
         this.onCopyClick = this.onCopyClick.bind(this);
         this.onLinkSpecificEventCheckboxClick = this.onLinkSpecificEventCheckboxClick.bind(this);
 
+        let permalinkCreator: RoomPermalinkCreator = null;
+        if (props.target instanceof Room) {
+            permalinkCreator = new RoomPermalinkCreator(props.target);
+            permalinkCreator.load();
+        }
+
         this.state = {
             // MatrixEvent defaults to share linkSpecificEvent
             linkSpecificEvent: this.props.target instanceof MatrixEvent,
+            permalinkCreator,
         };
-
-        this._link = createRef();
-    }
-
-    static _selectText(target) {
-        const range = document.createRange();
-        range.selectNodeContents(target);
-
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
     }
 
     static onLinkClick(e) {
         e.preventDefault();
-        const {target} = e;
-        ShareDialog._selectText(target);
+        selectText(e.target);
     }
 
-    onCopyClick(e) {
+    async onCopyClick(e) {
         e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
 
-        ShareDialog._selectText(this._link.current);
-
-        let successful;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.error('Failed to copy: ', err);
-        }
-
-        const buttonRect = e.target.getBoundingClientRect();
+        const successful = await copyPlaintext(this.getUrl());
+        const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
         const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
         // Drop a reference to this close handler for componentWillUnmount
-        this.closeCopiedTooltip = e.target.onmouseleave = close;
+        this.closeCopiedTooltip = target.onmouseleave = close;
     }
 
     onLinkSpecificEventCheckboxClick() {
@@ -121,24 +128,38 @@ export default class ShareDialog extends React.Component {
         });
     }
 
-    componentDidMount() {
-        if (this.props.target instanceof Room) {
-            const permalinkCreator = new RoomPermalinkCreator(this.props.target);
-            permalinkCreator.load();
-            this.setState({permalinkCreator});
-        }
-    }
-
     componentWillUnmount() {
         // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
         // the tooltip otherwise, such as pressing Escape or clicking X really quickly
         if (this.closeCopiedTooltip) this.closeCopiedTooltip();
     }
 
-    render() {
-        let title;
+    getUrl() {
         let matrixToUrl;
 
+        if (this.props.target instanceof Room) {
+            if (this.state.linkSpecificEvent) {
+                const events = this.props.target.getLiveTimeline().getEvents();
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+            } else {
+                matrixToUrl = this.state.permalinkCreator.forRoom();
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+            } else {
+                matrixToUrl = this.props.permalinkCreator.forRoom();
+            }
+        }
+        return matrixToUrl;
+    }
+
+    render() {
+        let title;
         let checkbox;
 
         if (this.props.target instanceof Room) {
@@ -156,18 +177,10 @@ export default class ShareDialog extends React.Component {
                     </label>
                 </div>;
             }
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
-            } else {
-                matrixToUrl = this.state.permalinkCreator.forRoom();
-            }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
-            matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof Group) {
             title = _t('Share Community');
-            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
@@ -179,14 +192,9 @@ export default class ShareDialog extends React.Component {
                     { _t('Link to selected message') }
                 </label>
             </div>;
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
-            } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
-            }
         }
 
+        const matrixToUrl = this.getUrl();
         const encodedUrl = encodeURIComponent(matrixToUrl);
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -197,8 +205,7 @@ export default class ShareDialog extends React.Component {
         >
             <div className="mx_ShareDialog_content">
                 <div className="mx_ShareDialog_matrixto">
-                    <a ref={this._link}
-                       href={matrixToUrl}
+                    <a href={matrixToUrl}
                        onClick={ShareDialog.onLinkClick}
                        className="mx_ShareDialog_matrixto_link"
                     >
@@ -217,17 +224,18 @@ export default class ShareDialog extends React.Component {
                         <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
-                        {
-                            socials.map((social) => <a rel="noreferrer noopener"
-                                                       target="_blank"
-                                                       key={social.name}
-                                                       name={social.name}
-                                                       href={social.url(encodedUrl)}
-                                                       className="mx_ShareDialog_social_icon"
+                        { socials.map((social) => (
+                            <a
+                                rel="noreferrer noopener"
+                                target="_blank"
+                                key={social.name}
+                                title={social.name}
+                                href={social.url(encodedUrl)}
+                                className="mx_ShareDialog_social_icon"
                             >
                                 <img src={social.img} alt={social.name} height={64} width={64} />
-                            </a>)
-                        }
+                            </a>
+                        )) }
                     </div>
                 </div>
             </div>

src/components/views/dialogs/VerificationRequestDialog.js

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

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

@@ -283,7 +283,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Recovery key mismatch");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this key: " +
+                            "Backup could not be decrypted with this recovery key: " +
                             "please verify that you entered the correct recovery key.",
                         )}</p>
                     </div>;
@@ -291,7 +291,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     title = _t("Incorrect recovery passphrase");
                     content = <div>
                         <p>{_t(
-                            "Backup could not be decrypted with this passphrase: " +
+                            "Backup could not be decrypted with this recovery passphrase: " +
                             "please verify that you entered the correct recovery passphrase.",
                         )}</p>
                     </div>;

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

@@ -119,14 +119,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter secret storage passphrase");
+            title = _t("Enter recovery passphrase");
 
             let keyStatus;
             if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct passphrase.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery passphrase.",
                     )}
                 </div>;
             } else {
@@ -135,13 +135,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your passphrase.",
+                    "identity for verifying other sessions by entering your recovery passphrase.",
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -164,7 +163,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     />
                 </form>
                 {_t(
-                    "If you've forgotten your passphrase you can "+
+                    "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
                     "<button2>set up new recovery options</button2>."
                 , {}, {
@@ -183,7 +182,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter secret storage recovery key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -193,8 +192,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct recovery key.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery key.",
                     )}
                 </div>;
             } else if (this.state.recoveryKeyValid) {
@@ -209,8 +208,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
                 <p>{_t(

src/components/views/elements/AppTile.js

@@ -136,22 +136,21 @@ export default class AppTile extends React.Component {
      * If url can not be parsed, it is returned unmodified.
      */
     _addWurlParams(urlString) {
-        const u = url.parse(urlString);
-        if (!u) {
-            console.error("_addWurlParams", "Invalid URL", urlString);
-            return url;
+        try {
+            const parsed = new URL(urlString);
+
+            // TODO: Replace these with proper widget params
+            // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
+            parsed.searchParams.set('widgetId', this.props.app.id);
+            parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
+
+            // Replace the encoded dollar signs back to dollar signs. They have no special meaning
+            // in HTTP, but URL parsers encode them anyways.
+            return parsed.toString().replace(/%24/g, '$');
+        } catch (e) {
+            console.error("Failed to add widget URL params:", e);
+            return urlString;
         }
-
-        const params = qs.parse(u.query);
-        // Append widget ID to query parameters
-        params.widgetId = this.props.app.id;
-        // Append current / parent URL, minus the hash because that will change when
-        // we view a different room (ie. may change for persistent widgets)
-        params.parentUrl = window.location.href.split('#', 2)[0];
-        u.search = undefined;
-        u.query = params;
-
-        return u.format();
     }
 
     isMixedContent() {
@@ -270,7 +269,9 @@ export default class AppTile extends React.Component {
             if (this.props.show && this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.show && !this.props.show) {
+        }
+
+        if (nextProps.show && !this.props.show) {
             // We assume that persisted widgets are loaded and don't need a spinner.
             if (this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey)) {
                 this.setState({
@@ -281,7 +282,9 @@ export default class AppTile extends React.Component {
             if (this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
+        }
+
+        if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
             this.setState({
                 widgetPageTitle: nextProps.widgetPageTitle,
             });
@@ -333,6 +336,28 @@ export default class AppTile extends React.Component {
             });
     }
 
+    /**
+     * Ends all widget interaction, such as cancelling calls and disabling webcams.
+     * @private
+     */
+    _endWidgetActions() {
+        // HACK: This is a really dirty way to ensure that Jitsi cleans up
+        // its hold on the webcam. Without this, the widget holds a media
+        // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+        if (this._appFrame.current) {
+            // In practice we could just do `+= ''` to trick the browser
+            // into thinking the URL changed, however I can foresee this
+            // being optimized out by a browser. Instead, we'll just point
+            // the iframe at a page that is reasonably safe to use in the
+            // event the iframe doesn't wink away.
+            // This is relative to where the Riot instance is located.
+            this._appFrame.current.src = 'about:blank';
+        }
+
+        // Delete the widget from the persisted store for good measure.
+        PersistedElement.destroyElement(this._persistKey);
+    }
+
     /* If user has permission to modify widgets, delete the widget,
      * otherwise revoke access for the widget to load in the user's browser
     */
@@ -354,18 +379,7 @@ export default class AppTile extends React.Component {
                     }
                     this.setState({deleting: true});
 
-                    // HACK: This is a really dirty way to ensure that Jitsi cleans up
-                    // its hold on the webcam. Without this, the widget holds a media
-                    // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
-                    if (this._appFrame.current) {
-                        // In practice we could just do `+= ''` to trick the browser
-                        // into thinking the URL changed, however I can foresee this
-                        // being optimized out by a browser. Instead, we'll just point
-                        // the iframe at a page that is reasonably safe to use in the
-                        // event the iframe doesn't wink away.
-                        // This is relative to where the Riot instance is located.
-                        this._appFrame.current.src = 'about:blank';
-                    }
+                    this._endWidgetActions();
 
                     WidgetUtils.setRoomWidget(
                         this.props.room.roomId,
@@ -530,6 +544,10 @@ export default class AppTile extends React.Component {
         if (this.props.userWidget) {
             this._onMinimiseClick();
         } else {
+            if (this.props.show) {
+                // if we were being shown, end the widget as we're about to be minimized.
+                this._endWidgetActions();
+            }
             dis.dispatch({
                 action: 'appsDrawer',
                 show: !this.props.show,

src/components/views/elements/ButtonPlaceholder.js

@@ -0,0 +1,19 @@
+/*
+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.
+*/
+
+export default function ButtonPlaceholder(props) {
+    return <div class="mx_ButtonPlaceholder">{props.children}</div>;
+}

src/components/views/elements/LabelledToggleSwitch.js

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

src/components/views/elements/LanguageDropdown.js

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

src/components/views/messages/MessageActionBar.js

@@ -26,6 +26,7 @@ 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();
@@ -48,7 +49,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         };
 
         let e2eInfoCallback = null;
-        if (mxEvent.isEncrypted()) {
+        if (mxEvent.isEncrypted() && !SettingsStore.getValue("feature_cross_signing")) {
             e2eInfoCallback = onCryptoClick;
         }
 

src/components/views/messages/TextualBody.js

@@ -34,6 +34,7 @@ import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext} from "../../../utils/strings";
 
 export default createReactClass({
     displayName: 'TextualBody',
@@ -69,23 +70,6 @@ export default createReactClass({
         };
     },
 
-    copyToClipboard: function(text) {
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        document.body.appendChild(textArea);
-        textArea.select();
-
-        let successful = false;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.log('Unable to copy');
-        }
-
-        document.body.removeChild(textArea);
-        return successful;
-    },
-
     // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._content = createRef();
@@ -277,17 +261,17 @@ export default createReactClass({
         Array.from(ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre')).forEach((p) => {
             const button = document.createElement("span");
             button.className = "mx_EventTile_copyButton";
-            button.onclick = (e) => {
-                const copyCode = button.parentNode.getElementsByTagName("code")[0];
-                const successful = this.copyToClipboard(copyCode.textContent);
+            button.onclick = async () => {
+                const copyCode = button.parentNode.getElementsByTagName("pre")[0];
+                const successful = await copyPlaintext(copyCode.textContent);
 
-                const buttonRect = e.target.getBoundingClientRect();
+                const buttonRect = button.getBoundingClientRect();
                 const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
                 const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
                     ...toRightOf(buttonRect, 2),
                     message: successful ? _t('Copied!') : _t('Failed to copy'),
                 });
-                e.target.onmouseleave = close;
+                button.onmouseleave = close;
             };
 
             // Wrap a div around <pre> so that the copy button can be correctly positioned

src/components/views/messages/TileErrorBoundary.js

@@ -0,0 +1,72 @@
+/*
+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 classNames from 'classnames';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import Modal from '../../../Modal';
+
+export default class TileErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Side effects are not permitted here, so we only update the state so
+        // that the next render shows an error message.
+        return { error };
+    }
+
+    _onBugReport = () => {
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        if (!BugReportDialog) {
+            return;
+        }
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
+            label: 'react-soft-crash-tile',
+        });
+    };
+
+    render() {
+        if (this.state.error) {
+            const { mxEvent } = this.props;
+            const classes = {
+                mx_EventTile: true,
+                mx_EventTile_info: true,
+                mx_EventTile_content: true,
+                mx_EventTile_tileError: true,
+            };
+            return (<div className={classNames(classes)}>
+                <div className="mx_EventTile_line">
+                    <span>
+                        {_t("Can't load this message")}
+                        { mxEvent && ` (${mxEvent.getType()})` }
+                        <a onClick={this._onBugReport} href="#">
+                            {_t("Submit logs")}
+                        </a>
+                    </span>
+                </div>
+            </div>);
+        }
+
+        return this.props.children;
+    }
+}

src/components/views/right_panel/EncryptionPanel.js

@@ -32,7 +32,7 @@ import {_t} from "../../../languageHandler";
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
 const EncryptionPanel = (props) => {
-    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted, inDialog} = props;
+    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -133,7 +133,7 @@ const EncryptionPanel = (props) => {
                 isSelfVerification={isSelfVerification}
                 waitingForOtherParty={requested && initiatedByMe}
                 waitingForNetwork={requested && !initiatedByMe}
-                inDialog={inDialog} />
+                inDialog={layout === "dialog"} />
         </React.Fragment>);
     } else {
         return (<React.Fragment>
@@ -145,7 +145,7 @@ const EncryptionPanel = (props) => {
                 member={member}
                 request={request}
                 key={request.channel.transactionId}
-                inDialog={inDialog}
+                inDialog={layout === "dialog"}
                 phase={phase}
                 device={device} />
         </React.Fragment>);

src/components/views/right_panel/UserInfo.js

@@ -63,7 +63,7 @@ const _disambiguateDevices = (devices) => {
 };
 
 export const getE2EStatus = (cli, userId, devices) => {
-    if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+    if (!SettingsStore.getValue("feature_cross_signing")) {
         const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
         return hasUnverifiedDevice ? "warning" : "verified";
     }
@@ -111,7 +111,7 @@ async function openDMForUser(matrixClient, userId) {
         dmUserId: userId,
     };
 
-    if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+    if (SettingsStore.getValue("feature_cross_signing")) {
         // Check whether all users have uploaded device keys before.
         // If so, enable encryption in the new room.
         const usersToDevicesMap = await matrixClient.downloadKeys([userId]);
@@ -166,7 +166,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.isFeatureEnabled("feature_cross_signing")) ?
+    const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
         deviceTrust.isCrossSigningVerified() :
         deviceTrust.isVerified();
 
@@ -237,7 +237,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.isFeatureEnabled("feature_cross_signing")) ?
+            const isVerified = (isMe && SettingsStore.getValue("feature_cross_signing")) ?
                 deviceTrust.isCrossSigningVerified() :
                 deviceTrust.isVerified();
 
@@ -1298,7 +1298,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.isFeatureEnabled("feature_cross_signing") &&
+    const canVerify = SettingsStore.getValue("feature_cross_signing") &&
                         homeserverSupportsCrossSigning && !userVerified && !isMe;
 
     const setUpdating = (updating) => {

src/components/views/room_settings/RoomPublishSetting.js

@@ -18,7 +18,9 @@ import React from 'react';
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {_t} from "../../../languageHandler";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+@replaceableComponent("views.room_settings.RoomPublishSetting")
 export default class RoomPublishSetting extends React.PureComponent {
     constructor(props) {
         super(props);

src/components/views/rooms/AppsDrawer.js

@@ -81,12 +81,14 @@ export default createReactClass({
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
+                // Note: these booleans are awkward because localstorage is fundamentally
+                // string-based. We also do exact equality on the strings later on.
                 if (action.show) {
-                    localStorage.removeItem(hideWidgetKey);
+                    localStorage.setItem(hideWidgetKey, "false");
                 } else {
                     // Store hidden state of widget
                     // Don't show if previously hidden
-                    localStorage.setItem(hideWidgetKey, true);
+                    localStorage.setItem(hideWidgetKey, "true");
                 }
 
                 break;

src/components/views/rooms/BasicMessageComposer.js

@@ -39,6 +39,7 @@ import EMOTICON_REGEX from 'emojibase-regex/emoticon';
 import * as sdk from '../../../index';
 import {Key} from "../../../Keyboard";
 import {EMOTICON_TO_EMOJI} from "../../../emoji";
+import {CommandCategories, CommandMap, parseCommandString} from "../../../SlashCommands";
 
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
 
@@ -84,6 +85,7 @@ export default class BasicMessageEditor extends React.Component {
         super(props);
         this.state = {
             autoComplete: null,
+            showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
         };
         this._editorRef = null;
         this._autocompleteRef = null;
@@ -92,10 +94,10 @@ export default class BasicMessageEditor extends React.Component {
         this._isIMEComposing = false;
         this._hasTextSelected = false;
         this._emoticonSettingHandle = null;
+        this._shouldShowPillAvatarSettingHandle = null;
     }
 
-    // TODO: [REACT-WARNING] Move into better lifecycle position
-    UNSAFE_componentWillUpdate(prevProps) { // eslint-disable-line camelcase
+    componentDidUpdate(prevProps) {
         if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
@@ -163,7 +165,16 @@ export default class BasicMessageEditor extends React.Component {
         }
         this.setState({autoComplete: this.props.model.autoComplete});
         this.historyManager.tryPush(this.props.model, selection, inputType, diff);
-        TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, !this.props.model.isEmpty);
+
+        let isTyping = !this.props.model.isEmpty;
+        // If the user is entering a command, only consider them typing if it is one which sends a message into the room
+        if (isTyping && this.props.model.parts[0].type === "command") {
+            const {cmd} = parseCommandString(this.props.model.parts[0].text);
+            if (!CommandMap.has(cmd) || CommandMap.get(cmd).category !== CommandCategories.messages) {
+                isTyping = false;
+            }
+        }
+        TypingStore.sharedInstance().setSelfTyping(this.props.room.roomId, isTyping);
 
         if (this.props.onChange) {
             this.props.onChange();
@@ -509,10 +520,15 @@ export default class BasicMessageEditor extends React.Component {
         this.setState({completionIndex});
     }
 
-    _configureEmoticonAutoReplace() {
+    _configureEmoticonAutoReplace = () => {
         const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
         this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null);
-    }
+    };
+
+    _configureShouldShowPillAvatar = () => {
+        const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
+        this.setState({ showPillAvatar });
+    };
 
     componentWillUnmount() {
         document.removeEventListener("selectionchange", this._onSelectionChange);
@@ -520,15 +536,17 @@ export default class BasicMessageEditor extends React.Component {
         this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
         this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
         SettingsStore.unwatchSetting(this._emoticonSettingHandle);
+        SettingsStore.unwatchSetting(this._shouldShowPillAvatarSettingHandle);
     }
 
     componentDidMount() {
         const model = this.props.model;
         model.setUpdateCallback(this._updateEditorState);
-        this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null, () => {
-            this._configureEmoticonAutoReplace();
-        });
+        this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
+            this._configureEmoticonAutoReplace);
         this._configureEmoticonAutoReplace();
+        this._shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
+            this._configureShouldShowPillAvatar);
         const partCreator = model.partCreator;
         // TODO: does this allow us to get rid of EditorStateTransfer?
         // not really, but we could not serialize the parts, and just change the autoCompleter
@@ -606,9 +624,12 @@ export default class BasicMessageEditor extends React.Component {
                 />
             </div>);
         }
-        const classes = classNames("mx_BasicMessageComposer", {
+        const wrapperClasses = classNames("mx_BasicMessageComposer", {
             "mx_BasicMessageComposer_input_error": this.state.showVisualBell,
         });
+        const classes = classNames("mx_BasicMessageComposer_input", {
+            "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+        });
 
         const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
         const shortcuts = {
@@ -619,11 +640,11 @@ export default class BasicMessageEditor extends React.Component {
 
         const {completionIndex} = this.state;
 
-        return (<div className={classes}>
+        return (<div className={wrapperClasses}>
             { autoComplete }
             <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
             <div
-                className="mx_BasicMessageComposer_input"
+                className={classes}
                 contentEditable="true"
                 tabIndex="0"
                 onBlur={this._onBlur}

src/components/views/rooms/E2EIcon.js

@@ -20,7 +20,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 
 import {_t, _td} from '../../../languageHandler';
-import {useFeatureEnabled} from "../../../hooks/useSettings";
+import {useSettingValue} from "../../../hooks/useSettings";
 import AccessibleButton from "../elements/AccessibleButton";
 import Tooltip from "../elements/Tooltip";
 
@@ -62,7 +62,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
     }, className);
 
     let e2eTitle;
-    const crossSigning = useFeatureEnabled("feature_cross_signing");
+    const crossSigning = useSettingValue("feature_cross_signing");
     if (crossSigning && isUser) {
         e2eTitle = crossSigningUserTitles[status];
     } else if (crossSigning && !isUser) {

src/components/views/rooms/EventTile.js

@@ -59,6 +59,7 @@ const stateEventTileTypes = {
     'm.room.power_levels': 'messages.TextualEvent',
     'm.room.pinned_events': 'messages.TextualEvent',
     'm.room.server_acl': 'messages.TextualEvent',
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     'im.vector.modular.widgets': 'messages.TextualEvent',
     'm.room.tombstone': 'messages.TextualEvent',
     'm.room.join_rules': 'messages.TextualEvent',
@@ -322,7 +323,7 @@ export default createReactClass({
 
         // If cross-signing is off, the old behaviour is to scream at the user
         // as if they've done something wrong, which they haven't
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             this.setState({
                 verified: E2E_STATE.WARNING,
             }, this.props.onHeightChanged);

src/components/views/rooms/MemberTile.js

@@ -56,7 +56,7 @@ export default createReactClass({
             }
         }
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             const { roomId } = this.props.member;
             if (roomId) {
                 const isRoomEncrypted = cli.isRoomEncrypted(roomId);

src/components/views/rooms/MessageComposer.js

@@ -270,7 +270,7 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             if (this.state.isQuoting) {
                 if (this.props.e2eStatus) {
                     return _t('Send an encrypted reply…');

src/components/views/rooms/RoomBreadcrumbs.js

@@ -363,17 +363,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 badge = <div className={badgeClasses}>{r.formattedCount}</div>;
             }
 
-            let dmIndicator;
-            if (this._isDmRoom(r.room) && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-                dmIndicator = <img
-                    src={require("../../../../res/img/icon_person.svg")}
-                    className="mx_RoomBreadcrumbs_dmIndicator"
-                    width="13"
-                    height="15"
-                    alt={_t("Direct Chat")}
-                />;
-            }
-
             return (
                 <AccessibleButton
                     className={classes}
@@ -385,7 +374,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 >
                     <RoomAvatar room={r.room} width={32} height={32} />
                     {badge}
-                    {dmIndicator}
                     {tooltip}
                 </AccessibleButton>
             );

src/components/views/rooms/RoomHeader.js

@@ -168,7 +168,7 @@ 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.isFeatureEnabled("feature_cross_signing")) {
+        if (!dmUserId && SettingsStore.getValue("feature_cross_signing")) {
             if (joinRule == "invite") {
                 privateIcon = <InviteOnlyIcon />;
             }

src/components/views/rooms/RoomTile.js

@@ -130,6 +130,10 @@ export default createReactClass({
         this._updateE2eStatus();
     },
 
+    onCrossSigningKeysChanged: function() {
+        this._updateE2eStatus();
+    },
+
     onRoomTimeline: function(ev, room) {
         if (!room) return;
         if (room.roomId != this.props.room.roomId) return;
@@ -142,7 +146,7 @@ export default createReactClass({
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
         cli.on("userTrustStatusChanged", this.onUserVerificationChanged);
-
+        cli.on("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
         this._updateE2eStatus();
     },
 
@@ -151,7 +155,7 @@ export default createReactClass({
         if (!cli.isRoomEncrypted(this.props.room.roomId)) {
             return;
         }
-        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (!SettingsStore.getValue("feature_cross_signing")) {
             return;
         }
 
@@ -267,6 +271,7 @@ export default createReactClass({
             cli.removeListener("RoomState.events", this.onJoinRule);
             cli.removeListener("RoomState.members", this.onRoomStateMember);
             cli.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
+            cli.removeListener("crossSigning.keysChanged", this.onCrossSigningKeysChanged);
             cli.removeListener("Room.timeline", this.onRoomTimeline);
         }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
@@ -479,26 +484,10 @@ export default createReactClass({
 
         let ariaLabel = name;
 
-        let dmIndicator;
         let dmOnline;
-        /* Post-cross-signing we don't show DM indicators at all, instead relying on user
-           context to let them know when that is. */
-        if (dmUserId && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            dmIndicator = <img
-                src={require("../../../../res/img/icon_person.svg")}
-                className="mx_RoomTile_dm"
-                width="11"
-                height="13"
-                alt="dm"
-            />;
-        }
-
         const { room } = this.props;
         const member = room.getMember(dmUserId);
-        if (
-            member && member.membership === "join" && room.getJoinedMemberCount() === 2 &&
-            SettingsStore.isFeatureEnabled("feature_presence_in_room_list")
-        ) {
+        if (member && member.membership === "join" && room.getJoinedMemberCount() === 2) {
             const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot');
             dmOnline = <UserOnlineDot userId={dmUserId} />;
         }
@@ -527,7 +516,7 @@ export default createReactClass({
         }
 
         let privateIcon = null;
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             if (this.state.joinRule == "invite" && !dmUserId) {
                 privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
             }
@@ -557,7 +546,6 @@ export default createReactClass({
                         <div className={avatarClasses}>
                             <div className="mx_RoomTile_avatar_container">
                                 <RoomAvatar room={this.props.room} width={24} height={24} />
-                                { dmIndicator }
                                 { e2eIcon }
                             </div>
                         </div>

src/components/views/rooms/Stickerpicker.js

@@ -246,6 +246,7 @@ export default class Stickerpicker extends React.Component {
                 url: stickerpickerWidget.content.url,
                 name: stickerpickerWidget.content.name,
                 type: stickerpickerWidget.content.type,
+                data: stickerpickerWidget.content.data,
             };
 
             stickersContent = (

src/components/views/settings/CrossSigningPanel.js

@@ -81,7 +81,9 @@ export default class CrossSigningPanel extends React.PureComponent {
         const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage);
         const selfSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("self_signing"));
         const userSigningPrivateKeyCached = !!(pkCache && await pkCache.getCrossSigningKeyCache("user_signing"));
-        const sessionBackupKeyCached = !!(await cli._crypto.getSessionBackupPrivateKey());
+        const sessionBackupKeyFromCache = await cli._crypto.getSessionBackupPrivateKey();
+        const sessionBackupKeyCached = !!(sessionBackupKeyFromCache);
+        const sessionBackupKeyWellFormed = sessionBackupKeyFromCache instanceof Uint8Array;
         const secretStorageKeyInAccount = await secretStorage.hasKey();
         const homeserverSupportsCrossSigning =
             await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
@@ -94,6 +96,7 @@ export default class CrossSigningPanel extends React.PureComponent {
             selfSigningPrivateKeyCached,
             userSigningPrivateKeyCached,
             sessionBackupKeyCached,
+            sessionBackupKeyWellFormed,
             secretStorageKeyInAccount,
             homeserverSupportsCrossSigning,
             crossSigningReady,
@@ -143,6 +146,7 @@ export default class CrossSigningPanel extends React.PureComponent {
             selfSigningPrivateKeyCached,
             userSigningPrivateKeyCached,
             sessionBackupKeyCached,
+            sessionBackupKeyWellFormed,
             secretStorageKeyInAccount,
             homeserverSupportsCrossSigning,
             crossSigningReady,
@@ -208,6 +212,16 @@ export default class CrossSigningPanel extends React.PureComponent {
             );
         }
 
+        let sessionBackupKeyWellFormedText = "";
+        if (sessionBackupKeyCached) {
+            sessionBackupKeyWellFormedText = ", ";
+            if (sessionBackupKeyWellFormed) {
+                sessionBackupKeyWellFormedText += _t("well formed");
+            } else {
+                sessionBackupKeyWellFormedText += _t("unexpected type");
+            }
+        }
+
         return (
             <div>
                 {summarisedStatus}
@@ -232,7 +246,10 @@ export default class CrossSigningPanel extends React.PureComponent {
                         </tr>
                         <tr>
                             <td>{_t("Session backup key:")}</td>
-                            <td>{sessionBackupKeyCached ? _t("cached locally") : _t("not found locally")}</td>
+                            <td>
+                                {sessionBackupKeyCached ? _t("cached locally") : _t("not found locally")}
+                                {sessionBackupKeyWellFormedText}
+                            </td>
                         </tr>
                         <tr>
                             <td>{_t("Secret storage public key:")}</td>

src/components/views/settings/DevicesPanel.js

@@ -124,17 +124,22 @@ export default class DevicesPanel extends React.Component {
             // pop up an interactive auth dialog
             const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
+            const numDevices = this.state.selectedDevices.length;
             const dialogAesthetics = {
                 [SSOAuthEntry.PHASE_PREAUTH]: {
                     title: _t("Use Single Sign On to continue"),
-                    body: _t("Confirm deleting these sessions by using Single Sign On to prove your identity."),
+                    body: _t("Confirm deleting these sessions by using Single Sign On to prove your identity.", {
+                        count: numDevices,
+                    }),
                     continueText: _t("Single Sign On"),
                     continueKind: "primary",
                 },
                 [SSOAuthEntry.PHASE_POSTAUTH]: {
                     title: _t("Confirm deleting these sessions"),
-                    body: _t("Click the button below to confirm deleting these sessions."),
-                    continueText: _t("Delete sessions"),
+                    body: _t("Click the button below to confirm deleting these sessions.", {
+                        count: numDevices,
+                    }),
+                    continueText: _t("Delete sessions", {count: numDevices}),
                     continueKind: "danger",
                 },
             };

src/components/views/settings/KeyBackupPanel.js

@@ -75,7 +75,7 @@ export default class KeyBackupPanel extends React.PureComponent {
     async _checkKeyBackupStatus() {
         try {
             const {backupInfo, trustInfo} = await MatrixClientPeg.get().checkKeyBackup();
-            const backupKeyStored = await MatrixClientPeg.get().isKeyBackupKeyStored();
+            const backupKeyStored = Boolean(await MatrixClientPeg.get().isKeyBackupKeyStored());
             this.setState({
                 backupInfo,
                 backupSigStatus: trustInfo,
@@ -326,7 +326,7 @@ export default class KeyBackupPanel extends React.PureComponent {
                     </AccessibleButton>
                 </div>
             );
-            if (this.state.backupKeyStored && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            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 " +

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

@@ -33,6 +33,7 @@ const plEventsToLabels = {
     "m.room.tombstone": _td("Upgrade the room"),
     "m.room.encryption": _td("Enable room encryption"),
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     "im.vector.modular.widgets": _td("Modify widgets"),
 };
 
@@ -47,6 +48,7 @@ const plEventsToShow = {
     "m.room.tombstone": {isState: true},
     "m.room.encryption": {isState: true},
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     "im.vector.modular.widgets": {isState: true},
 };
 

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

@@ -270,7 +270,7 @@ export default class SecurityUserSettingsTab extends React.Component {
         // can remove this.
         const CrossSigningPanel = sdk.getComponent('views.settings.CrossSigningPanel');
         let crossSigning;
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (SettingsStore.getValue("feature_cross_signing")) {
             crossSigning = (
                 <div className='mx_SettingsTab_section'>
                     <span className="mx_SettingsTab_subheading">{_t("Cross-signing")}</span>

src/components/views/toasts/SetupEncryptionToast.js

@@ -63,7 +63,9 @@ export default class SetupEncryptionToast extends React.PureComponent {
                 {}, null, /* priority = */ false, /* static = */ true);
         } else {
             const Spinner = sdk.getComponent("elements.Spinner");
-            const modal = Modal.createDialog(Spinner, null, 'mx_Dialog_spinner');
+            const modal = Modal.createDialog(
+                Spinner, null, 'mx_Dialog_spinner', /* priority */ false, /* static */ true,
+            );
             try {
                 await accessSecretStorage();
                 await this._waitForCompletion();

src/components/views/verification/VerificationQREmojiOptions.js

@@ -20,8 +20,8 @@ import { _t } from '../../../languageHandler';
 import AccessibleButton from "../elements/AccessibleButton";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 import VerificationQRCode from "../elements/crypto/VerificationQRCode";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
+import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
 @replaceableComponent("views.verification.VerificationQREmojiOptions")
 export default class VerificationQREmojiOptions extends React.Component {
@@ -31,31 +31,17 @@ export default class VerificationQREmojiOptions extends React.Component {
         onStartEmoji: PropTypes.func.isRequired,
     };
 
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            qrProps: null,
-        };
-
-        this._prepareQrCode(props.request);
-    }
-
-    async _prepareQrCode(request: VerificationRequest) {
-        try {
-            const props = await VerificationQRCode.getPropsForRequest(request);
-            this.setState({qrProps: props});
-        } catch (e) {
-            console.error(e);
-            // We just won't show a QR code
-        }
-    }
-
     render() {
-        let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
-        if (this.state.qrProps) {
-            qrCode = <VerificationQRCode {...this.state.qrProps} />;
+        const {request} = this.props;
+        const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
+
+        let qrCode;
+        if (showQR) {
+            qrCode = <VerificationQRCode qrCodeData={request.qrCodeData} />;
+        } else {
+            qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
         }
+
         return (
             <div>
                 {_t("Verify this session by completing one of the following:")}

src/components/views/verification/VerificationShowSas.js

@@ -20,6 +20,7 @@ import { _t, _td } from '../../../languageHandler';
 import {PendingActionSpinner} from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 import DialogButtons from "../elements/DialogButtons";
+import { fixupColorFonts } from '../../../utils/FontManager';
 
 function capFirst(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -44,6 +45,13 @@ export default class VerificationShowSas extends React.Component {
         };
     }
 
+    componentWillMount() {
+        // As this component is also used before login (during complete security),
+        // also make sure we have a working emoji font to display the SAS emojis here.
+        // This is also done from LoggedInView.
+        fixupColorFonts();
+    }
+
     onMatchClick = () => {
         this.setState({ pending: true });
         this.props.onDone();
@@ -125,19 +133,19 @@ export default class VerificationShowSas extends React.Component {
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
                 onPrimaryButtonClick={this.onMatchClick}
-                primaryButtonClass="mx_UserInfo_wideButton"
+                primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
                 cancelButton={_t("They don't match")}
                 onCancel={this.onDontMatchClick}
-                cancelButtonClass="mx_UserInfo_wideButton"
+                cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
             />;
         } else {
             confirm = <React.Fragment>
-                <AccessibleButton onClick={this.onMatchClick} kind="primary">
-                    { _t("They match") }
-                </AccessibleButton>
                 <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
                     { _t("They don't match") }
                 </AccessibleButton>
+                <AccessibleButton onClick={this.onMatchClick} kind="primary">
+                    { _t("They match") }
+                </AccessibleButton>
             </React.Fragment>;
         }