Merge branches 'develop' and 't3chguy/emoji_picker_composer' of github.com:matrix-org/matrix-react-sdk into t3chguy/emoji_picker_composer

 Conflicts:

	src/components/views/rooms/MessageComposer.js

src/@types/global.d.ts

@@ -0,0 +1,62 @@
+/*
+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 ModernizrStatic from "modernizr";
+import ContentMessages from "../ContentMessages";
+import { IMatrixClientPeg } from "../MatrixClientPeg";
+import ToastStore from "../stores/ToastStore";
+import DeviceListener from "../DeviceListener";
+
+declare global {
+    interface Window {
+        Modernizr: ModernizrStatic;
+        mxMatrixClientPeg: IMatrixClientPeg;
+        Olm: {
+            init: () => Promise<void>;
+        };
+
+        mx_ContentMessages: ContentMessages;
+        mx_ToastStore: ToastStore;
+        mx_DeviceListener: DeviceListener;
+    }
+
+    // workaround for https://github.com/microsoft/TypeScript/issues/30933
+    interface ObjectConstructor {
+        fromEntries?(xs: [string|number|symbol, any][]): object
+    }
+
+    interface Document {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
+        hasStorageAccess?: () => Promise<boolean>;
+    }
+
+    interface StorageEstimate {
+        usageDetails?: {[key: string]: number};
+    }
+
+    export interface ISettledFulfilled<T> {
+        status: "fulfilled";
+        value: T;
+    }
+    export interface ISettledRejected {
+        status: "rejected";
+        reason: any;
+    }
+
+    interface PromiseConstructor {
+        allSettled<T>(promises: Promise<T>[]): Promise<Array<ISettledFulfilled<T> | ISettledRejected>>;
+    }
+}

src/AddThreepid.js

@@ -16,11 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './index';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';
+import {SSOAuthEntry} from "./components/views/auth/InteractiveAuthEntryComponents";
 
 function getIdServerDomain() {
     return MatrixClientPeg.get().idBaseUrl.split("://")[1];
@@ -188,11 +189,31 @@ export default class AddThreepid {
                         // pop up an interactive auth dialog
                         const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
+
+                        const dialogAesthetics = {
+                            [SSOAuthEntry.PHASE_PREAUTH]: {
+                                title: _t("Use Single Sign On to continue"),
+                                body: _t("Confirm adding this email address by using " +
+                                    "Single Sign On to prove your identity."),
+                                continueText: _t("Single Sign On"),
+                                continueKind: "primary",
+                            },
+                            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                                title: _t("Confirm adding email"),
+                                body: _t("Click the button below to confirm adding this email address."),
+                                continueText: _t("Confirm"),
+                                continueKind: "primary",
+                            },
+                        };
                         const { finished } = Modal.createTrackedDialog('Add Email', '', InteractiveAuthDialog, {
                             title: _t("Add Email Address"),
                             matrixClient: MatrixClientPeg.get(),
                             authData: e.data,
                             makeRequest: this._makeAddThreepidOnlyRequest,
+                            aestheticsForStagePhases: {
+                                [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                                [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                            },
                         });
                         return finished;
                     }
@@ -285,11 +306,30 @@ export default class AddThreepid {
                     // pop up an interactive auth dialog
                     const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
+                    const dialogAesthetics = {
+                        [SSOAuthEntry.PHASE_PREAUTH]: {
+                            title: _t("Use Single Sign On to continue"),
+                            body: _t("Confirm adding this phone number by using " +
+                                "Single Sign On to prove your identity."),
+                            continueText: _t("Single Sign On"),
+                            continueKind: "primary",
+                        },
+                        [SSOAuthEntry.PHASE_POSTAUTH]: {
+                            title: _t("Confirm adding phone number"),
+                            body: _t("Click the button below to confirm adding this phone number."),
+                            continueText: _t("Confirm"),
+                            continueKind: "primary",
+                        },
+                    };
                     const { finished } = Modal.createTrackedDialog('Add MSISDN', '', InteractiveAuthDialog, {
                         title: _t("Add Phone Number"),
                         matrixClient: MatrixClientPeg.get(),
                         authData: e.data,
                         makeRequest: this._makeAddThreepidOnlyRequest,
+                        aestheticsForStagePhases: {
+                            [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                        },
                     });
                     return finished;
                 }

src/Analytics.js

@@ -1,24 +1,27 @@
 /*
- Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
+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
+    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.
- */
+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 { getCurrentLanguage, _t, _td } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 
 const hashRegex = /#\/(groups?|room|user|settings|register|login|forgot_password|home|directory)/;
 const hashVarRegex = /#\/(group|room|user)\/.*$/;
@@ -54,6 +57,8 @@ function getRedactedUrl() {
 }
 
 const customVariables = {
+    // The Matomo installation at https://matomo.riot.im is currently configured
+    // with a limit of 10 custom variables.
     'App Platform': {
         id: 1,
         expl: _td('The platform you\'re on'),
@@ -61,7 +66,7 @@ const customVariables = {
     },
     'App Version': {
         id: 2,
-        expl: _td('The version of Riot.im'),
+        expl: _td('The version of Riot'),
         example: '15.0.0',
     },
     'User Type': {
@@ -84,20 +89,25 @@ const customVariables = {
         expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
         example: 'off',
     },
-    'Breadcrumbs': {
-        id: 9,
-        expl: _td("Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)"),
-        example: 'disabled',
-    },
     'Homeserver URL': {
         id: 7,
         expl: _td('Your homeserver\'s URL'),
         example: 'https://matrix.org',
     },
-    'Identity Server URL': {
+    'Touch Input': {
         id: 8,
-        expl: _td('Your identity server\'s URL'),
-        example: 'https://vector.im',
+        expl: _td("Whether you're using Riot on a device where touch is the primary input mechanism"),
+        example: 'false',
+    },
+    'Breadcrumbs': {
+        id: 9,
+        expl: _td("Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)"),
+        example: 'disabled',
+    },
+    'Installed PWA': {
+        id: 10,
+        expl: _td("Whether you're using Riot as an installed Progressive Web App"),
+        example: 'false',
     },
 };
 
@@ -106,61 +116,82 @@ function whitelistRedact(whitelist, str) {
     return '<redacted>';
 }
 
+const UID_KEY = "mx_Riot_Analytics_uid";
+const CREATION_TS_KEY = "mx_Riot_Analytics_cts";
+const VISIT_COUNT_KEY = "mx_Riot_Analytics_vc";
+const LAST_VISIT_TS_KEY = "mx_Riot_Analytics_lvts";
+
+function getUid() {
+    try {
+        let data = localStorage && localStorage.getItem(UID_KEY);
+        if (!data && localStorage) {
+            localStorage.setItem(UID_KEY, data = [...Array(16)].map(() => Math.random().toString(16)[2]).join(''));
+        }
+        return data;
+    } catch (e) {
+        console.error("Analytics error: ", e);
+        return "";
+    }
+}
+
+const HEARTBEAT_INTERVAL = 30 * 1000; // seconds
+
 class Analytics {
     constructor() {
-        this._paq = null;
-        this.disabled = true;
+        this.baseUrl = null;
+        this.siteId = null;
+        this.visitVariables = {};
+
         this.firstPage = true;
+        this._heartbeatIntervalID = null;
+
+        this.creationTs = localStorage && localStorage.getItem(CREATION_TS_KEY);
+        if (!this.creationTs && localStorage) {
+            localStorage.setItem(CREATION_TS_KEY, this.creationTs = new Date().getTime());
+        }
+
+        this.lastVisitTs = localStorage && localStorage.getItem(LAST_VISIT_TS_KEY);
+        this.visitCount = localStorage && localStorage.getItem(VISIT_COUNT_KEY) || 0;
+        if (localStorage) {
+            localStorage.setItem(VISIT_COUNT_KEY, parseInt(this.visitCount, 10) + 1);
+        }
+    }
+
+    get disabled() {
+        return !this.baseUrl;
     }
 
     /**
      * Enable Analytics if initialized but disabled
      * otherwise try and initalize, no-op if piwik config missing
      */
-    enable() {
-        if (this._paq || this._init()) {
-            this.disabled = false;
-        }
-    }
+    async enable() {
+        if (!this.disabled) return;
 
-    /**
-     * Disable Analytics calls, will not fully unload Piwik until a refresh,
-     * but this is second best, Piwik should not pull anything implicitly.
-     */
-    disable() {
-        this.trackEvent('Analytics', 'opt-out');
-        // disableHeartBeatTimer is undocumented but exists in the piwik code
-        // the _paq.push method will result in an error being printed in the console
-        // if an unknown method signature is passed
-        this._paq.push(['disableHeartBeatTimer']);
-        this.disabled = true;
-    }
-
-    _init() {
         const config = SdkConfig.get();
         if (!config || !config.piwik || !config.piwik.url || !config.piwik.siteId) return;
 
-        const url = config.piwik.url;
-        const siteId = config.piwik.siteId;
-        const self = this;
-
-        window._paq = this._paq = window._paq || [];
-
-        this._paq.push(['setTrackerUrl', url+'piwik.php']);
-        this._paq.push(['setSiteId', siteId]);
-
-        this._paq.push(['trackAllContentImpressions']);
-        this._paq.push(['discardHashTag', false]);
-        this._paq.push(['enableHeartBeatTimer']);
-        // this._paq.push(['enableLinkTracking', true]);
+        this.baseUrl = new URL("piwik.php", config.piwik.url);
+        // set constants
+        this.baseUrl.searchParams.set("rec", 1); // rec is required for tracking
+        this.baseUrl.searchParams.set("idsite", config.piwik.siteId); // rec is required for tracking
+        this.baseUrl.searchParams.set("apiv", 1); // API version to use
+        this.baseUrl.searchParams.set("send_image", 0); // we want a 204, not a tiny GIF
+        // set user parameters
+        this.baseUrl.searchParams.set("_id", getUid()); // uuid
+        this.baseUrl.searchParams.set("_idts", this.creationTs); // first ts
+        this.baseUrl.searchParams.set("_idvc", parseInt(this.visitCount, 10)+ 1); // visit count
+        if (this.lastVisitTs) {
+            this.baseUrl.searchParams.set("_viewts", this.lastVisitTs); // last visit ts
+        }
 
         const platform = PlatformPeg.get();
         this._setVisitVariable('App Platform', platform.getHumanReadableName());
-        platform.getAppVersion().then((version) => {
-            this._setVisitVariable('App Version', version);
-        }).catch(() => {
+        try {
+            this._setVisitVariable('App Version', await platform.getAppVersion());
+        } catch (e) {
             this._setVisitVariable('App Version', 'unknown');
-        });
+        }
 
         this._setVisitVariable('Chosen Language', getCurrentLanguage());
 
@@ -168,20 +199,77 @@ class Analytics {
             this._setVisitVariable('Instance', window.location.pathname);
         }
 
-        (function() {
-            const g = document.createElement('script');
-            const s = document.getElementsByTagName('script')[0];
-            g.type='text/javascript'; g.async=true; g.defer=true; g.src=url+'piwik.js';
+        let installedPWA = "unknown";
+        try {
+            // Known to work at least for desktop Chrome
+            installedPWA = window.matchMedia('(display-mode: standalone)').matches;
+        } catch (e) { }
+        this._setVisitVariable('Installed PWA', installedPWA);
 
-            g.onload = function() {
-                console.log('Initialised anonymous analytics');
-                self._paq = window._paq;
-            };
+        let touchInput = "unknown";
+        try {
+            // MDN claims broad support across browsers
+            touchInput = window.matchMedia('(pointer: coarse)').matches;
+        } catch (e) { }
+        this._setVisitVariable('Touch Input', touchInput);
 
-            s.parentNode.insertBefore(g, s);
-        })();
+        // start heartbeat
+        this._heartbeatIntervalID = window.setInterval(this.ping.bind(this), HEARTBEAT_INTERVAL);
+    }
 
-        return true;
+    /**
+     * Disable Analytics, stop the heartbeat and clear identifiers from localStorage
+     */
+    disable() {
+        if (this.disabled) return;
+        this.trackEvent('Analytics', 'opt-out');
+        window.clearInterval(this._heartbeatIntervalID);
+        this.baseUrl = null;
+        this.visitVariables = {};
+        localStorage.removeItem(UID_KEY);
+        localStorage.removeItem(CREATION_TS_KEY);
+        localStorage.removeItem(VISIT_COUNT_KEY);
+        localStorage.removeItem(LAST_VISIT_TS_KEY);
+    }
+
+    async _track(data) {
+        if (this.disabled) return;
+
+        const now = new Date();
+        const params = {
+            ...data,
+            url: getRedactedUrl(),
+
+            _cvar: JSON.stringify(this.visitVariables), // user custom vars
+            res: `${window.screen.width}x${window.screen.height}`, // resolution as WWWWxHHHH
+            rand: String(Math.random()).slice(2, 8), // random nonce to cache-bust
+            h: now.getHours(),
+            m: now.getMinutes(),
+            s: now.getSeconds(),
+        };
+
+        const url = new URL(this.baseUrl);
+        for (const key in params) {
+            url.searchParams.set(key, params[key]);
+        }
+
+        try {
+            await window.fetch(url, {
+                method: "GET",
+                mode: "no-cors",
+                cache: "no-cache",
+                redirect: "follow",
+            });
+        } catch (e) {
+            console.error("Analytics error: ", e);
+        }
+    }
+
+    ping() {
+        this._track({
+            ping: 1,
+        });
+        localStorage.setItem(LAST_VISIT_TS_KEY, new Date().getTime()); // update last visit ts
     }
 
     trackPageChange(generationTimeMs) {
@@ -193,31 +281,29 @@ class Analytics {
             return;
         }
 
-        if (typeof generationTimeMs === 'number') {
-            this._paq.push(['setGenerationTimeMs', generationTimeMs]);
-        } else {
+        if (typeof generationTimeMs !== 'number') {
             console.warn('Analytics.trackPageChange: expected generationTimeMs to be a number');
             // But continue anyway because we still want to track the change
         }
 
-        this._paq.push(['setCustomUrl', getRedactedUrl()]);
-        this._paq.push(['trackPageView']);
+        this._track({
+            gt_ms: generationTimeMs,
+        });
     }
 
     trackEvent(category, action, name, value) {
         if (this.disabled) return;
-        this._paq.push(['setCustomUrl', getRedactedUrl()]);
-        this._paq.push(['trackEvent', category, action, name, value]);
-    }
-
-    logout() {
-        if (this.disabled) return;
-        this._paq.push(['deleteCookies']);
+        this._track({
+            e_c: category,
+            e_a: action,
+            e_n: name,
+            e_v: value,
+        });
     }
 
     _setVisitVariable(key, value) {
         if (this.disabled) return;
-        this._paq.push(['setCustomVariable', customVariables[key].id, key, value, 'visit']);
+        this.visitVariables[customVariables[key].id] = [key, value];
     }
 
     setLoggedIn(isGuest, homeserverUrl, identityServerUrl) {
@@ -227,16 +313,9 @@ class Analytics {
         if (!config.piwik) return;
 
         const whitelistedHSUrls = config.piwik.whitelistedHSUrls || [];
-        const whitelistedISUrls = config.piwik.whitelistedISUrls || [];
 
         this._setVisitVariable('User Type', isGuest ? 'Guest' : 'Logged In');
         this._setVisitVariable('Homeserver URL', whitelistRedact(whitelistedHSUrls, homeserverUrl));
-        this._setVisitVariable('Identity Server URL', whitelistRedact(whitelistedISUrls, identityServerUrl));
-    }
-
-    setRichtextMode(state) {
-        if (this.disabled) return;
-        this._setVisitVariable('RTE: Uses Richtext Mode', state ? 'on' : 'off');
     }
 
     setBreadcrumbs(state) {
@@ -244,13 +323,11 @@ class Analytics {
         this._setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
     }
 
-    showDetailsModal() {
+    showDetailsModal = () => {
         let rows = [];
-        if (window.Piwik) {
-            const Tracker = window.Piwik.getAsyncTracker();
-            rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+        if (!this.disabled) {
+            rows = Object.values(this.visitVariables);
         } else {
-            // Piwik may not have been enabled, so show example values
             rows = Object.keys(customVariables).map(
                 (k) => [
                     k,
@@ -271,7 +348,7 @@ class Analytics {
                     },
                 ),
             },
-            { expl: _td('Your User Agent'), value: navigator.userAgent },
+            { expl: _td('Your user agent'), value: navigator.userAgent },
             { expl: _td('Your device resolution'), value: resolution },
         ];
 
@@ -280,7 +357,7 @@ class Analytics {
             title: _t('Analytics'),
             description: <div className="mx_AnalyticsModal">
                 <div>
-                    { _t('The information being sent to us to help make Riot.im better includes:') }
+                    { _t('The information being sent to us to help make Riot better includes:') }
                 </div>
                 <table>
                     { rows.map((row) => <tr key={row[0]}>
@@ -300,10 +377,10 @@ class Analytics {
                 </div>
             </div>,
         });
-    }
+    };
 }
 
 if (!global.mxAnalytics) {
     global.mxAnalytics = new Analytics();
 }
-module.exports = global.mxAnalytics;
+export default global.mxAnalytics;

src/AsyncWrapper.js

@@ -0,0 +1,92 @@
+/*
+Copyright 2015, 2016 OpenMarket 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.
+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 createReactClass from 'create-react-class';
+import * as sdk from './index';
+import PropTypes from 'prop-types';
+import { _t } from './languageHandler';
+
+/**
+ * Wrap an asynchronous loader function with a react component which shows a
+ * spinner until the real component loads.
+ */
+export default createReactClass({
+    propTypes: {
+        /** A promise which resolves with the real component
+         */
+        prom: PropTypes.object.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            component: null,
+            error: null,
+        };
+    },
+
+    componentDidMount: function() {
+        this._unmounted = false;
+        // XXX: temporary logging to try to diagnose
+        // https://github.com/vector-im/riot-web/issues/3148
+        console.log('Starting load of AsyncWrapper for modal');
+        this.props.prom.then((result) => {
+            if (this._unmounted) {
+                return;
+            }
+            // Take the 'default' member if it's there, then we support
+            // passing in just an import()ed module, since ES6 async import
+            // always returns a module *namespace*.
+            const component = result.default ? result.default : result;
+            this.setState({component});
+        }).catch((e) => {
+            console.warn('AsyncWrapper promise failed', e);
+            this.setState({error: e});
+        });
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _onWrapperCancelClick: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        if (this.state.component) {
+            const Component = this.state.component;
+            return <Component {...this.props} />;
+        } else if (this.state.error) {
+            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            return <BaseDialog onFinished={this.props.onFinished}
+                title={_t("Error")}
+            >
+                {_t("Unable to load! Check your network connectivity and try again.")}
+                <DialogButtons primaryButton={_t("Dismiss")}
+                    onPrimaryButtonClick={this._onWrapperCancelClick}
+                    hasCancel={false}
+                />
+            </BaseDialog>;
+        } else {
+            // show a spinner until the component is loaded.
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+    },
+});
+

src/Avatar.js

@@ -15,13 +15,15 @@ limitations under the License.
 */
 
 'use strict';
-import {ContentRepo} from 'matrix-js-sdk';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import DMRoomMap from './utils/DMRoomMap';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
-module.exports = {
-    avatarUrlForMember: function(member, width, height, resizeMethod) {
-        let url = member.getAvatarUrl(
+// Not to be used for BaseAvatar urls as that has similar default avatar fallback already
+export function avatarUrlForMember(member, width, height, resizeMethod) {
+    let url;
+    if (member && member.getAvatarUrl) {
+        url = member.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             Math.floor(width * window.devicePixelRatio),
             Math.floor(height * window.devicePixelRatio),
@@ -29,106 +31,151 @@ module.exports = {
             false,
             false,
         );
-        if (!url) {
-            // member can be null here currently since on invites, the JS SDK
-            // does not have enough info to build a RoomMember object for
-            // the inviter.
-            url = this.defaultAvatarUrlForString(member ? member.userId : '');
+    }
+    if (!url) {
+        // member can be null here currently since on invites, the JS SDK
+        // does not have enough info to build a RoomMember object for
+        // the inviter.
+        url = defaultAvatarUrlForString(member ? member.userId : '');
+    }
+    return url;
+}
+
+export function avatarUrlForUser(user, width, height, resizeMethod) {
+    const url = getHttpUriForMxc(
+        MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
+        Math.floor(width * window.devicePixelRatio),
+        Math.floor(height * window.devicePixelRatio),
+        resizeMethod,
+    );
+    if (!url || url.length === 0) {
+        return null;
+    }
+    return url;
+}
+
+function isValidHexColor(color) {
+    return typeof color === "string" &&
+        (color.length === 7 || color.lengh === 9) &&
+        color.charAt(0) === "#" &&
+        !color.substr(1).split("").some(c => isNaN(parseInt(c, 16)));
+}
+
+function urlForColor(color) {
+    const size = 40;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    // bail out when using jsdom in unit tests
+    if (!ctx) {
+        return "";
+    }
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, size, size);
+    return canvas.toDataURL();
+}
+
+// XXX: Ideally we'd clear this cache when the theme changes
+// but since this function is at global scope, it's a bit
+// hard to install a listener here, even if there were a clear event to listen to
+const colorToDataURLCache = new Map();
+
+export function defaultAvatarUrlForString(s) {
+    const defaultColors = ['#03b381', '#368bd6', '#ac3ba8'];
+    let total = 0;
+    for (let i = 0; i < s.length; ++i) {
+        total += s.charCodeAt(i);
+    }
+    const colorIndex = total % defaultColors.length;
+    // overwritten color value in custom themes
+    const cssVariable = `--avatar-background-colors_${colorIndex}`;
+    const cssValue = document.body.style.getPropertyValue(cssVariable);
+    const color = cssValue || defaultColors[colorIndex];
+    let dataUrl = colorToDataURLCache.get(color);
+    if (!dataUrl) {
+        // validate color as this can come from account_data
+        // with custom theming
+        if (isValidHexColor(color)) {
+            dataUrl = urlForColor(color);
+            colorToDataURLCache.set(color, dataUrl);
+        } else {
+            dataUrl = "";
         }
-        return url;
-    },
+    }
+    return dataUrl;
+}
 
-    avatarUrlForUser: function(user, width, height, resizeMethod) {
-        const url = ContentRepo.getHttpUriForMxc(
-            MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
-            Math.floor(width * window.devicePixelRatio),
-            Math.floor(height * window.devicePixelRatio),
-            resizeMethod,
-        );
-        if (!url || url.length === 0) {
-            return null;
+/**
+ * returns the first (non-sigil) character of 'name',
+ * converted to uppercase
+ * @param {string} name
+ * @return {string} the first letter
+ */
+export function getInitialLetter(name) {
+    if (!name) {
+        // XXX: We should find out what causes the name to sometimes be falsy.
+        console.trace("`name` argument to `getInitialLetter` not supplied");
+        return undefined;
+    }
+    if (name.length < 1) {
+        return undefined;
+    }
+
+    let idx = 0;
+    const initial = name[0];
+    if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
+        idx++;
+    }
+
+    // string.codePointAt(0) would do this, but that isn't supported by
+    // some browsers (notably PhantomJS).
+    let chars = 1;
+    const first = name.charCodeAt(idx);
+
+    // check if it’s the start of a surrogate pair
+    if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
+        const second = name.charCodeAt(idx+1);
+        if (second >= 0xDC00 && second <= 0xDFFF) {
+            chars++;
         }
-        return url;
-    },
+    }
 
-    defaultAvatarUrlForString: function(s) {
-        const images = ['03b381', '368bd6', 'ac3ba8'];
-        let total = 0;
-        for (let i = 0; i < s.length; ++i) {
-            total += s.charCodeAt(i);
-        }
-        return require('../res/img/' + images[total % images.length] + '.png');
-    },
+    const firstChar = name.substring(idx, idx+chars);
+    return firstChar.toUpperCase();
+}
 
-    /**
-     * returns the first (non-sigil) character of 'name',
-     * converted to uppercase
-     * @param {string} name
-     * @return {string} the first letter
-     */
-    getInitialLetter(name) {
-        if (!name) {
-            // XXX: We should find out what causes the name to sometimes be falsy.
-            console.trace("`name` argument to `getInitialLetter` not supplied");
-            return undefined;
-        }
-        if (name.length < 1) {
-            return undefined;
-        }
+export function avatarUrlForRoom(room, width, height, resizeMethod) {
+    if (!room) return null; // null-guard
 
-        let idx = 0;
-        const initial = name[0];
-        if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
-            idx++;
-        }
+    const explicitRoomAvatar = room.getAvatarUrl(
+        MatrixClientPeg.get().getHomeserverUrl(),
+        width,
+        height,
+        resizeMethod,
+        false,
+    );
+    if (explicitRoomAvatar) {
+        return explicitRoomAvatar;
+    }
 
-        // string.codePointAt(0) would do this, but that isn't supported by
-        // some browsers (notably PhantomJS).
-        let chars = 1;
-        const first = name.charCodeAt(idx);
-
-        // check if it’s the start of a surrogate pair
-        if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
-            const second = name.charCodeAt(idx+1);
-            if (second >= 0xDC00 && second <= 0xDFFF) {
-                chars++;
-            }
-        }
-
-        const firstChar = name.substring(idx, idx+chars);
-        return firstChar.toUpperCase();
-    },
-
-    avatarUrlForRoom(room, width, height, resizeMethod) {
-        const explicitRoomAvatar = room.getAvatarUrl(
+    let otherMember = null;
+    const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+    if (otherUserId) {
+        otherMember = room.getMember(otherUserId);
+    } else {
+        // if the room is not marked as a 1:1, but only has max 2 members
+        // then still try to show any avatar (pref. other member)
+        otherMember = room.getAvatarFallbackMember();
+    }
+    if (otherMember) {
+        return otherMember.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             width,
             height,
             resizeMethod,
             false,
         );
-        if (explicitRoomAvatar) {
-            return explicitRoomAvatar;
-        }
-
-        let otherMember = null;
-        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-        if (otherUserId) {
-            otherMember = room.getMember(otherUserId);
-        } else {
-            // if the room is not marked as a 1:1, but only has max 2 members
-            // then still try to show any avatar (pref. other member)
-            otherMember = room.getAvatarFallbackMember();
-        }
-        if (otherMember) {
-            return otherMember.getAvatarUrl(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                width,
-                height,
-                resizeMethod,
-                false,
-            );
-        }
-        return null;
-    },
-};
+    }
+    return null;
+}

src/BasePlatform.js

@@ -1,165 +0,0 @@
-// @flow
-
-/*
-Copyright 2016 Aviral Dasgupta
-Copyright 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import dis from './dispatcher';
-import BaseEventIndexManager from './indexing/BaseEventIndexManager';
-
-/**
- * Base class for classes that provide platform-specific functionality
- * eg. Setting an application badge or displaying notifications
- *
- * Instances of this class are provided by the application.
- */
-export default class BasePlatform {
-    constructor() {
-        this.notificationCount = 0;
-        this.errorDidOccur = false;
-
-        dis.register(this._onAction.bind(this));
-    }
-
-    _onAction(payload: Object) {
-        switch (payload.action) {
-            case 'on_client_not_viable':
-            case 'on_logged_out':
-                this.setNotificationCount(0);
-                break;
-        }
-    }
-
-    // Used primarily for Analytics
-    getHumanReadableName(): string {
-        return 'Base Platform';
-    }
-
-    setNotificationCount(count: number) {
-        this.notificationCount = count;
-    }
-
-    setErrorStatus(errorDidOccur: boolean) {
-        this.errorDidOccur = errorDidOccur;
-    }
-
-    /**
-     * Returns true if the platform supports displaying
-     * notifications, otherwise false.
-     * @returns {boolean} whether the platform supports displaying notifications
-     */
-    supportsNotifications(): boolean {
-        return false;
-    }
-
-    /**
-     * Returns true if the application currently has permission
-     * to display notifications. Otherwise false.
-     * @returns {boolean} whether the application has permission to display notifications
-     */
-    maySendNotifications(): boolean {
-        return false;
-    }
-
-    /**
-     * Requests permission to send notifications. Returns
-     * a promise that is resolved when the user has responded
-     * to the request. The promise has a single string argument
-     * that is 'granted' if the user allowed the request or
-     * 'denied' otherwise.
-     */
-    requestNotificationPermission(): Promise<string> {
-    }
-
-    displayNotification(title: string, msg: string, avatarUrl: string, room: Object) {
-    }
-
-    loudNotification(ev: Event, room: Object) {
-    }
-
-    /**
-     * Returns a promise that resolves to a string representing
-     * the current version of the application.
-     */
-    getAppVersion(): Promise<string> {
-        throw new Error("getAppVersion not implemented!");
-    }
-
-    /*
-     * If it's not expected that capturing the screen will work
-     * with getUserMedia, return a string explaining why not.
-     * Otherwise, return null.
-     */
-    screenCaptureErrorString(): string {
-        return "Not implemented";
-    }
-
-    /**
-     * Restarts the application, without neccessarily reloading
-     * any application code
-     */
-    reload() {
-        throw new Error("reload not implemented!");
-    }
-
-    supportsAutoLaunch(): boolean {
-        return false;
-    }
-
-    // XXX: Surely this should be a setting like any other?
-    async getAutoLaunchEnabled(): boolean {
-        return false;
-    }
-
-    async setAutoLaunchEnabled(enabled: boolean): void {
-        throw new Error("Unimplemented");
-    }
-
-    supportsAutoHideMenuBar(): boolean {
-        return false;
-    }
-
-    async getAutoHideMenuBarEnabled(): boolean {
-        return false;
-    }
-
-    async setAutoHideMenuBarEnabled(enabled: boolean): void {
-        throw new Error("Unimplemented");
-    }
-
-    supportsMinimizeToTray(): boolean {
-        return false;
-    }
-
-    async getMinimizeToTrayEnabled(): boolean {
-        return false;
-    }
-
-    async setMinimizeToTrayEnabled(enabled: boolean): void {
-        throw new Error("Unimplemented");
-    }
-
-    /**
-     * Get our platform specific EventIndexManager.
-     *
-     * @return {BaseEventIndexManager} The EventIndex manager for our platform,
-     * can be null if the platform doesn't support event indexing.
-     */
-    getEventIndexingManager(): BaseEventIndexManager | null {
-        return null;
-    }
-}

src/BasePlatform.ts

@@ -0,0 +1,214 @@
+/*
+Copyright 2016 Aviral Dasgupta
+Copyright 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 {MatrixClient} from "matrix-js-sdk/src/client";
+import dis from './dispatcher/dispatcher';
+import BaseEventIndexManager from './indexing/BaseEventIndexManager';
+import {ActionPayload} from "./dispatcher/payloads";
+
+/**
+ * Base class for classes that provide platform-specific functionality
+ * eg. Setting an application badge or displaying notifications
+ *
+ * Instances of this class are provided by the application.
+ */
+export default abstract class BasePlatform {
+    protected notificationCount = 0;
+    protected errorDidOccur = false;
+
+    constructor() {
+        dis.register(this.onAction);
+    }
+
+    protected onAction = (payload: ActionPayload) => {
+        switch (payload.action) {
+            case 'on_client_not_viable':
+            case 'on_logged_out':
+                this.setNotificationCount(0);
+                break;
+        }
+    };
+
+    // Used primarily for Analytics
+    abstract getHumanReadableName(): string;
+
+    setNotificationCount(count: number) {
+        this.notificationCount = count;
+    }
+
+    setErrorStatus(errorDidOccur: boolean) {
+        this.errorDidOccur = errorDidOccur;
+    }
+
+    /**
+     * Returns true if the platform supports displaying
+     * notifications, otherwise false.
+     * @returns {boolean} whether the platform supports displaying notifications
+     */
+    supportsNotifications(): boolean {
+        return false;
+    }
+
+    /**
+     * Returns true if the application currently has permission
+     * to display notifications. Otherwise false.
+     * @returns {boolean} whether the application has permission to display notifications
+     */
+    maySendNotifications(): boolean {
+        return false;
+    }
+
+    /**
+     * Requests permission to send notifications. Returns
+     * a promise that is resolved when the user has responded
+     * to the request. The promise has a single string argument
+     * that is 'granted' if the user allowed the request or
+     * 'denied' otherwise.
+     */
+    abstract requestNotificationPermission(): Promise<string>;
+
+    abstract displayNotification(title: string, msg: string, avatarUrl: string, room: Object);
+
+    loudNotification(ev: Event, room: Object) {
+    };
+
+    /**
+     * Returns a promise that resolves to a string representing the current version of the application.
+     */
+    abstract getAppVersion(): Promise<string>;
+
+    /*
+     * If it's not expected that capturing the screen will work
+     * with getUserMedia, return a string explaining why not.
+     * Otherwise, return null.
+     */
+    screenCaptureErrorString(): string {
+        return "Not implemented";
+    }
+
+    /**
+     * Restarts the application, without neccessarily reloading
+     * any application code
+     */
+    abstract reload();
+
+    supportsAutoLaunch(): boolean {
+        return false;
+    }
+
+    // XXX: Surely this should be a setting like any other?
+    async getAutoLaunchEnabled(): Promise<boolean> {
+        return false;
+    }
+
+    async setAutoLaunchEnabled(enabled: boolean): Promise<void> {
+        throw new Error("Unimplemented");
+    }
+
+    supportsAutoHideMenuBar(): boolean {
+        return false;
+    }
+
+    async getAutoHideMenuBarEnabled(): Promise<boolean> {
+        return false;
+    }
+
+    async setAutoHideMenuBarEnabled(enabled: boolean): Promise<void> {
+        throw new Error("Unimplemented");
+    }
+
+    supportsMinimizeToTray(): boolean {
+        return false;
+    }
+
+    async getMinimizeToTrayEnabled(): Promise<boolean> {
+        return false;
+    }
+
+    async setMinimizeToTrayEnabled(enabled: boolean): Promise<void> {
+        throw new Error("Unimplemented");
+    }
+
+    /**
+     * Get our platform specific EventIndexManager.
+     *
+     * @return {BaseEventIndexManager} The EventIndex manager for our platform,
+     * can be null if the platform doesn't support event indexing.
+     */
+    getEventIndexingManager(): BaseEventIndexManager | null {
+        return null;
+    }
+
+    setLanguage(preferredLangs: string[]) {}
+
+    getSSOCallbackUrl(hsUrl: string, isUrl: string, fragmentAfterLogin: string): URL {
+        const url = new URL(window.location.href);
+        url.hash = fragmentAfterLogin || "";
+        url.searchParams.set("homeserver", hsUrl);
+        url.searchParams.set("identityServer", isUrl);
+        return url;
+    }
+
+    /**
+     * Begin Single Sign On flows.
+     * @param {MatrixClient} mxClient the matrix client using which we should start the flow
+     * @param {"sso"|"cas"} loginType the type of SSO it is, CAS/SSO.
+     * @param {string} fragmentAfterLogin the hash to pass to the app during sso callback.
+     */
+    startSingleSignOn(mxClient: MatrixClient, loginType: "sso" | "cas", fragmentAfterLogin: string) {
+        const callbackUrl = this.getSSOCallbackUrl(mxClient.getHomeserverUrl(), mxClient.getIdentityServerUrl(),
+            fragmentAfterLogin);
+        window.location.href = mxClient.getSsoLoginUrl(callbackUrl.toString(), loginType); // redirect to SSO
+    }
+
+    onKeyDown(ev: KeyboardEvent): boolean {
+        return false; // no shortcuts implemented
+    }
+
+    /**
+     * Get a previously stored pickle key.  The pickle key is used for
+     * encrypting libolm objects.
+     * @param {string} userId the user ID for the user that the pickle key is for.
+     * @param {string} userId the device ID that the pickle key is for.
+     * @returns {string|null} the previously stored pickle key, or null if no
+     *     pickle key has been stored.
+     */
+    async getPickleKey(userId: string, deviceId: string): Promise<string | null> {
+        return null;
+    }
+
+    /**
+     * Create and store a pickle key for encrypting libolm objects.
+     * @param {string} userId the user ID for the user that the pickle key is for.
+     * @param {string} userId the device ID that the pickle key is for.
+     * @returns {string|null} the pickle key, or null if the platform does not
+     *     support storing pickle keys.
+     */
+    async createPickleKey(userId: string, deviceId: string): Promise<string | null> {
+        return null;
+    }
+
+    /**
+     * Delete a previously stored pickle key from storage.
+     * @param {string} userId the user ID for the user that the pickle key is for.
+     * @param {string} userId the device ID that the pickle key is for.
+     */
+    async destroyPickleKey(userId: string, deviceId: string): Promise<void> {
+    }
+}

src/CallHandler.js

@@ -53,19 +53,20 @@ limitations under the License.
  * }
  */
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Matrix from 'matrix-js-sdk';
-import dis from './dispatcher';
-import SdkConfig from './SdkConfig';
+import dis from './dispatcher/dispatcher';
 import { showUnknownDeviceDialogForCalls } from './cryptodevices';
 import WidgetUtils from './utils/WidgetUtils';
 import WidgetEchoStore from './stores/WidgetEchoStore';
-import {IntegrationManagers} from "./integrations/IntegrationManagers";
 import SettingsStore, { SettingLevel } from './settings/SettingsStore';
+import {generateHumanReadableId} from "./utils/NamingUtils";
+import {Jitsi} from "./widgets/Jitsi";
+import {WidgetType} from "./widgets/WidgetType";
 
 global.mxCalls = {
     //room_id: MatrixCall
@@ -139,11 +140,11 @@ function _setCallListeners(call) {
             Modal.createTrackedDialog('Call Failed', '', QuestionDialog, {
                 title: _t('Call Failed'),
                 description: _t(
-                    "There are unknown devices in this room: "+
+                    "There are unknown sessions in this room: "+
                     "if you proceed without verifying them, it will be "+
                     "possible for someone to eavesdrop on your call.",
                 ),
-                button: _t('Review Devices'),
+                button: _t('Review Sessions'),
                 onFinished: function(confirmed) {
                     if (confirmed) {
                         const room = MatrixClientPeg.get().getRoom(call.roomId);
@@ -302,7 +303,7 @@ function _onAction(payload) {
     switch (payload.action) {
         case 'place_call':
             {
-                if (module.exports.getAnyActiveCall()) {
+                if (callHandler.getAnyActiveCall()) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
                         title: _t('Existing Call'),
@@ -355,7 +356,7 @@ function _onAction(payload) {
             break;
         case 'incoming_call':
             {
-                if (module.exports.getAnyActiveCall()) {
+                if (callHandler.getAnyActiveCall()) {
                     // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
                     // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
                     // in future we could signal a "local busy" as a warning to the caller.
@@ -395,41 +396,15 @@ function _onAction(payload) {
 }
 
 async function _startCallApp(roomId, type) {
-    // check for a working integration manager. Technically we could put
-    // the state event in anyway, but the resulting widget would then not
-    // work for us. Better that the user knows before everyone else in the
-    // room sees it.
-    const managers = IntegrationManagers.sharedInstance();
-    let haveScalar = false;
-    if (managers.hasManager()) {
-        try {
-            const scalarClient = managers.getPrimaryManager().getScalarClient();
-            await scalarClient.connect();
-            haveScalar = scalarClient.hasCredentials();
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    if (!haveScalar) {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-
-        Modal.createTrackedDialog('Could not connect to the integration server', '', ErrorDialog, {
-            title: _t('Could not connect to the integration server'),
-            description: _t('A conference call could not be started because the integrations server is not available'),
-        });
-        return;
-    }
-
     dis.dispatch({
         action: 'appsDrawer',
         show: true,
     });
 
     const room = MatrixClientPeg.get().getRoom(roomId);
-    const currentRoomWidgets = WidgetUtils.getRoomWidgets(room);
+    const currentJitsiWidgets = WidgetUtils.getRoomWidgetsOfType(room, WidgetType.JITSI);
 
-    if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentRoomWidgets, 'jitsi')) {
+    if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentJitsiWidgets, WidgetType.JITSI)) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
         Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, {
@@ -439,9 +414,6 @@ async function _startCallApp(roomId, type) {
         return;
     }
 
-    const currentJitsiWidgets = currentRoomWidgets.filter((ev) => {
-        return ev.getContent().type === 'jitsi';
-    });
     if (currentJitsiWidgets.length > 0) {
         console.warn(
             "Refusing to start conference call widget in " + roomId +
@@ -456,31 +428,22 @@ async function _startCallApp(roomId, type) {
         return;
     }
 
-    // This inherits its poor naming from the field of the same name that goes into
-    // the event. It's just a random string to make the Jitsi URLs unique.
-    const widgetSessionId = Math.random().toString(36).substring(2);
-    const confId = room.roomId.replace(/[^A-Za-z0-9]/g, '') + widgetSessionId;
-    // NB. we can't just encodeURICompoent all of these because the $ signs need to be there
-    // (but currently the only thing that needs encoding is the confId)
-    const queryString = [
-        'confId='+encodeURIComponent(confId),
-        'isAudioConf='+(type === 'voice' ? 'true' : 'false'),
-        'displayName=$matrix_display_name',
-        'avatarUrl=$matrix_avatar_url',
-        'email=$matrix_user_id',
-    ].join('&');
+    const confId = `JitsiConference${generateHumanReadableId()}`;
+    const jitsiDomain = Jitsi.getInstance().preferredDomain;
 
-    let widgetUrl;
-    if (SdkConfig.get().integrations_jitsi_widget_url) {
-        // Try this config key. This probably isn't ideal as a way of discovering this
-        // URL, but this will at least allow the integration manager to not be hardcoded.
-        widgetUrl = SdkConfig.get().integrations_jitsi_widget_url + '?' + queryString;
-    } else {
-        const apiUrl = IntegrationManagers.sharedInstance().getPrimaryManager().apiUrl;
-        widgetUrl = apiUrl + '/widgets/jitsi.html?' + queryString;
-    }
+    let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl();
 
-    const widgetData = { widgetSessionId };
+    // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets
+    const parsedUrl = new URL(widgetUrl);
+    parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead
+    parsedUrl.searchParams.set('confId', confId);
+    widgetUrl = parsedUrl.toString();
+
+    const widgetData = {
+        conferenceId: confId,
+        isAudioOnly: type === 'voice',
+        domain: jitsiDomain,
+    };
 
     const widgetId = (
         'jitsi_' +
@@ -489,7 +452,7 @@ async function _startCallApp(roomId, type) {
         Date.now()
     );
 
-    WidgetUtils.setRoomWidget(roomId, widgetId, 'jitsi', widgetUrl, 'Jitsi', widgetData).then(() => {
+    WidgetUtils.setRoomWidget(roomId, widgetId, WidgetType.JITSI, widgetUrl, 'Jitsi', widgetData).then(() => {
         console.log('Jitsi widget added');
     }).catch((e) => {
         if (e.errcode === 'M_FORBIDDEN') {
@@ -523,7 +486,7 @@ if (!global.mxCallHandler) {
 
 const callHandler = {
     getCallForRoom: function(roomId) {
-        let call = module.exports.getCall(roomId);
+        let call = callHandler.getCall(roomId);
         if (call) return call;
 
         if (ConferenceHandler) {
@@ -583,4 +546,4 @@ if (global.mxCallHandler === undefined) {
     global.mxCallHandler = callHandler;
 }
 
-module.exports = global.mxCallHandler;
+export default global.mxCallHandler;

src/ContentMessages.tsx

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,12 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
+import React from "react";
 import extend from './extend';
-import dis from './dispatcher';
-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './index';
+import dis from './dispatcher/dispatcher';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import RoomViewStore from './stores/RoomViewStore';
@@ -39,6 +40,50 @@ const PHYS_HIDPI = [0x00, 0x00, 0x16, 0x25, 0x00, 0x00, 0x16, 0x25, 0x01];
 
 export class UploadCanceledError extends Error {}
 
+type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
+
+interface IUpload {
+    fileName: string;
+    roomId: string;
+    total: number;
+    loaded: number;
+    promise: Promise<any>;
+    canceled?: boolean;
+}
+
+interface IMediaConfig {
+    "m.upload.size"?: number;
+}
+
+interface IContent {
+    body: string;
+    msgtype: string;
+    info: {
+        size: number;
+        mimetype?: string;
+    };
+    file?: string;
+    url?: string;
+}
+
+interface IThumbnail {
+    info: {
+        thumbnail_info: {
+            w: number;
+            h: number;
+            mimetype: string;
+            size: number;
+        };
+        w: number;
+        h: number;
+    };
+    thumbnail: Blob;
+}
+
+interface IAbortablePromise<T> extends Promise<T> {
+    abort(): void;
+}
+
 /**
  * Create a thumbnail for a image DOM element.
  * The image will be smaller than MAX_WIDTH and MAX_HEIGHT.
@@ -51,13 +96,13 @@ export class UploadCanceledError extends Error {}
  * about the original image and the thumbnail.
  *
  * @param {HTMLElement} element The element to thumbnail.
- * @param {integer} inputWidth The width of the image in the input element.
- * @param {integer} inputHeight the width of the image in the input element.
+ * @param {number} inputWidth The width of the image in the input element.
+ * @param {number} inputHeight the width of the image in the input element.
  * @param {String} mimeType The mimeType to save the blob as.
  * @return {Promise} A promise that resolves with an object with an info key
  *  and a thumbnail key.
  */
-function createThumbnail(element, inputWidth, inputHeight, mimeType) {
+function createThumbnail(element: ThumbnailableElement, inputWidth: number, inputHeight: number, mimeType: string): Promise<IThumbnail> {
     return new Promise((resolve) => {
         let targetWidth = inputWidth;
         let targetHeight = inputHeight;
@@ -98,7 +143,7 @@ function createThumbnail(element, inputWidth, inputHeight, mimeType) {
  * @param {File} imageFile The file to load in an image element.
  * @return {Promise} A promise that resolves with the html image element.
  */
-async function loadImageElement(imageFile) {
+async function loadImageElement(imageFile: File) {
     // Load the file into an html element
     const img = document.createElement("img");
     const objectUrl = URL.createObjectURL(imageFile);
@@ -128,8 +173,7 @@ async function loadImageElement(imageFile) {
             for (const chunk of chunks) {
                 if (chunk.name === 'pHYs') {
                     if (chunk.data.byteLength !== PHYS_HIDPI.length) return;
-                    const hidpi = chunk.data.every((val, i) => val === PHYS_HIDPI[i]);
-                    return hidpi;
+                    return chunk.data.every((val, i) => val === PHYS_HIDPI[i]);
                 }
             }
             return false;
@@ -152,7 +196,7 @@ async function loadImageElement(imageFile) {
  */
 function infoForImageFile(matrixClient, roomId, imageFile) {
     let thumbnailType = "image/png";
-    if (imageFile.type == "image/jpeg") {
+    if (imageFile.type === "image/jpeg") {
         thumbnailType = "image/jpeg";
     }
 
@@ -175,15 +219,15 @@ function infoForImageFile(matrixClient, roomId, imageFile) {
  * @param {File} videoFile The file to load in an video element.
  * @return {Promise} A promise that resolves with the video image element.
  */
-function loadVideoElement(videoFile) {
+function loadVideoElement(videoFile): Promise<HTMLVideoElement> {
     return new Promise((resolve, reject) => {
         // Load the file into an html element
         const video = document.createElement("video");
 
         const reader = new FileReader();
 
-        reader.onload = function(e) {
-            video.src = e.target.result;
+        reader.onload = function(ev) {
+            video.src = ev.target.result as string;
 
             // Once ready, returns its size
             // Wait until we have enough data to thumbnail the first frame.
@@ -231,11 +275,11 @@ function infoForVideoFile(matrixClient, roomId, videoFile) {
  * @return {Promise} A promise that resolves with an ArrayBuffer when the file
  *   is read.
  */
-function readFileAsArrayBuffer(file) {
+function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = function(e) {
-            resolve(e.target.result);
+            resolve(e.target.result as ArrayBuffer);
         };
         reader.onerror = function(e) {
             reject(e);
@@ -257,11 +301,11 @@ function readFileAsArrayBuffer(file) {
  *  If the file is unencrypted then the object will have a "url" key.
  *  If the file is encrypted then the object will have a "file" key.
  */
-function uploadFile(matrixClient, roomId, file, progressHandler) {
+function uploadFile(matrixClient: MatrixClient, roomId: string, file: File | Blob, progressHandler?: any) {
+    let canceled = false;
     if (matrixClient.isRoomEncrypted(roomId)) {
         // If the room is encrypted then encrypt the file before uploading it.
         // First read the file into memory.
-        let canceled = false;
         let uploadPromise;
         let encryptInfo;
         const prom = readFileAsArrayBuffer(file).then(function(data) {
@@ -278,9 +322,9 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
                 progressHandler: progressHandler,
                 includeFilename: false,
             });
-
             return uploadPromise;
         }).then(function(url) {
+            if (canceled) throw new UploadCanceledError();
             // If the attachment is encrypted then bundle the URL along
             // with the information needed to decrypt the attachment and
             // add it under a file key.
@@ -290,7 +334,7 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
             }
             return {"file": encryptInfo};
         });
-        prom.abort = () => {
+        (prom as IAbortablePromise<any>).abort = () => {
             canceled = true;
             if (uploadPromise) MatrixClientPeg.get().cancelUpload(uploadPromise);
         };
@@ -300,55 +344,23 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
             progressHandler: progressHandler,
         });
         const promise1 = basePromise.then(function(url) {
+            if (canceled) throw new UploadCanceledError();
             // If the attachment isn't encrypted then include the URL directly.
             return {"url": url};
         });
-        // XXX: copy over the abort method to the new promise
-        promise1.abort = basePromise.abort;
+        promise1.abort = () => {
+            canceled = true;
+            MatrixClientPeg.get().cancelUpload(basePromise);
+        };
         return promise1;
     }
 }
 
 export default class ContentMessages {
-    constructor() {
-        this.inprogress = [];
-        this.nextId = 0;
-        this._mediaConfig = null;
-    }
+    private inprogress: IUpload[] = [];
+    private mediaConfig: IMediaConfig = null;
 
-    static sharedInstance() {
-        if (global.mx_ContentMessages === undefined) {
-            global.mx_ContentMessages = new ContentMessages();
-        }
-        return global.mx_ContentMessages;
-    }
-
-    _isFileSizeAcceptable(file) {
-        if (this._mediaConfig !== null &&
-            this._mediaConfig["m.upload.size"] !== undefined &&
-            file.size > this._mediaConfig["m.upload.size"]) {
-            return false;
-        }
-        return true;
-    }
-
-    _ensureMediaConfigFetched() {
-        if (this._mediaConfig !== null) return;
-
-        console.log("[Media Config] Fetching");
-        return MatrixClientPeg.get().getMediaConfig().then((config) => {
-            console.log("[Media Config] Fetched config:", config);
-            return config;
-        }).catch(() => {
-            // Media repo can't or won't report limits, so provide an empty object (no limits).
-            console.log("[Media Config] Could not fetch config, so not limiting uploads.");
-            return {};
-        }).then((config) => {
-            this._mediaConfig = config;
-        });
-    }
-
-    sendStickerContentToRoom(url, roomId, info, text, matrixClient) {
+    sendStickerContentToRoom(url: string, roomId: string, info: string, text: string, matrixClient: MatrixClient) {
         return MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => {
             console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
             throw e;
@@ -356,14 +368,14 @@ export default class ContentMessages {
     }
 
     getUploadLimit() {
-        if (this._mediaConfig !== null && this._mediaConfig["m.upload.size"] !== undefined) {
-            return this._mediaConfig["m.upload.size"];
+        if (this.mediaConfig !== null && this.mediaConfig["m.upload.size"] !== undefined) {
+            return this.mediaConfig["m.upload.size"];
         } else {
             return null;
         }
     }
 
-    async sendContentListToRoom(files, roomId, matrixClient) {
+    async sendContentListToRoom(files: File[], roomId: string, matrixClient: MatrixClient) {
         if (matrixClient.isGuest()) {
             dis.dispatch({action: 'require_registration'});
             return;
@@ -372,32 +384,28 @@ export default class ContentMessages {
         const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
         if (isQuoting) {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            const shouldUpload = await new Promise((resolve) => {
-                Modal.createTrackedDialog('Upload Reply Warning', '', QuestionDialog, {
-                    title: _t('Replying With Files'),
-                    description: (
-                        <div>{_t(
-                            'At this time it is not possible to reply with a file. ' +
-                            'Would you like to upload this file without replying?',
-                        )}</div>
-                    ),
-                    hasCancelButton: true,
-                    button: _t("Continue"),
-                    onFinished: (shouldUpload) => {
-                        resolve(shouldUpload);
-                    },
-                });
+            const {finished} = Modal.createTrackedDialog('Upload Reply Warning', '', QuestionDialog, {
+                title: _t('Replying With Files'),
+                description: (
+                    <div>{_t(
+                        'At this time it is not possible to reply with a file. ' +
+                        'Would you like to upload this file without replying?',
+                    )}</div>
+                ),
+                hasCancelButton: true,
+                button: _t("Continue"),
             });
+            const [shouldUpload]: [boolean] = await finished;
             if (!shouldUpload) return;
         }
 
-        await this._ensureMediaConfigFetched();
+        await this.ensureMediaConfigFetched();
 
         const tooBigFiles = [];
         const okFiles = [];
 
         for (let i = 0; i < files.length; ++i) {
-            if (this._isFileSizeAcceptable(files[i])) {
+            if (this.isFileSizeAcceptable(files[i])) {
                 okFiles.push(files[i]);
             } else {
                 tooBigFiles.push(files[i]);
@@ -406,50 +414,64 @@ export default class ContentMessages {
 
         if (tooBigFiles.length > 0) {
             const UploadFailureDialog = sdk.getComponent("dialogs.UploadFailureDialog");
-            const uploadFailureDialogPromise = new Promise((resolve) => {
-                Modal.createTrackedDialog('Upload Failure', '', UploadFailureDialog, {
-                    badFiles: tooBigFiles,
-                    totalFiles: files.length,
-                    contentMessages: this,
-                    onFinished: (shouldContinue) => {
-                        resolve(shouldContinue);
-                    },
-                });
+            const {finished} = Modal.createTrackedDialog('Upload Failure', '', UploadFailureDialog, {
+                badFiles: tooBigFiles,
+                totalFiles: files.length,
+                contentMessages: this,
             });
-            const shouldContinue = await uploadFailureDialogPromise;
+            const [shouldContinue]: [boolean] = await finished;
             if (!shouldContinue) return;
         }
 
         const UploadConfirmDialog = sdk.getComponent("dialogs.UploadConfirmDialog");
         let uploadAll = false;
+        // Promise to complete before sending next file into room, used for synchronisation of file-sending
+        // to match the order the files were specified in
+        let promBefore = Promise.resolve();
         for (let i = 0; i < okFiles.length; ++i) {
             const file = okFiles[i];
             if (!uploadAll) {
-                const shouldContinue = await new Promise((resolve) => {
-                    Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, {
-                        file,
-                        currentIndex: i,
-                        totalFiles: okFiles.length,
-                        onFinished: (shouldContinue, shouldUploadAll) => {
-                            if (shouldUploadAll) {
-                                uploadAll = true;
-                            }
-                            resolve(shouldContinue);
-                        },
-                    });
+                const {finished} = Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, {
+                    file,
+                    currentIndex: i,
+                    totalFiles: okFiles.length,
                 });
+                const [shouldContinue, shouldUploadAll]: [boolean, boolean] = await finished;
                 if (!shouldContinue) break;
+                if (shouldUploadAll) {
+                    uploadAll = true;
+                }
             }
-            this._sendContentToRoom(file, roomId, matrixClient);
+            promBefore = this.sendContentToRoom(file, roomId, matrixClient, promBefore);
         }
     }
 
-    _sendContentToRoom(file, roomId, matrixClient) {
-        const content = {
+    getCurrentUploads() {
+        return this.inprogress.filter(u => !u.canceled);
+    }
+
+    cancelUpload(promise: Promise<any>) {
+        let upload: IUpload;
+        for (let i = 0; i < this.inprogress.length; ++i) {
+            if (this.inprogress[i].promise === promise) {
+                upload = this.inprogress[i];
+                break;
+            }
+        }
+        if (upload) {
+            upload.canceled = true;
+            MatrixClientPeg.get().cancelUpload(upload.promise);
+            dis.dispatch({action: 'upload_canceled', upload});
+        }
+    }
+
+    private sendContentToRoom(file: File, roomId: string, matrixClient: MatrixClient, promBefore: Promise<any>) {
+        const content: IContent = {
             body: file.name || 'Attachment',
             info: {
                 size: file.size,
             },
+            msgtype: "", // set later
         };
 
         // if we have a mime type for the file, add it to the message metadata
@@ -458,25 +480,25 @@ export default class ContentMessages {
         }
 
         const prom = new Promise((resolve) => {
-            if (file.type.indexOf('image/') == 0) {
+            if (file.type.indexOf('image/') === 0) {
                 content.msgtype = 'm.image';
-                infoForImageFile(matrixClient, roomId, file).then((imageInfo)=>{
+                infoForImageFile(matrixClient, roomId, file).then((imageInfo) => {
                     extend(content.info, imageInfo);
                     resolve();
-                }, (error)=>{
-                    console.error(error);
+                }, (e) => {
+                    console.error(e);
                     content.msgtype = 'm.file';
                     resolve();
                 });
-            } else if (file.type.indexOf('audio/') == 0) {
+            } else if (file.type.indexOf('audio/') === 0) {
                 content.msgtype = 'm.audio';
                 resolve();
-            } else if (file.type.indexOf('video/') == 0) {
+            } else if (file.type.indexOf('video/') === 0) {
                 content.msgtype = 'm.video';
-                infoForVideoFile(matrixClient, roomId, file).then((videoInfo)=>{
+                infoForVideoFile(matrixClient, roomId, file).then((videoInfo) => {
                     extend(content.info, videoInfo);
                     resolve();
-                }, (error)=>{
+                }, (e) => {
                     content.msgtype = 'm.file';
                     resolve();
                 });
@@ -486,11 +508,17 @@ export default class ContentMessages {
             }
         });
 
-        const upload = {
+        // create temporary abort handler for before the actual upload gets passed off to js-sdk
+        (prom as IAbortablePromise<any>).abort = () => {
+            upload.canceled = true;
+        };
+
+        const upload: IUpload = {
             fileName: file.name || 'Attachment',
             roomId: roomId,
-            total: 0,
+            total: file.size,
             loaded: 0,
+            promise: prom,
         };
         this.inprogress.push(upload);
         dis.dispatch({action: 'upload_started'});
@@ -498,15 +526,15 @@ export default class ContentMessages {
         // Focus the composer view
         dis.dispatch({action: 'focus_composer'});
 
-        let error;
-
         function onProgress(ev) {
             upload.total = ev.total;
             upload.loaded = ev.loaded;
             dis.dispatch({action: 'upload_progress', upload: upload});
         }
 
+        let error;
         return prom.then(function() {
+            if (upload.canceled) throw new UploadCanceledError();
             // XXX: upload.promise must be the promise that
             // is returned by uploadFile as it has an abort()
             // method hacked onto it.
@@ -517,13 +545,17 @@ export default class ContentMessages {
                 content.file = result.file;
                 content.url = result.url;
             });
-        }).then(function(url) {
+        }).then(() => {
+            // Await previous message being sent into the room
+            return promBefore;
+        }).then(function() {
+            if (upload.canceled) throw new UploadCanceledError();
             return matrixClient.sendMessage(roomId, content);
         }, function(err) {
             error = err;
             if (!upload.canceled) {
                 let desc = _t("The file '%(fileName)s' failed to upload.", {fileName: upload.fileName});
-                if (err.http_status == 413) {
+                if (err.http_status === 413) {
                     desc = _t(
                         "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",
                         {fileName: upload.fileName},
@@ -536,11 +568,9 @@ export default class ContentMessages {
                 });
             }
         }).finally(() => {
-            const inprogressKeys = Object.keys(this.inprogress);
             for (let i = 0; i < this.inprogress.length; ++i) {
-                const k = inprogressKeys[i];
-                if (this.inprogress[k].promise === upload.promise) {
-                    this.inprogress.splice(k, 1);
+                if (this.inprogress[i].promise === upload.promise) {
+                    this.inprogress.splice(i, 1);
                     break;
                 }
             }
@@ -549,7 +579,7 @@ export default class ContentMessages {
                 // clear the media size limit so we fetch it again next time
                 // we try to upload
                 if (error && error.http_status === 413) {
-                    this._mediaConfig = null;
+                    this.mediaConfig = null;
                 }
                 dis.dispatch({action: 'upload_failed', upload, error});
             } else {
@@ -559,24 +589,35 @@ export default class ContentMessages {
         });
     }
 
-    getCurrentUploads() {
-        return this.inprogress.filter(u => !u.canceled);
+    private isFileSizeAcceptable(file: File) {
+        if (this.mediaConfig !== null &&
+            this.mediaConfig["m.upload.size"] !== undefined &&
+            file.size > this.mediaConfig["m.upload.size"]) {
+            return false;
+        }
+        return true;
     }
 
-    cancelUpload(promise) {
-        const inprogressKeys = Object.keys(this.inprogress);
-        let upload;
-        for (let i = 0; i < this.inprogress.length; ++i) {
-            const k = inprogressKeys[i];
-            if (this.inprogress[k].promise === promise) {
-                upload = this.inprogress[k];
-                break;
-            }
-        }
-        if (upload) {
-            upload.canceled = true;
-            MatrixClientPeg.get().cancelUpload(upload.promise);
-            dis.dispatch({action: 'upload_canceled', upload});
+    private ensureMediaConfigFetched() {
+        if (this.mediaConfig !== null) return;
+
+        console.log("[Media Config] Fetching");
+        return MatrixClientPeg.get().getMediaConfig().then((config) => {
+            console.log("[Media Config] Fetched config:", config);
+            return config;
+        }).catch(() => {
+            // Media repo can't or won't report limits, so provide an empty object (no limits).
+            console.log("[Media Config] Could not fetch config, so not limiting uploads.");
+            return {};
+        }).then((config) => {
+            this.mediaConfig = config;
+        });
+    }
+
+    static sharedInstance() {
+        if (window.mx_ContentMessages === undefined) {
+            window.mx_ContentMessages = new ContentMessages();
         }
+        return window.mx_ContentMessages;
     }
 }

src/CrossSigningManager.js

@@ -15,11 +15,13 @@ limitations under the License.
 */
 
 import Modal from './Modal';
-import sdk from './index';
-import MatrixClientPeg from './MatrixClientPeg';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto/recoverykey';
+import * as sdk from './index';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import { deriveKey } from 'matrix-js-sdk/src/crypto/key_passphrase';
+import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
 import { _t } from './languageHandler';
+import SettingsStore from './settings/SettingsStore';
+import {encodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
 
 // This stores the secret storage private keys in memory for the JS SDK. This is
 // only meant to act as a cache to avoid prompting the user multiple times
@@ -27,9 +29,43 @@ import { _t } from './languageHandler';
 // single secret storage operation, as it will clear the cached keys once the
 // operation ends.
 let secretStorageKeys = {};
-let cachingAllowed = false;
+let secretStorageBeingAccessed = false;
 
-async function getSecretStorageKey({ keys: keyInfos }) {
+function isCachingAllowed() {
+    return (
+        secretStorageBeingAccessed ||
+        SettingsStore.getValue("keepSecretStoragePassphraseForSession")
+    );
+}
+
+export class AccessCancelledError extends Error {
+    constructor() {
+        super("Secret storage access canceled");
+    }
+}
+
+async function confirmToDismiss(name) {
+    let description;
+    if (name === "m.cross_signing.user_signing") {
+        description = _t("If you cancel now, you won't complete verifying the other user.");
+    } else if (name === "m.cross_signing.self_signing") {
+        description = _t("If you cancel now, you won't complete verifying your other session.");
+    } else {
+        description = _t("If you cancel now, you won't complete your operation.");
+    }
+
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    const [sure] = await Modal.createDialog(QuestionDialog, {
+        title: _t("Cancel entering passphrase?"),
+        description,
+        danger: true,
+        cancelButton: _t("Enter passphrase"),
+        button: _t("Cancel"),
+    }).finished;
+    return sure;
+}
+
+async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
     const keyInfoEntries = Object.entries(keyInfos);
     if (keyInfoEntries.length > 1) {
         throw new Error("Multiple storage key requests not implemented");
@@ -37,7 +73,7 @@ async function getSecretStorageKey({ keys: keyInfos }) {
     const [name, info] = keyInfoEntries[0];
 
     // Check the in-memory cache
-    if (cachingAllowed && secretStorageKeys[name]) {
+    if (isCachingAllowed() && secretStorageKeys[name]) {
         return [name, secretStorageKeys[name]];
     }
 
@@ -56,32 +92,108 @@ async function getSecretStorageKey({ keys: keyInfos }) {
         sdk.getComponent("dialogs.secretstorage.AccessSecretStorageDialog");
     const { finished } = Modal.createTrackedDialog("Access Secret Storage dialog", "",
         AccessSecretStorageDialog,
+        /* props= */
         {
             keyInfo: info,
             checkPrivateKey: async (input) => {
                 const key = await inputToKey(input);
-                return MatrixClientPeg.get().checkSecretStoragePrivateKey(key, info.pubkey);
+                return await MatrixClientPeg.get().checkSecretStorageKey(key, info);
+            },
+        },
+        /* className= */ null,
+        /* isPriorityModal= */ false,
+        /* isStaticModal= */ false,
+        /* options= */ {
+            onBeforeClose: async (reason) => {
+                if (reason === "backgroundClick") {
+                    return confirmToDismiss(ssssItemName);
+                }
+                return true;
             },
         },
     );
     const [input] = await finished;
     if (!input) {
-        throw new Error("Secret storage access canceled");
+        throw new AccessCancelledError();
     }
     const key = await inputToKey(input);
 
     // Save to cache to avoid future prompts in the current session
-    if (cachingAllowed) {
+    if (isCachingAllowed()) {
         secretStorageKeys[name] = key;
     }
 
     return [name, key];
 }
 
+const onSecretRequested = async function({
+    user_id: userId,
+    device_id: deviceId,
+    request_id: requestId,
+    name,
+    device_trust: deviceTrust,
+}) {
+    console.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
+    const client = MatrixClientPeg.get();
+    if (userId !== client.getUserId()) {
+        return;
+    }
+    if (!deviceTrust || !deviceTrust.isVerified()) {
+        console.log(`CrossSigningManager: Ignoring request from untrusted device ${deviceId}`);
+        return;
+    }
+    if (name.startsWith("m.cross_signing")) {
+        const callbacks = client.getCrossSigningCacheCallbacks();
+        if (!callbacks.getCrossSigningKeyCache) return;
+        /* Explicit enumeration here is deliberate – never share the master key! */
+        if (name === "m.cross_signing.self_signing") {
+            const key = await callbacks.getCrossSigningKeyCache("self_signing");
+            if (!key) {
+                console.log(
+                    `self_signing requested by ${deviceId}, but not found in cache`,
+                );
+            }
+            return key && encodeBase64(key);
+        } else if (name === "m.cross_signing.user_signing") {
+            const key = await callbacks.getCrossSigningKeyCache("user_signing");
+            if (!key) {
+                console.log(
+                    `user_signing requested by ${deviceId}, but not found in cache`,
+                );
+            }
+            return key && encodeBase64(key);
+        }
+    } else if (name === "m.megolm_backup.v1") {
+        const key = await client._crypto.getSessionBackupPrivateKey();
+        if (!key) {
+            console.log(
+                `session backup key requested by ${deviceId}, but not found in cache`,
+            );
+        }
+        return key && encodeBase64(key);
+    }
+    console.warn("onSecretRequested didn't recognise the secret named ", name);
+};
+
 export const crossSigningCallbacks = {
     getSecretStorageKey,
+    onSecretRequested,
 };
 
+export async function promptForBackupPassphrase() {
+    let key;
+
+    const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
+    const { finished } = Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {
+        showSummary: false, keyCallback: k => key = k,
+    }, null, /* priority = */ false, /* static = */ true);
+
+    const success = await finished;
+    if (!success) throw new Error("Key backup prompt cancelled");
+
+    return key;
+}
+
 /**
  * This helper should be used whenever you need to access secret storage. It
  * ensures that secret storage (and also cross-signing since they each depend on
@@ -97,22 +209,25 @@ export const crossSigningCallbacks = {
  *
  * Additionally, the secret storage keys are cached during the scope of this function
  * to ensure the user is prompted only once for their secret storage
- * passphrase. The cache is then
+ * passphrase. The cache is then cleared once the provided function completes.
  *
  * @param {Function} [func] An operation to perform once secret storage has been
  * bootstrapped. Optional.
+ * @param {bool} [forceReset] Reset secret storage even if it's already set up
  */
-export async function accessSecretStorage(func = async () => { }) {
+export async function accessSecretStorage(func = async () => { }, forceReset = false) {
     const cli = MatrixClientPeg.get();
-    cachingAllowed = true;
-
+    secretStorageBeingAccessed = true;
     try {
-        if (!cli.hasSecretStorageKey()) {
+        if (!await cli.hasSecretStorageKey() || forceReset) {
             // This dialog calls bootstrap itself after guiding the user through
             // passphrase creation.
             const { finished } = Modal.createTrackedDialogAsync('Create Secret Storage dialog', '',
                 import("./async-components/views/dialogs/secretstorage/CreateSecretStorageDialog"),
-                null, null, /* priority = */ false, /* static = */ true,
+                {
+                    force: forceReset,
+                },
+                null, /* priority = */ false, /* static = */ true,
             );
             const [confirmed] = await finished;
             if (!confirmed) {
@@ -125,7 +240,7 @@ export async function accessSecretStorage(func = async () => { }) {
                     const { finished } = Modal.createTrackedDialog(
                         'Cross-signing keys dialog', '', InteractiveAuthDialog,
                         {
-                            title: _t("Send cross-signing keys to homeserver"),
+                            title: _t("Setting up keys"),
                             matrixClient: MatrixClientPeg.get(),
                             makeRequest,
                         },
@@ -135,6 +250,7 @@ export async function accessSecretStorage(func = async () => { }) {
                         throw new Error("Cross-signing key upload auth canceled");
                     }
                 },
+                getBackupPassphrase: promptForBackupPassphrase,
             });
         }
 
@@ -143,7 +259,9 @@ export async function accessSecretStorage(func = async () => { }) {
         return await func();
     } finally {
         // Clear secret storage key cache now that work is complete
-        cachingAllowed = false;
-        secretStorageKeys = {};
+        secretStorageBeingAccessed = false;
+        if (!isCachingAllowed()) {
+            secretStorageKeys = {};
+        }
     }
 }

src/DeviceListener.ts

@@ -0,0 +1,262 @@
+/*
+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 {MatrixClientPeg} from './MatrixClientPeg';
+import SettingsStore from './settings/SettingsStore';
+import {
+    hideToast as hideBulkUnverifiedSessionsToast,
+    showToast as showBulkUnverifiedSessionsToast
+} from "./toasts/BulkUnverifiedSessionsToast";
+import {
+    hideToast as hideSetupEncryptionToast,
+    Kind as SetupKind,
+    Kind,
+    showToast as showSetupEncryptionToast
+} from "./toasts/SetupEncryptionToast";
+import {
+    hideToast as hideUnverifiedSessionsToast,
+    showToast as showUnverifiedSessionsToast
+} from "./toasts/UnverifiedSessionToast";
+
+const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
+
+export default class DeviceListener {
+    // device IDs for which the user has dismissed the verify toast ('Later')
+    private dismissed = new Set<string>();
+    // has the user dismissed any of the various nag toasts to setup encryption on this device?
+    private dismissedThisDeviceToast = false;
+    // cache of the key backup info
+    private keyBackupInfo: object = null;
+    private keyBackupFetchedAt: number = null;
+    // We keep a list of our own device IDs so we can batch ones that were already
+    // there the last time the app launched into a single toast, but display new
+    // ones in their own toasts.
+    private ourDeviceIdsAtStart: Set<string> = null;
+    // The set of device IDs we're currently displaying toasts for
+    private displayingToastsForDeviceIds = new Set<string>();
+
+    static sharedInstance() {
+        if (!window.mx_DeviceListener) window.mx_DeviceListener = new DeviceListener();
+        return window.mx_DeviceListener;
+    }
+
+    start() {
+        MatrixClientPeg.get().on('crypto.willUpdateDevices', this._onWillUpdateDevices);
+        MatrixClientPeg.get().on('crypto.devicesUpdated', this._onDevicesUpdated);
+        MatrixClientPeg.get().on('deviceVerificationChanged', this._onDeviceVerificationChanged);
+        MatrixClientPeg.get().on('userTrustStatusChanged', this._onUserTrustStatusChanged);
+        MatrixClientPeg.get().on('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
+        MatrixClientPeg.get().on('accountData', this._onAccountData);
+        MatrixClientPeg.get().on('sync', this._onSync);
+        this._recheck();
+    }
+
+    stop() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener('crypto.willUpdateDevices', this._onWillUpdateDevices);
+            MatrixClientPeg.get().removeListener('crypto.devicesUpdated', this._onDevicesUpdated);
+            MatrixClientPeg.get().removeListener('deviceVerificationChanged', this._onDeviceVerificationChanged);
+            MatrixClientPeg.get().removeListener('userTrustStatusChanged', this._onUserTrustStatusChanged);
+            MatrixClientPeg.get().removeListener('crossSigning.keysChanged', this._onCrossSingingKeysChanged);
+            MatrixClientPeg.get().removeListener('accountData', this._onAccountData);
+            MatrixClientPeg.get().removeListener('sync', this._onSync);
+        }
+        this.dismissed.clear();
+        this.dismissedThisDeviceToast = false;
+        this.keyBackupInfo = null;
+        this.keyBackupFetchedAt = null;
+        this.ourDeviceIdsAtStart = null;
+        this.displayingToastsForDeviceIds = new Set();
+    }
+
+    /**
+     * Dismiss notifications about our own unverified devices
+     *
+     * @param {String[]} deviceIds List of device IDs to dismiss notifications for
+     */
+    async dismissUnverifiedSessions(deviceIds: Iterable<string>) {
+        for (const d of deviceIds) {
+            this.dismissed.add(d);
+        }
+
+        this._recheck();
+    }
+
+    dismissEncryptionSetup() {
+        this.dismissedThisDeviceToast = true;
+        this._recheck();
+    }
+
+    _ensureDeviceIdsAtStartPopulated() {
+        if (this.ourDeviceIdsAtStart === null) {
+            const cli = MatrixClientPeg.get();
+            this.ourDeviceIdsAtStart = new Set(
+                cli.getStoredDevicesForUser(cli.getUserId()).map(d => d.deviceId),
+            );
+        }
+    }
+
+    _onWillUpdateDevices = async (users: string[], initialFetch?: boolean) => {
+        // If we didn't know about *any* devices before (ie. it's fresh login),
+        // then they are all pre-existing devices, so ignore this and set the
+        // devicesAtStart list to the devices that we see after the fetch.
+        if (initialFetch) return;
+
+        const myUserId = MatrixClientPeg.get().getUserId();
+        if (users.includes(myUserId)) this._ensureDeviceIdsAtStartPopulated();
+
+        // No need to do a recheck here: we just need to get a snapshot of our devices
+        // before we download any new ones.
+    }
+
+    _onDevicesUpdated = (users: string[]) => {
+        if (!users.includes(MatrixClientPeg.get().getUserId())) return;
+        this._recheck();
+    }
+
+    _onDeviceVerificationChanged = (userId: string) => {
+        if (userId !== MatrixClientPeg.get().getUserId()) return;
+        this._recheck();
+    }
+
+    _onUserTrustStatusChanged = (userId: string) => {
+        if (userId !== MatrixClientPeg.get().getUserId()) return;
+        this._recheck();
+    }
+
+    _onCrossSingingKeysChanged = () => {
+        this._recheck();
+    }
+
+    _onAccountData = (ev) => {
+        // User may have:
+        // * migrated SSSS to symmetric
+        // * uploaded keys to secret storage
+        // * completed secret storage creation
+        // which result in account data changes affecting checks below.
+        if (
+            ev.getType().startsWith('m.secret_storage.') ||
+            ev.getType().startsWith('m.cross_signing.')
+        ) {
+            this._recheck();
+        }
+    }
+
+    _onSync = (state, prevState) => {
+        if (state === 'PREPARED' && prevState === null) this._recheck();
+    }
+
+    // The server doesn't tell us when key backup is set up, so we poll
+    // & cache the result
+    async _getKeyBackupInfo() {
+        const now = (new Date()).getTime();
+        if (!this.keyBackupInfo || this.keyBackupFetchedAt < now - KEY_BACKUP_POLL_INTERVAL) {
+            this.keyBackupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            this.keyBackupFetchedAt = now;
+        }
+        return this.keyBackupInfo;
+    }
+
+    async _recheck() {
+        const cli = MatrixClientPeg.get();
+
+        if (
+            !SettingsStore.getValue("feature_cross_signing") ||
+            !await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")
+        ) return;
+
+        if (!cli.isCryptoEnabled()) return;
+        // don't recheck until the initial sync is complete: lots of account data events will fire
+        // while the initial sync is processing and we don't need to recheck on each one of them
+        // (we add a listener on sync to do once check after the initial sync is done)
+        if (!cli.isInitialSyncComplete()) return;
+
+        const crossSigningReady = await cli.isCrossSigningReady();
+
+        if (this.dismissedThisDeviceToast || crossSigningReady) {
+            hideSetupEncryptionToast();
+        } else {
+            // make sure our keys are finished downloading
+            await cli.downloadKeys([cli.getUserId()]);
+            // cross signing isn't enabled - nag to enable it
+            // There are 3 different toasts for:
+            if (cli.getStoredCrossSigningForUser(cli.getUserId())) {
+                // Cross-signing on account but this device doesn't trust the master key (verify this session)
+                showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
+            } else {
+                const backupInfo = await this._getKeyBackupInfo();
+                if (backupInfo) {
+                    // No cross-signing on account but key backup available (upgrade encryption)
+                    showSetupEncryptionToast(Kind.UPGRADE_ENCRYPTION);
+                } else {
+                    // No cross-signing or key backup on account (set up encryption)
+                    showSetupEncryptionToast(Kind.SET_UP_ENCRYPTION);
+                }
+            }
+        }
+
+        // This needs to be done after awaiting on downloadKeys() above, so
+        // we make sure we get the devices after the fetch is done.
+        this._ensureDeviceIdsAtStartPopulated();
+
+        // Unverified devices that were there last time the app ran
+        // (technically could just be a boolean: we don't actually
+        // need to remember the device IDs, but for the sake of
+        // symmetry...).
+        const oldUnverifiedDeviceIds = new Set<string>();
+        // Unverified devices that have appeared since then
+        const newUnverifiedDeviceIds = new Set<string>();
+
+        // as long as cross-signing isn't ready,
+        // you can't see or dismiss any device toasts
+        if (crossSigningReady) {
+            const devices = cli.getStoredDevicesForUser(cli.getUserId());
+            for (const device of devices) {
+                if (device.deviceId === cli.deviceId) continue;
+
+                const deviceTrust = await cli.checkDeviceTrust(cli.getUserId(), device.deviceId);
+                if (!deviceTrust.isCrossSigningVerified() && !this.dismissed.has(device.deviceId)) {
+                    if (this.ourDeviceIdsAtStart.has(device.deviceId)) {
+                        oldUnverifiedDeviceIds.add(device.deviceId);
+                    } else {
+                        newUnverifiedDeviceIds.add(device.deviceId);
+                    }
+                }
+            }
+        }
+
+        // Display or hide the batch toast for old unverified sessions
+        if (oldUnverifiedDeviceIds.size > 0) {
+            showBulkUnverifiedSessionsToast(oldUnverifiedDeviceIds);
+        } else {
+            hideBulkUnverifiedSessionsToast();
+        }
+
+        // Show toasts for new unverified devices if they aren't already there
+        for (const deviceId of newUnverifiedDeviceIds) {
+            showUnverifiedSessionsToast(deviceId);
+        }
+
+        // ...and hide any we don't need any more
+        for (const deviceId of this.displayingToastsForDeviceIds) {
+            if (!newUnverifiedDeviceIds.has(deviceId)) {
+                hideUnverifiedSessionsToast(deviceId);
+            }
+        }
+
+        this.displayingToastsForDeviceIds = newUnverifiedDeviceIds;
+    }
+}

src/Entities.js

@@ -1,140 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import sdk from './index';
-
-function isMatch(query, name, uid) {
-    query = query.toLowerCase();
-    name = name.toLowerCase();
-    uid = uid.toLowerCase();
-
-    // direct prefix matches
-    if (name.indexOf(query) === 0 || uid.indexOf(query) === 0) {
-        return true;
-    }
-
-    // strip @ on uid and try matching again
-    if (uid.length > 1 && uid[0] === "@" && uid.substring(1).indexOf(query) === 0) {
-        return true;
-    }
-
-    // split spaces in name and try matching constituent parts
-    const parts = name.split(" ");
-    for (let i = 0; i < parts.length; i++) {
-        if (parts[i].indexOf(query) === 0) {
-            return true;
-        }
-    }
-    return false;
-}
-
-/*
- * Converts various data models to Entity objects.
- *
- * Entity objects provide an interface for UI components to use to display
- * members in a data-agnostic way. This means they don't need to care if the
- * underlying data model is a RoomMember, User or 3PID data structure, it just
- * cares about rendering.
- */
-
-class Entity {
-    constructor(model) {
-        this.model = model;
-    }
-
-    getJsx() {
-        return null;
-    }
-
-    matches(queryString) {
-        return false;
-    }
-}
-
-class MemberEntity extends Entity {
-    getJsx() {
-        const MemberTile = sdk.getComponent("rooms.MemberTile");
-        return (
-            <MemberTile key={this.model.userId} member={this.model} />
-        );
-    }
-
-    matches(queryString) {
-        return isMatch(queryString, this.model.name, this.model.userId);
-    }
-}
-
-class UserEntity extends Entity {
-    constructor(model, showInviteButton, inviteFn) {
-        super(model);
-        this.showInviteButton = Boolean(showInviteButton);
-        this.inviteFn = inviteFn;
-        this.onClick = this.onClick.bind(this);
-    }
-
-    onClick() {
-        if (this.inviteFn) {
-            this.inviteFn(this.model.userId);
-        }
-    }
-
-    getJsx() {
-        const UserTile = sdk.getComponent("rooms.UserTile");
-        return (
-            <UserTile key={this.model.userId} user={this.model}
-                showInviteButton={this.showInviteButton} onClick={this.onClick} />
-        );
-    }
-
-    matches(queryString) {
-        const name = this.model.displayName || this.model.userId;
-        return isMatch(queryString, name, this.model.userId);
-    }
-}
-
-
-module.exports = {
-    newEntity: function(jsx, matchFn) {
-        const entity = new Entity();
-        entity.getJsx = function() {
-            return jsx;
-        };
-        entity.matches = matchFn;
-        return entity;
-    },
-
-    /**
-     * @param {RoomMember[]} members
-     * @return {Entity[]}
-     */
-    fromRoomMembers: function(members) {
-        return members.map(function(m) {
-            return new MemberEntity(m);
-        });
-    },
-
-    /**
-     * @param {User[]} users
-     * @param {boolean} showInviteButton
-     * @param {Function} inviteFn Called with the user ID.
-     * @return {Entity[]}
-     */
-    fromUsers: function(users, showInviteButton, inviteFn) {
-        return users.map(function(u) {
-            return new UserEntity(u, showInviteButton, inviteFn);
-        });
-    },
-};

src/FromWidgetPostMessageApi.js

@@ -17,13 +17,14 @@ limitations under the License.
 */
 
 import URL from 'url';
-import dis from './dispatcher';
+import dis from './dispatcher/dispatcher';
 import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import RoomViewStore from "./stores/RoomViewStore";
 import {IntegrationManagers} from "./integrations/IntegrationManagers";
 import SettingsStore from "./settings/SettingsStore";
+import {Capability} from "./widgets/WidgetApi";
 
 const WIDGET_API_VERSION = '0.0.2'; // Current API version
 const SUPPORTED_WIDGET_API_VERSIONS = [
@@ -99,7 +100,7 @@ export default class FromWidgetPostMessageApi {
             console.warn('Add FromWidgetPostMessageApi - Endpoint already registered');
             return;
         } else {
-            console.warn(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint);
+            console.log(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint);
             this.widgetMessagingEndpoints.push(endpoint);
         }
     }
@@ -164,7 +165,7 @@ export default class FromWidgetPostMessageApi {
         const action = event.data.action;
         const widgetId = event.data.widgetId;
         if (action === 'content_loaded') {
-            console.warn('Widget reported content loaded for', widgetId);
+            console.log('Widget reported content loaded for', widgetId);
             dis.dispatch({
                 action: 'widget_content_loaded',
                 widgetId: widgetId,
@@ -213,7 +214,7 @@ export default class FromWidgetPostMessageApi {
             const data = event.data.data;
             const val = data.value;
 
-            if (ActiveWidgetStore.widgetHasCapability(widgetId, 'm.always_on_screen')) {
+            if (ActiveWidgetStore.widgetHasCapability(widgetId, Capability.AlwaysOnScreen)) {
                 ActiveWidgetStore.setWidgetPersistence(widgetId, val);
             }
         } else if (action === 'get_openid') {

src/GroupAddressPicker.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import Modal from './Modal';
-import sdk from './';
+import * as sdk from './';
 import MultiInviter from './utils/MultiInviter';
 import { _t } from './languageHandler';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import GroupStore from './stores/GroupStore';
 import {allSettled} from "./utils/promise";
 
@@ -73,7 +73,7 @@ export function showGroupAddRoomDialog(groupId) {
             title: _t("Add rooms to the community"),
             description: description,
             extraNode: checkboxContainer,
-            placeholder: _t("Room name or alias"),
+            placeholder: _t("Room name or address"),
             button: _t("Add to community"),
             pickerType: 'room',
             validAddressTypes: ['mx-room-id'],

src/HtmlUtils.js

@@ -23,18 +23,17 @@ import ReplyThread from "./components/views/elements/ReplyThread";
 
 import React from 'react';
 import sanitizeHtml from 'sanitize-html';
-import highlight from 'highlight.js';
 import * as linkify from 'linkifyjs';
 import linkifyMatrix from './linkify-matrix';
 import _linkifyElement from 'linkifyjs/element';
 import _linkifyString from 'linkifyjs/string';
 import classNames from 'classnames';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import url from 'url';
 
-import EMOJIBASE from 'emojibase-data/en/compact.json';
 import EMOJIBASE_REGEX from 'emojibase-regex';
 import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks";
+import {SHORTCODE_TO_EMOJI, getEmojiFromUnicode} from "./emoji";
 
 linkifyMatrix(linkify);
 
@@ -58,8 +57,6 @@ const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
 const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
 
-const VARIATION_SELECTOR = String.fromCharCode(0xFE0F);
-
 /*
  * Return true if the given string contains emoji
  * Uses a much, much simpler regex than emojibase's so will give false
@@ -71,21 +68,6 @@ function mightContainEmoji(str) {
     return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
-/**
- * Find emoji data in emojibase by character.
- *
- * @param {String} char The emoji character
- * @return {Object} The emoji data
- */
-export function findEmojiData(char) {
-    // Check against both the char and the char with an empty variation selector
-    // appended because that's how emojibase stores its base emojis which have
-    // variations.
-    // See also https://github.com/vector-im/riot-web/issues/9785.
-    const emptyVariation = char + VARIATION_SELECTOR;
-    return EMOJIBASE.find(e => e.unicode === char || e.unicode === emptyVariation);
-}
-
 /**
  * Returns the shortcode for an emoji character.
  *
@@ -93,7 +75,7 @@ export function findEmojiData(char) {
  * @return {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char) {
-    const data = findEmojiData(char);
+    const data = getEmojiFromUnicode(char);
     return (data && data.shortcodes ? `:${data.shortcodes[0]}:` : '');
 }
 
@@ -105,7 +87,7 @@ export function unicodeToShortcode(char) {
  */
 export function shortcodeToUnicode(shortcode) {
     shortcode = shortcode.slice(1, shortcode.length - 1);
-    const data = EMOJIBASE.find(e => e.shortcodes && e.shortcodes.includes(shortcode));
+    const data = SHORTCODE_TO_EMOJI.get(shortcode);
     return data ? data.unicode : null;
 }
 
@@ -177,7 +159,7 @@ const transformTags = { // custom to matrix
                 delete attribs.target;
             }
         }
-        attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
+        attribs.rel = 'noreferrer noopener'; // https://mathiasbynens.github.io/rel-noopener/
         return { tagName, attribs };
     },
     'img': function(tagName, attribs) {
@@ -394,6 +376,7 @@ class TextHighlighter extends BaseHighlighter {
  * opts.stripReplyFallback: optional argument specifying the event is a reply and so fallback needs removing
  * opts.returnString: return an HTML string rather than JSX elements
  * opts.forComposerQuote: optional param to lessen the url rewriting done by sanitization, for quoting into composer
+ * opts.ref: React ref to attach to any React components returned (not compatible with opts.returnString)
  */
 export function bodyToHtml(content, highlights, opts={}) {
     const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
@@ -463,7 +446,8 @@ export function bodyToHtml(content, highlights, opts={}) {
                     // their username. Permalinks (links in pills) can be any URL
                     // now, so we just check for an HTTP-looking thing.
                     (
-                        content.formatted_body == undefined ||
+                        strippedBody === safeBody || // replies have the html fallbacks, account for that here
+                        content.formatted_body === undefined ||
                         (!content.formatted_body.includes("http:") &&
                         !content.formatted_body.includes("https:"))
                     );
@@ -476,18 +460,19 @@ export function bodyToHtml(content, highlights, opts={}) {
     });
 
     return isDisplayedWithHtml ?
-        <span key="body" className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
-        <span key="body" className={className} dir="auto">{ strippedBody }</span>;
+        <span key="body" ref={opts.ref} className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
+        <span key="body" ref={opts.ref} className={className} dir="auto">{ strippedBody }</span>;
 }
 
 /**
  * Linkifies the given string. This is a wrapper around 'linkifyjs/string'.
  *
- * @param {string} str
- * @returns {string}
+ * @param {string} str string to linkify
+ * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
+ * @returns {string} Linkified string
  */
-export function linkifyString(str) {
-    return _linkifyString(str);
+export function linkifyString(str, options = linkifyMatrix.options) {
+    return _linkifyString(str, options);
 }
 
 /**
@@ -505,10 +490,11 @@ export function linkifyElement(element, options = linkifyMatrix.options) {
  * Linkify the given string and sanitize the HTML afterwards.
  *
  * @param {string} dirtyHtml The HTML string to sanitize and linkify
+ * @param {object} [options] Options for linkifyString. Default: linkifyMatrix.options
  * @returns {string}
  */
-export function linkifyAndSanitizeHtml(dirtyHtml) {
-    return sanitizeHtml(linkifyString(dirtyHtml), sanitizeHtmlParams);
+export function linkifyAndSanitizeHtml(dirtyHtml, options = linkifyMatrix.options) {
+    return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams);
 }
 
 /**

src/IdentityAuthClient.js

@@ -16,9 +16,9 @@ limitations under the License.
 
 import { createClient, SERVICE_TYPES } from 'matrix-js-sdk';
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
 import {
@@ -181,24 +181,12 @@ export default class IdentityAuthClient {
     }
 
     async registerForToken(check=true) {
-        try {
-            const hsOpenIdToken = await MatrixClientPeg.get().getOpenIdToken();
-            // XXX: The spec is `token`, but we used `access_token` for a Sydent release.
-            const { access_token: accessToken, token } =
-                await this._matrixClient.registerWithIdentityServer(hsOpenIdToken);
-            const identityAccessToken = token ? token : accessToken;
-            if (check) await this._checkToken(identityAccessToken);
-            return identityAccessToken;
-        } catch (e) {
-            if (e.cors === "rejected" || e.httpStatus === 404) {
-                // Assume IS only supports deprecated v1 API for now
-                // TODO: Remove this path once v2 is only supported version
-                // See https://github.com/vector-im/riot-web/issues/10443
-                console.warn("IS doesn't support v2 auth");
-                this.authEnabled = false;
-                return;
-            }
-            throw e;
-        }
+        const hsOpenIdToken = await MatrixClientPeg.get().getOpenIdToken();
+        // XXX: The spec is `token`, but we used `access_token` for a Sydent release.
+        const { access_token: accessToken, token } =
+            await this._matrixClient.registerWithIdentityServer(hsOpenIdToken);
+        const identityAccessToken = token ? token : accessToken;
+        if (check) await this._checkToken(identityAccessToken);
+        return identityAccessToken;
     }
 }

src/ImageUtils.js

@@ -16,41 +16,38 @@ limitations under the License.
 
 'use strict';
 
-module.exports = {
-
-    /**
-     * Returns the actual height that an image of dimensions (fullWidth, fullHeight)
-     * will occupy if resized to fit inside a thumbnail bounding box of size
-     * (thumbWidth, thumbHeight).
-     *
-     * If the aspect ratio of the source image is taller than the aspect ratio of
-     * the thumbnail bounding box, then we return the thumbHeight parameter unchanged.
-     * Otherwise we return the thumbHeight parameter scaled down appropriately to
-     * reflect the actual height the scaled thumbnail occupies.
-     *
-     * This is very useful for calculating how much height a thumbnail will actually
-     * consume in the timeline, when performing scroll offset calcuations
-     * (e.g. scroll locking)
-     */
-    thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
-        if (!fullWidth || !fullHeight) {
-            // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
-            // log this because it's spammy
-            return undefined;
-        }
-        if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
-            // no scaling needs to be applied
-            return fullHeight;
-        }
-        const widthMulti = thumbWidth / fullWidth;
-        const heightMulti = thumbHeight / fullHeight;
-        if (widthMulti < heightMulti) {
-            // width is the dominant dimension so scaling will be fixed on that
-            return Math.floor(widthMulti * fullHeight);
-        } else {
-            // height is the dominant dimension so scaling will be fixed on that
-            return Math.floor(heightMulti * fullHeight);
-        }
-    },
-};
+/**
+ * Returns the actual height that an image of dimensions (fullWidth, fullHeight)
+ * will occupy if resized to fit inside a thumbnail bounding box of size
+ * (thumbWidth, thumbHeight).
+ *
+ * If the aspect ratio of the source image is taller than the aspect ratio of
+ * the thumbnail bounding box, then we return the thumbHeight parameter unchanged.
+ * Otherwise we return the thumbHeight parameter scaled down appropriately to
+ * reflect the actual height the scaled thumbnail occupies.
+ *
+ * This is very useful for calculating how much height a thumbnail will actually
+ * consume in the timeline, when performing scroll offset calcuations
+ * (e.g. scroll locking)
+ */
+export function thumbHeight(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+    if (!fullWidth || !fullHeight) {
+        // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
+        // log this because it's spammy
+        return undefined;
+    }
+    if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
+        // no scaling needs to be applied
+        return fullHeight;
+    }
+    const widthMulti = thumbWidth / fullWidth;
+    const heightMulti = thumbHeight / fullHeight;
+    if (widthMulti < heightMulti) {
+        // width is the dominant dimension so scaling will be fixed on that
+        return Math.floor(widthMulti * fullHeight);
+    } else {
+        // height is the dominant dimension so scaling will be fixed on that
+        return Math.floor(heightMulti * fullHeight);
+    }
+}
 

src/KeyRequestHandler.js

@@ -1,138 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import sdk from './index';
-import Modal from './Modal';
-
-export default class KeyRequestHandler {
-    constructor(matrixClient) {
-        this._matrixClient = matrixClient;
-
-        // the user/device for which we currently have a dialog open
-        this._currentUser = null;
-        this._currentDevice = null;
-
-        // userId -> deviceId -> [keyRequest]
-        this._pendingKeyRequests = Object.create(null);
-    }
-
-    handleKeyRequest(keyRequest) {
-        const userId = keyRequest.userId;
-        const deviceId = keyRequest.deviceId;
-        const requestId = keyRequest.requestId;
-
-        if (!this._pendingKeyRequests[userId]) {
-            this._pendingKeyRequests[userId] = Object.create(null);
-        }
-        if (!this._pendingKeyRequests[userId][deviceId]) {
-            this._pendingKeyRequests[userId][deviceId] = [];
-        }
-
-        // check if we already have this request
-        const requests = this._pendingKeyRequests[userId][deviceId];
-        if (requests.find((r) => r.requestId === requestId)) {
-            console.log("Already have this key request, ignoring");
-            return;
-        }
-
-        requests.push(keyRequest);
-
-        if (this._currentUser) {
-            // ignore for now
-            console.log("Key request, but we already have a dialog open");
-            return;
-        }
-
-        this._processNextRequest();
-    }
-
-    handleKeyRequestCancellation(cancellation) {
-        // see if we can find the request in the queue
-        const userId = cancellation.userId;
-        const deviceId = cancellation.deviceId;
-        const requestId = cancellation.requestId;
-
-        if (userId === this._currentUser && deviceId === this._currentDevice) {
-            console.log(
-                "room key request cancellation for the user we currently have a"
-                + " dialog open for",
-            );
-            // TODO: update the dialog. For now, we just ignore the
-            // cancellation.
-            return;
-        }
-
-        if (!this._pendingKeyRequests[userId]) {
-            return;
-        }
-        const requests = this._pendingKeyRequests[userId][deviceId];
-        if (!requests) {
-            return;
-        }
-        const idx = requests.findIndex((r) => r.requestId === requestId);
-        if (idx < 0) {
-            return;
-        }
-        console.log("Forgetting room key request");
-        requests.splice(idx, 1);
-        if (requests.length === 0) {
-            delete this._pendingKeyRequests[userId][deviceId];
-            if (Object.keys(this._pendingKeyRequests[userId]).length === 0) {
-                delete this._pendingKeyRequests[userId];
-            }
-        }
-    }
-
-    _processNextRequest() {
-        const userId = Object.keys(this._pendingKeyRequests)[0];
-        if (!userId) {
-            return;
-        }
-        const deviceId = Object.keys(this._pendingKeyRequests[userId])[0];
-        if (!deviceId) {
-            return;
-        }
-        console.log(`Starting KeyShareDialog for ${userId}:${deviceId}`);
-
-        const finished = (r) => {
-            this._currentUser = null;
-            this._currentDevice = null;
-
-            if (r) {
-                for (const req of this._pendingKeyRequests[userId][deviceId]) {
-                    req.share();
-                }
-            }
-            delete this._pendingKeyRequests[userId][deviceId];
-            if (Object.keys(this._pendingKeyRequests[userId]).length === 0) {
-                delete this._pendingKeyRequests[userId];
-            }
-
-            this._processNextRequest();
-        };
-
-        const KeyShareDialog = sdk.getComponent("dialogs.KeyShareDialog");
-        Modal.appendTrackedDialog('Key Share', 'Process Next Request', KeyShareDialog, {
-            matrixClient: this._matrixClient,
-            userId: userId,
-            deviceId: deviceId,
-            onFinished: finished,
-        });
-        this._currentUser = userId;
-        this._currentDevice = deviceId;
-    }
-}
-

src/Keyboard.ts

@@ -22,6 +22,7 @@ export const Key = {
     PAGE_UP: "PageUp",
     PAGE_DOWN: "PageDown",
     BACKSPACE: "Backspace",
+    DELETE: "Delete",
     ARROW_UP: "ArrowUp",
     ARROW_DOWN: "ArrowDown",
     ARROW_LEFT: "ArrowLeft",
@@ -36,10 +37,14 @@ export const Key = {
     CONTEXT_MENU: "ContextMenu",
 
     COMMA: ",",
+    PERIOD: ".",
     LESS_THAN: "<",
     GREATER_THAN: ">",
     BACKTICK: "`",
     SPACE: " ",
+    SLASH: "/",
+    SQUARE_BRACKET_LEFT: "[",
+    SQUARE_BRACKET_RIGHT: "]",
     A: "a",
     B: "b",
     C: "c",
@@ -68,8 +73,9 @@ export const Key = {
     Z: "z",
 };
 
+export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
 export function isOnlyCtrlOrCmdKeyEvent(ev) {
-    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
     if (isMac) {
         return ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
     } else {
@@ -78,7 +84,6 @@ export function isOnlyCtrlOrCmdKeyEvent(ev) {
 }
 
 export function isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) {
-    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
     if (isMac) {
         return ev.metaKey && !ev.altKey && !ev.ctrlKey;
     } else {

src/Lifecycle.js

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,25 +19,28 @@ limitations under the License.
 
 import Matrix from 'matrix-js-sdk';
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import EventIndexPeg from './indexing/EventIndexPeg';
 import createMatrixClient from './utils/createMatrixClient';
 import Analytics from './Analytics';
 import Notifier from './Notifier';
 import UserActivity from './UserActivity';
 import Presence from './Presence';
-import dis from './dispatcher';
+import dis from './dispatcher/dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
 import PlatformPeg from "./PlatformPeg";
 import { sendLoginRequest } from "./Login";
 import * as StorageManager from './utils/StorageManager';
 import SettingsStore from "./settings/SettingsStore";
 import TypingStore from "./stores/TypingStore";
+import ToastStore from "./stores/ToastStore";
 import {IntegrationManagers} from "./integrations/IntegrationManagers";
 import {Mjolnir} from "./mjolnir/Mjolnir";
+import DeviceListener from "./DeviceListener";
+import {Jitsi} from "./widgets/Jitsi";
 
 /**
  * Called at startup, to attempt to build a logged-in Matrix session. It tries
@@ -294,6 +298,8 @@ async function _restoreFromLocalStorage(opts) {
             return false;
         }
 
+        const pickleKey = await PlatformPeg.get().getPickleKey(userId, deviceId);
+
         console.log(`Restoring session for ${userId}`);
         await _doSetLoggedIn({
             userId: userId,
@@ -302,6 +308,7 @@ async function _restoreFromLocalStorage(opts) {
             homeserverUrl: hsUrl,
             identityServerUrl: isUrl,
             guest: isGuest,
+            pickleKey: pickleKey,
         }, false);
         return true;
     } else {
@@ -310,7 +317,7 @@ async function _restoreFromLocalStorage(opts) {
     }
 }
 
-function _handleLoadSessionFailure(e) {
+async function _handleLoadSessionFailure(e) {
     console.error("Unable to load session", e);
 
     const SessionRestoreErrorDialog =
@@ -320,16 +327,15 @@ function _handleLoadSessionFailure(e) {
         error: e.message,
     });
 
-    return modal.finished.then(([success]) => {
-        if (success) {
-            // user clicked continue.
-            _clearStorage();
-            return false;
-        }
+    const [success] = await modal.finished;
+    if (success) {
+        // user clicked continue.
+        await _clearStorage();
+        return false;
+    }
 
-        // try, try again
-        return loadSession();
-    });
+    // try, try again
+    return loadSession();
 }
 
 /**
@@ -345,9 +351,13 @@ function _handleLoadSessionFailure(e) {
  *
  * @returns {Promise} promise which resolves to the new MatrixClient once it has been started
  */
-export function setLoggedIn(credentials) {
+export async function setLoggedIn(credentials) {
     stopMatrixClient();
-    return _doSetLoggedIn(credentials, true);
+    const pickleKey = credentials.userId && credentials.deviceId
+          ? await PlatformPeg.get().createPickleKey(credentials.userId, credentials.deviceId)
+          : null;
+
+    return _doSetLoggedIn(Object.assign({}, credentials, {pickleKey}), true);
 }
 
 /**
@@ -375,7 +385,7 @@ export function hydrateSession(credentials) {
 
     const overwrite = credentials.userId !== oldUserId || credentials.deviceId !== oldDeviceId;
     if (overwrite) {
-        console.warn("Clearing all data: Old session belongs to a different user/device");
+        console.warn("Clearing all data: Old session belongs to a different user/session");
     }
 
     return _doSetLoggedIn(credentials, overwrite);
@@ -432,7 +442,7 @@ async function _doSetLoggedIn(credentials, clearStorage) {
         }
     }
 
-    Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl, credentials.identityServerUrl);
+    Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl);
 
     if (localStorage) {
         try {
@@ -513,7 +523,9 @@ export function logout() {
     }
 
     _isLoggingOut = true;
-    MatrixClientPeg.get().logout().then(onLoggedOut,
+    const client = MatrixClientPeg.get();
+    PlatformPeg.get().destroyPickleKey(client.getUserId(), client.getDeviceId());
+    client.logout().then(onLoggedOut,
         (err) => {
             // Just throwing an error here is going to be very unhelpful
             // if you're trying to log out because your server's down and
@@ -572,12 +584,12 @@ async function startMatrixClient(startSyncing=true) {
     // to work).
     dis.dispatch({action: 'will_start_client'}, true);
 
+    // reset things first just in case
+    TypingStore.sharedInstance().reset();
+    ToastStore.sharedInstance().reset();
+
     Notifier.start();
     UserActivity.sharedInstance().start();
-    TypingStore.sharedInstance().reset(); // just in case
-    if (!SettingsStore.getValue("lowBandwidth")) {
-        Presence.start();
-    }
     DMRoomMap.makeShared().start();
     IntegrationManagers.sharedInstance().startWatching();
     ActiveWidgetStore.start();
@@ -588,13 +600,27 @@ async function startMatrixClient(startSyncing=true) {
     Mjolnir.sharedInstance().start();
 
     if (startSyncing) {
-        await MatrixClientPeg.start();
+        // The client might want to populate some views with events from the
+        // index (e.g. the FilePanel), therefore initialize the event index
+        // before the client.
         await EventIndexPeg.init();
+        await MatrixClientPeg.start();
     } else {
         console.warn("Caller requested only auxiliary services be started");
         await MatrixClientPeg.assign();
     }
 
+    // This needs to be started after crypto is set up
+    DeviceListener.sharedInstance().start();
+    // Similarly, don't start sending presence updates until we've started
+    // the client
+    if (!SettingsStore.getValue("lowBandwidth")) {
+        Presence.start();
+    }
+
+    // Now that we have a MatrixClientPeg, update the Jitsi info
+    await Jitsi.getInstance().update();
+
     // dispatch that we finished starting up to wire up any other bits
     // of the matrix client that cannot be set prior to starting up.
     dis.dispatch({action: 'client_started'});
@@ -622,12 +648,16 @@ export async function onLoggedOut() {
  * @returns {Promise} promise which resolves once the stores have been cleared
  */
 async function _clearStorage() {
-    Analytics.logout();
+    Analytics.disable();
 
     if (window.localStorage) {
         window.localStorage.clear();
     }
 
+    if (window.sessionStorage) {
+        window.sessionStorage.clear();
+    }
+
     // create a temporary client to clear out the persistent stores.
     const cli = createMatrixClient({
         // we'll never make any requests, so can pass a bogus HS URL
@@ -651,6 +681,7 @@ export function stopMatrixClient(unsetClient=true) {
     ActiveWidgetStore.stop();
     IntegrationManagers.sharedInstance().stopWatching();
     Mjolnir.sharedInstance().stop();
+    DeviceListener.sharedInstance().stop();
     if (DMRoomMap.shared()) DMRoomMap.shared().stop();
     EventIndexPeg.stop();
     const cli = MatrixClientPeg.get();

src/Login.js

@@ -3,6 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,8 +20,6 @@ limitations under the License.
 
 import Matrix from "matrix-js-sdk";
 
-import url from 'url';
-
 export default class Login {
     constructor(hsUrl, isUrl, fallbackHsUrl, opts) {
         this._hsUrl = hsUrl;
@@ -29,6 +28,7 @@ export default class Login {
         this._currentFlowIndex = 0;
         this._flows = [];
         this._defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
+        this._tempClient = null; // memoize
     }
 
     getHomeserverUrl() {
@@ -40,10 +40,12 @@ export default class Login {
     }
 
     setHomeserverUrl(hsUrl) {
+        this._tempClient = null; // clear memoization
         this._hsUrl = hsUrl;
     }
 
     setIdentityServerUrl(isUrl) {
+        this._tempClient = null; // clear memoization
         this._isUrl = isUrl;
     }
 
@@ -52,8 +54,9 @@ export default class Login {
      * requests.
      * @returns {MatrixClient}
      */
-    _createTemporaryClient() {
-        return Matrix.createClient({
+    createTemporaryClient() {
+        if (this._tempClient) return this._tempClient; // use memoization
+        return this._tempClient = Matrix.createClient({
             baseUrl: this._hsUrl,
             idBaseUrl: this._isUrl,
         });
@@ -61,7 +64,7 @@ export default class Login {
 
     getFlows() {
         const self = this;
-        const client = this._createTemporaryClient();
+        const client = this.createTemporaryClient();
         return client.loginFlows().then(function(result) {
             self._flows = result.flows;
             self._currentFlowIndex = 0;
@@ -139,21 +142,6 @@ export default class Login {
             throw error;
         });
     }
-
-    getSsoLoginUrl(loginType) {
-      const client = this._createTemporaryClient();
-      const parsedUrl = url.parse(window.location.href, true);
-
-      // XXX: at this point, the fragment will always be #/login, which is no
-      // use to anyone. Ideally, we would get the intended fragment from
-      // MatrixChat.screenAfterLogin so that you could follow #/room links etc
-      // through an SSO login.
-      parsedUrl.hash = "";
-
-      parsedUrl.query["homeserver"] = client.getHomeserverUrl();
-      parsedUrl.query["identityServer"] = client.getIdentityServerUrl();
-      return client.getSsoLoginUrl(url.format(parsedUrl), loginType);
-    }
 }
 
 

src/Markdown.js

@@ -91,7 +91,7 @@ export default class Markdown {
         return true;
     }
 
-    toHTML() {
+    toHTML({ externalLinks = false } = {}) {
         const renderer = new commonmark.HtmlRenderer({
             safe: false,
 
@@ -125,6 +125,24 @@ export default class Markdown {
             }
         };
 
+        renderer.link = function(node, entering) {
+            const attrs = this.attrs(node);
+            if (entering) {
+                attrs.push(['href', this.esc(node.destination)]);
+                if (node.title) {
+                    attrs.push(['title', this.esc(node.title)]);
+                }
+                // Modified link behaviour to treat them all as external and
+                // thus opening in a new tab.
+                if (externalLinks) {
+                    attrs.push(['target', '_blank']);
+                    attrs.push(['rel', 'noreferrer noopener']);
+                }
+                this.tag('a', attrs);
+            } else {
+                this.tag('/a');
+            }
+        };
 
         renderer.html_inline = html_if_tag_allowed;
 

src/MatrixClientPeg.ts

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd.
 Copyright 2017, 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,53 +17,42 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClient, MemoryStore} from 'matrix-js-sdk';
-
-import utils from 'matrix-js-sdk/lib/utils';
-import EventTimeline from 'matrix-js-sdk/lib/models/event-timeline';
-import EventTimelineSet from 'matrix-js-sdk/lib/models/event-timeline-set';
-import sdk from './index';
+import {MatrixClient} from 'matrix-js-sdk/src/client';
+import {MemoryStore} from 'matrix-js-sdk/src/store/memory';
+import * as utils from 'matrix-js-sdk/src/utils';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
+import {EventTimelineSet} from 'matrix-js-sdk/src/models/event-timeline-set';
+import * as sdk from './index';
 import createMatrixClient from './utils/createMatrixClient';
 import SettingsStore from './settings/SettingsStore';
 import MatrixActionCreators from './actions/MatrixActionCreators';
 import Modal from './Modal';
-import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
 import { crossSigningCallbacks } from './CrossSigningManager';
+import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
 
-interface MatrixClientCreds {
+export interface IMatrixClientCreds {
     homeserverUrl: string,
     identityServerUrl: string,
     userId: string,
     deviceId: string,
     accessToken: string,
     guest: boolean,
+    pickleKey?: string,
 }
 
-/**
- * Wrapper object for handling the js-sdk Matrix Client object in the react-sdk
- * Handles the creation/initialisation of client objects.
- * This module provides a singleton instance of this class so the 'current'
- * Matrix Client object is available easily.
- */
-class MatrixClientPeg {
-    constructor() {
-        this.matrixClient = null;
-        this._justRegisteredUserId = null;
+// TODO: Move this to the js-sdk
+export interface IOpts {
+    initialSyncLimit?: number;
+    pendingEventOrdering?: "detached" | "chronological";
+    lazyLoadMembers?: boolean;
+}
 
-        // These are the default options used when when the
-        // client is started in 'start'. These can be altered
-        // at any time up to after the 'will_start_client'
-        // event is finished processing.
-        this.opts = {
-            initialSyncLimit: 20,
-        };
-        // the credentials used to init the current client object.
-        // used if we tear it down & recreate it with a different store
-        this._currentClientCreds = null;
-    }
+export interface IMatrixClientPeg {
+    opts: IOpts;
 
     /**
      * Sets the script href passed to the IndexedDB web worker
@@ -72,19 +61,23 @@ class MatrixClientPeg {
      *
      * @param {string} script href to the script to be passed to the web worker
      */
-    setIndexedDbWorkerScript(script) {
-        createMatrixClient.indexedDbWorkerScript = script;
-    }
+    setIndexedDbWorkerScript(script: string): void;
 
-    get(): MatrixClient {
-        return this.matrixClient;
-    }
+    /**
+     * Return the server name of the user's homeserver
+     * Throws an error if unable to deduce the homeserver name
+     * (eg. if the user is not logged in)
+     *
+     * @returns {string} The homeserver name, if present.
+     */
+    getHomeserverName(): string;
 
-    unset() {
-        this.matrixClient = null;
+    get(): MatrixClient;
+    unset(): void;
+    assign(): Promise<any>;
+    start(): Promise<any>;
 
-        MatrixActionCreators.stop();
-    }
+    getCredentials(): IMatrixClientCreds;
 
     /**
      * If we've registered a user ID we set this to the ID of the
@@ -94,9 +87,7 @@ class MatrixClientPeg {
      *
      * @param {string} uid The user ID of the user we've just registered
      */
-    setJustRegisteredUserId(uid) {
-        this._justRegisteredUserId = uid;
-    }
+    setJustRegisteredUserId(uid: string): void;
 
     /**
      * Returns true if the current user has just been registered by this
@@ -104,23 +95,73 @@ class MatrixClientPeg {
      *
      * @returns {bool} True if user has just been registered
      */
-    currentUserIsJustRegistered() {
+    currentUserIsJustRegistered(): boolean;
+
+    /**
+     * Replace this MatrixClientPeg's client with a client instance that has
+     * homeserver / identity server URLs and active credentials
+     *
+     * @param {IMatrixClientCreds} creds The new credentials to use.
+     */
+    replaceUsingCreds(creds: IMatrixClientCreds): void;
+}
+
+/**
+ * Wrapper object for handling the js-sdk Matrix Client object in the react-sdk
+ * Handles the creation/initialisation of client objects.
+ * This module provides a singleton instance of this class so the 'current'
+ * Matrix Client object is available easily.
+ */
+class _MatrixClientPeg implements IMatrixClientPeg {
+    // These are the default options used when when the
+    // client is started in 'start'. These can be altered
+    // at any time up to after the 'will_start_client'
+    // event is finished processing.
+    public opts: IOpts = {
+        initialSyncLimit: 20,
+    };
+
+    private matrixClient: MatrixClient = null;
+    private justRegisteredUserId: string;
+
+    // the credentials used to init the current client object.
+    // used if we tear it down & recreate it with a different store
+    private currentClientCreds: IMatrixClientCreds;
+
+    constructor() {
+    }
+
+    public setIndexedDbWorkerScript(script: string): void {
+        createMatrixClient.indexedDbWorkerScript = script;
+    }
+
+    public get(): MatrixClient {
+        return this.matrixClient;
+    }
+
+    public unset(): void {
+        this.matrixClient = null;
+
+        MatrixActionCreators.stop();
+    }
+
+    public setJustRegisteredUserId(uid: string): void {
+        this.justRegisteredUserId = uid;
+    }
+
+    public currentUserIsJustRegistered(): boolean {
         return (
             this.matrixClient &&
-            this.matrixClient.credentials.userId === this._justRegisteredUserId
+            this.matrixClient.credentials.userId === this.justRegisteredUserId
         );
     }
 
-    /*
-     * Replace this MatrixClientPeg's client with a client instance that has
-     * homeserver / identity server URLs and active credentials
-     */
-    replaceUsingCreds(creds: MatrixClientCreds) {
-        this._currentClientCreds = creds;
-        this._createClient(creds);
+    public replaceUsingCreds(creds: IMatrixClientCreds): void {
+        this.currentClientCreds = creds;
+        this.createClient(creds);
     }
 
-    async assign() {
+    public async assign(): Promise<any> {
         for (const dbType of ['indexeddb', 'memory']) {
             try {
                 const promise = this.matrixClient.store.startup();
@@ -131,7 +172,7 @@ class MatrixClientPeg {
                 if (dbType === 'indexeddb') {
                     console.error('Error starting matrixclient store - falling back to memory store', err);
                     this.matrixClient.store = new MemoryStore({
-                        localStorage: global.localStorage,
+                        localStorage: localStorage,
                     });
                 } else {
                     console.error('Failed to start memory store!', err);
@@ -147,6 +188,9 @@ class MatrixClientPeg {
             // check that we have a version of the js-sdk which includes initCrypto
             if (!SettingsStore.getValue("lowBandwidth") && this.matrixClient.initCrypto) {
                 await this.matrixClient.initCrypto();
+                this.matrixClient.setCryptoTrustCrossSignedDevices(
+                    !SettingsStore.getValue('e2ee.manuallyVerifyAllSessions'),
+                );
                 StorageManager.setCryptoInitialised(true);
             }
         } catch (e) {
@@ -154,9 +198,7 @@ class MatrixClientPeg {
                 // The js-sdk found a crypto DB too new for it to use
                 const CryptoStoreTooNewDialog =
                     sdk.getComponent("views.dialogs.CryptoStoreTooNewDialog");
-                Modal.createDialog(CryptoStoreTooNewDialog, {
-                    host: window.location.host,
-                });
+                Modal.createDialog(CryptoStoreTooNewDialog);
             }
             // this can happen for a number of reasons, the most likely being
             // that the olm library was missing. It's not fatal.
@@ -175,7 +217,7 @@ class MatrixClientPeg {
         return opts;
     }
 
-    async start() {
+    public async start(): Promise<any> {
         const opts = await this.assign();
 
         console.log(`MatrixClientPeg: really starting MatrixClient`);
@@ -183,7 +225,7 @@ class MatrixClientPeg {
         console.log(`MatrixClientPeg: MatrixClient started`);
     }
 
-    getCredentials(): MatrixClientCreds {
+    public getCredentials(): IMatrixClientCreds {
         return {
             homeserverUrl: this.matrixClient.baseUrl,
             identityServerUrl: this.matrixClient.idBaseUrl,
@@ -194,12 +236,7 @@ class MatrixClientPeg {
         };
     }
 
-    /*
-     * Return the server name of the user's homeserver
-     * Throws an error if unable to deduce the homeserver name
-     * (eg. if the user is not logged in)
-     */
-    getHomeserverName() {
+    public getHomeserverName(): string {
         const matches = /^@.+:(.+)$/.exec(this.matrixClient.credentials.userId);
         if (matches === null || matches.length < 1) {
             throw new Error("Failed to derive homeserver name from user ID!");
@@ -207,25 +244,32 @@ class MatrixClientPeg {
         return matches[1];
     }
 
-    _createClient(creds: MatrixClientCreds) {
+    private createClient(creds: IMatrixClientCreds): void {
+        // TODO: Make these opts typesafe with the js-sdk
         const opts = {
             baseUrl: creds.homeserverUrl,
             idBaseUrl: creds.identityServerUrl,
             accessToken: creds.accessToken,
             userId: creds.userId,
             deviceId: creds.deviceId,
+            pickleKey: creds.pickleKey,
             timelineSupport: true,
             forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false),
             fallbackICEServerAllowed: !!SettingsStore.getValue('fallbackICEServerAllowed'),
-            verificationMethods: [verificationMethods.SAS],
+            verificationMethods: [
+                verificationMethods.SAS,
+                SHOW_QR_CODE_METHOD,
+                verificationMethods.RECIPROCATE_QR_CODE,
+            ],
             unstableClientRelationAggregation: true,
             identityServer: new IdentityAuthClient(),
+            cryptoCallbacks: {},
         };
 
-        opts.cryptoCallbacks = {};
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            Object.assign(opts.cryptoCallbacks, crossSigningCallbacks);
-        }
+        // These are always installed regardless of the labs flag so that
+        // cross-signing features can toggle on without reloading and also be
+        // accessed immediately after login.
+        Object.assign(opts.cryptoCallbacks, crossSigningCallbacks);
 
         this.matrixClient = createMatrixClient(opts);
 
@@ -244,7 +288,8 @@ class MatrixClientPeg {
     }
 }
 
-if (!global.mxMatrixClientPeg) {
-    global.mxMatrixClientPeg = new MatrixClientPeg();
+if (!window.mxMatrixClientPeg) {
+    window.mxMatrixClientPeg = new _MatrixClientPeg();
 }
-export default global.mxMatrixClientPeg;
+
+export const MatrixClientPeg = window.mxMatrixClientPeg;

src/Modal.js

@@ -17,87 +17,14 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import Analytics from './Analytics';
-import sdk from './index';
-import dis from './dispatcher';
-import { _t } from './languageHandler';
-import {defer} from "./utils/promise";
+import dis from './dispatcher/dispatcher';
+import {defer} from './utils/promise';
+import AsyncWrapper from './AsyncWrapper';
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
 
-/**
- * Wrap an asynchronous loader function with a react component which shows a
- * spinner until the real component loads.
- */
-const AsyncWrapper = createReactClass({
-    propTypes: {
-        /** A promise which resolves with the real component
-         */
-        prom: PropTypes.object.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            component: null,
-            error: null,
-        };
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-        // XXX: temporary logging to try to diagnose
-        // https://github.com/vector-im/riot-web/issues/3148
-        console.log('Starting load of AsyncWrapper for modal');
-        this.props.prom.then((result) => {
-            if (this._unmounted) {
-                return;
-            }
-            // Take the 'default' member if it's there, then we support
-            // passing in just an import()ed module, since ES6 async import
-            // always returns a module *namespace*.
-            const component = result.default ? result.default : result;
-            this.setState({component});
-        }).catch((e) => {
-            console.warn('AsyncWrapper promise failed', e);
-            this.setState({error: e});
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    _onWrapperCancelClick: function() {
-        this.props.onFinished(false);
-    },
-
-    render: function() {
-        if (this.state.component) {
-            const Component = this.state.component;
-            return <Component {...this.props} />;
-        } else if (this.state.error) {
-            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            return <BaseDialog onFinished={this.props.onFinished}
-                title={_t("Error")}
-            >
-                {_t("Unable to load! Check your network connectivity and try again.")}
-                <DialogButtons primaryButton={_t("Dismiss")}
-                    onPrimaryButtonClick={this._onWrapperCancelClick}
-                    hasCancel={false}
-                />
-            </BaseDialog>;
-        } else {
-            // show a spinner until the component is loaded.
-            const Spinner = sdk.getComponent("elements.Spinner");
-            return <Spinner />;
-        }
-    },
-});
-
 class ModalManager {
     constructor() {
         this._counter = 0;
@@ -120,7 +47,7 @@ class ModalManager {
                } */
         ];
 
-        this.closeAll = this.closeAll.bind(this);
+        this.onBackgroundClick = this.onBackgroundClick.bind(this);
     }
 
     hasDialogs() {
@@ -179,7 +106,7 @@ class ModalManager {
         return this.appendDialogAsync(...rest);
     }
 
-    _buildModal(prom, props, className) {
+    _buildModal(prom, props, className, options) {
         const modal = {};
 
         // never call this from onFinished() otherwise it will loop
@@ -197,13 +124,27 @@ class ModalManager {
         );
         modal.onFinished = props ? props.onFinished : null;
         modal.className = className;
+        modal.onBeforeClose = options.onBeforeClose;
+        modal.beforeClosePromise = null;
+        modal.close = closeDialog;
+        modal.closeReason = null;
 
         return {modal, closeDialog, onFinishedProm};
     }
 
     _getCloseFn(modal, props) {
         const deferred = defer();
-        return [(...args) => {
+        return [async (...args) => {
+            if (modal.beforeClosePromise) {
+                await modal.beforeClosePromise;
+            } else if (modal.onBeforeClose) {
+                modal.beforeClosePromise = modal.onBeforeClose(modal.closeReason);
+                const shouldClose = await modal.beforeClosePromise;
+                modal.beforeClosePromise = null;
+                if (!shouldClose) {
+                    return;
+                }
+            }
             deferred.resolve(args);
             if (props && props.onFinished) props.onFinished.apply(null, args);
             const i = this._modals.indexOf(modal);
@@ -229,6 +170,12 @@ class ModalManager {
         }, deferred.promise];
     }
 
+    /**
+     * @callback onBeforeClose
+     * @param {string?} reason either "backgroundClick" or null
+     * @return {Promise<bool>} whether the dialog should close
+     */
+
     /**
      * Open a modal view.
      *
@@ -256,11 +203,12 @@ class ModalManager {
      *                                 also be removed from the stack. This is not compatible
      *                                 with being a priority modal. Only one modal can be
      *                                 static at a time.
+     * @param {Object} options? extra options for the dialog
+     * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    createDialogAsync(prom, props, className, isPriorityModal, isStaticModal) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className);
-
+    createDialogAsync(prom, props, className, isPriorityModal, isStaticModal, options = {}) {
+        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, options);
         if (isPriorityModal) {
             // XXX: This is destructive
             this._priorityModal = modal;
@@ -279,7 +227,7 @@ class ModalManager {
     }
 
     appendDialogAsync(prom, props, className) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className);
+        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, {});
 
         this._modals.push(modal);
         this._reRender();
@@ -289,24 +237,22 @@ class ModalManager {
         };
     }
 
-    closeAll() {
-        const modalsToClose = [...this._modals, this._priorityModal];
-        this._modals = [];
-        this._priorityModal = null;
-
-        if (this._staticModal && modalsToClose.length === 0) {
-            modalsToClose.push(this._staticModal);
-            this._staticModal = null;
+    onBackgroundClick() {
+        const modal = this._getCurrentModal();
+        if (!modal) {
+            return;
         }
+        // we want to pass a reason to the onBeforeClose
+        // callback, but close is currently defined to
+        // pass all number of arguments to the onFinished callback
+        // so, pass the reason to close through a member variable
+        modal.closeReason = "backgroundClick";
+        modal.close();
+        modal.closeReason = null;
+    }
 
-        for (let i = 0; i < modalsToClose.length; i++) {
-            const m = modalsToClose[i];
-            if (m && m.onFinished) {
-                m.onFinished(false);
-            }
-        }
-
-        this._reRender();
+    _getCurrentModal() {
+        return this._priorityModal ? this._priorityModal : (this._modals[0] || this._staticModal);
     }
 
     _reRender() {
@@ -337,7 +283,7 @@ class ModalManager {
                     <div className="mx_Dialog">
                         { this._staticModal.elem }
                     </div>
-                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.closeAll}></div>
+                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick}></div>
                 </div>
             );
 
@@ -347,8 +293,8 @@ class ModalManager {
             ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
         }
 
-        const modal = this._priorityModal ? this._priorityModal : this._modals[0];
-        if (modal) {
+        const modal = this._getCurrentModal();
+        if (modal !== this._staticModal) {
             const classes = "mx_Dialog_wrapper "
                 + (this._staticModal ? "mx_Dialog_wrapperWithStaticUnder " : '')
                 + (modal.className ? modal.className : '');
@@ -358,7 +304,7 @@ class ModalManager {
                     <div className="mx_Dialog">
                         {modal.elem}
                     </div>
-                    <div className="mx_Dialog_background" onClick={this.closeAll}></div>
+                    <div className="mx_Dialog_background" onClick={this.onBackgroundClick}></div>
                 </div>
             );
 

src/Notifier.js

@@ -16,16 +16,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
-import TextForEvent from './TextForEvent';
+import * as TextForEvent from './TextForEvent';
 import Analytics from './Analytics';
-import Avatar from './Avatar';
-import dis from './dispatcher';
-import sdk from './index';
+import * as Avatar from './Avatar';
+import dis from './dispatcher/dispatcher';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
+import {
+    hideToast as hideNotificationsToast,
+} from "./toasts/DesktopNotificationsToast";
 
 /*
  * Dispatches:
@@ -37,6 +40,18 @@ import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
 
 const MAX_PENDING_ENCRYPTED = 20;
 
+/*
+Override both the content body and the TextForEvent handler for specific msgtypes, in notifications.
+This is useful when the content body contains fallback text that would explain that the client can't handle a particular
+type of tile.
+*/
+const typehandlers = {
+    "m.key.verification.request": (event) => {
+        const name = (event.sender || {}).name;
+        return _t("%(name)s is requesting verification", { name });
+    },
+};
+
 const Notifier = {
     notifsByRoom: {},
 
@@ -46,6 +61,9 @@ const Notifier = {
     pendingEncryptedEventIds: [],
 
     notificationMessageForEvent: function(ev) {
+        if (typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+            return typehandlers[ev.getContent().msgtype](ev);
+        }
         return TextForEvent.textForEvent(ev);
     },
 
@@ -69,7 +87,9 @@ const Notifier = {
             title = room.name;
             // notificationMessageForEvent includes sender,
             // but we already have the sender here
-            if (ev.getContent().body) msg = ev.getContent().body;
+            if (ev.getContent().body && !typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+                msg = ev.getContent().body;
+            }
         } else if (ev.getType() === 'm.room.member') {
             // context is all in the message here, we don't need
             // to display sender info
@@ -78,7 +98,9 @@ const Notifier = {
             title = ev.sender.name + " (" + room.name + ")";
             // notificationMessageForEvent includes sender,
             // but we've just out sender in the title
-            if (ev.getContent().body) msg = ev.getContent().body;
+            if (ev.getContent().body && !typehandlers.hasOwnProperty(ev.getContent().msgtype)) {
+                msg = ev.getContent().body;
+            }
         }
 
         if (!this.isBodyEnabled()) {
@@ -153,10 +175,12 @@ const Notifier = {
     },
 
     start: function() {
-        this.boundOnEvent = this.onEvent.bind(this);
-        this.boundOnSyncStateChange = this.onSyncStateChange.bind(this);
-        this.boundOnRoomReceipt = this.onRoomReceipt.bind(this);
-        this.boundOnEventDecrypted = this.onEventDecrypted.bind(this);
+        // do not re-bind in the case of repeated call
+        this.boundOnEvent = this.boundOnEvent || this.onEvent.bind(this);
+        this.boundOnSyncStateChange = this.boundOnSyncStateChange || this.onSyncStateChange.bind(this);
+        this.boundOnRoomReceipt = this.boundOnRoomReceipt || this.onRoomReceipt.bind(this);
+        this.boundOnEventDecrypted = this.boundOnEventDecrypted || this.onEventDecrypted.bind(this);
+
         MatrixClientPeg.get().on('event', this.boundOnEvent);
         MatrixClientPeg.get().on('Room.receipt', this.boundOnRoomReceipt);
         MatrixClientPeg.get().on('Event.decrypted', this.boundOnEventDecrypted);
@@ -166,7 +190,7 @@ const Notifier = {
     },
 
     stop: function() {
-        if (MatrixClientPeg.get() && this.boundOnRoomTimeline) {
+        if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener('Event', this.boundOnEvent);
             MatrixClientPeg.get().removeListener('Room.receipt', this.boundOnRoomReceipt);
             MatrixClientPeg.get().removeListener('Event.decrypted', this.boundOnEventDecrypted);
@@ -257,12 +281,7 @@ const Notifier = {
 
         Analytics.trackEvent('Notifier', 'Set Toolbar Hidden', hidden);
 
-        // XXX: why are we dispatching this here?
-        // this is nothing to do with notifier_enabled
-        dis.dispatch({
-            action: "notifier_enabled",
-            value: this.isEnabled(),
-        });
+        hideNotificationsToast();
 
         // update the info to localStorage for persistent settings
         if (persistent && global.localStorage) {
@@ -364,4 +383,4 @@ if (!global.mxNotifier) {
     global.mxNotifier = Notifier;
 }
 
-module.exports = global.mxNotifier;
+export default global.mxNotifier;

src/ObjectUtils.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,7 +23,7 @@ limitations under the License.
  * @return {Object[]} An array of objects with the form:
  * { key: $KEY, val: $VALUE, place: "add|del" }
  */
-module.exports.getKeyValueArrayDiffs = function(before, after) {
+export function getKeyValueArrayDiffs(before, after) {
     const results = [];
     const delta = {};
     Object.keys(before).forEach(function(beforeKey) {
@@ -76,7 +77,7 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
     });
 
     return results;
-};
+}
 
 /**
  * Shallow-compare two objects for equality: each key and value must be identical
@@ -84,7 +85,7 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
  * @param {Object} objB Second object to compare against the first
  * @return {boolean} whether the two objects have same key=values
  */
-module.exports.shallowEqual = function(objA, objB) {
+export function shallowEqual(objA, objB) {
     if (objA === objB) {
         return true;
     }
@@ -109,4 +110,4 @@ module.exports.shallowEqual = function(objA, objB) {
     }
 
     return true;
-};
+}

src/PasswordReset.js

@@ -25,7 +25,7 @@ import { _t } from './languageHandler';
  * the client owns the given email address, which is then passed to the password
  * API on the homeserver in question with the new password.
  */
-class PasswordReset {
+export default class PasswordReset {
     /**
      * Configure the endpoints for password resetting.
      * @param {string} homeserverUrl The URL to the HS which has the account to reset.
@@ -101,4 +101,3 @@ class PasswordReset {
     }
 }
 
-module.exports = PasswordReset;

src/PlatformPeg.js

@@ -47,4 +47,4 @@ class PlatformPeg {
 if (!global.mxPlatformPeg) {
     global.mxPlatformPeg = new PlatformPeg();
 }
-module.exports = global.mxPlatformPeg;
+export default global.mxPlatformPeg;

src/Presence.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +16,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "./MatrixClientPeg";
-import dis from "./dispatcher";
+import {MatrixClientPeg} from "./MatrixClientPeg";
+import dis from "./dispatcher/dispatcher";
 import Timer from './utils/Timer';
 
  // Time in ms after that a user is considered as unavailable/away
@@ -104,4 +105,4 @@ class Presence {
     }
 }
 
-module.exports = new Presence();
+export default new Presence();

src/Registration.js

@@ -20,11 +20,11 @@ limitations under the License.
  * registration code.
  */
 
-import dis from './dispatcher';
-import sdk from './index';
+import dis from './dispatcher/dispatcher';
+import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-// import MatrixClientPeg from './MatrixClientPeg';
+// import {MatrixClientPeg} from './MatrixClientPeg';
 
 // Regex for what a "safe" or "Matrix-looking" localpart would be.
 // TODO: Update as needed for https://github.com/matrix-org/matrix-doc/issues/1514
@@ -39,6 +39,8 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/;
  *     If true, goes to the home page if the user cancels the action
  * @param {bool} options.go_welcome_on_cancel
  *     If true, goes to the welcome page if the user cancels the action
+ * @param {bool} options.screen_after
+ *     If present the screen to redirect to after a successful login or register.
  */
 export async function startAnyRegistrationFlow(options) {
     if (options === undefined) options = {};
@@ -66,13 +68,21 @@ export async function startAnyRegistrationFlow(options) {
     //     });
     //} else {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createTrackedDialog('Registration required', '', QuestionDialog, {
-            title: _t("Registration Required"),
-            description: _t("You need to register to do this. Would you like to register now?"),
-            button: _t("Register"),
+        const modal = Modal.createTrackedDialog('Registration required', '', QuestionDialog, {
+            hasCancelButton: true,
+            quitOnly: true,
+            title: _t("Sign In or Create Account"),
+            description: _t("Use your account or create a new one to continue."),
+            button: _t("Create Account"),
+            extraButtons: [
+                <button key="start_login" onClick={() => {
+                    modal.close();
+                    dis.dispatch({action: 'start_login', screenAfterLogin: options.screen_after});
+                }}>{ _t('Sign In') }</button>,
+            ],
             onFinished: (proceed) => {
                 if (proceed) {
-                    dis.dispatch({action: 'start_registration'});
+                    dis.dispatch({action: 'start_registration', screenAfterLogin: options.screen_after});
                 } else if (options.go_home_on_cancel) {
                     dis.dispatch({action: 'view_home_page'});
                 } else if (options.go_welcome_on_cancel) {
@@ -101,4 +111,3 @@ export async function startAnyRegistrationFlow(options) {
 //     }
 //     throw new Error("Register request succeeded when it should have returned 401!");
 // }
-

src/Resend.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,26 +15,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
-import dis from './dispatcher';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import dis from './dispatcher/dispatcher';
 import { EventStatus } from 'matrix-js-sdk';
 
-module.exports = {
-    resendUnsentEvents: function(room) {
+export default class Resend {
+    static resendUnsentEvents(room) {
         room.getPendingEvents().filter(function(ev) {
             return ev.status === EventStatus.NOT_SENT;
         }).forEach(function(event) {
-            module.exports.resend(event);
+            Resend.resend(event);
         });
-    },
-    cancelUnsentEvents: function(room) {
+    }
+
+    static cancelUnsentEvents(room) {
         room.getPendingEvents().filter(function(ev) {
             return ev.status === EventStatus.NOT_SENT;
         }).forEach(function(event) {
-            module.exports.removeFromQueue(event);
+            Resend.removeFromQueue(event);
         });
-    },
-    resend: function(event) {
+    }
+
+    static resend(event) {
         const room = MatrixClientPeg.get().getRoom(event.getRoomId());
         MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
             dis.dispatch({
@@ -43,15 +46,16 @@ module.exports = {
         }, function(err) {
             // XXX: temporary logging to try to diagnose
             // https://github.com/vector-im/riot-web/issues/3148
-            console.log('Resend got send failure: ' + err.name + '('+err+')');
+            console.log('Resend got send failure: ' + err.name + '(' + err + ')');
 
             dis.dispatch({
                 action: 'message_send_failed',
                 event: event,
             });
         });
-    },
-    removeFromQueue: function(event) {
+    }
+
+    static removeFromQueue(event) {
         MatrixClientPeg.get().cancelPendingEvent(event);
-    },
-};
+    }
+}

src/RoomInvite.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,15 +17,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import MultiInviter from './utils/MultiInviter';
 import Modal from './Modal';
-import { getAddressType } from './UserAddress';
-import createRoom from './createRoom';
-import sdk from './';
-import dis from './dispatcher';
-import DMRoomMap from './utils/DMRoomMap';
+import * as sdk from './';
 import { _t } from './languageHandler';
+import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
 
 /**
  * Invites multiple addresses to a room
@@ -35,50 +33,27 @@ import { _t } from './languageHandler';
  * @param {string[]} addrs Array of strings of addresses to invite. May be matrix IDs or 3pids.
  * @returns {Promise} Promise
  */
-function inviteMultipleToRoom(roomId, addrs) {
+export function inviteMultipleToRoom(roomId, addrs) {
     const inviter = new MultiInviter(roomId);
     return inviter.invite(addrs).then(states => Promise.resolve({states, inviter}));
 }
 
 export function showStartChatInviteDialog() {
-    const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
-
-    Modal.createTrackedDialog('Start a chat', '', AddressPickerDialog, {
-        title: _t('Start a chat'),
-        description: _t("Who would you like to communicate with?"),
-        placeholder: (validAddressTypes) => {
-            // The set of valid address type can be mutated inside the dialog
-            // when you first have no IS but agree to use one in the dialog.
-            if (validAddressTypes.includes('email')) {
-                return _t("Email, name or Matrix ID");
-            }
-            return _t("Name or Matrix ID");
-        },
-        validAddressTypes: ['mx-user-id', 'email'],
-        button: _t("Start Chat"),
-        onFinished: _onStartDmFinished,
-    }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+    // This dialog handles the room creation internally - we don't need to worry about it.
+    const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
+    Modal.createTrackedDialog(
+        'Start DM', '', InviteDialog, {kind: KIND_DM},
+        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+    );
 }
 
 export function showRoomInviteDialog(roomId) {
-    const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
-
-    Modal.createTrackedDialog('Chat Invite', '', AddressPickerDialog, {
-        title: _t('Invite new room members'),
-        button: _t('Send Invites'),
-        placeholder: (validAddressTypes) => {
-            // The set of valid address type can be mutated inside the dialog
-            // when you first have no IS but agree to use one in the dialog.
-            if (validAddressTypes.includes('email')) {
-                return _t("Email, name or Matrix ID");
-            }
-            return _t("Name or Matrix ID");
-        },
-        validAddressTypes: ['mx-user-id', 'email'],
-        onFinished: (shouldInvite, addrs) => {
-            _onRoomInviteFinished(roomId, shouldInvite, addrs);
-        },
-    }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
+    // This dialog handles the room creation internally - we don't need to worry about it.
+    const InviteDialog = sdk.getComponent("dialogs.InviteDialog");
+    Modal.createTrackedDialog(
+        'Invite Users', '', InviteDialog, {kind: KIND_INVITE, roomId},
+        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+    );
 }
 
 /**
@@ -99,60 +74,6 @@ export function isValid3pidInvite(event) {
     return true;
 }
 
-// TODO: Immutable DMs replaces this
-function _onStartDmFinished(shouldInvite, addrs) {
-    if (!shouldInvite) return;
-
-    const addrTexts = addrs.map((addr) => addr.address);
-
-    if (_isDmChat(addrTexts)) {
-        const rooms = _getDirectMessageRooms(addrTexts[0]);
-        if (rooms.length > 0) {
-            // A Direct Message room already exists for this user, so reuse it
-            dis.dispatch({
-                action: 'view_room',
-                room_id: rooms[0],
-                should_peek: false,
-                joining: false,
-            });
-        } else {
-            // Start a new DM chat
-            createRoom({dmUserId: addrTexts[0]}).catch((err) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Failed to start chat', '', ErrorDialog, {
-                    title: _t("Failed to start chat"),
-                    description: ((err && err.message) ? err.message : _t("Operation failed")),
-                });
-            });
-        }
-    } else if (addrTexts.length === 1) {
-        // Start a new DM chat
-        createRoom({dmUserId: addrTexts[0]}).catch((err) => {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to start chat', '', ErrorDialog, {
-                title: _t("Failed to start chat"),
-                description: ((err && err.message) ? err.message : _t("Operation failed")),
-            });
-        });
-    } else {
-        // Start multi user chat
-        let room;
-        createRoom().then((roomId) => {
-            room = MatrixClientPeg.get().getRoom(roomId);
-            return inviteMultipleToRoom(roomId, addrTexts);
-        }).then((result) => {
-            return _showAnyInviteErrors(result.states, room, result.inviter);
-        }).catch((err) => {
-            console.error(err.stack);
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
-                title: _t("Failed to invite"),
-                description: ((err && err.message) ? err.message : _t("Operation failed")),
-            });
-        });
-    }
-}
-
 export function inviteUsersToRoom(roomId, userIds) {
     return inviteMultipleToRoom(roomId, userIds).then((result) => {
         const room = MatrixClientPeg.get().getRoom(roomId);
@@ -167,24 +88,6 @@ export function inviteUsersToRoom(roomId, userIds) {
     });
 }
 
-function _onRoomInviteFinished(roomId, shouldInvite, addrs) {
-    if (!shouldInvite) return;
-
-    const addrTexts = addrs.map((addr) => addr.address);
-
-    // Invite new users to a room
-    inviteUsersToRoom(roomId, addrTexts);
-}
-
-// TODO: Immutable DMs replaces this
-function _isDmChat(addrTexts) {
-    if (addrTexts.length === 1 && getAddressType(addrTexts[0]) === 'mx-user-id') {
-        return true;
-    } else {
-        return false;
-    }
-}
-
 function _showAnyInviteErrors(addrs, room, inviter) {
     // Show user any errors
     const failedUsers = Object.keys(addrs).filter(a => addrs[a] === 'error');
@@ -220,15 +123,3 @@ function _showAnyInviteErrors(addrs, room, inviter) {
 
     return addrs;
 }
-
-function _getDirectMessageRooms(addr) {
-    const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-    const dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
-    const rooms = dmRooms.filter((dmRoom) => {
-        const room = MatrixClientPeg.get().getRoom(dmRoom);
-        if (room) {
-            return room.getMyMembership() === 'join';
-        }
-    });
-    return rooms;
-}

src/RoomListSorter.js

@@ -24,12 +24,8 @@ function tsOfNewestEvent(room) {
     }
 }
 
-function mostRecentActivityFirst(roomList) {
+export function mostRecentActivityFirst(roomList) {
     return roomList.sort(function(a, b) {
         return tsOfNewestEvent(b) - tsOfNewestEvent(a);
     });
 }
-
-module.exports = {
-    mostRecentActivityFirst,
-};

src/RoomNotifs.js

@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
-import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';
 
 export const ALL_MESSAGES_LOUD = 'all_messages_loud';
 export const ALL_MESSAGES = 'all_messages';

src/Rooms.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 
 /**
  * Given a room object, return the alias we should use for it,
@@ -23,7 +23,7 @@ import MatrixClientPeg from './MatrixClientPeg';
  * of aliases. Otherwise return null;
  */
 export function getDisplayAliasForRoom(room) {
-    return room.getCanonicalAlias() || room.getAliases()[0];
+    return room.getCanonicalAlias() || room.getAltAliases()[0];
 }
 
 /**

src/ScalarAuthClient.js

@@ -18,16 +18,18 @@ limitations under the License.
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
-const request = require('browser-request');
-
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require('./MatrixClientPeg');
+import {MatrixClientPeg} from "./MatrixClientPeg";
+import request from "browser-request";
 
 import * as Matrix from 'matrix-js-sdk';
+import SdkConfig from "./SdkConfig";
+import {WidgetType} from "./widgets/WidgetType";
 
 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
 
+// TODO: Generify the name of this class and all components within - it's not just for Scalar.
+
 export default class ScalarAuthClient {
     constructor(apiUrl, uiUrl) {
         this.apiUrl = apiUrl;
@@ -234,20 +236,20 @@ export default class ScalarAuthClient {
      * Mark all assets associated with the specified widget as "disabled" in the
      * integration manager database.
      * This can be useful to temporarily prevent purchased assets from being displayed.
-     * @param  {string} widgetType [description]
-     * @param  {string} widgetId   [description]
+     * @param  {WidgetType} widgetType The Widget Type to disable assets for
+     * @param  {string} widgetId   The widget ID to disable assets for
      * @return {Promise}           Resolves on completion
      */
-    disableWidgetAssets(widgetType, widgetId) {
+    disableWidgetAssets(widgetType: WidgetType, widgetId) {
         let url = this.apiUrl + '/widgets/set_assets_state';
         url = this.getStarterLink(url);
         return new Promise((resolve, reject) => {
             request({
-                method: 'GET',
+                method: 'GET', // XXX: Actions shouldn't be GET requests
                 uri: url,
                 json: true,
                 qs: {
-                    'widget_type': widgetType,
+                    'widget_type': widgetType.preferred,
                     'widget_id': widgetId,
                     'state': 'disable',
                 },

src/ScalarMessaging.js

@@ -16,6 +16,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// TODO: Generify the name of this and all components within - it's not just for scalar.
+
 /*
 Listens for incoming postMessage requests from the integrations UI URL. The following API is exposed:
 {
@@ -172,6 +174,7 @@ Request:
 Response:
 [
     {
+        // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
         type: "im.vector.modular.widgets",
         state_key: "wid1",
         content: {
@@ -190,6 +193,7 @@ Example:
     room_id: "!foo:bar",
     response: [
         {
+            // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
             type: "im.vector.modular.widgets",
             state_key: "wid1",
             content: {
@@ -232,13 +236,14 @@ Example:
 }
 */
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import { MatrixEvent } from 'matrix-js-sdk';
-import dis from './dispatcher';
+import dis from './dispatcher/dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
 import RoomViewStore from './stores/RoomViewStore';
 import { _t } from './languageHandler';
 import {IntegrationManagers} from "./integrations/IntegrationManagers";
+import {WidgetType} from "./widgets/WidgetType";
 
 function sendResponse(event, res) {
     const data = JSON.parse(JSON.stringify(event.data));
@@ -290,7 +295,7 @@ function inviteUser(event, roomId, userId) {
 
 function setWidget(event, roomId) {
     const widgetId = event.data.widget_id;
-    const widgetType = event.data.type;
+    let widgetType = event.data.type;
     const widgetUrl = event.data.url;
     const widgetName = event.data.name; // optional
     const widgetData = event.data.data; // optional
@@ -322,6 +327,9 @@ function setWidget(event, roomId) {
         }
     }
 
+    // convert the widget type to a known widget type
+    widgetType = WidgetType.fromString(widgetType);
+
     if (userWidget) {
         WidgetUtils.setUserWidget(widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
             sendResponse(event, {
@@ -658,30 +666,29 @@ const onMessage = function(event) {
 
 let listenerCount = 0;
 let openManagerUrl = null;
-module.exports = {
-    startListening: function() {
-        if (listenerCount === 0) {
-            window.addEventListener("message", onMessage, false);
-        }
-        listenerCount += 1;
-    },
 
-    stopListening: function() {
-        listenerCount -= 1;
-        if (listenerCount === 0) {
-            window.removeEventListener("message", onMessage);
-        }
-        if (listenerCount < 0) {
-            // Make an error so we get a stack trace
-            const e = new Error(
-                "ScalarMessaging: mismatched startListening / stopListening detected." +
-                " Negative count",
-            );
-            console.error(e);
-        }
-    },
+export function startListening() {
+    if (listenerCount === 0) {
+        window.addEventListener("message", onMessage, false);
+    }
+    listenerCount += 1;
+}
 
-    setOpenManagerUrl: function(url) {
-        openManagerUrl = url;
-    },
-};
+export function stopListening() {
+    listenerCount -= 1;
+    if (listenerCount === 0) {
+        window.removeEventListener("message", onMessage);
+    }
+    if (listenerCount < 0) {
+        // Make an error so we get a stack trace
+        const e = new Error(
+            "ScalarMessaging: mismatched startListening / stopListening detected." +
+            " Negative count",
+        );
+        console.error(e);
+    }
+}
+
+export function setOpenManagerUrl(url) {
+    openManagerUrl = url;
+}

src/SdkConfig.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,39 +15,55 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export const DEFAULTS = {
+export interface ConfigOptions {
+    [key: string]: any;
+}
+
+export const DEFAULTS: ConfigOptions = {
     // URL to a page we show in an iframe to configure integrations
     integrations_ui_url: "https://scalar.vector.im/",
     // Base URL to the REST interface of the integrations server
     integrations_rest_url: "https://scalar.vector.im/api",
     // Where to send bug reports. If not specified, bugs cannot be sent.
     bug_report_endpoint_url: null,
+    // Jitsi conference options
+    jitsi: {
+        // Default conference domain
+        preferredDomain: "jitsi.riot.im",
+    },
 };
 
-class SdkConfig {
-    static get() {
-        return global.mxReactSdkConfig || {};
+export default class SdkConfig {
+    private static instance: ConfigOptions;
+
+    private static setInstance(i: ConfigOptions) {
+        SdkConfig.instance = i;
+
+        // For debugging purposes
+        (<any>window).mxReactSdkConfig = i;
     }
 
-    static put(cfg) {
+    static get() {
+        return SdkConfig.instance || {};
+    }
+
+    static put(cfg: ConfigOptions) {
         const defaultKeys = Object.keys(DEFAULTS);
         for (let i = 0; i < defaultKeys.length; ++i) {
             if (cfg[defaultKeys[i]] === undefined) {
                 cfg[defaultKeys[i]] = DEFAULTS[defaultKeys[i]];
             }
         }
-        global.mxReactSdkConfig = cfg;
+        SdkConfig.setInstance(cfg);
     }
 
     static unset() {
-        global.mxReactSdkConfig = undefined;
+        SdkConfig.setInstance({});
     }
 
-    static add(cfg) {
+    static add(cfg: ConfigOptions) {
         const liveConfig = SdkConfig.get();
         const newConfig = Object.assign({}, liveConfig, cfg);
         SdkConfig.put(newConfig);
     }
 }
-
-module.exports = SdkConfig;

src/Searching.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EventIndexPeg from "./indexing/EventIndexPeg";
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 
 function serverSideSearch(term, roomId = undefined) {
     let filter;
@@ -87,6 +87,13 @@ async function localSearch(searchTerm, roomId = undefined) {
         searchArgs.room_id = roomId;
     }
 
+    const emptyResult = {
+        results: [],
+        highlights: [],
+    };
+
+    if (searchTerm === "") return emptyResult;
+
     const eventIndex = EventIndexPeg.get();
 
     const localResult = await eventIndex.search(searchArgs);
@@ -97,11 +104,6 @@ async function localSearch(searchTerm, roomId = undefined) {
         },
     };
 
-    const emptyResult = {
-        results: [],
-        highlights: [],
-    };
-
     const result = MatrixClientPeg.get()._processRoomEventsSearch(
         emptyResult, response);
 

src/Skinner.js

@@ -20,6 +20,7 @@ class Skinner {
     }
 
     getComponent(name) {
+        if (!name) throw new Error(`Invalid component name: ${name}`);
         if (this.components === null) {
             throw new Error(
                 "Attempted to get a component before a skin has been loaded."+
@@ -28,21 +29,31 @@ class Skinner {
                 " b) A component has called getComponent at the root level",
             );
         }
-        let comp = this.components[name];
-        // XXX: Temporarily also try 'views.' as we're currently
-        // leaving the 'views.' off views.
-        if (!comp) {
-            comp = this.components['views.'+name];
-        }
 
+        const doLookup = (components) => {
+            if (!components) return null;
+            let comp = components[name];
+            // XXX: Temporarily also try 'views.' as we're currently
+            // leaving the 'views.' off views.
+            if (!comp) {
+                comp = components['views.' + name];
+            }
+            return comp;
+        };
+
+        // Check the skin first
+        const comp = doLookup(this.components);
+
+        // Just return nothing instead of erroring - the consumer should be smart enough to
+        // handle this at this point.
         if (!comp) {
-            throw new Error("No such component: "+name);
+            return null;
         }
 
         // components have to be functions.
         const validType = typeof comp === 'function';
         if (!validType) {
-            throw new Error(`Not a valid component: ${name}.`);
+            throw new Error(`Not a valid component: ${name} (type = ${typeof(comp)}).`);
         }
         return comp;
     }
@@ -59,6 +70,13 @@ class Skinner {
             const comp = skinObject.components[compKeys[i]];
             this.addComponent(compKeys[i], comp);
         }
+
+        // Now that we have a skin, load our components too
+        const idx = require("./component-index");
+        if (!idx || !idx.components) throw new Error("Invalid react-sdk component index");
+        for (const c in idx.components) {
+            if (!this.components[c]) this.components[c] = idx.components[c];
+        }
     }
 
     addComponent(name, comp) {
@@ -90,5 +108,5 @@ class Skinner {
 if (global.mxSkinner === undefined) {
     global.mxSkinner = new Skinner();
 }
-module.exports = global.mxSkinner;
+export default global.mxSkinner;
 

src/SlashCommands.tsx

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,10 +18,11 @@ limitations under the License.
 */
 
 
-import React from 'react';
-import MatrixClientPeg from './MatrixClientPeg';
-import dis from './dispatcher';
-import sdk from './index';
+import * as React from 'react';
+
+import {MatrixClientPeg} from './MatrixClientPeg';
+import dis from './dispatcher/dispatcher';
+import * as sdk from './index';
 import {_t, _td} from './languageHandler';
 import Modal from './Modal';
 import MultiInviter from './utils/MultiInviter';
@@ -33,12 +35,25 @@ import { abbreviateUrl } from './utils/UrlUtils';
 import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/IdentityServerUtils';
 import {isPermalinkHost, parsePermalink} from "./utils/permalinks/Permalinks";
 import {inviteUsersToRoom} from "./RoomInvite";
+import { WidgetType } from "./widgets/WidgetType";
+import { Jitsi } from "./widgets/Jitsi";
+import { parseFragment as parseHtml } from "parse5";
+import sendBugReport from "./rageshake/submit-rageshake";
+import SdkConfig from "./SdkConfig";
+import { ensureDMExists } from "./createRoom";
+import { ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
+import { Action } from "./dispatcher/actions";
 
-const singleMxcUpload = async () => {
+// XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
+interface HTMLInputEvent extends Event {
+    target: HTMLInputElement & EventTarget;
+}
+
+const singleMxcUpload = async (): Promise<any> => {
     return new Promise((resolve) => {
         const fileSelector = document.createElement('input');
         fileSelector.setAttribute('type', 'file');
-        fileSelector.onchange = (ev) => {
+        fileSelector.onchange = (ev: HTMLInputEvent) => {
             const file = ev.target.files[0];
 
             const UploadConfirmDialog = sdk.getComponent("dialogs.UploadConfirmDialog");
@@ -62,26 +77,49 @@ export const CommandCategories = {
     "other": _td("Other"),
 };
 
-class Command {
-    constructor({name, args='', description, runFn, category=CommandCategories.other, hideCompletionAfterSpace=false}) {
-        this.command = '/' + name;
-        this.args = args;
-        this.description = description;
-        this.runFn = runFn;
-        this.category = category;
-        this.hideCompletionAfterSpace = hideCompletionAfterSpace;
+type RunFn = ((roomId: string, args: string, cmd: string) => {error: any} | {promise: Promise<any>});
+
+interface ICommandOpts {
+    command: string;
+    aliases?: string[];
+    args?: string;
+    description: string;
+    runFn?: RunFn;
+    category: string;
+    hideCompletionAfterSpace?: boolean;
+}
+
+export class Command {
+    command: string;
+    aliases: string[];
+    args: undefined | string;
+    description: string;
+    runFn: undefined | RunFn;
+    category: string;
+    hideCompletionAfterSpace: boolean;
+
+    constructor(opts: ICommandOpts) {
+        this.command = opts.command;
+        this.aliases = opts.aliases || [];
+        this.args = opts.args || "";
+        this.description = opts.description;
+        this.runFn = opts.runFn;
+        this.category = opts.category || CommandCategories.other;
+        this.hideCompletionAfterSpace = opts.hideCompletionAfterSpace || false;
     }
 
     getCommand() {
-        return this.command;
+        return `/${this.command}`;
     }
 
     getCommandWithArgs() {
         return this.getCommand() + " " + this.args;
     }
 
-    run(roomId, args) {
-        return this.runFn.bind(this)(roomId, args);
+    run(roomId: string, args: string, cmd: string) {
+        // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
+        if (!this.runFn) return;
+        return this.runFn.bind(this)(roomId, args, cmd);
     }
 
     getUsage() {
@@ -93,7 +131,7 @@ function reject(error) {
     return {error};
 }
 
-function success(promise) {
+function success(promise?: Promise<any>) {
     return {promise};
 }
 
@@ -101,11 +139,9 @@ function success(promise) {
  * functions are called with `this` bound to the Command instance.
  */
 
-/* eslint-disable babel/no-invalid-this */
-
-export const CommandMap = {
-    shrug: new Command({
-        name: 'shrug',
+export const Commands = [
+    new Command({
+        command: 'shrug',
         args: '<message>',
         description: _td('Prepends ¯\\_(ツ)_/¯ to a plain-text message'),
         runFn: function(roomId, args) {
@@ -117,8 +153,8 @@ export const CommandMap = {
         },
         category: CommandCategories.messages,
     }),
-    plain: new Command({
-        name: 'plain',
+    new Command({
+        command: 'plain',
         args: '<message>',
         description: _td('Sends a message as plain text, without interpreting it as markdown'),
         runFn: function(roomId, messages) {
@@ -126,11 +162,20 @@ export const CommandMap = {
         },
         category: CommandCategories.messages,
     }),
-    ddg: new Command({
-        name: 'ddg',
+    new Command({
+        command: 'html',
+        args: '<message>',
+        description: _td('Sends a message as html, without interpreting it as markdown'),
+        runFn: function(roomId, messages) {
+            return success(MatrixClientPeg.get().sendHtmlMessage(roomId, messages, messages));
+        },
+        category: CommandCategories.messages,
+    }),
+    new Command({
+        command: 'ddg',
         args: '<query>',
         description: _td('Searches DuckDuckGo for results'),
-        runFn: function(roomId, args) {
+        runFn: function() {
             const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             // TODO Don't explain this away, actually show a search UI here.
             Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
@@ -142,9 +187,8 @@ export const CommandMap = {
         category: CommandCategories.actions,
         hideCompletionAfterSpace: true,
     }),
-
-    upgraderoom: new Command({
-        name: 'upgraderoom',
+    new Command({
+        command: 'upgraderoom',
         args: '<new_version>',
         description: _td('Upgrades a room to a new version'),
         runFn: function(roomId, args) {
@@ -213,9 +257,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    nick: new Command({
-        name: 'nick',
+    new Command({
+        command: 'nick',
         args: '<display_name>',
         description: _td('Changes your display nickname'),
         runFn: function(roomId, args) {
@@ -226,9 +269,9 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    myroomnick: new Command({
-        name: 'myroomnick',
+    new Command({
+        command: 'myroomnick',
+        aliases: ['roomnick'],
         args: '<display_name>',
         description: _td('Changes your display nickname in the current room only'),
         runFn: function(roomId, args) {
@@ -245,9 +288,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    roomavatar: new Command({
-        name: 'roomavatar',
+    new Command({
+        command: 'roomavatar',
         args: '[<mxc_url>]',
         description: _td('Changes the avatar of the current room'),
         runFn: function(roomId, args) {
@@ -263,9 +305,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    myroomavatar: new Command({
-        name: 'myroomavatar',
+    new Command({
+        command: 'myroomavatar',
         args: '[<mxc_url>]',
         description: _td('Changes your avatar in this current room only'),
         runFn: function(roomId, args) {
@@ -290,9 +331,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    myavatar: new Command({
-        name: 'myavatar',
+    new Command({
+        command: 'myavatar',
         args: '[<mxc_url>]',
         description: _td('Changes your avatar in all rooms'),
         runFn: function(roomId, args) {
@@ -308,9 +348,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    topic: new Command({
-        name: 'topic',
+    new Command({
+        command: 'topic',
         args: '[<topic>]',
         description: _td('Gets or sets the room topic'),
         runFn: function(roomId, args) {
@@ -319,7 +358,7 @@ export const CommandMap = {
                 return success(cli.setRoomTopic(roomId, args));
             }
             const room = cli.getRoom(roomId);
-            if (!room) return reject('Bad room ID: ' + roomId);
+            if (!room) return reject(_t("Failed to set topic"));
 
             const topicEvents = room.currentState.getStateEvents('m.room.topic', '');
             const topic = topicEvents && topicEvents.getContent().topic;
@@ -329,14 +368,14 @@ export const CommandMap = {
             Modal.createTrackedDialog('Slash Commands', 'Topic', InfoDialog, {
                 title: room.name,
                 description: <div dangerouslySetInnerHTML={{ __html: topicHtml }} />,
+                hasCloseButton: true,
             });
             return success();
         },
         category: CommandCategories.admin,
     }),
-
-    roomname: new Command({
-        name: 'roomname',
+    new Command({
+        command: 'roomname',
         args: '<name>',
         description: _td('Sets the room name'),
         runFn: function(roomId, args) {
@@ -347,9 +386,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    invite: new Command({
-        name: 'invite',
+    new Command({
+        command: 'invite',
         args: '<user-id>',
         description: _td('Invites user with given id to current room'),
         runFn: function(roomId, args) {
@@ -383,17 +421,20 @@ export const CommandMap = {
                                     button: _t("Continue"),
                                 },
                             ));
+
+                            finished = finished.then(([useDefault]: any) => {
+                                if (useDefault) {
+                                    useDefaultIdentityServer();
+                                    return;
+                                }
+                                throw new Error(_t("Use an identity server to invite by email. Manage in Settings."));
+                            });
                         } else {
                             return reject(_t("Use an identity server to invite by email. Manage in Settings."));
                         }
                     }
                     const inviter = new MultiInviter(roomId);
-                    return success(finished.then(([useDefault] = []) => {
-                        if (useDefault) {
-                            useDefaultIdentityServer();
-                        } else if (useDefault === false) {
-                            throw new Error(_t("Use an identity server to invite by email. Manage in Settings."));
-                        }
+                    return success(finished.then(() => {
                         return inviter.invite([address]);
                     }).then(() => {
                         if (inviter.getCompletionState(address) !== "invited") {
@@ -406,12 +447,12 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    join: new Command({
-        name: 'join',
-        args: '<room-alias>',
-        description: _td('Joins room with given alias'),
-        runFn: function(roomId, args) {
+    new Command({
+        command: 'join',
+        aliases: ['j', 'goto'],
+        args: '<room-address>',
+        description: _td('Joins room with given address'),
+        runFn: function(_, args) {
             if (args) {
                 // Note: we support 2 versions of this command. The first is
                 // the public-facing one for most users and the other is a
@@ -519,10 +560,9 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    part: new Command({
-        name: 'part',
-        args: '[<room-alias>]',
+    new Command({
+        command: 'part',
+        args: '[<room-address>]',
         description: _td('Leave room'),
         runFn: function(roomId, args) {
             const cli = MatrixClientPeg.get();
@@ -554,7 +594,7 @@ export const CommandMap = {
                         }
                         if (targetRoomId) break;
                     }
-                    if (!targetRoomId) return reject(_t('Unrecognised room alias:') + ' ' + roomAlias);
+                    if (!targetRoomId) return reject(_t('Unrecognised room address:') + ' ' + roomAlias);
                 }
             }
 
@@ -567,9 +607,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    kick: new Command({
-        name: 'kick',
+    new Command({
+        command: 'kick',
         args: '<user-id> [reason]',
         description: _td('Kicks user with given id'),
         runFn: function(roomId, args) {
@@ -583,10 +622,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    // Ban a user from the room with an optional reason
-    ban: new Command({
-        name: 'ban',
+    new Command({
+        command: 'ban',
         args: '<user-id> [reason]',
         description: _td('Bans user with given id'),
         runFn: function(roomId, args) {
@@ -600,10 +637,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    // Unban a user from ythe room
-    unban: new Command({
-        name: 'unban',
+    new Command({
+        command: 'unban',
         args: '<user-id>',
         description: _td('Unbans user with given ID'),
         runFn: function(roomId, args) {
@@ -618,9 +653,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    ignore: new Command({
-        name: 'ignore',
+    new Command({
+        command: 'ignore',
         args: '<user-id>',
         description: _td('Ignores a user, hiding their messages from you'),
         runFn: function(roomId, args) {
@@ -649,9 +683,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    unignore: new Command({
-        name: 'unignore',
+    new Command({
+        command: 'unignore',
         args: '<user-id>',
         description: _td('Stops ignoring a user, showing their messages going forward'),
         runFn: function(roomId, args) {
@@ -681,10 +714,8 @@ export const CommandMap = {
         },
         category: CommandCategories.actions,
     }),
-
-    // Define the power level of a user
-    op: new Command({
-        name: 'op',
+    new Command({
+        command: 'op',
         args: '<user-id> [<power-level>]',
         description: _td('Define the power level of a user'),
         runFn: function(roomId, args) {
@@ -694,14 +725,15 @@ export const CommandMap = {
                 if (matches) {
                     const userId = matches[1];
                     if (matches.length === 4 && undefined !== matches[3]) {
-                        powerLevel = parseInt(matches[3]);
+                        powerLevel = parseInt(matches[3], 10);
                     }
                     if (!isNaN(powerLevel)) {
                         const cli = MatrixClientPeg.get();
                         const room = cli.getRoom(roomId);
-                        if (!room) return reject('Bad room ID: ' + roomId);
+                        if (!room) return reject(_t("Command failed"));
 
                         const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                        if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
                         return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
                     }
                 }
@@ -710,10 +742,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    // Reset the power level of a user
-    deop: new Command({
-        name: 'deop',
+    new Command({
+        command: 'deop',
         args: '<user-id>',
         description: _td('Deops user with given id'),
         runFn: function(roomId, args) {
@@ -722,9 +752,10 @@ export const CommandMap = {
                 if (matches) {
                     const cli = MatrixClientPeg.get();
                     const room = cli.getRoom(roomId);
-                    if (!room) return reject('Bad room ID: ' + roomId);
+                    if (!room) return reject(_t("Command failed"));
 
                     const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                    if (!powerLevelEvent.getContent().users[args]) return reject(_t("Could not find user in room"));
                     return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
                 }
             }
@@ -732,9 +763,8 @@ export const CommandMap = {
         },
         category: CommandCategories.admin,
     }),
-
-    devtools: new Command({
-        name: 'devtools',
+    new Command({
+        command: 'devtools',
         description: _td('Opens the Developer Tools dialog'),
         runFn: function(roomId) {
             const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
@@ -743,33 +773,62 @@ export const CommandMap = {
         },
         category: CommandCategories.advanced,
     }),
-
-    addwidget: new Command({
-        name: 'addwidget',
-        args: '<url>',
+    new Command({
+        command: 'addwidget',
+        args: '<url | embed code | Jitsi url>',
         description: _td('Adds a custom widget by URL to the room'),
-        runFn: function(roomId, args) {
-            if (!args || (!args.startsWith("https://") && !args.startsWith("http://"))) {
+        runFn: function(roomId, widgetUrl) {
+            if (!widgetUrl) {
+                return reject(_t("Please supply a widget URL or embed code"));
+            }
+
+            // Try and parse out a widget URL from iframes
+            if (widgetUrl.toLowerCase().startsWith("<iframe ")) {
+                // We use parse5, which doesn't render/create a DOM node. It instead runs
+                // some superfast regex over the text so we don't have to.
+                const embed = parseHtml(widgetUrl);
+                if (embed && embed.childNodes && embed.childNodes.length === 1) {
+                    const iframe = embed.childNodes[0];
+                    if (iframe.tagName.toLowerCase() === 'iframe' && iframe.attrs) {
+                        const srcAttr = iframe.attrs.find(a => a.name === 'src');
+                        console.log("Pulling URL out of iframe (embed code)");
+                        widgetUrl = srcAttr.value;
+                    }
+                }
+            }
+
+            if (!widgetUrl.startsWith("https://") && !widgetUrl.startsWith("http://")) {
                 return reject(_t("Please supply a https:// or http:// widget URL"));
             }
             if (WidgetUtils.canUserModifyWidgets(roomId)) {
                 const userId = MatrixClientPeg.get().getUserId();
                 const nowMs = (new Date()).getTime();
                 const widgetId = encodeURIComponent(`${roomId}_${userId}_${nowMs}`);
-                return success(WidgetUtils.setRoomWidget(
-                    roomId, widgetId, "m.custom", args, "Custom Widget", {}));
+                let type = WidgetType.CUSTOM;
+                let name = "Custom Widget";
+                let data = {};
+
+                // Make the widget a Jitsi widget if it looks like a Jitsi widget
+                const jitsiData = Jitsi.getInstance().parsePreferredConferenceUrl(widgetUrl);
+                if (jitsiData) {
+                    console.log("Making /addwidget widget a Jitsi conference");
+                    type = WidgetType.JITSI;
+                    name = "Jitsi Conference";
+                    data = jitsiData;
+                    widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl();
+                }
+
+                return success(WidgetUtils.setRoomWidget(roomId, widgetId, type, widgetUrl, name, data));
             } else {
                 return reject(_t("You cannot modify widgets in this room."));
             }
         },
         category: CommandCategories.admin,
     }),
-
-    // Verify a user, device, and pubkey tuple
-    verify: new Command({
-        name: 'verify',
+    new Command({
+        command: 'verify',
         args: '<user-id> <device-id> <device-signing-key>',
-        description: _td('Verifies a user, device, and pubkey tuple'),
+        description: _td('Verifies a user, session, and pubkey tuple'),
         runFn: function(roomId, args) {
             if (args) {
                 const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
@@ -780,74 +839,60 @@ export const CommandMap = {
                     const deviceId = matches[2];
                     const fingerprint = matches[3];
 
-                    return success(
-                        // Promise.resolve to handle transition from static result to promise; can be removed
-                        // in future
-                        Promise.resolve(cli.getStoredDevice(userId, deviceId)).then((device) => {
-                            if (!device) {
-                                throw new Error(_t('Unknown (user, device) pair:') + ` (${userId}, ${deviceId})`);
-                            }
+                    return success((async () => {
+                        const device = cli.getStoredDevice(userId, deviceId);
+                        if (!device) {
+                            throw new Error(_t('Unknown (user, session) pair:') + ` (${userId}, ${deviceId})`);
+                        }
+                        const deviceTrust = await cli.checkDeviceTrust(userId, deviceId);
 
-                            if (device.isVerified()) {
-                                if (device.getFingerprint() === fingerprint) {
-                                    throw new Error(_t('Device already verified!'));
-                                } else {
-                                    throw new Error(_t('WARNING: Device already verified, but keys do NOT MATCH!'));
-                                }
+                        if (deviceTrust.isVerified()) {
+                            if (device.getFingerprint() === fingerprint) {
+                                throw new Error(_t('Session already verified!'));
+                            } else {
+                                throw new Error(_t('WARNING: Session already verified, but keys do NOT MATCH!'));
                             }
+                        }
 
-                            if (device.getFingerprint() !== fingerprint) {
-                                const fprint = device.getFingerprint();
-                                throw new Error(
-                                    _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
-                                        ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
-                                        '"%(fingerprint)s". This could mean your communications are being intercepted!',
-                                        {
-                                            fprint,
-                                            userId,
-                                            deviceId,
-                                            fingerprint,
-                                        }));
-                            }
+                        if (device.getFingerprint() !== fingerprint) {
+                            const fprint = device.getFingerprint();
+                            throw new Error(
+                                _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session' +
+                                    ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
+                                    '"%(fingerprint)s". This could mean your communications are being intercepted!',
+                                    {
+                                        fprint,
+                                        userId,
+                                        deviceId,
+                                        fingerprint,
+                                    }));
+                        }
 
-                            return cli.setDeviceVerified(userId, deviceId, true);
-                        }).then(() => {
-                            // Tell the user we verified everything
-                            const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
-                            Modal.createTrackedDialog('Slash Commands', 'Verified key', InfoDialog, {
-                                title: _t('Verified key'),
-                                description: <div>
-                                    <p>
-                                        {
-                                            _t('The signing key you provided matches the signing key you received ' +
-                                                'from %(userId)s\'s device %(deviceId)s. Device marked as verified.',
-                                                {userId, deviceId})
-                                        }
-                                    </p>
-                                </div>,
-                            });
-                        }),
-                    );
+                        await cli.setDeviceVerified(userId, deviceId, true);
+
+                        // Tell the user we verified everything
+                        const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+                        Modal.createTrackedDialog('Slash Commands', 'Verified key', InfoDialog, {
+                            title: _t('Verified key'),
+                            description: <div>
+                                <p>
+                                    {
+                                        _t('The signing key you provided matches the signing key you received ' +
+                                            'from %(userId)s\'s session %(deviceId)s. Session marked as verified.',
+                                            {userId, deviceId})
+                                    }
+                                </p>
+                            </div>,
+                        });
+                    })());
                 }
             }
             return reject(this.getUsage());
         },
         category: CommandCategories.advanced,
     }),
-
-    // Command definitions for autocompletion ONLY:
-
-    // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
-    me: new Command({
-        name: 'me',
-        args: '<message>',
-        description: _td('Displays action'),
-        category: CommandCategories.messages,
-        hideCompletionAfterSpace: true,
-    }),
-
-    discardsession: new Command({
-        name: 'discardsession',
+    new Command({
+        command: 'discardsession',
         description: _td('Forces the current outbound group session in an encrypted room to be discarded'),
         runFn: function(roomId) {
             try {
@@ -859,9 +904,8 @@ export const CommandMap = {
         },
         category: CommandCategories.advanced,
     }),
-
-    rainbow: new Command({
-        name: "rainbow",
+    new Command({
+        command: "rainbow",
         description: _td("Sends the given message coloured as a rainbow"),
         args: '<message>',
         runFn: function(roomId, args) {
@@ -870,9 +914,8 @@ export const CommandMap = {
         },
         category: CommandCategories.messages,
     }),
-
-    rainbowme: new Command({
-        name: "rainbowme",
+    new Command({
+        command: "rainbowme",
         description: _td("Sends the given emote coloured as a rainbow"),
         args: '<message>',
         runFn: function(roomId, args) {
@@ -881,9 +924,8 @@ export const CommandMap = {
         },
         category: CommandCategories.messages,
     }),
-
-    help: new Command({
-        name: "help",
+    new Command({
+        command: "help",
         description: _td("Displays list of commands with usages and descriptions"),
         runFn: function() {
             const SlashCommandHelpDialog = sdk.getComponent('dialogs.SlashCommandHelpDialog');
@@ -893,52 +935,145 @@ export const CommandMap = {
         },
         category: CommandCategories.advanced,
     }),
-};
-/* eslint-enable babel/no-invalid-this */
+    new Command({
+        command: "whois",
+        description: _td("Displays information about a user"),
+        args: "<user-id>",
+        runFn: function(roomId, userId) {
+            if (!userId || !userId.startsWith("@") || !userId.includes(":")) {
+                return reject(this.getUsage());
+            }
 
+            const member = MatrixClientPeg.get().getRoom(roomId).getMember(userId);
+            dis.dispatch<ViewUserPayload>({
+                action: Action.ViewUser,
+                // XXX: We should be using a real member object and not assuming what the
+                // receiver wants.
+                member: member || {userId},
+            });
+            return success();
+        },
+        category: CommandCategories.advanced,
+    }),
+    new Command({
+        command: "rageshake",
+        aliases: ["bugreport"],
+        description: _td("Send a bug report with logs"),
+        args: "<description>",
+        runFn: function(roomId, args) {
+            return success(
+                sendBugReport(SdkConfig.get().bug_report_endpoint_url, {
+                    userText: args,
+                    sendLogs: true,
+                }).then(() => {
+                    const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+                    Modal.createTrackedDialog('Slash Commands', 'Rageshake sent', InfoDialog, {
+                        title: _t('Logs sent'),
+                        description: _t('Thank you!'),
+                    });
+                }),
+            );
+        },
+        category: CommandCategories.advanced,
+    }),
+    new Command({
+        command: "query",
+        description: _td("Opens chat with the given user"),
+        args: "<user-id>",
+        runFn: function(roomId, userId) {
+            if (!userId || !userId.startsWith("@") || !userId.includes(":")) {
+                return reject(this.getUsage());
+            }
 
-// helpful aliases
-const aliases = {
-    j: "join",
-    newballsplease: "discardsession",
-    goto: "join", // because it handles event permalinks magically
-    roomnick: "myroomnick",
-};
+            return success((async () => {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: await ensureDMExists(MatrixClientPeg.get(), userId),
+                });
+            })());
+        },
+        category: CommandCategories.actions,
+    }),
+    new Command({
+        command: "msg",
+        description: _td("Sends a message to the given user"),
+        args: "<user-id> <message>",
+        runFn: function(_, args) {
+            if (args) {
+                // matches the first whitespace delimited group and then the rest of the string
+                const matches = args.match(/^(\S+?)(?: +(.*))?$/s);
+                if (matches) {
+                    const [userId, msg] = matches.slice(1);
+                    if (msg && userId && userId.startsWith("@") && userId.includes(":")) {
+                        return success((async () => {
+                            const cli = MatrixClientPeg.get();
+                            const roomId = await ensureDMExists(cli, userId);
+                            dis.dispatch({
+                                action: 'view_room',
+                                room_id: roomId,
+                            });
+                            cli.sendTextMessage(roomId, msg);
+                        })());
+                    }
+                }
+            }
 
+            return reject(this.getUsage());
+        },
+        category: CommandCategories.actions,
+    }),
 
-/**
- * Process the given text for /commands and perform them.
- * @param {string} roomId The room in which the command was performed.
- * @param {string} input The raw text input by the user.
- * @return {Object|null} An object with the property 'error' if there was an error
- * processing the command, or 'promise' if a request was sent out.
- * Returns null if the input didn't match a command.
- */
-export function processCommandInput(roomId, input) {
+    // Command definitions for autocompletion ONLY:
+    // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
+    new Command({
+        command: "me",
+        args: '<message>',
+        description: _td('Displays action'),
+        category: CommandCategories.messages,
+        hideCompletionAfterSpace: true,
+    }),
+];
+
+// build a map from names and aliases to the Command objects.
+export const CommandMap = new Map();
+Commands.forEach(cmd => {
+    CommandMap.set(cmd.command, cmd);
+    cmd.aliases.forEach(alias => {
+        CommandMap.set(alias, cmd);
+    });
+});
+
+export function parseCommandString(input) {
     // trim any trailing whitespace, as it can confuse the parser for
     // IRC-style commands
     input = input.replace(/\s+$/, '');
     if (input[0] !== '/') return null; // not a command
 
-    const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
+    const bits = input.match(/^(\S+?)(?: +((.|\n)*))?$/);
     let cmd;
     let args;
     if (bits) {
         cmd = bits[1].substring(1).toLowerCase();
-        args = bits[3];
+        args = bits[2];
     } else {
         cmd = input;
     }
 
-    if (aliases[cmd]) {
-        cmd = aliases[cmd];
-    }
-    if (CommandMap[cmd]) {
-        // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
-        if (!CommandMap[cmd].runFn) return null;
+    return {cmd, args};
+}
 
-        return CommandMap[cmd].run(roomId, args);
-    } else {
-        return reject(_t('Unrecognised command:') + ' ' + input);
+/**
+ * Process the given text for /commands and return a bound method to perform them.
+ * @param {string} roomId The room in which the command was performed.
+ * @param {string} input The raw text input by the user.
+ * @return {null|function(): Object} Function returning an object with the property 'error' if there was an error
+ * processing the command, or 'promise' if a request was sent out.
+ * Returns null if the input didn't match a command.
+ */
+export function getCommand(roomId, input) {
+    const {cmd, args} = parseCommandString(input);
+
+    if (CommandMap.has(cmd)) {
+        return () => CommandMap.get(cmd).run(roomId, args, cmd);
     }
 }

src/SlateComposerHistoryManager.js

@@ -1,86 +0,0 @@
-//@flow
-/*
-Copyright 2017 Aviral Dasgupta
-
-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 {Value} from 'slate';
-
-import _clamp from 'lodash/clamp';
-
-type MessageFormat = 'rich' | 'markdown';
-
-class HistoryItem {
-    // We store history items in their native format to ensure history is accurate
-    // and then convert them if our RTE has subsequently changed format.
-    value: Value;
-    format: MessageFormat = 'rich';
-
-    constructor(value: ?Value, format: ?MessageFormat) {
-        this.value = value;
-        this.format = format;
-    }
-
-    static fromJSON(obj: Object): HistoryItem {
-        return new HistoryItem(
-            Value.fromJSON(obj.value),
-            obj.format,
-        );
-    }
-
-    toJSON(): Object {
-        return {
-            value: this.value.toJSON(),
-            format: this.format,
-        };
-    }
-}
-
-export default class SlateComposerHistoryManager {
-    history: Array<HistoryItem> = [];
-    prefix: string;
-    lastIndex: number = 0; // used for indexing the storage
-    currentIndex: number = 0; // used for indexing the loaded validated history Array
-
-    constructor(roomId: string, prefix: string = 'mx_composer_history_') {
-        this.prefix = prefix + roomId;
-
-        // TODO: Performance issues?
-        let item;
-        for (; item = sessionStorage.getItem(`${this.prefix}[${this.currentIndex}]`); this.currentIndex++) {
-            try {
-                this.history.push(
-                    HistoryItem.fromJSON(JSON.parse(item)),
-                );
-            } catch (e) {
-                console.warn("Throwing away unserialisable history", e);
-            }
-        }
-        this.lastIndex = this.currentIndex;
-        // reset currentIndex to account for any unserialisable history
-        this.currentIndex = this.history.length;
-    }
-
-    save(value: Value, format: MessageFormat) {
-        const item = new HistoryItem(value, format);
-        this.history.push(item);
-        this.currentIndex = this.history.length;
-        sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item.toJSON()));
-    }
-
-    getItem(offset: number): ?HistoryItem {
-        this.currentIndex = _clamp(this.currentIndex + offset, 0, this.history.length - 1);
-        return this.history[this.currentIndex];
-    }
-}

src/Terms.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import classNames from 'classnames';
 
-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import * as sdk from './';
 import Modal from './Modal';
 
 export class TermsNotSignedError extends Error {}

src/TextForEvent.js

@@ -13,7 +13,7 @@ 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 MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import CallHandler from './CallHandler';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
@@ -127,6 +127,13 @@ function textForRoomNameEvent(ev) {
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
         return _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
     }
+    if (ev.getPrevContent().name) {
+        return _t('%(senderDisplayName)s changed the room name from %(oldRoomName)s to %(newRoomName)s.', {
+            senderDisplayName,
+            oldRoomName: ev.getPrevContent().name,
+            newRoomName: ev.getContent().name,
+        });
+    }
     return _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {
         senderDisplayName,
         roomName: ev.getContent().name,
@@ -269,61 +276,55 @@ function textForMessageEvent(ev) {
     return message;
 }
 
-function textForRoomAliasesEvent(ev) {
-    // An alternative implementation of this as a first-class event can be found at
-    // https://github.com/matrix-org/matrix-react-sdk/blob/dc7212ec2bd12e1917233ed7153b3e0ef529a135/src/components/views/messages/RoomAliasesEvent.js
-    // This feels a bit overkill though, and it's not clear the i18n really needs it
-    // so instead it's landing as a simple textual event.
-
-    const senderName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    const oldAliases = ev.getPrevContent().aliases || [];
-    const newAliases = ev.getContent().aliases || [];
-
-    const addedAliases = newAliases.filter((x) => !oldAliases.includes(x));
-    const removedAliases = oldAliases.filter((x) => !newAliases.includes(x));
-
-    if (!addedAliases.length && !removedAliases.length) {
-        return '';
-    }
-
-    if (addedAliases.length && !removedAliases.length) {
-        return _t('%(senderName)s added %(count)s %(addedAddresses)s as addresses for this room.', {
-            senderName: senderName,
-            count: addedAliases.length,
-            addedAddresses: addedAliases.join(', '),
-        });
-    } else if (!addedAliases.length && removedAliases.length) {
-        return _t('%(senderName)s removed %(count)s %(removedAddresses)s as addresses for this room.', {
-            senderName: senderName,
-            count: removedAliases.length,
-            removedAddresses: removedAliases.join(', '),
-        });
-    } else {
-        return _t(
-            '%(senderName)s added %(addedAddresses)s and removed %(removedAddresses)s as addresses for this room.', {
-                senderName: senderName,
-                addedAddresses: addedAliases.join(', '),
-                removedAddresses: removedAliases.join(', '),
-            },
-        );
-    }
-}
-
 function textForCanonicalAliasEvent(ev) {
     const senderName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const oldAlias = ev.getPrevContent().alias;
+    const oldAltAliases = ev.getPrevContent().alt_aliases || [];
     const newAlias = ev.getContent().alias;
+    const newAltAliases = ev.getContent().alt_aliases || [];
+    const removedAltAliases = oldAltAliases.filter(alias => !newAltAliases.includes(alias));
+    const addedAltAliases = newAltAliases.filter(alias => !oldAltAliases.includes(alias));
 
-    if (newAlias) {
-        return _t('%(senderName)s set the main address for this room to %(address)s.', {
-            senderName: senderName,
-            address: ev.getContent().alias,
-        });
-    } else if (oldAlias) {
-        return _t('%(senderName)s removed the main address for this room.', {
+    if (!removedAltAliases.length && !addedAltAliases.length) {
+        if (newAlias) {
+            return _t('%(senderName)s set the main address for this room to %(address)s.', {
+                senderName: senderName,
+                address: ev.getContent().alias,
+            });
+        } else if (oldAlias) {
+            return _t('%(senderName)s removed the main address for this room.', {
+                senderName: senderName,
+            });
+        }
+    } else if (newAlias === oldAlias) {
+        if (addedAltAliases.length && !removedAltAliases.length) {
+            return _t('%(senderName)s added the alternative addresses %(addresses)s for this room.', {
+                senderName: senderName,
+                addresses: addedAltAliases.join(", "),
+                count: addedAltAliases.length,
+            });
+        } if (removedAltAliases.length && !addedAltAliases.length) {
+            return _t('%(senderName)s removed the alternative addresses %(addresses)s for this room.', {
+                senderName: senderName,
+                addresses: removedAltAliases.join(", "),
+                count: removedAltAliases.length,
+            });
+        } if (removedAltAliases.length && addedAltAliases.length) {
+            return _t('%(senderName)s changed the alternative addresses for this room.', {
+                senderName: senderName,
+            });
+        }
+    } else {
+        // both alias and alt_aliases where modified
+        return _t('%(senderName)s changed the main and alternative addresses for this room.', {
             senderName: senderName,
         });
     }
+    // in case there is no difference between the two events,
+    // say something as we can't simply hide the tile from here
+    return _t('%(senderName)s changed the addresses for this room.', {
+        senderName: senderName,
+    });
 }
 
 function textForCallAnswerEvent(event) {
@@ -418,14 +419,6 @@ function textForHistoryVisibilityEvent(event) {
     }
 }
 
-function textForEncryptionEvent(event) {
-    const senderName = event.sender ? event.sender.name : event.getSender();
-    return _t('%(senderName)s turned on end-to-end encryption (algorithm %(algorithm)s).', {
-        senderName,
-        algorithm: event.getContent().algorithm,
-    });
-}
-
 // Currently will only display a change if a user's power level is changed
 function textForPowerEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
@@ -473,7 +466,7 @@ function textForPowerEvent(event) {
 }
 
 function textForPinnedEvent(event) {
-    const senderName = event.getSender();
+    const senderName = event.sender ? event.sender.name : event.getSender();
     return _t("%(senderName)s changed the pinned messages for the room.", {senderName});
 }
 
@@ -596,14 +589,12 @@ const handlers = {
 };
 
 const stateHandlers = {
-    'm.room.aliases': textForRoomAliasesEvent,
     'm.room.canonical_alias': textForCanonicalAliasEvent,
     'm.room.name': textForRoomNameEvent,
     'm.room.topic': textForTopicEvent,
     'm.room.member': textForMemberEvent,
     'm.room.third_party_invite': textForThreePidInviteEvent,
     'm.room.history_visibility': textForHistoryVisibilityEvent,
-    'm.room.encryption': textForEncryptionEvent,
     'm.room.power_levels': textForPowerEvent,
     'm.room.pinned_events': textForPinnedEvent,
     'm.room.server_acl': textForServerACLEvent,
@@ -612,6 +603,7 @@ const stateHandlers = {
     'm.room.guest_access': textForGuestAccessEvent,
     'm.room.related_groups': textForRelatedGroupsEvent,
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/riot-web/issues/13111)
     'im.vector.modular.widgets': textForWidgetEvent,
 };
 
@@ -620,10 +612,8 @@ for (const evType of ALL_RULE_TYPES) {
     stateHandlers[evType] = textForMjolnirEvent;
 }
 
-module.exports = {
-    textForEvent: function(ev) {
-        const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
-        if (handler) return handler(ev);
-        return '';
-    },
-};
+export function textForEvent(ev) {
+    const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
+    if (handler) return handler(ev);
+    return '';
+}

src/Tinter.js

@@ -143,10 +143,14 @@ class Tinter {
      * over time then the best bet is to register a single callback for the
      * entire set.
      *
+     * To ensure the tintable work happens at least once, it is also called as
+     * part of registration.
+     *
      * @param {Function} tintable Function to call when the tint changes.
      */
     registerTintable(tintable) {
         this.tintables.push(tintable);
+        tintable();
     }
 
     getKeyRgb() {

src/Unread.js

@@ -14,80 +14,78 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const MatrixClientPeg = require('./MatrixClientPeg');
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
-const sdk = require('./index');
+import * as sdk from "./index";
+import {haveTileForEvent} from "./components/views/rooms/EventTile";
 
-module.exports = {
-    /**
-     * Returns true iff this event arriving in a room should affect the room's
-     * count of unread messages
-     */
-    eventTriggersUnreadCount: function(ev) {
-        if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) {
-            return false;
-        } else if (ev.getType() == 'm.room.member') {
-            return false;
-        } else if (ev.getType() == 'm.room.third_party_invite') {
-            return false;
-        } else if (ev.getType() == 'm.call.answer' || ev.getType() == 'm.call.hangup') {
-            return false;
-        } else if (ev.getType() == 'm.room.message' && ev.getContent().msgtype == 'm.notify') {
-            return false;
-        } else if (ev.getType() == 'm.room.aliases' || ev.getType() == 'm.room.canonical_alias') {
-            return false;
-        } else if (ev.getType() == 'm.room.server_acl') {
+/**
+ * Returns true iff this event arriving in a room should affect the room's
+ * count of unread messages
+ */
+export function eventTriggersUnreadCount(ev) {
+    if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) {
+        return false;
+    } else if (ev.getType() == 'm.room.member') {
+        return false;
+    } else if (ev.getType() == 'm.room.third_party_invite') {
+        return false;
+    } else if (ev.getType() == 'm.call.answer' || ev.getType() == 'm.call.hangup') {
+        return false;
+    } else if (ev.getType() == 'm.room.message' && ev.getContent().msgtype == 'm.notify') {
+        return false;
+    } else if (ev.getType() == 'm.room.aliases' || ev.getType() == 'm.room.canonical_alias') {
+        return false;
+    } else if (ev.getType() == 'm.room.server_acl') {
+        return false;
+    }
+    return haveTileForEvent(ev);
+}
+
+export function doesRoomHaveUnreadMessages(room) {
+    const myUserId = MatrixClientPeg.get().credentials.userId;
+
+    // get the most recent read receipt sent by our account.
+    // N.B. this is NOT a read marker (RM, aka "read up to marker"),
+    // despite the name of the method :((
+    const readUpToId = room.getEventReadUpTo(myUserId);
+
+    // as we don't send RRs for our own messages, make sure we special case that
+    // if *we* sent the last message into the room, we consider it not unread!
+    // Should fix: https://github.com/vector-im/riot-web/issues/3263
+    //             https://github.com/vector-im/riot-web/issues/2427
+    // ...and possibly some of the others at
+    //             https://github.com/vector-im/riot-web/issues/3363
+    if (room.timeline.length &&
+        room.timeline[room.timeline.length - 1].sender &&
+        room.timeline[room.timeline.length - 1].sender.userId === myUserId) {
+        return false;
+    }
+
+    // this just looks at whatever history we have, which if we've only just started
+    // up probably won't be very much, so if the last couple of events are ones that
+    // don't count, we don't know if there are any events that do count between where
+    // we have and the read receipt. We could fetch more history to try & find out,
+    // but currently we just guess.
+
+    // Loop through messages, starting with the most recent...
+    for (let i = room.timeline.length - 1; i >= 0; --i) {
+        const ev = room.timeline[i];
+
+        if (ev.getId() == readUpToId) {
+            // If we've read up to this event, there's nothing more recent
+            // that counts and we can stop looking because the user's read
+            // this and everything before.
             return false;
+        } else if (!shouldHideEvent(ev) && eventTriggersUnreadCount(ev)) {
+            // We've found a message that counts before we hit
+            // the user's read receipt, so this room is definitely unread.
+            return true;
         }
-        const EventTile = sdk.getComponent('rooms.EventTile');
-        return EventTile.haveTileForEvent(ev);
-    },
-
-    doesRoomHaveUnreadMessages: function(room) {
-        const myUserId = MatrixClientPeg.get().credentials.userId;
-
-        // get the most recent read receipt sent by our account.
-        // N.B. this is NOT a read marker (RM, aka "read up to marker"),
-        // despite the name of the method :((
-        const readUpToId = room.getEventReadUpTo(myUserId);
-
-        // as we don't send RRs for our own messages, make sure we special case that
-        // if *we* sent the last message into the room, we consider it not unread!
-        // Should fix: https://github.com/vector-im/riot-web/issues/3263
-        //             https://github.com/vector-im/riot-web/issues/2427
-        // ...and possibly some of the others at
-        //             https://github.com/vector-im/riot-web/issues/3363
-        if (room.timeline.length &&
-            room.timeline[room.timeline.length - 1].sender &&
-            room.timeline[room.timeline.length - 1].sender.userId === myUserId) {
-            return false;
-        }
-
-        // this just looks at whatever history we have, which if we've only just started
-        // up probably won't be very much, so if the last couple of events are ones that
-        // don't count, we don't know if there are any events that do count between where
-        // we have and the read receipt. We could fetch more history to try & find out,
-        // but currently we just guess.
-
-        // Loop through messages, starting with the most recent...
-        for (let i = room.timeline.length - 1; i >= 0; --i) {
-            const ev = room.timeline[i];
-
-            if (ev.getId() == readUpToId) {
-                // If we've read up to this event, there's nothing more recent
-                // that counts and we can stop looking because the user's read
-                // this and everything before.
-                return false;
-            } else if (!shouldHideEvent(ev) && this.eventTriggersUnreadCount(ev)) {
-                // We've found a message that counts before we hit
-                // the user's read receipt, so this room is definitely unread.
-                return true;
-            }
-        }
-        // If we got here, we didn't find a message that counted but didn't find
-        // the user's read receipt either, so we guess and say that the room is
-        // unread on the theory that false positives are better than false
-        // negatives here.
-        return true;
-    },
-};
+    }
+    // If we got here, we didn't find a message that counted but didn't find
+    // the user's read receipt either, so we guess and say that the room is
+    // unread on the theory that false positives are better than false
+    // negatives here.
+    return true;
+}

src/UserActivity.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import dis from './dispatcher';
+import dis from './dispatcher/dispatcher';
 import Timer from './utils/Timer';
 
 // important these are larger than the timeouts of timers

src/VectorConferenceHandler.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {createNewMatrixCall, Room} from "matrix-js-sdk";
+import {createNewMatrixCall as jsCreateNewMatrixCall, Room} from "matrix-js-sdk";
 import CallHandler from './CallHandler';
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 
 // FIXME: this is Riot (Vector) specific code, but will be removed shortly when
 // we switch over to jitsi entirely for video conferencing.
@@ -28,10 +29,10 @@ import MatrixClientPeg from "./MatrixClientPeg";
 const USER_PREFIX = "fs_";
 const DOMAIN = "matrix.org";
 
-function ConferenceCall(matrixClient, groupChatRoomId) {
+export function ConferenceCall(matrixClient, groupChatRoomId) {
     this.client = matrixClient;
     this.groupRoomId = groupChatRoomId;
-    this.confUserId = module.exports.getConferenceUserIdForRoom(this.groupRoomId);
+    this.confUserId = getConferenceUserIdForRoom(this.groupRoomId);
 }
 
 ConferenceCall.prototype.setup = function() {
@@ -42,7 +43,7 @@ ConferenceCall.prototype.setup = function() {
         // return a call for *this* room to be placed. We also tack on
         // confUserId to speed up lookups (else we'd need to loop every room
         // looking for a 1:1 room with this conf user ID!)
-        const call = createNewMatrixCall(self.client, room.roomId);
+        const call = jsCreateNewMatrixCall(self.client, room.roomId);
         call.confUserId = self.confUserId;
         call.groupRoomId = self.groupRoomId;
         return call;
@@ -90,7 +91,7 @@ ConferenceCall.prototype._getConferenceUserRoom = function() {
  * @param {string} userId The user ID to check.
  * @return {boolean} True if it is a conference bot.
  */
-module.exports.isConferenceUser = function(userId) {
+export function isConferenceUser(userId) {
     if (userId.indexOf("@" + USER_PREFIX) !== 0) {
         return false;
     }
@@ -101,26 +102,26 @@ module.exports.isConferenceUser = function(userId) {
         return /^!.+:.+/.test(decoded);
     }
     return false;
-};
+}
 
-module.exports.getConferenceUserIdForRoom = function(roomId) {
+export function getConferenceUserIdForRoom(roomId) {
     // abuse browserify's core node Buffer support (strip padding ='s)
     const base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, "");
     return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN;
-};
+}
 
-module.exports.createNewMatrixCall = function(client, roomId) {
+export function createNewMatrixCall(client, roomId) {
     const confCall = new ConferenceCall(
         client, roomId,
     );
     return confCall.setup();
-};
+}
 
-module.exports.getConferenceCallForRoom = function(roomId) {
+export function getConferenceCallForRoom(roomId) {
     // search for a conference 1:1 call for this group chat room ID
     const activeCall = CallHandler.getAnyActiveCall();
     if (activeCall && activeCall.confUserId) {
-        const thisRoomConfUserId = module.exports.getConferenceUserIdForRoom(
+        const thisRoomConfUserId = getConferenceUserIdForRoom(
             roomId,
         );
         if (thisRoomConfUserId === activeCall.confUserId) {
@@ -128,8 +129,7 @@ module.exports.getConferenceCallForRoom = function(roomId) {
         }
     }
     return null;
-};
+}
 
-module.exports.ConferenceCall = ConferenceCall;
-
-module.exports.slot = 'conference';
+// TODO: Document this.
+export const slot = 'conference';

src/Velociraptor.js

@@ -1,7 +1,7 @@
-const React = require('react');
-const ReactDom = require('react-dom');
+import React from "react";
+import ReactDom from "react-dom";
+import Velocity from "velocity-animate";
 import PropTypes from 'prop-types';
-const Velocity = require('velocity-animate');
 
 /**
  * The Velociraptor contains components and animates transitions with velocity.

src/VelocityBounce.js

@@ -1,4 +1,4 @@
-const Velocity = require('velocity-animate');
+import Velocity from "velocity-animate";
 
 // courtesy of https://github.com/julianshapiro/velocity/issues/283
 // We only use easeOutBounce (easeInBounce is just sort of nonsensical)

src/WhoIsTyping.js

@@ -14,71 +14,69 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import { _t } from './languageHandler';
 
-module.exports = {
-    usersTypingApartFromMeAndIgnored: function(room) {
-        return this.usersTyping(
-            room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
-        );
-    },
+export function usersTypingApartFromMeAndIgnored(room) {
+    return usersTyping(
+        room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
+    );
+}
 
-    usersTypingApartFromMe: function(room) {
-        return this.usersTyping(
-            room, [MatrixClientPeg.get().credentials.userId],
-        );
-    },
+export function usersTypingApartFromMe(room) {
+    return usersTyping(
+        room, [MatrixClientPeg.get().credentials.userId],
+    );
+}
 
-    /**
-     * Given a Room object and, optionally, a list of userID strings
-     * to exclude, return a list of user objects who are typing.
-     * @param {Room} room: room object to get users from.
-     * @param {string[]} exclude: list of user mxids to exclude.
-     * @returns {string[]} list of user objects who are typing.
-     */
-    usersTyping: function(room, exclude) {
-        const whoIsTyping = [];
+/**
+ * Given a Room object and, optionally, a list of userID strings
+ * to exclude, return a list of user objects who are typing.
+ * @param {Room} room: room object to get users from.
+ * @param {string[]} exclude: list of user mxids to exclude.
+ * @returns {string[]} list of user objects who are typing.
+ */
+export function usersTyping(room, exclude) {
+    const whoIsTyping = [];
 
-        if (exclude === undefined) {
-            exclude = [];
-        }
+    if (exclude === undefined) {
+        exclude = [];
+    }
 
-        const memberKeys = Object.keys(room.currentState.members);
-        for (let i = 0; i < memberKeys.length; ++i) {
-            const userId = memberKeys[i];
+    const memberKeys = Object.keys(room.currentState.members);
+    for (let i = 0; i < memberKeys.length; ++i) {
+        const userId = memberKeys[i];
 
-            if (room.currentState.members[userId].typing) {
-                if (exclude.indexOf(userId) === -1) {
-                    whoIsTyping.push(room.currentState.members[userId]);
-                }
+        if (room.currentState.members[userId].typing) {
+            if (exclude.indexOf(userId) === -1) {
+                whoIsTyping.push(room.currentState.members[userId]);
             }
         }
+    }
 
-        return whoIsTyping;
-    },
+    return whoIsTyping;
+}
 
-    whoIsTypingString: function(whoIsTyping, limit) {
-        let othersCount = 0;
-        if (whoIsTyping.length > limit) {
-            othersCount = whoIsTyping.length - limit + 1;
-        }
-        if (whoIsTyping.length === 0) {
-            return '';
-        } else if (whoIsTyping.length === 1) {
-            return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
-        }
-        const names = whoIsTyping.map(function(m) {
-            return m.name;
+export function whoIsTypingString(whoIsTyping, limit) {
+    let othersCount = 0;
+    if (whoIsTyping.length > limit) {
+        othersCount = whoIsTyping.length - limit + 1;
+    }
+    if (whoIsTyping.length === 0) {
+        return '';
+    } else if (whoIsTyping.length === 1) {
+        return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
+    }
+    const names = whoIsTyping.map(function(m) {
+        return m.name;
+    });
+    if (othersCount>=1) {
+        return _t('%(names)s and %(count)s others are typing …', {
+            names: names.slice(0, limit - 1).join(', '),
+            count: othersCount,
         });
-        if (othersCount>=1) {
-            return _t('%(names)s and %(count)s others are typing …', {
-                names: names.slice(0, limit - 1).join(', '),
-                count: othersCount,
-            });
-        } else {
-            const lastPerson = names.pop();
-            return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
-        }
-    },
-};
+    } else {
+        const lastPerson = names.pop();
+        return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
+    }
+}

src/WidgetMessaging.js

@@ -23,10 +23,11 @@ limitations under the License.
 import FromWidgetPostMessageApi from './FromWidgetPostMessageApi';
 import ToWidgetPostMessageApi from './ToWidgetPostMessageApi';
 import Modal from "./Modal";
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import SettingsStore from "./settings/SettingsStore";
 import WidgetOpenIDPermissionsDialog from "./components/views/dialogs/WidgetOpenIDPermissionsDialog";
 import WidgetUtils from "./utils/WidgetUtils";
+import {KnownWidgetActions} from "./widgets/WidgetApi";
 
 if (!global.mxFromWidgetMessaging) {
     global.mxFromWidgetMessaging = new FromWidgetPostMessageApi();
@@ -40,9 +41,18 @@ if (!global.mxToWidgetMessaging) {
 const OUTBOUND_API_NAME = 'toWidget';
 
 export default class WidgetMessaging {
-    constructor(widgetId, widgetUrl, isUserWidget, target) {
+    /**
+     * @param {string} widgetId The widget's ID
+     * @param {string} wurl The raw URL of the widget as in the event (the 'wURL')
+     * @param {string} renderedUrl The url used in the widget's iframe (either similar to the wURL
+     *     or a different URL of the clients choosing if it is using its own impl).
+     * @param {bool} isUserWidget If true, the widget is a user widget, otherwise it's a room widget
+     * @param {object} target Where widget messages should be sent (eg. the iframe object)
+     */
+    constructor(widgetId, wurl, renderedUrl, isUserWidget, target) {
         this.widgetId = widgetId;
-        this.widgetUrl = widgetUrl;
+        this.wurl = wurl;
+        this.renderedUrl = renderedUrl;
         this.isUserWidget = isUserWidget;
         this.target = target;
         this.fromWidget = global.mxFromWidgetMessaging;
@@ -75,12 +85,23 @@ export default class WidgetMessaging {
         });
     }
 
+    /**
+     * Tells the widget that the client is ready to handle further widget requests.
+     * @returns {Promise<*>} Resolves after the widget has acknowledged the ready message.
+     */
+    flagReadyToContinue() {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: KnownWidgetActions.ClientReady,
+        });
+    }
+
     /**
      * Request a screenshot from a widget
      * @return {Promise} To be resolved with screenshot data when it has been generated
      */
     getScreenshot() {
-        console.warn('Requesting screenshot for', this.widgetId);
+        console.log('Requesting screenshot for', this.widgetId);
         return this.messageToWidget({
                 api: OUTBOUND_API_NAME,
                 action: "screenshot",
@@ -94,12 +115,12 @@ export default class WidgetMessaging {
      * @return {Promise} To be resolved with an array of requested widget capabilities
      */
     getCapabilities() {
-        console.warn('Requesting capabilities for', this.widgetId);
+        console.log('Requesting capabilities for', this.widgetId);
         return this.messageToWidget({
                 api: OUTBOUND_API_NAME,
                 action: "capabilities",
             }).then((response) => {
-                console.warn('Got capabilities for', this.widgetId, response.capabilities);
+                console.log('Got capabilities for', this.widgetId, response.capabilities);
                 return response.capabilities;
             });
     }
@@ -116,19 +137,19 @@ export default class WidgetMessaging {
     }
 
     start() {
-        this.fromWidget.addEndpoint(this.widgetId, this.widgetUrl);
+        this.fromWidget.addEndpoint(this.widgetId, this.renderedUrl);
         this.fromWidget.addListener("get_openid", this._onOpenIdRequest);
     }
 
     stop() {
-        this.fromWidget.removeEndpoint(this.widgetId, this.widgetUrl);
+        this.fromWidget.removeEndpoint(this.widgetId, this.renderedUrl);
         this.fromWidget.removeListener("get_openid", this._onOpenIdRequest);
     }
 
     async _onOpenIdRequest(ev, rawEv) {
         if (ev.widgetId !== this.widgetId) return; // not interesting
 
-        const widgetSecurityKey = WidgetUtils.getWidgetSecurityKey(this.widgetId, this.widgetUrl, this.isUserWidget);
+        const widgetSecurityKey = WidgetUtils.getWidgetSecurityKey(this.widgetId, this.wurl, this.isUserWidget);
 
         const settings = SettingsStore.getValue("widgetOpenIDPermissions");
         if (settings.deny && settings.deny.includes(widgetSecurityKey)) {
@@ -149,7 +170,7 @@ export default class WidgetMessaging {
         // Actually ask for permission to send the user's data
         Modal.createTrackedDialog("OpenID widget permissions", '',
             WidgetOpenIDPermissionsDialog, {
-                widgetUrl: this.widgetUrl,
+                widgetUrl: this.wurl,
                 widgetId: this.widgetId,
                 isUserWidget: this.isUserWidget,
 

src/accessibility/KeyboardShortcuts.tsx

@@ -0,0 +1,383 @@
+/*
+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 classNames from "classnames";
+
+import * as sdk from "../index";
+import Modal from "../Modal";
+import { _t, _td } from "../languageHandler";
+import {isMac, Key} from "../Keyboard";
+
+// TS: once languageHandler is TS we can probably inline this into the enum
+_td("Navigation");
+_td("Calls");
+_td("Composer");
+_td("Room List");
+_td("Autocomplete");
+
+export enum Categories {
+    NAVIGATION = "Navigation",
+    CALLS = "Calls",
+    COMPOSER = "Composer",
+    ROOM_LIST = "Room List",
+    ROOM = "Room",
+    AUTOCOMPLETE = "Autocomplete",
+}
+
+// TS: once languageHandler is TS we can probably inline this into the enum
+_td("Alt");
+_td("Alt Gr");
+_td("Shift");
+_td("Super");
+_td("Ctrl");
+
+export enum Modifiers {
+    ALT = "Alt", // Option on Mac and displayed as an Icon
+    ALT_GR = "Alt Gr",
+    SHIFT = "Shift",
+    SUPER = "Super", // should this be "Windows"?
+    // Instead of using below, consider CMD_OR_CTRL
+    COMMAND = "Command", // This gets displayed as an Icon
+    CONTROL = "Ctrl",
+}
+
+// Meta-modifier: isMac ? CMD : CONTROL
+export const CMD_OR_CTRL = isMac ? Modifiers.COMMAND : Modifiers.CONTROL;
+
+interface IKeybind {
+    modifiers?: Modifiers[];
+    key: string; // TS: fix this once Key is an enum
+}
+
+interface IShortcut {
+    keybinds: IKeybind[];
+    description: string;
+}
+
+const shortcuts: Record<Categories, IShortcut[]> = {
+    [Categories.COMPOSER]: [
+        {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.B,
+            }],
+            description: _td("Toggle Bold"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.I,
+            }],
+            description: _td("Toggle Italics"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.GREATER_THAN,
+            }],
+            description: _td("Toggle Quote"),
+        }, {
+            keybinds: [{
+                modifiers: [Modifiers.SHIFT],
+                key: Key.ENTER,
+            }],
+            description: _td("New line"),
+        }, {
+            keybinds: [{
+                key: Key.ARROW_UP,
+            }, {
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Navigate recent messages to edit"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.HOME,
+            }, {
+                modifiers: [CMD_OR_CTRL],
+                key: Key.END,
+            }],
+            description: _td("Jump to start/end of the composer"),
+        }, {
+            keybinds: [{
+                modifiers: [Modifiers.CONTROL, Modifiers.ALT],
+                key: Key.ARROW_UP,
+            }, {
+                modifiers: [Modifiers.CONTROL, Modifiers.ALT],
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Navigate composer history"),
+        }, {
+            keybinds: [{
+                key: Key.ESCAPE,
+            }],
+            description: _td("Cancel replying to a message"),
+        },
+    ],
+
+    [Categories.CALLS]: [
+        {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.D,
+            }],
+            description: _td("Toggle microphone mute"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.E,
+            }],
+            description: _td("Toggle video on/off"),
+        },
+    ],
+
+    [Categories.ROOM]: [
+        {
+            keybinds: [{
+                key: Key.PAGE_UP,
+            }, {
+                key: Key.PAGE_DOWN,
+            }],
+            description: _td("Scroll up/down in the timeline"),
+        }, {
+            keybinds: [{
+                key: Key.ESCAPE,
+            }],
+            description: _td("Dismiss read marker and jump to bottom"),
+        }, {
+            keybinds: [{
+                modifiers: [Modifiers.SHIFT],
+                key: Key.PAGE_UP,
+            }],
+                description: _td("Jump to oldest unread message"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL, Modifiers.SHIFT],
+                key: Key.U,
+            }],
+            description: _td("Upload a file"),
+        }
+    ],
+
+    [Categories.ROOM_LIST]: [
+        {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.K,
+            }],
+            description: _td("Jump to room search"),
+        }, {
+            keybinds: [{
+                key: Key.ARROW_UP,
+            }, {
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Navigate up/down in the room list"),
+        }, {
+            keybinds: [{
+                key: Key.ENTER,
+            }],
+            description: _td("Select room from the room list"),
+        }, {
+            keybinds: [{
+                key: Key.ARROW_LEFT,
+            }],
+            description: _td("Collapse room list section"),
+        }, {
+            keybinds: [{
+                key: Key.ARROW_RIGHT,
+            }],
+            description: _td("Expand room list section"),
+        }, {
+            keybinds: [{
+                key: Key.ESCAPE,
+            }],
+            description: _td("Clear room list filter field"),
+        },
+    ],
+
+    [Categories.NAVIGATION]: [
+        {
+            keybinds: [{
+                modifiers: [Modifiers.ALT, Modifiers.SHIFT],
+                key: Key.ARROW_UP,
+            }, {
+                modifiers: [Modifiers.ALT, Modifiers.SHIFT],
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Previous/next unread room or DM"),
+        }, {
+            keybinds: [{
+                modifiers: [Modifiers.ALT],
+                key: Key.ARROW_UP,
+            }, {
+                modifiers: [Modifiers.ALT],
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Previous/next room or DM"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.BACKTICK,
+            }],
+            description: _td("Toggle the top left menu"),
+        }, {
+            keybinds: [{
+                key: Key.ESCAPE,
+            }],
+            description: _td("Close dialog or context menu"),
+        }, {
+            keybinds: [{
+                key: Key.ENTER,
+            }, {
+                key: Key.SPACE,
+            }],
+            description: _td("Activate selected button"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.PERIOD,
+            }],
+            description: _td("Toggle right panel"),
+        }, {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL],
+                key: Key.SLASH,
+            }],
+            description: _td("Toggle this dialog"),
+        },
+    ],
+
+    [Categories.AUTOCOMPLETE]: [
+        {
+            keybinds: [{
+                key: Key.ARROW_UP,
+            }, {
+                key: Key.ARROW_DOWN,
+            }],
+            description: _td("Move autocomplete selection up/down"),
+        }, {
+            keybinds: [{
+                key: Key.ESCAPE,
+            }],
+            description: _td("Cancel autocomplete"),
+        },
+    ],
+};
+
+const categoryOrder = [
+    Categories.COMPOSER,
+    Categories.AUTOCOMPLETE,
+    Categories.ROOM,
+    Categories.ROOM_LIST,
+    Categories.NAVIGATION,
+    Categories.CALLS,
+];
+
+interface IModal {
+    close: () => void;
+    finished: Promise<any[]>;
+}
+
+const modifierIcon: Record<string, string> = {
+    [Modifiers.COMMAND]: "⌘",
+};
+
+if (isMac) {
+    modifierIcon[Modifiers.ALT] = "⌥";
+}
+
+const alternateKeyName: Record<string, string> = {
+    [Key.PAGE_UP]: _td("Page Up"),
+    [Key.PAGE_DOWN]: _td("Page Down"),
+    [Key.ESCAPE]: _td("Esc"),
+    [Key.ENTER]: _td("Enter"),
+    [Key.SPACE]: _td("Space"),
+    [Key.HOME]: _td("Home"),
+    [Key.END]: _td("End"),
+};
+const keyIcon: Record<string, string> = {
+    [Key.ARROW_UP]: "↑",
+    [Key.ARROW_DOWN]: "↓",
+    [Key.ARROW_LEFT]: "←",
+    [Key.ARROW_RIGHT]: "→",
+};
+
+const Shortcut: React.FC<{
+    shortcut: IShortcut;
+}> = ({shortcut}) => {
+    const classes = classNames({
+        "mx_KeyboardShortcutsDialog_inline": shortcut.keybinds.every(k => !k.modifiers || k.modifiers.length === 0),
+    });
+
+    return <div className={classes}>
+        <h5>{ _t(shortcut.description) }</h5>
+        { shortcut.keybinds.map(s => {
+            let text = s.key;
+            if (alternateKeyName[s.key]) {
+                text = _t(alternateKeyName[s.key]);
+            } else if (keyIcon[s.key]) {
+                text = keyIcon[s.key];
+            }
+
+            return <div key={s.key}>
+                { s.modifiers && s.modifiers.map(m => {
+                    return <React.Fragment key={m}>
+                        <kbd>{ modifierIcon[m] || _t(m) }</kbd>+
+                    </React.Fragment>;
+                }) }
+                <kbd>{ text }</kbd>
+            </div>;
+        }) }
+    </div>;
+};
+
+let activeModal: IModal = null;
+export const toggleDialog = () => {
+    if (activeModal) {
+        activeModal.close();
+        activeModal = null;
+        return;
+    }
+
+    const sections = categoryOrder.map(category => {
+        const list = shortcuts[category];
+        return <div className="mx_KeyboardShortcutsDialog_category" key={category}>
+            <h3>{_t(category)}</h3>
+            <div>{list.map(shortcut => <Shortcut key={shortcut.description} shortcut={shortcut} />)}</div>
+        </div>;
+    });
+
+    const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
+    activeModal = Modal.createTrackedDialog("Keyboard Shortcuts", "", InfoDialog, {
+        className: "mx_KeyboardShortcutsDialog",
+        title: _t("Keyboard Shortcuts"),
+        description: sections,
+        hasCloseButton: true,
+        onKeyDown: (ev) => {
+            if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey && ev.key === Key.SLASH) { // Ctrl + /
+                ev.stopPropagation();
+                activeModal.close();
+            }
+        },
+        onFinished: () => {
+            activeModal = null;
+        },
+    });
+};
+
+export const registerShortcut = (category: Categories, defn: IShortcut) => {
+    shortcuts[category].push(defn);
+};

src/accessibility/RovingTabIndex.js

@@ -0,0 +1,224 @@
+/*
+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, {
+    createContext,
+    useCallback,
+    useContext,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useReducer,
+} from "react";
+import PropTypes from "prop-types";
+import {Key} from "../Keyboard";
+
+/**
+ * Module to simplify implementing the Roving TabIndex accessibility technique
+ *
+ * Wrap the Widget in an RovingTabIndexContextProvider
+ * and then for all buttons make use of useRovingTabIndex or RovingTabIndexWrapper.
+ * The code will keep track of which tabIndex was most recently focused and expose that information as `isActive` which
+ * can then be used to only set the tabIndex to 0 as expected by the roving tabindex technique.
+ * When the active button gets unmounted the closest button will be chosen as expected.
+ * Initially the first button to mount will be given active state.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex
+ */
+
+const DOCUMENT_POSITION_PRECEDING = 2;
+
+const RovingTabIndexContext = createContext({
+    state: {
+        activeRef: null,
+        refs: [], // list of refs in DOM order
+    },
+    dispatch: () => {},
+});
+RovingTabIndexContext.displayName = "RovingTabIndexContext";
+
+// TODO use a TypeScript type here
+const types = {
+    REGISTER: "REGISTER",
+    UNREGISTER: "UNREGISTER",
+    SET_FOCUS: "SET_FOCUS",
+};
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case types.REGISTER: {
+            if (state.refs.length === 0) {
+                // Our list of refs was empty, set activeRef to this first item
+                return {
+                    ...state,
+                    activeRef: action.payload.ref,
+                    refs: [action.payload.ref],
+                };
+            }
+
+            if (state.refs.includes(action.payload.ref)) {
+                return state; // already in refs, this should not happen
+            }
+
+            // find the index of the first ref which is not preceding this one in DOM order
+            let newIndex = state.refs.findIndex(ref => {
+                return ref.current.compareDocumentPosition(action.payload.ref.current) & DOCUMENT_POSITION_PRECEDING;
+            });
+
+            if (newIndex < 0) {
+                newIndex = state.refs.length; // append to the end
+            }
+
+            // update the refs list
+            return {
+                ...state,
+                refs: [
+                    ...state.refs.slice(0, newIndex),
+                    action.payload.ref,
+                    ...state.refs.slice(newIndex),
+                ],
+            };
+        }
+        case types.UNREGISTER: {
+            // filter out the ref which we are removing
+            const refs = state.refs.filter(r => r !== action.payload.ref);
+
+            if (refs.length === state.refs.length) {
+                return state; // already removed, this should not happen
+            }
+
+            if (state.activeRef === action.payload.ref) {
+                // we just removed the active ref, need to replace it
+                // pick the ref which is now in the index the old ref was in
+                const oldIndex = state.refs.findIndex(r => r === action.payload.ref);
+                return {
+                    ...state,
+                    activeRef: oldIndex >= refs.length ? refs[refs.length - 1] : refs[oldIndex],
+                    refs,
+                };
+            }
+
+            // update the refs list
+            return {
+                ...state,
+                refs,
+            };
+        }
+        case types.SET_FOCUS: {
+            // update active ref
+            return {
+                ...state,
+                activeRef: action.payload.ref,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const RovingTabIndexProvider = ({children, handleHomeEnd, onKeyDown}) => {
+    const [state, dispatch] = useReducer(reducer, {
+        activeRef: null,
+        refs: [],
+    });
+
+    const context = useMemo(() => ({state, dispatch}), [state]);
+
+    const onKeyDownHandler = useCallback((ev) => {
+        let handled = false;
+        if (handleHomeEnd) {
+            // check if we actually have any items
+            switch (ev.key) {
+                case Key.HOME:
+                    handled = true;
+                    // move focus to first item
+                    if (context.state.refs.length > 0) {
+                        context.state.refs[0].current.focus();
+                    }
+                    break;
+                case Key.END:
+                    handled = true;
+                    // move focus to last item
+                    if (context.state.refs.length > 0) {
+                        context.state.refs[context.state.refs.length - 1].current.focus();
+                    }
+                    break;
+            }
+        }
+
+        if (handled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        } else if (onKeyDown) {
+            return onKeyDown(ev);
+        }
+    }, [context.state, onKeyDown, handleHomeEnd]);
+
+    return <RovingTabIndexContext.Provider value={context}>
+        { children({onKeyDownHandler}) }
+    </RovingTabIndexContext.Provider>;
+};
+RovingTabIndexProvider.propTypes = {
+    handleHomeEnd: PropTypes.bool,
+    onKeyDown: PropTypes.func,
+};
+
+// Hook to register a roving tab index
+// inputRef parameter specifies the ref to use
+// onFocus should be called when the index gained focus in any manner
+// isActive should be used to set tabIndex in a manner such as `tabIndex={isActive ? 0 : -1}`
+// ref should be passed to a DOM node which will be used for DOM compareDocumentPosition
+export const useRovingTabIndex = (inputRef) => {
+    const context = useContext(RovingTabIndexContext);
+    let ref = useRef(null);
+
+    if (inputRef) {
+        // if we are given a ref, use it instead of ours
+        ref = inputRef;
+    }
+
+    // setup (after refs)
+    useLayoutEffect(() => {
+        context.dispatch({
+            type: types.REGISTER,
+            payload: {ref},
+        });
+        // teardown
+        return () => {
+            context.dispatch({
+                type: types.UNREGISTER,
+                payload: {ref},
+            });
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onFocus = useCallback(() => {
+        context.dispatch({
+            type: types.SET_FOCUS,
+            payload: {ref},
+        });
+    }, [ref, context]);
+
+    const isActive = context.state.activeRef === ref;
+    return [onFocus, isActive, ref];
+};
+
+// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
+export const RovingTabIndexWrapper = ({children, inputRef}) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return children({onFocus, isActive, ref});
+};
+

src/actions/GroupActions.js

@@ -1,34 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { asyncAction } from './actionCreators';
-
-const GroupActions = {};
-
-/**
- * Creates an action thunk that will do an asynchronous request to fetch
- * the groups to which a user is joined.
- *
- * @param {MatrixClient} matrixClient the matrix client to query.
- * @returns {function} an action thunk that will dispatch actions
- *                     indicating the status of the request.
- * @see asyncAction
- */
-GroupActions.fetchJoinedGroups = function(matrixClient) {
-    return asyncAction('GroupActions.fetchJoinedGroups', () => matrixClient.getJoinedGroups());
-};
-
-export default GroupActions;

src/actions/GroupActions.ts

@@ -0,0 +1,34 @@
+/*
+Copyright 2017 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.
+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 { asyncAction } from './actionCreators';
+import { AsyncActionPayload } from "../dispatcher/payloads";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+export default class GroupActions {
+    /**
+     * Creates an action thunk that will do an asynchronous request to fetch
+     * the groups to which a user is joined.
+     *
+     * @param {MatrixClient} matrixClient the matrix client to query.
+     * @returns {AsyncActionPayload} An async action payload.
+     * @see asyncAction
+     */
+    public static fetchJoinedGroups(matrixClient: MatrixClient): AsyncActionPayload {
+        return asyncAction('GroupActions.fetchJoinedGroups', () => matrixClient.getJoinedGroups(), null);
+    }
+}

src/actions/MatrixActionCreators.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import dis from '../dispatcher';
+import dis from '../dispatcher/dispatcher';
 
 // TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
 //       become dispatches in the same place.

src/actions/RoomListActions.js

@@ -1,146 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { asyncAction } from './actionCreators';
-import RoomListStore from '../stores/RoomListStore';
-
-import Modal from '../Modal';
-import * as Rooms from '../Rooms';
-import { _t } from '../languageHandler';
-import sdk from '../index';
-
-const RoomListActions = {};
-
-/**
- * Creates an action thunk that will do an asynchronous request to
- * tag room.
- *
- * @param {MatrixClient} matrixClient the matrix client to set the
- *                                    account data on.
- * @param {Room} room the room to tag.
- * @param {string} oldTag the tag to remove (unless oldTag ==== newTag)
- * @param {string} newTag the tag with which to tag the room.
- * @param {?number} oldIndex the previous position of the room in the
- *                           list of rooms.
- * @param {?number} newIndex the new position of the room in the list
- *                           of rooms.
- * @returns {function} an action thunk.
- * @see asyncAction
- */
-RoomListActions.tagRoom = function(matrixClient, room, oldTag, newTag, oldIndex, newIndex) {
-    let metaData = null;
-
-    // Is the tag ordered manually?
-    if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-        const lists = RoomListStore.getRoomLists();
-        const newList = [...lists[newTag]];
-
-        newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order);
-
-        // If the room was moved "down" (increasing index) in the same list we
-        // need to use the orders of the tiles with indices shifted by +1
-        const offset = (
-            newTag === oldTag && oldIndex < newIndex
-        ) ? 1 : 0;
-
-        const indexBefore = offset + newIndex - 1;
-        const indexAfter = offset + newIndex;
-
-        const prevOrder = indexBefore <= 0 ?
-            0 : newList[indexBefore].tags[newTag].order;
-        const nextOrder = indexAfter >= newList.length ?
-            1 : newList[indexAfter].tags[newTag].order;
-
-        metaData = {
-            order: (prevOrder + nextOrder) / 2.0,
-        };
-    }
-
-    return asyncAction('RoomListActions.tagRoom', () => {
-        const promises = [];
-        const roomId = room.roomId;
-
-        // Evil hack to get DMs behaving
-        if ((oldTag === undefined && newTag === 'im.vector.fake.direct') ||
-            (oldTag === 'im.vector.fake.direct' && newTag === undefined)
-        ) {
-            return Rooms.guessAndSetDMRoom(
-                room, newTag === 'im.vector.fake.direct',
-            ).catch((err) => {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to set direct chat tag " + err);
-                Modal.createTrackedDialog('Failed to set direct chat tag', '', ErrorDialog, {
-                    title: _t('Failed to set direct chat tag'),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-            });
-        }
-
-        const hasChangedSubLists = oldTag !== newTag;
-
-        // More evilness: We will still be dealing with moving to favourites/low prio,
-        // but we avoid ever doing a request with 'im.vector.fake.direct`.
-        //
-        // if we moved lists, remove the old tag
-        if (oldTag && oldTag !== 'im.vector.fake.direct' &&
-            hasChangedSubLists
-        ) {
-            const promiseToDelete = matrixClient.deleteRoomTag(
-                roomId, oldTag,
-            ).catch(function(err) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to remove tag " + oldTag + " from room: " + err);
-                Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
-                    title: _t('Failed to remove tag %(tagName)s from room', {tagName: oldTag}),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-            });
-
-            promises.push(promiseToDelete);
-        }
-
-        // if we moved lists or the ordering changed, add the new tag
-        if (newTag && newTag !== 'im.vector.fake.direct' &&
-            (hasChangedSubLists || metaData)
-        ) {
-            // metaData is the body of the PUT to set the tag, so it must
-            // at least be an empty object.
-            metaData = metaData || {};
-
-            const promiseToAdd = matrixClient.setRoomTag(roomId, newTag, metaData).catch(function(err) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Failed to add tag " + newTag + " to room: " + err);
-                Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
-                    title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
-                    description: ((err && err.message) ? err.message : _t('Operation failed')),
-                });
-
-                throw err;
-            });
-
-            promises.push(promiseToAdd);
-        }
-
-        return Promise.all(promises);
-    }, () => {
-        // For an optimistic update
-        return {
-            room, oldTag, newTag, metaData,
-        };
-    });
-};
-
-export default RoomListActions;

src/actions/RoomListActions.ts

@@ -0,0 +1,152 @@
+/*
+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.
+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 { asyncAction } from './actionCreators';
+import { TAG_DM } from '../stores/RoomListStore';
+import Modal from '../Modal';
+import * as Rooms from '../Rooms';
+import { _t } from '../languageHandler';
+import * as sdk from '../index';
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { AsyncActionPayload } from "../dispatcher/payloads";
+import { RoomListStoreTempProxy } from "../stores/room-list/RoomListStoreTempProxy";
+
+export default class RoomListActions {
+    /**
+     * Creates an action thunk that will do an asynchronous request to
+     * tag room.
+     *
+     * @param {MatrixClient} matrixClient the matrix client to set the
+     *                                    account data on.
+     * @param {Room} room the room to tag.
+     * @param {string} oldTag the tag to remove (unless oldTag ==== newTag)
+     * @param {string} newTag the tag with which to tag the room.
+     * @param {?number} oldIndex the previous position of the room in the
+     *                           list of rooms.
+     * @param {?number} newIndex the new position of the room in the list
+     *                           of rooms.
+     * @returns {AsyncActionPayload} an async action payload
+     * @see asyncAction
+     */
+    public static tagRoom(
+        matrixClient: MatrixClient, room: Room,
+        oldTag: string, newTag: string,
+        oldIndex: number | null, newIndex: number | null,
+    ): AsyncActionPayload {
+        let metaData = null;
+
+        // Is the tag ordered manually?
+        if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
+            const lists = RoomListStoreTempProxy.getRoomLists();
+            const newList = [...lists[newTag]];
+
+            newList.sort((a, b) => a.tags[newTag].order - b.tags[newTag].order);
+
+            // If the room was moved "down" (increasing index) in the same list we
+            // need to use the orders of the tiles with indices shifted by +1
+            const offset = (
+                newTag === oldTag && oldIndex < newIndex
+            ) ? 1 : 0;
+
+            const indexBefore = offset + newIndex - 1;
+            const indexAfter = offset + newIndex;
+
+            const prevOrder = indexBefore <= 0 ?
+                0 : newList[indexBefore].tags[newTag].order;
+            const nextOrder = indexAfter >= newList.length ?
+                1 : newList[indexAfter].tags[newTag].order;
+
+            metaData = {
+                order: (prevOrder + nextOrder) / 2.0,
+            };
+        }
+
+        return asyncAction('RoomListActions.tagRoom', () => {
+            const promises = [];
+            const roomId = room.roomId;
+
+            // Evil hack to get DMs behaving
+            if ((oldTag === undefined && newTag === TAG_DM) ||
+                (oldTag === TAG_DM && newTag === undefined)
+            ) {
+                return Rooms.guessAndSetDMRoom(
+                    room, newTag === TAG_DM,
+                ).catch((err) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to set direct chat tag " + err);
+                    Modal.createTrackedDialog('Failed to set direct chat tag', '', ErrorDialog, {
+                        title: _t('Failed to set direct chat tag'),
+                        description: ((err && err.message) ? err.message : _t('Operation failed')),
+                    });
+                });
+            }
+
+            const hasChangedSubLists = oldTag !== newTag;
+
+            // More evilness: We will still be dealing with moving to favourites/low prio,
+            // but we avoid ever doing a request with TAG_DM.
+            //
+            // if we moved lists, remove the old tag
+            if (oldTag && oldTag !== TAG_DM &&
+                hasChangedSubLists
+            ) {
+                const promiseToDelete = matrixClient.deleteRoomTag(
+                    roomId, oldTag,
+                ).catch(function (err) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to remove tag " + oldTag + " from room: " + err);
+                    Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
+                        title: _t('Failed to remove tag %(tagName)s from room', {tagName: oldTag}),
+                        description: ((err && err.message) ? err.message : _t('Operation failed')),
+                    });
+                });
+
+                promises.push(promiseToDelete);
+            }
+
+            // if we moved lists or the ordering changed, add the new tag
+            if (newTag && newTag !== TAG_DM &&
+                (hasChangedSubLists || metaData)
+            ) {
+                // metaData is the body of the PUT to set the tag, so it must
+                // at least be an empty object.
+                metaData = metaData || {};
+
+                const promiseToAdd = matrixClient.setRoomTag(roomId, newTag, metaData).catch(function (err) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    console.error("Failed to add tag " + newTag + " to room: " + err);
+                    Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
+                        title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
+                        description: ((err && err.message) ? err.message : _t('Operation failed')),
+                    });
+
+                    throw err;
+                });
+
+                promises.push(promiseToAdd);
+            }
+
+            return Promise.all(promises);
+        }, () => {
+            // For an optimistic update
+            return {
+                room, oldTag, newTag, metaData,
+            };
+        });
+    }
+}

src/actions/TagOrderActions.js

@@ -1,109 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import Analytics from '../Analytics';
-import { asyncAction } from './actionCreators';
-import TagOrderStore from '../stores/TagOrderStore';
-
-const TagOrderActions = {};
-
-/**
- * Creates an action thunk that will do an asynchronous request to
- * move a tag in TagOrderStore to destinationIx.
- *
- * @param {MatrixClient} matrixClient the matrix client to set the
- *                                    account data on.
- * @param {string} tag the tag to move.
- * @param {number} destinationIx the new position of the tag.
- * @returns {function} an action thunk that will dispatch actions
- *                     indicating the status of the request.
- * @see asyncAction
- */
-TagOrderActions.moveTag = function(matrixClient, tag, destinationIx) {
-    // Only commit tags if the state is ready, i.e. not null
-    let tags = TagOrderStore.getOrderedTags();
-    let removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
-    if (!tags) {
-        return;
-    }
-
-    tags = tags.filter((t) => t !== tag);
-    tags = [...tags.slice(0, destinationIx), tag, ...tags.slice(destinationIx)];
-
-    removedTags = removedTags.filter((t) => t !== tag);
-
-    const storeId = TagOrderStore.getStoreId();
-
-    return asyncAction('TagOrderActions.moveTag', () => {
-        Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
-        return matrixClient.setAccountData(
-            'im.vector.web.tag_ordering',
-            {tags, removedTags, _storeId: storeId},
-        );
-    }, () => {
-        // For an optimistic update
-        return {tags, removedTags};
-    });
-};
-
-/**
- * Creates an action thunk that will do an asynchronous request to
- * label a tag as removed in im.vector.web.tag_ordering account data.
- *
- * The reason this is implemented with new state `removedTags` is that
- * we incrementally and initially populate `tags` with groups that
- * have been joined. If we remove a group from `tags`, it will just
- * get added (as it looks like a group we've recently joined).
- *
- * NB: If we ever support adding of tags (which is planned), we should
- * take special care to remove the tag from `removedTags` when we add
- * it.
- *
- * @param {MatrixClient} matrixClient the matrix client to set the
- *                                    account data on.
- * @param {string} tag the tag to remove.
- * @returns {function} an action thunk that will dispatch actions
- *                     indicating the status of the request.
- * @see asyncAction
- */
-TagOrderActions.removeTag = function(matrixClient, tag) {
-    // Don't change tags, just removedTags
-    const tags = TagOrderStore.getOrderedTags();
-    const removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
-
-    if (removedTags.includes(tag)) {
-        // Return a thunk that doesn't do anything, we don't even need
-        // an asynchronous action here, the tag is already removed.
-        return () => {};
-    }
-
-    removedTags.push(tag);
-
-    const storeId = TagOrderStore.getStoreId();
-
-    return asyncAction('TagOrderActions.removeTag', () => {
-        Analytics.trackEvent('TagOrderActions', 'removeTag');
-        return matrixClient.setAccountData(
-            'im.vector.web.tag_ordering',
-            {tags, removedTags, _storeId: storeId},
-        );
-    }, () => {
-        // For an optimistic update
-        return {removedTags};
-    });
-};
-
-export default TagOrderActions;

src/actions/TagOrderActions.ts

@@ -0,0 +1,111 @@
+/*
+Copyright 2017 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.
+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 Analytics from '../Analytics';
+import { asyncAction } from './actionCreators';
+import TagOrderStore from '../stores/TagOrderStore';
+import { AsyncActionPayload } from "../dispatcher/payloads";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+export default class TagOrderActions {
+
+    /**
+     * Creates an action thunk that will do an asynchronous request to
+     * move a tag in TagOrderStore to destinationIx.
+     *
+     * @param {MatrixClient} matrixClient the matrix client to set the
+     * account data on.
+     * @param {string} tag the tag to move.
+     * @param {number} destinationIx the new position of the tag.
+     * @returns {AsyncActionPayload} an async action payload that will
+     * dispatch actions indicating the status of the request.
+     * @see asyncAction
+     */
+    public static moveTag(matrixClient: MatrixClient, tag: string, destinationIx: number): AsyncActionPayload {
+        // Only commit tags if the state is ready, i.e. not null
+        let tags = TagOrderStore.getOrderedTags();
+        let removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
+        if (!tags) {
+            return;
+        }
+
+        tags = tags.filter((t) => t !== tag);
+        tags = [...tags.slice(0, destinationIx), tag, ...tags.slice(destinationIx)];
+
+        removedTags = removedTags.filter((t) => t !== tag);
+
+        const storeId = TagOrderStore.getStoreId();
+
+        return asyncAction('TagOrderActions.moveTag', () => {
+            Analytics.trackEvent('TagOrderActions', 'commitTagOrdering');
+            return matrixClient.setAccountData(
+                'im.vector.web.tag_ordering',
+                {tags, removedTags, _storeId: storeId},
+            );
+        }, () => {
+            // For an optimistic update
+            return {tags, removedTags};
+        });
+    };
+
+    /**
+     * Creates an action thunk that will do an asynchronous request to
+     * label a tag as removed in im.vector.web.tag_ordering account data.
+     *
+     * The reason this is implemented with new state `removedTags` is that
+     * we incrementally and initially populate `tags` with groups that
+     * have been joined. If we remove a group from `tags`, it will just
+     * get added (as it looks like a group we've recently joined).
+     *
+     * NB: If we ever support adding of tags (which is planned), we should
+     * take special care to remove the tag from `removedTags` when we add
+     * it.
+     *
+     * @param {MatrixClient} matrixClient the matrix client to set the
+     * account data on.
+     * @param {string} tag the tag to remove.
+     * @returns {function} an async action payload that will dispatch
+     * actions indicating the status of the request.
+     * @see asyncAction
+     */
+    public static removeTag(matrixClient: MatrixClient, tag: string): AsyncActionPayload {
+        // Don't change tags, just removedTags
+        const tags = TagOrderStore.getOrderedTags();
+        const removedTags = TagOrderStore.getRemovedTagsAccountData() || [];
+
+        if (removedTags.includes(tag)) {
+            // Return a thunk that doesn't do anything, we don't even need
+            // an asynchronous action here, the tag is already removed.
+            return new AsyncActionPayload(() => {});
+        }
+
+        removedTags.push(tag);
+
+        const storeId = TagOrderStore.getStoreId();
+
+        return asyncAction('TagOrderActions.removeTag', () => {
+            Analytics.trackEvent('TagOrderActions', 'removeTag');
+            return matrixClient.setAccountData(
+                'im.vector.web.tag_ordering',
+                {tags, removedTags, _storeId: storeId},
+            );
+        }, () => {
+            // For an optimistic update
+            return {removedTags};
+        });
+    }
+}

src/actions/actionCreators.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 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,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { AsyncActionPayload } from "../dispatcher/payloads";
+
 /**
  * Create an action thunk that will dispatch actions indicating the current
  * status of the Promise returned by fn.
@@ -25,9 +28,9 @@ limitations under the License.
  * @param {function?} pendingFn a function that returns an object to assign
  *                              to the `request` key of the ${id}.pending
  *                              payload.
- * @returns {function} an action thunk - a function that uses its single
- *                     argument as a dispatch function to dispatch the
- *                     following actions:
+ * @returns {AsyncActionPayload} an async action payload. Includes a function
+ *                     that uses its single argument as a dispatch function
+ *                     to dispatch the following actions:
  *                         `${id}.pending` and either
  *                         `${id}.success` or
  *                         `${id}.failure`.
@@ -41,12 +44,11 @@ limitations under the License.
  *                     result is the result of the promise returned by
  *                     `fn`.
  */
-export function asyncAction(id, fn, pendingFn) {
-    return (dispatch) => {
+export function asyncAction(id: string, fn: () => Promise<any>, pendingFn: () => any | null): AsyncActionPayload {
+    const helper = (dispatch) => {
         dispatch({
             action: id + '.pending',
-            request:
-                typeof pendingFn === 'function' ? pendingFn() : undefined,
+            request: typeof pendingFn === 'function' ? pendingFn() : undefined,
         });
         fn().then((result) => {
             dispatch({action: id + '.success', result});
@@ -54,4 +56,5 @@ export function asyncAction(id, fn, pendingFn) {
             dispatch({action: id + '.failure', err});
         });
     };
+    return new AsyncActionPayload(helper);
 }

src/async-components/views/dialogs/EncryptedEventDialog.js

@@ -1,204 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {Key} from "../../../Keyboard";
-
-const React = require("react");
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-const sdk = require('../../../index');
-const MatrixClientPeg = require("../../../MatrixClientPeg");
-
-module.exports = createReactClass({
-    displayName: 'EncryptedEventDialog',
-
-    propTypes: {
-        event: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return { device: null };
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-        const client = MatrixClientPeg.get();
-
-        // first try to load the device from our store.
-        //
-        this.refreshDevice().then((dev) => {
-            if (dev) {
-                return dev;
-            }
-
-            // tell the client to try to refresh the device list for this user
-            return client.downloadKeys([this.props.event.getSender()], true).then(() => {
-                return this.refreshDevice();
-            });
-        }).then((dev) => {
-            if (this._unmounted) {
-                return;
-            }
-
-            this.setState({ device: dev });
-            client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        }, (err)=>{
-            console.log("Error downloading devices", err);
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-        const client = MatrixClientPeg.get();
-        if (client) {
-            client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        }
-    },
-
-    refreshDevice: function() {
-        // Promise.resolve to handle transition from static result to promise; can be removed
-        // in future
-        return Promise.resolve(MatrixClientPeg.get().getEventSenderDeviceInfo(this.props.event));
-    },
-
-    onDeviceVerificationChanged: function(userId, device) {
-        if (userId == this.props.event.getSender()) {
-            this.refreshDevice().then((dev) => {
-                this.setState({ device: dev });
-            });
-        }
-    },
-
-    onKeyDown: function(e) {
-        if (e.key === Key.ESCAPE) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-    },
-
-    _renderDeviceInfo: function() {
-        const device = this.state.device;
-        if (!device) {
-            return (<i>{ _t('unknown device') }</i>);
-        }
-
-        let verificationStatus = (<b>{ _t('NOT verified') }</b>);
-        if (device.isBlocked()) {
-            verificationStatus = (<b>{ _t('Blacklisted') }</b>);
-        } else if (device.isVerified()) {
-            verificationStatus = _t('verified');
-        }
-
-        return (
-            <table>
-                <tbody>
-                    <tr>
-                        <td>{ _t('Name') }</td>
-                        <td>{ device.getDisplayName() }</td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Device ID') }</td>
-                        <td><code>{ device.deviceId }</code></td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Verification') }</td>
-                        <td>{ verificationStatus }</td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Ed25519 fingerprint') }</td>
-                        <td><code>{ device.getFingerprint() }</code></td>
-                    </tr>
-                </tbody>
-            </table>
-        );
-    },
-
-    _renderEventInfo: function() {
-        const event = this.props.event;
-
-        return (
-            <table>
-                <tbody>
-                    <tr>
-                        <td>{ _t('User ID') }</td>
-                        <td>{ event.getSender() }</td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Curve25519 identity key') }</td>
-                        <td><code>{ event.getSenderKey() || <i>{ _t('none') }</i> }</code></td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Claimed Ed25519 fingerprint key') }</td>
-                        <td><code>{ event.getKeysClaimed().ed25519 || <i>{ _t('none') }</i> }</code></td>
-                    </tr>
-                    <tr>
-                        <td>{ _t('Algorithm') }</td>
-                        <td>{ event.getWireContent().algorithm || <i>{ _t('unencrypted') }</i> }</td>
-                    </tr>
-                {
-                    event.getContent().msgtype === 'm.bad.encrypted' ? (
-                    <tr>
-                        <td>{ _t('Decryption error') }</td>
-                        <td>{ event.getContent().body }</td>
-                    </tr>
-                    ) : null
-                }
-                    <tr>
-                        <td>{ _t('Session ID') }</td>
-                        <td><code>{ event.getWireContent().session_id || <i>{ _t('none') }</i> }</code></td>
-                    </tr>
-                </tbody>
-            </table>
-        );
-    },
-
-    render: function() {
-        const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-
-        let buttons = null;
-        if (this.state.device) {
-            buttons = (
-                <DeviceVerifyButtons device={this.state.device}
-                    userId={this.props.event.getSender()}
-                />
-            );
-        }
-
-        return (
-            <div className="mx_EncryptedEventDialog" onKeyDown={this.onKeyDown}>
-                <div className="mx_Dialog_title">
-                    { _t('End-to-end encryption information') }
-                </div>
-                <div className="mx_Dialog_content">
-                    <h4>{ _t('Event information') }</h4>
-                    { this._renderEventInfo() }
-
-                    <h4>{ _t('Sender device information') }</h4>
-                    { this._renderDeviceInfo() }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={true}>
-                        { _t('OK') }
-                    </button>
-                    { buttons }
-                </div>
-            </div>
-        );
-    },
-});

src/async-components/views/dialogs/ExportE2eKeysDialog.js

@@ -22,7 +22,7 @@ import { _t } from '../../../languageHandler';
 
 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 
 const PHASE_EDIT = 1;
 const PHASE_EXPORTING = 2;
@@ -42,7 +42,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._passphrase1 = createRef();

src/async-components/views/dialogs/ImportE2eKeysDialog.js

@@ -20,7 +20,7 @@ import createReactClass from 'create-react-class';
 
 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 function readFileAsArrayBuffer(file) {
@@ -54,7 +54,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._file = createRef();

src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js

@@ -0,0 +1,74 @@
+/*
+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 * as sdk from '../../../../index';
+import PropTypes from 'prop-types';
+import dis from "../../../../dispatcher/dispatcher";
+import { _t } from '../../../../languageHandler';
+
+import SettingsStore, {SettingLevel} from "../../../../settings/SettingsStore";
+import EventIndexPeg from "../../../../indexing/EventIndexPeg";
+import {Action} from "../../../../dispatcher/actions";
+
+/*
+ * Allows the user to disable the Event Index.
+ */
+export default class DisableEventIndexDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            disabling: false,
+        };
+    }
+
+    _onDisable = async () => {
+        this.setState({
+            disabling: true,
+        });
+
+        await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false);
+        await EventIndexPeg.deleteEventIndex();
+        this.props.onFinished();
+        dis.fire(Action.ViewUserSettings);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('elements.Spinner');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <BaseDialog onFinished={this.props.onFinished} title={_t("Are you sure?")}>
+                {_t("If disabled, messages from encrypted rooms won't appear in search results.")}
+                {this.state.disabling ? <Spinner /> : <div />}
+                <DialogButtons
+                    primaryButton={_t('Disable')}
+                    onPrimaryButtonClick={this._onDisable}
+                    primaryButtonClass="danger"
+                    cancelButtonClass="warning"
+                    onCancel={this.props.onFinished}
+                    disabled={this.state.disabling}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js

@@ -0,0 +1,195 @@
+/*
+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 * as sdk from '../../../../index';
+import PropTypes from 'prop-types';
+import { _t } from '../../../../languageHandler';
+import SettingsStore, {SettingLevel} from "../../../../settings/SettingsStore";
+
+import Modal from '../../../../Modal';
+import {formatBytes, formatCountLong} from "../../../../utils/FormattingUtils";
+import EventIndexPeg from "../../../../indexing/EventIndexPeg";
+
+/*
+ * Allows the user to introspect the event index state and disable it.
+ */
+export default class ManageEventIndexDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            eventIndexSize: 0,
+            eventCount: 0,
+            crawlingRoomsCount: 0,
+            roomCount: 0,
+            currentRoom: null,
+            crawlerSleepTime:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
+        };
+    }
+
+    updateCurrentRoom = async (room) => {
+        const eventIndex = EventIndexPeg.get();
+        let stats;
+
+        try {
+            stats = await eventIndex.getStats();
+        } catch {
+            // This call may fail if sporadically, not a huge issue as we will
+            // try later again and probably succeed.
+            return;
+        }
+
+        let currentRoom = null;
+
+        if (room) currentRoom = room.name;
+        const roomStats = eventIndex.crawlingRooms();
+        const crawlingRoomsCount = roomStats.crawlingRooms.size;
+        const roomCount = roomStats.totalRooms.size;
+
+        this.setState({
+            eventIndexSize: stats.size,
+            eventCount: stats.eventCount,
+            crawlingRoomsCount: crawlingRoomsCount,
+            roomCount: roomCount,
+            currentRoom: currentRoom,
+        });
+    };
+
+    componentWillUnmount(): void {
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.removeListener("changedCheckpoint", this.updateCurrentRoom);
+        }
+    }
+
+    async componentDidMount(): void {
+        let eventIndexSize = 0;
+        let crawlingRoomsCount = 0;
+        let roomCount = 0;
+        let eventCount = 0;
+        let currentRoom = null;
+
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.on("changedCheckpoint", this.updateCurrentRoom);
+
+            try {
+                const stats = await eventIndex.getStats();
+                eventIndexSize = stats.size;
+                eventCount = stats.eventCount;
+            } catch {
+                // This call may fail if sporadically, not a huge issue as we
+                // will try later again in the updateCurrentRoom call and
+                // probably succeed.
+            }
+
+            const roomStats = eventIndex.crawlingRooms();
+            crawlingRoomsCount = roomStats.crawlingRooms.size;
+            roomCount = roomStats.totalRooms.size;
+
+            const room = eventIndex.currentRoom();
+            if (room) currentRoom = room.name;
+        }
+
+        this.setState({
+            eventIndexSize,
+            eventCount,
+            crawlingRoomsCount,
+            roomCount,
+            currentRoom,
+        });
+    }
+
+    _onDisable = async () => {
+        Modal.createTrackedDialogAsync("Disable message search", "Disable message search",
+            import("./DisableEventIndexDialog"),
+            null, null, /* priority = */ false, /* static = */ true,
+        );
+    };
+
+    _onCrawlerSleepTimeChange = (e) => {
+        this.setState({crawlerSleepTime: e.target.value});
+        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
+    };
+
+    render() {
+        let crawlerState;
+
+        if (this.state.currentRoom === null) {
+            crawlerState = _t("Not currently indexing messages for any room.");
+        } else {
+            crawlerState = (
+                    _t("Currently indexing: %(currentRoom)s", { currentRoom: this.state.currentRoom })
+            );
+        }
+
+        const Field = sdk.getComponent('views.elements.Field');
+
+        const doneRooms = Math.max(0, (this.state.roomCount - this.state.crawlingRoomsCount));
+
+        const eventIndexingSettings = (
+            <div>
+                {
+                    _t( "Riot is securely caching encrypted messages locally for them " +
+                        "to appear in search results:",
+                    )
+                }
+                <div className='mx_SettingsTab_subsectionText'>
+                    {crawlerState}<br />
+                    {_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
+                    {_t("Indexed messages:")} {formatCountLong(this.state.eventCount)}<br />
+                    {_t("Indexed rooms:")} {_t("%(doneRooms)s out of %(totalRooms)s", {
+                        doneRooms: formatCountLong(doneRooms),
+                        totalRooms: formatCountLong(this.state.roomCount),
+                    })} <br />
+                    <Field
+                        label={_t('Message downloading sleep time(ms)')}
+                        type='number'
+                        value={this.state.crawlerSleepTime}
+                        onChange={this._onCrawlerSleepTimeChange} />
+                </div>
+            </div>
+        );
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <BaseDialog className='mx_ManageEventIndexDialog'
+                onFinished={this.props.onFinished}
+                title={_t("Message search")}
+            >
+                {eventIndexingSettings}
+                <DialogButtons
+                    primaryButton={_t("Done")}
+                    onPrimaryButtonClick={this.props.onFinished}
+                    primaryButtonClass="primary"
+                    cancelButton={_t("Disable")}
+                    onCancel={this._onDisable}
+                    cancelButtonClass="danger"
+                />
+            </BaseDialog>
+        );
+    }
+}

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,13 +15,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import FileSaver from 'file-saver';
-
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
-import { scorePassword } from '../../../../utils/PasswordScorer';
-import { _t } from '../../../../languageHandler';
+import * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import PropTypes from 'prop-types';
+import {_t, _td} from '../../../../languageHandler';
+import { accessSecretStorage } from '../../../../CrossSigningManager';
+import SettingsStore from '../../../../settings/SettingsStore';
+import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
+import {copyNode} from "../../../../utils/strings";
+import PassphraseField from "../../../../components/views/auth/PassphraseField";
 
 const PHASE_PASSPHRASE = 0;
 const PHASE_PASSPHRASE_CONFIRM = 1;
@@ -32,46 +36,48 @@ const PHASE_DONE = 5;
 const PHASE_OPTOUT_CONFIRM = 6;
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
-const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
-
-// XXX: copied from ShareDialog: factor out into utils
-function selectText(target) {
-    const range = document.createRange();
-    range.selectNodeContents(target);
-
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-}
 
 /*
  * Walks the user through the process of creating an e2e key backup
  * on the server.
  */
 export default class CreateKeyBackupDialog extends React.PureComponent {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    }
+
     constructor(props) {
         super(props);
 
+        this._recoveryKeyNode = null;
+        this._keyBackupInfo = null;
+
         this.state = {
+            secureSecretStorage: null,
             phase: PHASE_PASSPHRASE,
             passPhrase: '',
+            passPhraseValid: false,
             passPhraseConfirm: '',
             copied: false,
             downloaded: false,
-            zxcvbnResult: null,
-            setPassPhrase: false,
         };
+
+        this._passphraseField = createRef();
     }
 
-    componentWillMount() {
-        this._recoveryKeyNode = null;
-        this._keyBackupInfo = null;
-        this._setZxcvbnResultTimeout = null;
-    }
+    async componentDidMount() {
+        const cli = MatrixClientPeg.get();
+        const secureSecretStorage = (
+            SettingsStore.getValue("feature_cross_signing") &&
+            await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")
+        );
+        this.setState({ secureSecretStorage });
 
-    componentWillUnmount() {
-        if (this._setZxcvbnResultTimeout !== null) {
-            clearTimeout(this._setZxcvbnResultTimeout);
+        // If we're using secret storage, skip ahead to the backing up step, as
+        // `accessSecretStorage` will handle passphrases as needed.
+        if (secureSecretStorage) {
+            this.setState({ phase: PHASE_BACKINGUP });
+            this._createBackup();
         }
     }
 
@@ -80,8 +86,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     }
 
     _onCopyClick = () => {
-        selectText(this._recoveryKeyNode);
-        const successful = document.execCommand('copy');
+        const successful = copyNode(this._recoveryKeyNode);
         if (successful) {
             this.setState({
                 copied: true,
@@ -103,15 +108,26 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     }
 
     _createBackup = async () => {
+        const { secureSecretStorage } = this.state;
         this.setState({
             phase: PHASE_BACKINGUP,
             error: null,
         });
         let info;
         try {
-            info = await MatrixClientPeg.get().createKeyBackupVersion(
-                this._keyBackupInfo,
-            );
+            if (secureSecretStorage) {
+                await accessSecretStorage(async () => {
+                    info = await MatrixClientPeg.get().prepareKeyBackupVersion(
+                        null /* random key */,
+                        { secureSecretStorage: true },
+                    );
+                    info = await MatrixClientPeg.get().createKeyBackupVersion(info);
+                });
+            } else {
+                info = await MatrixClientPeg.get().createKeyBackupVersion(
+                    this._keyBackupInfo,
+                );
+            }
             await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
             this.setState({
                 phase: PHASE_DONE,
@@ -156,52 +172,39 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseNextClick = () => {
-        this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
-    }
+    _onPassPhraseNextClick = async (e) => {
+        e.preventDefault();
+        if (!this._passphraseField.current) return; // unmounting
 
-    _onPassPhraseKeyPress = async (e) => {
-        if (e.key === 'Enter') {
-            // If we're waiting for the timeout before updating the result at this point,
-            // skip ahead and do it now, otherwise we'll deny the attempt to proceed
-            // even if the user entered a valid passphrase
-            if (this._setZxcvbnResultTimeout !== null) {
-                clearTimeout(this._setZxcvbnResultTimeout);
-                this._setZxcvbnResultTimeout = null;
-                await new Promise((resolve) => {
-                    this.setState({
-                        zxcvbnResult: scorePassword(this.state.passPhrase),
-                    }, resolve);
-                });
-            }
-            if (this._passPhraseIsValid()) {
-                this._onPassPhraseNextClick();
-            }
+        await this._passphraseField.current.validate({ allowEmpty: false });
+        if (!this._passphraseField.current.state.valid) {
+            this._passphraseField.current.focus();
+            this._passphraseField.current.validate({ allowEmpty: false, focused: true });
+            return;
         }
-    }
 
-    _onPassPhraseConfirmNextClick = async () => {
+        this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
+    };
+
+    _onPassPhraseConfirmNextClick = async (e) => {
+        e.preventDefault();
+
+        if (this.state.passPhrase !== this.state.passPhraseConfirm) return;
+
         this._keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
         this.setState({
-            setPassPhrase: true,
             copied: false,
             downloaded: false,
             phase: PHASE_SHOWKEY,
         });
-    }
-
-    _onPassPhraseConfirmKeyPress = (e) => {
-        if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
-            this._onPassPhraseConfirmNextClick();
-        }
-    }
+    };
 
     _onSetAgainClick = () => {
         this.setState({
             passPhrase: '',
+            passPhraseValid: false,
             passPhraseConfirm: '',
             phase: PHASE_PASSPHRASE,
-            zxcvbnResult: null,
         });
     }
 
@@ -211,23 +214,16 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         });
     }
 
+    _onPassPhraseValidate = (result) => {
+        this.setState({
+            passPhraseValid: result.valid,
+        });
+    };
+
     _onPassPhraseChange = (e) => {
         this.setState({
             passPhrase: e.target.value,
         });
-
-        if (this._setZxcvbnResultTimeout !== null) {
-            clearTimeout(this._setZxcvbnResultTimeout);
-        }
-        this._setZxcvbnResultTimeout = setTimeout(() => {
-            this._setZxcvbnResultTimeout = null;
-            this.setState({
-                // precompute this and keep it in state: zxcvbn is fast but
-                // we use it in a couple of different places so no point recomputing
-                // it unnecessarily.
-                zxcvbnResult: scorePassword(this.state.passPhrase),
-            });
-        }, PASSPHRASE_FEEDBACK_DELAY);
     }
 
     _onPassPhraseConfirmChange = (e) => {
@@ -236,84 +232,62 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _passPhraseIsValid() {
-        return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
-    }
-
     _renderPhasePassPhrase() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
-        let strengthMeter;
-        let helpText;
-        if (this.state.zxcvbnResult) {
-            if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
-                helpText = _t("Great! This passphrase looks strong enough.");
-            } else {
-                const suggestions = [];
-                for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
-                    suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
-                }
-                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
-
-                helpText = <div>
-                    {this.state.zxcvbnResult.feedback.warning}
-                    {suggestionBlock}
-                </div>;
-            }
-            strengthMeter = <div>
-                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
-            </div>;
-        }
-
-        return <div>
+        return <form onSubmit={this._onPassPhraseNextClick}>
             <p>{_t(
                 "<b>Warning</b>: You should only set up key backup from a trusted computer.", {},
                 { b: sub => <b>{sub}</b> },
             )}</p>
             <p>{_t(
                 "We'll store an encrypted copy of your keys on our server. " +
-                "Protect your backup with a passphrase to keep it secure.",
+                "Secure your backup with a recovery passphrase.",
             )}</p>
             <p>{_t("For maximum security, this should be different from your account password.")}</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
-                    <input type="password"
-                        onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
-                        value={this.state.passPhrase}
+                    <PassphraseField
                         className="mx_CreateKeyBackupDialog_passPhraseInput"
-                        placeholder={_t("Enter a passphrase...")}
+                        onChange={this._onPassPhraseChange}
+                        minScore={PASSWORD_MIN_SCORE}
+                        value={this.state.passPhrase}
+                        onValidate={this._onPassPhraseValidate}
+                        fieldRef={this._passphraseField}
                         autoFocus={true}
+                        label={_td("Enter a recovery passphrase")}
+                        labelEnterPassword={_td("Enter a recovery passphrase")}
+                        labelStrongPassword={_td("Great! This recovery passphrase looks strong enough.")}
+                        labelAllowedButUnsafe={_td("Great! This recovery passphrase looks strong enough.")}
                     />
-                    <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
-                        {strengthMeter}
-                        {helpText}
-                    </div>
                 </div>
             </div>
 
-            <DialogButtons primaryButton={_t('Next')}
+            <DialogButtons
+                primaryButton={_t('Next')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}
-                disabled={!this._passPhraseIsValid()}
+                disabled={!this.state.passPhraseValid}
             />
 
             <details>
                 <summary>{_t("Advanced")}</summary>
-                <p><button onClick={this._onSkipPassPhraseClick} >
-                    {_t("Set up with a Recovery Key")}
-                </button></p>
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
+                    {_t("Set up with a recovery key")}
+                </AccessibleButton>
             </details>
-        </div>;
+        </form>;
     }
 
     _renderPhasePassPhraseConfirm() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let matchText;
+        let changeText;
         if (this.state.passPhraseConfirm === this.state.passPhrase) {
             matchText = _t("That matches!");
+            changeText = _t("Use a different passphrase?");
         } else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
             // only tell them they're wrong if they've actually gone wrong.
             // Security concious readers will note that if you left riot-web unattended
@@ -323,6 +297,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
             // Note that not having typed anything at all will not hit this clause and
             // fall through so empty box === no hint.
             matchText = _t("That doesn't match.");
+            changeText = _t("Go back to set it again.");
         }
 
         let passPhraseMatch = null;
@@ -331,62 +306,51 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 <div>{matchText}</div>
                 <div>
                     <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
-                        {_t("Go back to set it again.")}
+                        {changeText}
                     </AccessibleButton>
                 </div>
             </div>;
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <div>
+        return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
-                "Please enter your passphrase a second time to confirm.",
+                "Please enter your recovery passphrase a second time to confirm.",
             )}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
                     <div>
                         <input type="password"
                             onChange={this._onPassPhraseConfirmChange}
-                            onKeyPress={this._onPassPhraseConfirmKeyPress}
                             value={this.state.passPhraseConfirm}
                             className="mx_CreateKeyBackupDialog_passPhraseInput"
-                            placeholder={_t("Repeat your passphrase...")}
+                            placeholder={_t("Repeat your recovery passphrase...")}
                             autoFocus={true}
                         />
                     </div>
                     {passPhraseMatch}
                 </div>
             </div>
-            <DialogButtons primaryButton={_t('Next')}
+            <DialogButtons
+                primaryButton={_t('Next')}
                 onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
                 hasCancel={false}
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
             />
-        </div>;
+        </form>;
     }
 
     _renderPhaseShowKey() {
-        let bodyText;
-        if (this.state.setPassPhrase) {
-            bodyText = _t(
-                "As a safety net, you can use it to restore your encrypted message " +
-                "history if you forget your Recovery Passphrase.",
-            );
-        } else {
-            bodyText = _t("As a safety net, you can use it to restore your encrypted message history.");
-        }
-
         return <div>
             <p>{_t(
                 "Your recovery key is a safety net - you can use it to restore " +
-                "access to your encrypted messages if you forget your passphrase.",
+                "access to your encrypted messages if you forget your recovery passphrase.",
             )}</p>
             <p>{_t(
-                "Keep your recovery key somewhere very secure, like a password manager (or a safe).",
+                "Keep a copy of it somewhere secure, like a password manager or even a safe.",
             )}</p>
-            <p>{bodyText}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
-                    {_t("Your Recovery Key")}
+                    {_t("Your recovery key")}
                 </div>
                 <div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
                     <div className="mx_CreateKeyBackupDialog_recoveryKey">
@@ -394,7 +358,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                     </div>
                     <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
                         <button className="mx_Dialog_primary" onClick={this._onCopyClick}>
-                            {_t("Copy to clipboard")}
+                            {_t("Copy")}
                         </button>
                         <button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
                             {_t("Download")}
@@ -426,7 +390,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
                 <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
             </ul>
-            <DialogButtons primaryButton={_t("OK")}
+            <DialogButtons primaryButton={_t("Continue")}
                 onPrimaryButtonClick={this._createBackup}
                 hasCancel={false}>
                 <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
@@ -459,7 +423,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         return <div>
             {_t(
                 "Without setting up Secure Message Recovery, you won't be able to restore your " +
-                "encrypted message history if you log out or use another device.",
+                "encrypted message history if you log out or use another session.",
             )}
             <DialogButtons primaryButton={_t('Set up Secure Message Recovery')}
                 onPrimaryButtonClick={this._onSetUpClick}
@@ -473,21 +437,20 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
     _titleForPhase(phase) {
         switch (phase) {
             case PHASE_PASSPHRASE:
-                return _t('Secure your backup with a passphrase');
+                return _t('Secure your backup with a recovery passphrase');
             case PHASE_PASSPHRASE_CONFIRM:
-                return _t('Confirm your passphrase');
+                return _t('Confirm your recovery passphrase');
             case PHASE_OPTOUT_CONFIRM:
                 return _t('Warning!');
             case PHASE_SHOWKEY:
-                return _t('Recovery key');
             case PHASE_KEEPITSAFE:
-                return _t('Keep it safe');
+                return _t('Make a copy of your recovery key');
             case PHASE_BACKINGUP:
                 return _t('Starting backup...');
             case PHASE_DONE:
                 return _t('Success!');
             default:
-                return _t("Create Key Backup");
+                return _t("Create key backup");
         }
     }
 

src/async-components/views/dialogs/keybackup/IgnoreRecoveryReminderDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
+import * as sdk from "../../../../index";
 import { _t } from "../../../../languageHandler";
 
 export default class IgnoreRecoveryReminderDialog extends React.PureComponent {

src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js

@@ -1,5 +1,6 @@
 /*
-Copyright 2018-2019 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,11 +17,12 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
-import MatrixClientPeg from '../../../../MatrixClientPeg';
-import dis from "../../../../dispatcher";
+import * as sdk from "../../../../index";
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
+import {Action} from "../../../../dispatcher/actions";
 
 export default class NewRecoveryMethodDialog extends React.PureComponent {
     static propTypes = {
@@ -35,14 +37,16 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
 
     onGoToSettingsClick = () => {
         this.props.onFinished();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
     }
 
     onSetupClick = async () => {
         const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
-        Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {
-            onFinished: this.props.onFinished,
-        });
+        Modal.createTrackedDialog(
+            'Restore Backup', '', RestoreKeyBackupDialog, {
+                onFinished: this.props.onFinished,
+            }, null, /* priority = */ false, /* static = */ true,
+        );
     }
 
     render() {
@@ -54,8 +58,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
         </span>;
 
         const newMethodDetected = <p>{_t(
-            "A new recovery passphrase and key for Secure " +
-            "Messages have been detected.",
+            "A new recovery passphrase and key for Secure Messages have been detected.",
         )}</p>;
 
         const hackWarning = <p className="warning">{_t(
@@ -70,7 +73,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
             content = <div>
                 {newMethodDetected}
                 <p>{_t(
-                    "This device is encrypting history using the new recovery method.",
+                    "This session is encrypting history using the new recovery method.",
                 )}</p>
                 {hackWarning}
                 <DialogButtons

src/async-components/views/dialogs/keybackup/RecoveryMethodRemovedDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,10 +17,11 @@ limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
-import dis from "../../../../dispatcher";
+import * as sdk from "../../../../index";
+import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
+import {Action} from "../../../../dispatcher/actions";
 
 export default class RecoveryMethodRemovedDialog extends React.PureComponent {
     static propTypes = {
@@ -28,13 +30,14 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent {
 
     onGoToSettingsClick = () => {
         this.props.onFinished();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
     }
 
     onSetupClick = () => {
         this.props.onFinished();
         Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
             import("./CreateKeyBackupDialog"),
+            null, null, /* priority = */ false, /* static = */ true,
         );
     }
 
@@ -53,12 +56,12 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent {
             >
                 <div>
                     <p>{_t(
-                        "This device has detected that your recovery passphrase and key " +
+                        "This session has detected that your recovery passphrase and key " +
                         "for Secure Messages have been removed.",
                     )}</p>
                     <p>{_t(
                         "If you did this accidentally, you can setup Secure Messages on " +
-                        "this device which will re-encrypt this device's message " +
+                        "this session which will re-encrypt this session's message " +
                         "history with a new recovery method.",
                     )}</p>
                     <p className="warning">{_t(

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,72 +15,164 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
-import { scorePassword } from '../../../../utils/PasswordScorer';
+import React, {createRef} from 'react';
+import PropTypes from 'prop-types';
+import * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import FileSaver from 'file-saver';
-import { _t } from '../../../../languageHandler';
+import {_t, _td} from '../../../../languageHandler';
 import Modal from '../../../../Modal';
+import { promptForBackupPassphrase } from '../../../../CrossSigningManager';
+import {copyNode} from "../../../../utils/strings";
+import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents";
+import PassphraseField from "../../../../components/views/auth/PassphraseField";
 
-const PHASE_PASSPHRASE = 0;
-const PHASE_PASSPHRASE_CONFIRM = 1;
-const PHASE_SHOWKEY = 2;
-const PHASE_KEEPITSAFE = 3;
-const PHASE_STORING = 4;
-const PHASE_DONE = 5;
-const PHASE_OPTOUT_CONFIRM = 6;
+const PHASE_LOADING = 0;
+const PHASE_LOADERROR = 1;
+const PHASE_MIGRATE = 2;
+const PHASE_PASSPHRASE = 3;
+const PHASE_PASSPHRASE_CONFIRM = 4;
+const PHASE_SHOWKEY = 5;
+const PHASE_KEEPITSAFE = 6;
+const PHASE_STORING = 7;
+const PHASE_DONE = 8;
+const PHASE_CONFIRM_SKIP = 9;
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
-const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
-
-// XXX: copied from ShareDialog: factor out into utils
-function selectText(target) {
-    const range = document.createRange();
-    range.selectNodeContents(target);
-
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-}
 
 /*
  * Walks the user through the process of creating a passphrase to guard Secure
  * Secret Storage in account data.
  */
 export default class CreateSecretStorageDialog extends React.PureComponent {
+    static propTypes = {
+        hasCancel: PropTypes.bool,
+        accountPassword: PropTypes.string,
+        force: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        hasCancel: true,
+        force: false,
+    };
+
     constructor(props) {
         super(props);
 
-        this._keyInfo = null;
-        this._encodedRecoveryKey = null;
+        this._recoveryKey = null;
         this._recoveryKeyNode = null;
-        this._setZxcvbnResultTimeout = null;
+        this._backupKey = null;
 
         this.state = {
-            phase: PHASE_PASSPHRASE,
+            phase: PHASE_LOADING,
             passPhrase: '',
+            passPhraseValid: false,
             passPhraseConfirm: '',
             copied: false,
             downloaded: false,
-            zxcvbnResult: null,
-            setPassPhrase: false,
+            backupInfo: null,
+            backupSigStatus: null,
+            // does the server offer a UI auth flow with just m.login.password
+            // for /keys/device_signing/upload?
+            canUploadKeysWithPasswordOnly: null,
+            accountPassword: props.accountPassword || "",
+            accountPasswordCorrect: null,
+            // status of the key backup toggle switch
+            useKeyBackup: true,
         };
+
+        this._passphraseField = createRef();
+
+        this._fetchBackupInfo();
+        if (this.state.accountPassword) {
+            // If we have an account password in memory, let's simplify and
+            // assume it means password auth is also supported for device
+            // signing key upload as well. This avoids hitting the server to
+            // test auth flows, which may be slow under high load.
+            this.state.canUploadKeysWithPasswordOnly = true;
+        } else {
+            this._queryKeyUploadAuth();
+        }
+
+        MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
     }
 
     componentWillUnmount() {
-        if (this._setZxcvbnResultTimeout !== null) {
-            clearTimeout(this._setZxcvbnResultTimeout);
+        MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
+    }
+
+    async _fetchBackupInfo() {
+        try {
+            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            const backupSigStatus = (
+                // we may not have started crypto yet, in which case we definitely don't trust the backup
+                MatrixClientPeg.get().isCryptoEnabled() && await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo)
+            );
+
+            const { force } = this.props;
+            const phase = (backupInfo && !force) ? PHASE_MIGRATE : PHASE_PASSPHRASE;
+
+            this.setState({
+                phase,
+                backupInfo,
+                backupSigStatus,
+            });
+
+            return {
+                backupInfo,
+                backupSigStatus,
+            };
+        } catch (e) {
+            this.setState({phase: PHASE_LOADERROR});
         }
     }
 
+    async _queryKeyUploadAuth() {
+        try {
+            await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {});
+            // We should never get here: the server should always require
+            // UI auth to upload device signing keys. If we do, we upload
+            // no keys which would be a no-op.
+            console.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
+        } catch (error) {
+            if (!error.data || !error.data.flows) {
+                console.log("uploadDeviceSigningKeys advertised no flows!");
+                return;
+            }
+            const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
+                return f.stages.length === 1 && f.stages[0] === 'm.login.password';
+            });
+            this.setState({
+                canUploadKeysWithPasswordOnly,
+            });
+        }
+    }
+
+    _onKeyBackupStatusChange = () => {
+        if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo();
+    }
+
     _collectRecoveryKeyNode = (n) => {
         this._recoveryKeyNode = n;
     }
 
+    _onUseKeyBackupChange = (enabled) => {
+        this.setState({
+            useKeyBackup: enabled,
+        });
+    }
+
+    _onMigrateFormSubmit = (e) => {
+        e.preventDefault();
+        if (this.state.backupSigStatus.usable) {
+            this._bootstrapSecretStorage();
+        } else {
+            this._restoreBackup();
+        }
+    }
+
     _onCopyClick = () => {
-        selectText(this._recoveryKeyNode);
-        const successful = document.execCommand('copy');
+        const successful = copyNode(this._recoveryKeyNode);
         if (successful) {
             this.setState({
                 copied: true,
@@ -90,7 +182,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onDownloadClick = () => {
-        const blob = new Blob([this._encodedRecoveryKey], {
+        const blob = new Blob([this._recoveryKey.encodedPrivateKey], {
             type: 'text/plain;charset=us-ascii',
         });
         FileSaver.saveAs(blob, 'recovery-key.txt');
@@ -101,36 +193,111 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    _doBootstrapUIAuth = async (makeRequest) => {
+        if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
+            await makeRequest({
+                type: 'm.login.password',
+                identifier: {
+                    type: 'm.id.user',
+                    user: MatrixClientPeg.get().getUserId(),
+                },
+                // https://github.com/matrix-org/synapse/issues/5665
+                user: MatrixClientPeg.get().getUserId(),
+                password: this.state.accountPassword,
+            });
+        } else {
+            const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
+
+            const dialogAesthetics = {
+                [SSOAuthEntry.PHASE_PREAUTH]: {
+                    title: _t("Use Single Sign On to continue"),
+                    body: _t("To continue, use Single Sign On to prove your identity."),
+                    continueText: _t("Single Sign On"),
+                    continueKind: "primary",
+                },
+                [SSOAuthEntry.PHASE_POSTAUTH]: {
+                    title: _t("Confirm encryption setup"),
+                    body: _t("Click the button below to confirm setting up encryption."),
+                    continueText: _t("Confirm"),
+                    continueKind: "primary",
+                },
+            };
+
+            const { finished } = Modal.createTrackedDialog(
+                'Cross-signing keys dialog', '', InteractiveAuthDialog,
+                {
+                    title: _t("Setting up keys"),
+                    matrixClient: MatrixClientPeg.get(),
+                    makeRequest,
+                    aestheticsForStagePhases: {
+                        [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                        [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                    },
+                },
+            );
+            const [confirmed] = await finished;
+            if (!confirmed) {
+                throw new Error("Cross-signing key upload auth canceled");
+            }
+        }
+    }
+
     _bootstrapSecretStorage = async () => {
         this.setState({
             phase: PHASE_STORING,
             error: null,
         });
+
         const cli = MatrixClientPeg.get();
+
+        const { force } = this.props;
+
         try {
-            const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
-            await cli.bootstrapSecretStorage({
-                authUploadDeviceSigningKeys: async (makeRequest) => {
-                    const { finished } = Modal.createTrackedDialog(
-                        'Cross-signing keys dialog', '', InteractiveAuthDialog,
-                        {
-                            title: _t("Send cross-signing keys to homeserver"),
-                            matrixClient: MatrixClientPeg.get(),
-                            makeRequest,
-                        },
-                    );
-                    const [confirmed] = await finished;
-                    if (!confirmed) {
-                        throw new Error("Cross-signing key upload auth canceled");
-                    }
-                },
-                createSecretStorageKey: async () => this._keyInfo,
-            });
+            if (force) {
+                console.log("Forcing secret storage reset"); // log something so we can debug this later
+                await cli.bootstrapSecretStorage({
+                    authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
+                    createSecretStorageKey: async () => this._recoveryKey,
+                    setupNewKeyBackup: this.state.useKeyBackup,
+                    setupNewSecretStorage: true,
+                });
+                if (!this.state.useKeyBackup && this.state.backupInfo) {
+                    // If the user is resetting their cross-signing keys and doesn't want
+                    // key backup (but had it enabled before), delete the key backup as it's
+                    // no longer valid.
+                    console.log("Deleting invalid key backup (secrets have been reset; key backup not requested)");
+                    await cli.deleteKeyBackupVersion(this.state.backupInfo.version);
+                }
+            } else {
+                await cli.bootstrapSecretStorage({
+                    authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
+                    createSecretStorageKey: async () => this._recoveryKey,
+                    keyBackupInfo: this.state.backupInfo,
+                    setupNewKeyBackup: !this.state.backupInfo && this.state.useKeyBackup,
+                    getKeyBackupPassphrase: () => {
+                        // We may already have the backup key if we earlier went
+                        // through the restore backup path, so pass it along
+                        // rather than prompting again.
+                        if (this._backupKey) {
+                            return this._backupKey;
+                        }
+                        return promptForBackupPassphrase();
+                    },
+                });
+            }
             this.setState({
                 phase: PHASE_DONE,
             });
         } catch (e) {
-            this.setState({ error: e });
+            if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) {
+                this.setState({
+                    accountPassword: '',
+                    accountPasswordCorrect: false,
+                    phase: PHASE_MIGRATE,
+                });
+            } else {
+                this.setState({ error: e });
+            }
             console.error("Error bootstrapping secret storage", e);
         }
     }
@@ -143,8 +310,39 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         this.props.onFinished(true);
     }
 
-    _onOptOutClick = () => {
-        this.setState({phase: PHASE_OPTOUT_CONFIRM});
+    _restoreBackup = async () => {
+        // It's possible we'll need the backup key later on for bootstrapping,
+        // so let's stash it here, rather than prompting for it twice.
+        const keyCallback = k => this._backupKey = k;
+
+        const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
+        const { finished } = Modal.createTrackedDialog(
+            'Restore Backup', '', RestoreKeyBackupDialog,
+            {
+                showSummary: false,
+                keyCallback,
+            },
+            null, /* priority = */ false, /* static = */ false,
+        );
+
+        await finished;
+        const { backupSigStatus } = await this._fetchBackupInfo();
+        if (
+            backupSigStatus.usable &&
+            this.state.canUploadKeysWithPasswordOnly &&
+            this.state.accountPassword
+        ) {
+            this._bootstrapSecretStorage();
+        }
+    }
+
+    _onLoadRetryClick = () => {
+        this.setState({phase: PHASE_LOADING});
+        this._fetchBackupInfo();
+    }
+
+    _onSkipSetupClick = () => {
+        this.setState({phase: PHASE_CONFIRM_SKIP});
     }
 
     _onSetUpClick = () => {
@@ -152,10 +350,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onSkipPassPhraseClick = async () => {
-        const [keyInfo, encodedRecoveryKey] =
+        this._recoveryKey =
             await MatrixClientPeg.get().createRecoveryKeyFromPassphrase();
-        this._keyInfo = keyInfo;
-        this._encodedRecoveryKey = encodedRecoveryKey;
         this.setState({
             copied: false,
             downloaded: false,
@@ -163,55 +359,40 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseNextClick = () => {
+    _onPassPhraseNextClick = async (e) => {
+        e.preventDefault();
+        if (!this._passphraseField.current) return; // unmounting
+
+        await this._passphraseField.current.validate({ allowEmpty: false });
+        if (!this._passphraseField.current.state.valid) {
+            this._passphraseField.current.focus();
+            this._passphraseField.current.validate({ allowEmpty: false, focused: true });
+            return;
+        }
+
         this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
-    }
+    };
 
-    _onPassPhraseKeyPress = async (e) => {
-        if (e.key === 'Enter') {
-            // If we're waiting for the timeout before updating the result at this point,
-            // skip ahead and do it now, otherwise we'll deny the attempt to proceed
-            // even if the user entered a valid passphrase
-            if (this._setZxcvbnResultTimeout !== null) {
-                clearTimeout(this._setZxcvbnResultTimeout);
-                this._setZxcvbnResultTimeout = null;
-                await new Promise((resolve) => {
-                    this.setState({
-                        zxcvbnResult: scorePassword(this.state.passPhrase),
-                    }, resolve);
-                });
-            }
-            if (this._passPhraseIsValid()) {
-                this._onPassPhraseNextClick();
-            }
-        }
-    }
+    _onPassPhraseConfirmNextClick = async (e) => {
+        e.preventDefault();
 
-    _onPassPhraseConfirmNextClick = async () => {
-        const [keyInfo, encodedRecoveryKey] =
+        if (this.state.passPhrase !== this.state.passPhraseConfirm) return;
+
+        this._recoveryKey =
             await MatrixClientPeg.get().createRecoveryKeyFromPassphrase(this.state.passPhrase);
-        this._keyInfo = keyInfo;
-        this._encodedRecoveryKey = encodedRecoveryKey;
         this.setState({
-            setPassPhrase: true,
             copied: false,
             downloaded: false,
             phase: PHASE_SHOWKEY,
         });
     }
 
-    _onPassPhraseConfirmKeyPress = (e) => {
-        if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
-            this._onPassPhraseConfirmNextClick();
-        }
-    }
-
     _onSetAgainClick = () => {
         this.setState({
             passPhrase: '',
+            passPhraseValid: false,
             passPhraseConfirm: '',
             phase: PHASE_PASSPHRASE,
-            zxcvbnResult: null,
         });
     }
 
@@ -221,23 +402,16 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    _onPassPhraseValidate = (result) => {
+        this.setState({
+            passPhraseValid: result.valid,
+        });
+    };
+
     _onPassPhraseChange = (e) => {
         this.setState({
             passPhrase: e.target.value,
         });
-
-        if (this._setZxcvbnResultTimeout !== null) {
-            clearTimeout(this._setZxcvbnResultTimeout);
-        }
-        this._setZxcvbnResultTimeout = setTimeout(() => {
-            this._setZxcvbnResultTimeout = null;
-            this.setState({
-                // precompute this and keep it in state: zxcvbn is fast but
-                // we use it in a couple of different places so no point recomputing
-                // it unnecessarily.
-                zxcvbnResult: scorePassword(this.state.passPhrase),
-            });
-        }, PASSPHRASE_FEEDBACK_DELAY);
     }
 
     _onPassPhraseConfirmChange = (e) => {
@@ -246,86 +420,128 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _passPhraseIsValid() {
-        return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
+    _onAccountPasswordChange = (e) => {
+        this.setState({
+            accountPassword: e.target.value,
+        });
+    }
+
+    _renderPhaseMigrate() {
+        // TODO: This is a temporary screen so people who have the labs flag turned on and
+        // click the button are aware they're making a change to their account.
+        // Once we're confident enough in this (and it's supported enough) we can do
+        // it automatically.
+        // https://github.com/vector-im/riot-web/issues/11696
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Field = sdk.getComponent('views.elements.Field');
+
+        let authPrompt;
+        let nextCaption = _t("Next");
+        if (this.state.canUploadKeysWithPasswordOnly) {
+            authPrompt = <div>
+                <div>{_t("Enter your account password to confirm the upgrade:")}</div>
+                <div><Field
+                    type="password"
+                    label={_t("Password")}
+                    value={this.state.accountPassword}
+                    onChange={this._onAccountPasswordChange}
+                    flagInvalid={this.state.accountPasswordCorrect === false}
+                    autoFocus={true}
+                /></div>
+            </div>;
+        } else if (!this.state.backupSigStatus.usable) {
+            authPrompt = <div>
+                <div>{_t("Restore your key backup to upgrade your encryption")}</div>
+            </div>;
+            nextCaption = _t("Restore");
+        } else {
+            authPrompt = <p>
+                {_t("You'll need to authenticate with the server to confirm the upgrade.")}
+            </p>;
+        }
+
+        return <form onSubmit={this._onMigrateFormSubmit}>
+            <p>{_t(
+                "Upgrade this session to allow it to verify other sessions, " +
+                "granting them access to encrypted messages and marking them " +
+                "as trusted for other users.",
+            )}</p>
+            <div>{authPrompt}</div>
+            <DialogButtons
+                primaryButton={nextCaption}
+                onPrimaryButtonClick={this._onMigrateFormSubmit}
+                hasCancel={false}
+                primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
+            >
+                <button type="button" className="danger" onClick={this._onSkipSetupClick}>
+                    {_t('Skip')}
+                </button>
+            </DialogButtons>
+        </form>;
     }
 
     _renderPhasePassPhrase() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
 
-        let strengthMeter;
-        let helpText;
-        if (this.state.zxcvbnResult) {
-            if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
-                helpText = _t("Great! This passphrase looks strong enough.");
-            } else {
-                const suggestions = [];
-                for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
-                    suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
-                }
-                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
-
-                helpText = <div>
-                    {this.state.zxcvbnResult.feedback.warning}
-                    {suggestionBlock}
-                </div>;
-            }
-            strengthMeter = <div>
-                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
-            </div>;
-        }
-
-        return <div>
+        return <form onSubmit={this._onPassPhraseNextClick}>
             <p>{_t(
-                "<b>Warning</b>: You should only set up secret storage from a trusted computer.", {},
-                { b: sub => <b>{sub}</b> },
+                "Set a recovery passphrase to secure encrypted information and recover it if you log out. " +
+                "This should be different to your account password:",
             )}</p>
-            <p>{_t(
-                "We'll use secret storage to optionally store an encrypted copy of " +
-                "your cross-signing identity for verifying other devices and message " +
-                "keys on our server. Protect your access to encrypted messages with a " +
-                "passphrase to keep it secure.",
-            )}</p>
-            <p>{_t("For maximum security, this should be different from your account password.")}</p>
 
-            <div className="mx_CreateSecretStorageDialog_primaryContainer">
-                <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
-                    <input type="password"
-                        onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
-                        value={this.state.passPhrase}
-                        className="mx_CreateSecretStorageDialog_passPhraseInput"
-                        placeholder={_t("Enter a passphrase...")}
-                        autoFocus={true}
-                    />
-                    <div className="mx_CreateSecretStorageDialog_passPhraseHelp">
-                        {strengthMeter}
-                        {helpText}
-                    </div>
-                </div>
+            <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
+                <PassphraseField
+                    className="mx_CreateSecretStorageDialog_passPhraseField"
+                    onChange={this._onPassPhraseChange}
+                    minScore={PASSWORD_MIN_SCORE}
+                    value={this.state.passPhrase}
+                    onValidate={this._onPassPhraseValidate}
+                    fieldRef={this._passphraseField}
+                    autoFocus={true}
+                    label={_td("Enter a recovery passphrase")}
+                    labelEnterPassword={_td("Enter a recovery passphrase")}
+                    labelStrongPassword={_td("Great! This recovery passphrase looks strong enough.")}
+                    labelAllowedButUnsafe={_td("Great! This recovery passphrase looks strong enough.")}
+                />
             </div>
 
-            <DialogButtons primaryButton={_t('Next')}
+            <LabelledToggleSwitch
+                label={ _t("Back up encrypted message keys")}
+                onChange={this._onUseKeyBackupChange} value={this.state.useKeyBackup}
+            />
+
+            <DialogButtons
+                primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}
-                disabled={!this._passPhraseIsValid()}
-            />
+                disabled={!this.state.passPhraseValid}
+            >
+                <button type="button"
+                    onClick={this._onSkipSetupClick}
+                    className="danger"
+                >{_t("Skip")}</button>
+            </DialogButtons>
 
             <details>
                 <summary>{_t("Advanced")}</summary>
-                <p><button onClick={this._onSkipPassPhraseClick} >
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
                     {_t("Set up with a recovery key")}
-                </button></p>
+                </AccessibleButton>
             </details>
-        </div>;
+        </form>;
     }
 
     _renderPhasePassPhraseConfirm() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const Field = sdk.getComponent('views.elements.Field');
 
         let matchText;
+        let changeText;
         if (this.state.passPhraseConfirm === this.state.passPhrase) {
             matchText = _t("That matches!");
+            changeText = _t("Use a different passphrase?");
         } else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
             // only tell them they're wrong if they've actually gone wrong.
             // Security concious readers will note that if you left riot-web unattended
@@ -335,85 +551,82 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             // Note that not having typed anything at all will not hit this clause and
             // fall through so empty box === no hint.
             matchText = _t("That doesn't match.");
+            changeText = _t("Go back to set it again.");
         }
 
         let passPhraseMatch = null;
         if (matchText) {
-            passPhraseMatch = <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
+            passPhraseMatch = <div>
                 <div>{matchText}</div>
                 <div>
                     <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
-                        {_t("Go back to set it again.")}
+                        {changeText}
                     </AccessibleButton>
                 </div>
             </div>;
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <div>
+        return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
-                "Please enter your passphrase a second time to confirm.",
+                "Enter your recovery passphrase a second time to confirm it.",
             )}</p>
-            <div className="mx_CreateSecretStorageDialog_primaryContainer">
-                <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
-                    <div>
-                        <input type="password"
-                            onChange={this._onPassPhraseConfirmChange}
-                            onKeyPress={this._onPassPhraseConfirmKeyPress}
-                            value={this.state.passPhraseConfirm}
-                            className="mx_CreateSecretStorageDialog_passPhraseInput"
-                            placeholder={_t("Repeat your passphrase...")}
-                            autoFocus={true}
-                        />
-                    </div>
+            <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
+                <Field
+                    type="password"
+                    onChange={this._onPassPhraseConfirmChange}
+                    value={this.state.passPhraseConfirm}
+                    className="mx_CreateSecretStorageDialog_passPhraseField"
+                    label={_t("Confirm your recovery passphrase")}
+                    autoFocus={true}
+                    autoComplete="new-password"
+                />
+                <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
                     {passPhraseMatch}
                 </div>
             </div>
-            <DialogButtons primaryButton={_t('Next')}
+            <DialogButtons
+                primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
                 hasCancel={false}
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
-            />
-        </div>;
+            >
+                <button type="button"
+                    onClick={this._onSkipSetupClick}
+                    className="danger"
+                >{_t("Skip")}</button>
+            </DialogButtons>
+        </form>;
     }
 
     _renderPhaseShowKey() {
-        let bodyText;
-        if (this.state.setPassPhrase) {
-            bodyText = _t(
-                "As a safety net, you can use it to restore your access to encrypted " +
-                "messages if you forget your passphrase.",
-            );
-        } else {
-            bodyText = _t(
-                "As a safety net, you can use it to restore your access to encrypted " +
-                "messages.",
-            );
-        }
-
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return <div>
             <p>{_t(
                 "Your recovery key is a safety net - you can use it to restore " +
-                "access to your encrypted messages if you forget your passphrase.",
+                "access to your encrypted messages if you forget your recovery passphrase.",
             )}</p>
             <p>{_t(
-                "Keep your recovery key somewhere very secure, like a password manager (or a safe).",
+                "Keep a copy of it somewhere secure, like a password manager or even a safe.",
             )}</p>
-            <p>{bodyText}</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer">
                 <div className="mx_CreateSecretStorageDialog_recoveryKeyHeader">
-                    {_t("Your Recovery Key")}
+                    {_t("Your recovery key")}
                 </div>
                 <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
                     <div className="mx_CreateSecretStorageDialog_recoveryKey">
-                        <code ref={this._collectRecoveryKeyNode}>{this._encodedRecoveryKey}</code>
+                        <code ref={this._collectRecoveryKeyNode}>{this._recoveryKey.encodedPrivateKey}</code>
                     </div>
                     <div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
-                        <button className="mx_Dialog_primary" onClick={this._onCopyClick}>
-                            {_t("Copy to clipboard")}
-                        </button>
-                        <button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
+                        <AccessibleButton
+                            kind='primary'
+                            className="mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn"
+                            onClick={this._onCopyClick}
+                        >
+                            {_t("Copy")}
+                        </AccessibleButton>
+                        <AccessibleButton kind='primary' className="mx_Dialog_primary" onClick={this._onDownloadClick}>
                             {_t("Download")}
-                        </button>
+                        </AccessibleButton>
                     </div>
                 </div>
             </div>
@@ -441,7 +654,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
                 <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
             </ul>
-            <DialogButtons primaryButton={_t("OK")}
+            <DialogButtons primaryButton={_t("Continue")}
                 onPrimaryButtonClick={this._bootstrapSecretStorage}
                 hasCancel={false}>
                 <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
@@ -449,18 +662,33 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         </div>;
     }
 
-    _renderBusyPhase(text) {
+    _renderBusyPhase() {
         const Spinner = sdk.getComponent('views.elements.Spinner');
         return <div>
             <Spinner />
         </div>;
     }
 
+    _renderPhaseLoadError() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            <p>{_t("Unable to query secret storage status")}</p>
+            <div className="mx_Dialog_buttons">
+                <DialogButtons primaryButton={_t('Retry')}
+                    onPrimaryButtonClick={this._onLoadRetryClick}
+                    hasCancel={true}
+                    onCancel={this._onCancel}
+                />
+            </div>
+        </div>;
+    }
+
     _renderPhaseDone() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             <p>{_t(
-                "Your access to encrypted messages is now protected.",
+                "You can now verify your other devices, " +
+                "and other users to keep your chats safe.",
             )}</p>
             <DialogButtons primaryButton={_t('OK')}
                 onPrimaryButtonClick={this._onDone}
@@ -469,41 +697,41 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         </div>;
     }
 
-    _renderPhaseOptOutConfirm() {
+    _renderPhaseSkipConfirm() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             {_t(
-                "Without setting up secret storage, you won't be able to restore your " +
-                "access to encrypted messages or your cross-signing identity for " +
-                "verifying other devices if you log out or use another device.",
+                "Without completing security on this session, it won’t have " +
+                "access to encrypted messages.",
         )}
-            <DialogButtons primaryButton={_t('Set up secret storage')}
+            <DialogButtons primaryButton={_t('Go back')}
                 onPrimaryButtonClick={this._onSetUpClick}
                 hasCancel={false}
             >
-                <button onClick={this._onCancel}>I understand, continue without</button>
+                <button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>
             </DialogButtons>
         </div>;
     }
 
     _titleForPhase(phase) {
         switch (phase) {
+            case PHASE_MIGRATE:
+                return _t('Upgrade your encryption');
             case PHASE_PASSPHRASE:
-                return _t('Secure your encrypted messages with a passphrase');
+                return _t('Set up encryption');
             case PHASE_PASSPHRASE_CONFIRM:
-                return _t('Confirm your passphrase');
-            case PHASE_OPTOUT_CONFIRM:
-                return _t('Warning!');
+                return _t('Confirm recovery passphrase');
+            case PHASE_CONFIRM_SKIP:
+                return _t('Are you sure?');
             case PHASE_SHOWKEY:
-                return _t('Recovery key');
             case PHASE_KEEPITSAFE:
-                return _t('Keep it safe');
+                return _t('Make a copy of your recovery key');
             case PHASE_STORING:
-                return _t('Storing secrets...');
+                return _t('Setting up keys');
             case PHASE_DONE:
-                return _t('Success!');
+                return _t("You're done!");
             default:
-                return null;
+                return '';
         }
     }
 
@@ -525,6 +753,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             </div>;
         } else {
             switch (this.state.phase) {
+                case PHASE_LOADING:
+                    content = this._renderBusyPhase();
+                    break;
+                case PHASE_LOADERROR:
+                    content = this._renderPhaseLoadError();
+                    break;
+                case PHASE_MIGRATE:
+                    content = this._renderPhaseMigrate();
+                    break;
                 case PHASE_PASSPHRASE:
                     content = this._renderPhasePassPhrase();
                     break;
@@ -543,17 +780,24 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 case PHASE_DONE:
                     content = this._renderPhaseDone();
                     break;
-                case PHASE_OPTOUT_CONFIRM:
-                    content = this._renderPhaseOptOutConfirm();
+                case PHASE_CONFIRM_SKIP:
+                    content = this._renderPhaseSkipConfirm();
                     break;
             }
         }
 
+        let headerImage;
+        if (this._titleForPhase(this.state.phase)) {
+            headerImage = require("../../../../../res/img/e2e/normal.svg");
+        }
+
         return (
             <BaseDialog className='mx_CreateSecretStorageDialog'
                 onFinished={this.props.onFinished}
                 title={this._titleForPhase(this.state.phase)}
-                hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
+                headerImage={headerImage}
+                hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
+                fixedWidth={false}
             >
             <div>
                 {content}

src/autocomplete/AutocompleteProvider.tsx

@@ -17,9 +17,20 @@ limitations under the License.
 */
 
 import React from 'react';
-import type {Completion, SelectionRange} from './Autocompleter';
+import type {ICompletion, ISelectionRange} from './Autocompleter';
+
+export interface ICommand {
+    command: string | null;
+    range: {
+        start: number;
+        end: number;
+    };
+}
 
 export default class AutocompleteProvider {
+    commandRegex: RegExp;
+    forcedCommandRegex: RegExp;
+
     constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
@@ -42,25 +53,25 @@ export default class AutocompleteProvider {
     /**
      * Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
      * @param {string} query The query string
-     * @param {SelectionRange} selection Selection to search
+     * @param {ISelectionRange} selection Selection to search
      * @param {boolean} force True if the user is forcing completion
      * @return {object} { command, range } where both objects fields are null if no match
      */
-    getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false) {
+    getCurrentCommand(query: string, selection: ISelectionRange, force = false) {
         let commandRegex = this.commandRegex;
 
         if (force && this.shouldForceComplete()) {
             commandRegex = this.forcedCommandRegex || /\S+/g;
         }
 
-        if (commandRegex == null) {
+        if (!commandRegex) {
             return null;
         }
 
         commandRegex.lastIndex = 0;
 
         let match;
-        while ((match = commandRegex.exec(query)) != null) {
+        while ((match = commandRegex.exec(query)) !== null) {
             const start = match.index;
             const end = start + match[0].length;
             if (selection.start <= end && selection.end >= start) {
@@ -82,7 +93,7 @@ export default class AutocompleteProvider {
         };
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force = false): Promise<ICompletion[]> {
         return [];
     }
 
@@ -90,7 +101,7 @@ export default class AutocompleteProvider {
         return 'Default Provider';
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode | null {
         console.error('stub; should be implemented in subclasses');
         return null;
     }

src/autocomplete/Autocompleter.ts

@@ -15,10 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// @flow
-
-import type {Component} from 'react';
-import {Room} from 'matrix-js-sdk';
+import {ReactElement} from 'react';
+import Room from 'matrix-js-sdk/src/models/room';
 import CommandProvider from './CommandProvider';
 import CommunityProvider from './CommunityProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
@@ -27,22 +25,26 @@ import UserProvider from './UserProvider';
 import EmojiProvider from './EmojiProvider';
 import NotifProvider from './NotifProvider';
 import {timeout} from "../utils/promise";
+import AutocompleteProvider, {ICommand} from "./AutocompleteProvider";
 
-export type SelectionRange = {
-    beginning: boolean, // whether the selection is in the first block of the editor or not
-    start: number, // byte offset relative to the start anchor of the current editor selection.
-    end: number, // byte offset relative to the end anchor of the current editor selection.
-};
+export interface ISelectionRange {
+    beginning?: boolean; // whether the selection is in the first block of the editor or not
+    start: number; // byte offset relative to the start anchor of the current editor selection.
+    end: number; // byte offset relative to the end anchor of the current editor selection.
+}
 
-export type Completion = {
+export interface ICompletion {
+    type: "at-room" | "command" | "community" | "room" | "user";
     completion: string,
-    component: ?Component,
-    range: SelectionRange,
-    command: ?string,
+    completionId?: string;
+    component?: ReactElement,
+    range: ISelectionRange,
+    command?: string,
+    suffix?: string;
     // If provided, apply a LINK entity to the completion with the
     // data = { url: href }.
-    href: ?string,
-};
+    href?: string,
+}
 
 const PROVIDERS = [
     UserProvider,
@@ -57,7 +59,16 @@ const PROVIDERS = [
 // Providers will get rejected if they take longer than this.
 const PROVIDER_COMPLETION_TIMEOUT = 3000;
 
+export interface IProviderCompletions {
+    completions: ICompletion[];
+    provider: AutocompleteProvider;
+    command: ICommand;
+}
+
 export default class Autocompleter {
+    room: Room;
+    providers: AutocompleteProvider[];
+
     constructor(room: Room) {
         this.room = room;
         this.providers = PROVIDERS.map((Prov) => {
@@ -71,13 +82,14 @@ export default class Autocompleter {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force = false): Promise<IProviderCompletions[]> {
         /* Note: This intentionally waits for all providers to return,
          otherwise, we run into a condition where new completions are displayed
          while the user is interacting with the list, which makes it difficult
          to predict whether an action will actually do what is intended
         */
-        const completionsList = await Promise.all(this.providers.map(provider => {
+        // list of results from each provider, each being a list of completions or null if it times out
+        const completionsList: ICompletion[][] = await Promise.all(this.providers.map(provider => {
             return timeout(provider.getCompletions(query, selection, force), null, PROVIDER_COMPLETION_TIMEOUT);
         }));
 

src/autocomplete/CommandProvider.tsx

@@ -22,22 +22,23 @@ import {_t} from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import QueryMatcher from './QueryMatcher';
 import {TextualCompletion} from './Components';
-import type {Completion, SelectionRange} from "./Autocompleter";
-import {CommandMap} from '../SlashCommands';
-
-const COMMANDS = Object.values(CommandMap);
+import {ICompletion, ISelectionRange} from "./Autocompleter";
+import {Command, Commands, CommandMap} from '../SlashCommands';
 
 const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
 
 export default class CommandProvider extends AutocompleteProvider {
+    matcher: QueryMatcher<Command>;
+
     constructor() {
         super(COMMAND_RE);
-        this.matcher = new QueryMatcher(COMMANDS, {
-           keys: ['command', 'args', 'description'],
+        this.matcher = new QueryMatcher(Commands, {
+            keys: ['command', 'args', 'description'],
+            funcs: [({aliases}) => aliases.join(" ")], // aliases
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force?: boolean): Promise<ICompletion[]> {
         const {command, range} = this.getCurrentCommand(query, selection);
         if (!command) return [];
 
@@ -46,38 +47,47 @@ export default class CommandProvider extends AutocompleteProvider {
         if (command[0] !== command[1]) {
             // The input looks like a command with arguments, perform exact match
             const name = command[1].substr(1); // strip leading `/`
-            if (CommandMap[name]) {
+            if (CommandMap.has(name)) {
                 // some commands, namely `me` and `ddg` don't suit having the usage shown whilst typing their arguments
-                if (CommandMap[name].hideCompletionAfterSpace) return [];
-                matches = [CommandMap[name]];
+                if (CommandMap.get(name).hideCompletionAfterSpace) return [];
+                matches = [CommandMap.get(name)];
             }
         } else {
             if (query === '/') {
                 // If they have just entered `/` show everything
-                matches = COMMANDS;
+                matches = Commands;
             } else {
                 // otherwise fuzzy match against all of the fields
                 matches = this.matcher.match(command[1]);
             }
         }
 
-        return matches.map((result) => ({
-            // If the command is the same as the one they entered, we don't want to discard their arguments
-            completion: result.command === command[1] ? command[0] : (result.command + ' '),
-            type: "command",
-            component: <TextualCompletion
-                title={result.command}
-                subtitle={result.args}
-                description={_t(result.description)} />,
-            range,
-        }));
+
+        return matches.map((result) => {
+            let completion = result.getCommand() + ' ';
+            const usedAlias = result.aliases.find(alias => `/${alias}` === command[1]);
+            // If the command (or an alias) is the same as the one they entered, we don't want to discard their arguments
+            if (usedAlias || result.getCommand() === command[1]) {
+                completion = command[0];
+            }
+
+            return {
+                completion,
+                type: "command",
+                component: <TextualCompletion
+                    title={`/${usedAlias || result.command}`}
+                    subtitle={result.args}
+                    description={_t(result.description)} />,
+                range,
+            };
+        });
     }
 
     getName() {
         return '*️⃣ ' + _t('Commands');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div className="mx_Autocomplete_Completion_container_block" role="listbox" aria-label={_t("Command Autocomplete")}>
                 { completions }

src/autocomplete/CommunityProvider.tsx

@@ -16,15 +16,16 @@ limitations under the License.
 */
 
 import React from 'react';
+import Group from "matrix-js-sdk/src/models/group";
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
-import sdk from '../index';
+import * as sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeGroupPermalink} from "../utils/permalinks/Permalinks";
-import type {Completion, SelectionRange} from "./Autocompleter";
+import {ICompletion, ISelectionRange} from "./Autocompleter";
 import FlairStore from "../stores/FlairStore";
 
 const COMMUNITY_REGEX = /\B\+\S*/g;
@@ -39,6 +40,8 @@ function score(query, space) {
 }
 
 export default class CommunityProvider extends AutocompleteProvider {
+    matcher: QueryMatcher<Group>;
+
     constructor() {
         super(COMMUNITY_REGEX);
         this.matcher = new QueryMatcher([], {
@@ -46,7 +49,7 @@ export default class CommunityProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force = false): Promise<ICompletion[]> {
         const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
 
         // Disable autocompletions when composing commands because of various issues
@@ -104,7 +107,7 @@ export default class CommunityProvider extends AutocompleteProvider {
         return '💬 ' + _t('Communities');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"

src/autocomplete/Components.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 /* These were earlier stateless functional components but had to be converted
@@ -24,7 +23,14 @@ something that is not entirely possible with stateless functional components. On
 presumably wrap them in a <div> before rendering but I think this is the better way to do it.
  */
 
-export class TextualCompletion extends React.Component {
+interface ITextualCompletionProps {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    className?: string;
+}
+
+export class TextualCompletion extends React.PureComponent<ITextualCompletionProps> {
     render() {
         const {
             title,
@@ -42,14 +48,16 @@ export class TextualCompletion extends React.Component {
         );
     }
 }
-TextualCompletion.propTypes = {
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    description: PropTypes.string,
-    className: PropTypes.string,
-};
 
-export class PillCompletion extends React.Component {
+interface IPillCompletionProps {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    initialComponent?: React.ReactNode,
+    className?: string;
+}
+
+export class PillCompletion extends React.PureComponent<IPillCompletionProps> {
     render() {
         const {
             title,
@@ -69,10 +77,3 @@ export class PillCompletion extends React.Component {
         );
     }
 }
-PillCompletion.propTypes = {
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    description: PropTypes.string,
-    initialComponent: PropTypes.element,
-    className: PropTypes.string,
-};

src/autocomplete/DuckDuckGoProvider.tsx

@@ -19,10 +19,9 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import 'whatwg-fetch';
 
 import {TextualCompletion} from './Components';
-import type {SelectionRange} from "./Autocompleter";
+import {ICompletion, ISelectionRange} from "./Autocompleter";
 
 const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERRER = 'vector';
@@ -32,12 +31,12 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         super(DDG_REGEX);
     }
 
-    static getQueryUri(query: String) {
+    static getQueryUri(query: string) {
         return `https://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
+    async getCompletions(query: string, selection: ISelectionRange, force= false): Promise<ICompletion[]> {
         const {command, range} = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];
@@ -96,7 +95,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         return '🔍 ' + _t('Results from DuckDuckGo');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_block"

src/autocomplete/EmojiProvider.tsx

@@ -2,6 +2,7 @@
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,40 +22,37 @@ import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
-import type {Completion, SelectionRange} from './Autocompleter';
+import {ICompletion, ISelectionRange} from './Autocompleter';
 import _uniq from 'lodash/uniq';
 import _sortBy from 'lodash/sortBy';
 import SettingsStore from "../settings/SettingsStore";
 import { shortcodeToUnicode } from '../HtmlUtils';
+import { EMOJI, IEmoji } from '../emoji';
 
 import EMOTICON_REGEX from 'emojibase-regex/emoticon';
-import EmojiData from '../stripped-emoji.json';
 
 const LIMIT = 20;
 
 // Match for ascii-style ";-)" emoticons or ":wink:" shortcodes provided by emojibase
 const EMOJI_REGEX = new RegExp('(' + EMOTICON_REGEX.source + '|:[+-\\w]*:?)$', 'g');
 
-// XXX: it's very unclear why we bother with this generated emojidata file.
-// all it means is that we end up bloating the bundle with precomputed stuff
-// which would be trivial to calculate and cache on demand.
-const EMOJI_SHORTNAMES = Object.keys(EmojiData).map((key) => EmojiData[key]).sort(
-    (a, b) => {
-        if (a.category === b.category) {
-            return a.emoji_order - b.emoji_order;
-        }
-        return a.category - b.category;
-    },
-).map((a, index) => {
-    return {
-        name: a.name,
-        shortname: a.shortname,
-        aliases: a.aliases ? a.aliases.join(' ') : '',
-        aliases_ascii: a.aliases_ascii ? a.aliases_ascii.join(' ') : '',
-        // Include the index so that we can preserve the original order
-        _orderBy: index,
-    };
-});
+interface IEmojiShort {
+    emoji: IEmoji;
+    shortname: string;
+    _orderBy: number;
+}
+
+const EMOJI_SHORTNAMES: IEmojiShort[] = EMOJI.sort((a, b) => {
+    if (a.group === b.group) {
+        return a.order - b.order;
+    }
+    return a.group - b.group;
+}).map((emoji, index) => ({
+    emoji,
+    shortname: `:${emoji.shortcodes[0]}:`,
+    // Include the index so that we can preserve the original order
+    _orderBy: index,
+}));
 
 function score(query, space) {
     const index = space.indexOf(query);
@@ -66,21 +64,27 @@ function score(query, space) {
 }
 
 export default class EmojiProvider extends AutocompleteProvider {
+    matcher: QueryMatcher<IEmojiShort>;
+    nameMatcher: QueryMatcher<IEmojiShort>;
+
     constructor() {
         super(EMOJI_REGEX);
-        this.matcher = new QueryMatcher(EMOJI_SHORTNAMES, {
-            keys: ['aliases_ascii', 'shortname', 'aliases'],
+        this.matcher = new QueryMatcher<IEmojiShort>(EMOJI_SHORTNAMES, {
+            keys: ['emoji.emoticon', 'shortname'],
+            funcs: [
+                (o) => o.emoji.shortcodes.length > 1 ? o.emoji.shortcodes.slice(1).map(s => `:${s}:`).join(" ") : "", // aliases
+            ],
             // For matching against ascii equivalents
             shouldMatchWordsOnly: false,
         });
         this.nameMatcher = new QueryMatcher(EMOJI_SHORTNAMES, {
-            keys: ['name'],
+            keys: ['emoji.annotation'],
             // For removing punctuation
             shouldMatchWordsOnly: true,
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force?: boolean): Promise<ICompletion[]> {
         if (!SettingsStore.getValue("MessageComposerInput.suggestEmoji")) {
             return []; // don't give any suggestions if the user doesn't want them
         }
@@ -96,10 +100,12 @@ export default class EmojiProvider extends AutocompleteProvider {
 
             const sorters = [];
             // make sure that emoticons come first
-            sorters.push((c) => score(matchedString, c.aliases_ascii));
+            sorters.push((c) => score(matchedString, c.emoji.emoticon || ""));
 
             // then sort by score (Infinity if matchedString not in shortname)
             sorters.push((c) => score(matchedString, c.shortname));
+            // then sort by max score of all shortcodes, trim off the `:`
+            sorters.push((c) => Math.min(...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s))));
             // If the matchedString is not empty, sort by length of shortname. Example:
             //  matchedString = ":bookmark"
             //  completions = [":bookmark:", ":bookmark_tabs:", ...]
@@ -110,8 +116,7 @@ export default class EmojiProvider extends AutocompleteProvider {
             sorters.push((c) => c._orderBy);
             completions = _sortBy(_uniq(completions), sorters);
 
-            completions = completions.map((result) => {
-                const { shortname } = result;
+            completions = completions.map(({shortname}) => {
                 const unicode = shortcodeToUnicode(shortname);
                 return {
                     completion: unicode,
@@ -131,7 +136,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         return '😃 ' + _t('Emoji');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div className="mx_Autocomplete_Completion_container_pill" role="listbox" aria-label={_t("Emoji Autocomplete")}>
                 { completions }

src/autocomplete/NotifProvider.tsx

@@ -15,22 +15,25 @@ limitations under the License.
 */
 
 import React from 'react';
+import Room from "matrix-js-sdk/src/models/room";
 import AutocompleteProvider from './AutocompleteProvider';
 import { _t } from '../languageHandler';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import {PillCompletion} from './Components';
-import sdk from '../index';
-import type {Completion, SelectionRange} from "./Autocompleter";
+import * as sdk from '../index';
+import {ICompletion, ISelectionRange} from "./Autocompleter";
 
 const AT_ROOM_REGEX = /@\S*/g;
 
 export default class NotifProvider extends AutocompleteProvider {
+    room: Room;
+
     constructor(room) {
         super(AT_ROOM_REGEX);
         this.room = room;
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force= false): Promise<ICompletion[]> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();
@@ -57,7 +60,7 @@ export default class NotifProvider extends AutocompleteProvider {
         return '❗️ ' + _t('Room Notification');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"

src/autocomplete/PlainWithPillsSerializer.js

@@ -1,92 +0,0 @@
-/*
-Copyright 2018 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-// Based originally on slate-plain-serializer
-
-import { Block } from 'slate';
-
-/**
- * Plain text serializer, which converts a Slate `value` to a plain text string,
- * serializing pills into various different formats as required.
- *
- * @type {PlainWithPillsSerializer}
- */
-
-class PlainWithPillsSerializer {
-    /*
-     * @param {String} options.pillFormat - either 'md', 'plain', 'id'
-     */
-    constructor(options = {}) {
-        const {
-            pillFormat = 'plain',
-        } = options;
-        this.pillFormat = pillFormat;
-    }
-
-    /**
-     * Serialize a Slate `value` to a plain text string,
-     * serializing pills as either MD links, plain text representations or
-     * ID representations as required.
-     *
-     * @param {Value} value
-     * @return {String}
-     */
-    serialize = value => {
-        return this._serializeNode(value.document);
-    }
-
-    /**
-     * Serialize a `node` to plain text.
-     *
-     * @param {Node} node
-     * @return {String}
-     */
-    _serializeNode = node => {
-        if (
-            node.object == 'document' ||
-            (node.object == 'block' && Block.isBlockList(node.nodes))
-        ) {
-            return node.nodes.map(this._serializeNode).join('\n');
-        } else if (node.type == 'emoji') {
-            return node.data.get('emojiUnicode');
-        } else if (node.type == 'pill') {
-            const completion = node.data.get('completion');
-            // over the wire the @room pill is just plaintext
-            if (completion === '@room') return completion;
-
-            switch (this.pillFormat) {
-                case 'plain':
-                    return completion;
-                case 'md':
-                    return `[${ completion }](${ node.data.get('href') })`;
-                case 'id':
-                    return node.data.get('completionId') || completion;
-            }
-        } else if (node.nodes) {
-            return node.nodes.map(this._serializeNode).join('');
-        } else {
-            return node.text;
-        }
-    }
-}
-
-/**
- * Export.
- *
- * @type {PlainWithPillsSerializer}
- */
-
-export default PlainWithPillsSerializer;

src/autocomplete/QueryMatcher.ts

@@ -1,4 +1,3 @@
-//@flow
 /*
 Copyright 2017 Aviral Dasgupta
 Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
@@ -26,6 +25,13 @@ function stripDiacritics(str: string): string {
     return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
 
+interface IOptions<T extends {}> {
+    keys: Array<string | keyof T>;
+    funcs?: Array<(T) => string>;
+    shouldMatchWordsOnly?: boolean;
+    shouldMatchPrefix?: boolean;
+}
+
 /**
  * Simple search matcher that matches any results with the query string anywhere
  * in the search string. Returns matches in the order the query string appears
@@ -39,8 +45,13 @@ function stripDiacritics(str: string): string {
  * @param {function[]} options.funcs List of functions that when called with the
  *     object as an arg will return a string to use as an index
  */
-export default class QueryMatcher {
-    constructor(objects: Array<Object>, options: {[Object]: Object} = {}) {
+export default class QueryMatcher<T extends Object> {
+    private _options: IOptions<T>;
+    private _keys: IOptions<T>["keys"];
+    private _funcs: Required<IOptions<T>["funcs"]>;
+    private _items: Map<string, T[]>;
+
+    constructor(objects: T[], options: IOptions<T> = { keys: [] }) {
         this._options = options;
         this._keys = options.keys;
         this._funcs = options.funcs || [];
@@ -60,17 +71,22 @@ export default class QueryMatcher {
         }
     }
 
-    setObjects(objects: Array<Object>) {
+    setObjects(objects: T[]) {
         this._items = new Map();
 
         for (const object of objects) {
-            const keyValues = _at(object, this._keys);
+            // Need to use unsafe coerce here because the objects can have any
+            // type for their values. We assume that those values who's keys have
+            // been specified will be string. Also, we cannot infer all the
+            // types of the keys of the objects at compile.
+            const keyValues = _at<string>(<any>object, this._keys);
 
             for (const f of this._funcs) {
                 keyValues.push(f(object));
             }
 
             for (const keyValue of keyValues) {
+                if (!keyValue) continue; // skip falsy keyValues
                 const key = stripDiacritics(keyValue).toLowerCase();
                 if (!this._items.has(key)) {
                     this._items.set(key, []);
@@ -80,7 +96,7 @@ export default class QueryMatcher {
         }
     }
 
-    match(query: String): Array<Object> {
+    match(query: string): T[] {
         query = stripDiacritics(query).toLowerCase();
         if (this._options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');

src/autocomplete/RoomProvider.tsx

@@ -18,20 +18,20 @@ limitations under the License.
 */
 
 import React from 'react';
+import Room from "matrix-js-sdk/src/models/room";
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
-import {getDisplayAliasForRoom} from '../Rooms';
-import sdk from '../index';
+import * as sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
-import type {Completion, SelectionRange} from "./Autocompleter";
+import {ICompletion, ISelectionRange} from "./Autocompleter";
 
 const ROOM_REGEX = /\B#\S*/g;
 
-function score(query, space) {
+function score(query: string, space: string) {
     const index = space.indexOf(query);
     if (index === -1) {
         return Infinity;
@@ -40,15 +40,25 @@ function score(query, space) {
     }
 }
 
+function matcherObject(room: Room, displayedAlias: string, matchName = "") {
+    return {
+        room,
+        matchName,
+        displayedAlias,
+    };
+}
+
 export default class RoomProvider extends AutocompleteProvider {
+    matcher: QueryMatcher<Room>;
+
     constructor() {
         super(ROOM_REGEX);
         this.matcher = new QueryMatcher([], {
-            keys: ['displayedAlias', 'name'],
+            keys: ['displayedAlias', 'matchName'],
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: ISelectionRange, force = false): Promise<ICompletion[]> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();
@@ -56,16 +66,16 @@ export default class RoomProvider extends AutocompleteProvider {
         const {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
             // the only reason we need to do this is because Fuse only matches on properties
-            let matcherObjects = client.getRooms().filter(
-                (room) => !!room && !!getDisplayAliasForRoom(room),
-            ).map((room) => {
-                return {
-                    room: room,
-                    name: room.name,
-                    displayedAlias: getDisplayAliasForRoom(room),
-                };
-            });
-
+            let matcherObjects = client.getVisibleRooms().reduce((aliases, room) => {
+                if (room.getCanonicalAlias()) {
+                    aliases = aliases.concat(matcherObject(room, room.getCanonicalAlias(), room.name));
+                }
+                if (room.getAltAliases().length) {
+                    const altAliases = room.getAltAliases().map(alias => matcherObject(room, alias));
+                    aliases = aliases.concat(altAliases);
+                }
+                return aliases;
+            }, []);
             // Filter out any matches where the user will have also autocompleted new rooms
             matcherObjects = matcherObjects.filter((r) => {
                 const tombstone = r.room.currentState.getStateEvents("m.room.tombstone", "");
@@ -84,16 +94,16 @@ export default class RoomProvider extends AutocompleteProvider {
             completions = _sortBy(completions, [
                 (c) => score(matchedString, c.displayedAlias),
                 (c) => c.displayedAlias.length,
-            ]).map((room) => {
-                const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
+            ]);
+            completions = completions.map((room) => {
                 return {
-                    completion: displayAlias,
-                    completionId: displayAlias,
+                    completion: room.displayedAlias,
+                    completionId: room.room.roomId,
                     type: "room",
                     suffix: ' ',
-                    href: makeRoomPermalink(displayAlias),
+                    href: makeRoomPermalink(room.displayedAlias),
                     component: (
-                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
+                        <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.room.name} description={room.displayedAlias} />
                     ),
                     range,
                 };
@@ -108,7 +118,7 @@ export default class RoomProvider extends AutocompleteProvider {
         return '💬 ' + _t('Rooms');
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"

src/autocomplete/UserProvider.tsx

@@ -1,4 +1,3 @@
-//@flow
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
@@ -22,14 +21,18 @@ import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
-import sdk from '../index';
+import * as sdk from '../index';
 import QueryMatcher from './QueryMatcher';
 import _sortBy from 'lodash/sortBy';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 
-import type {MatrixEvent, Room, RoomMember, RoomState} from 'matrix-js-sdk';
+import MatrixEvent from "matrix-js-sdk/src/models/event";
+import Room from "matrix-js-sdk/src/models/room";
+import RoomMember from "matrix-js-sdk/src/models/room-member";
+import RoomState from "matrix-js-sdk/src/models/room-state";
+import EventTimeline from "matrix-js-sdk/src/models/event-timeline";
 import {makeUserPermalink} from "../utils/permalinks/Permalinks";
-import type {Completion, SelectionRange} from "./Autocompleter";
+import {ICompletion, ISelectionRange} from "./Autocompleter";
 
 const USER_REGEX = /\B@\S*/g;
 
@@ -37,9 +40,15 @@ const USER_REGEX = /\B@\S*/g;
 // to allow you to tab-complete /mat into /(matthew)
 const FORCED_USER_REGEX = /[^/,:; \t\n]\S*/g;
 
+interface IRoomTimelineData {
+    timeline: EventTimeline;
+    liveEvent?: boolean;
+}
+
 export default class UserProvider extends AutocompleteProvider {
-    users: Array<RoomMember> = null;
-    room: Room = null;
+    matcher: QueryMatcher<RoomMember>;
+    users: RoomMember[];
+    room: Room;
 
     constructor(room: Room) {
         super(USER_REGEX, FORCED_USER_REGEX);
@@ -51,21 +60,19 @@ export default class UserProvider extends AutocompleteProvider {
             shouldMatchWordsOnly: false,
         });
 
-        this._onRoomTimelineBound = this._onRoomTimeline.bind(this);
-        this._onRoomStateMemberBound = this._onRoomStateMember.bind(this);
-
-        MatrixClientPeg.get().on("Room.timeline", this._onRoomTimelineBound);
-        MatrixClientPeg.get().on("RoomState.members", this._onRoomStateMemberBound);
+        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
     }
 
     destroy() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room.timeline", this._onRoomTimelineBound);
-            MatrixClientPeg.get().removeListener("RoomState.members", this._onRoomStateMemberBound);
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
     }
 
-    _onRoomTimeline(ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean, data: Object) {
+    private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean,
+                       data: IRoomTimelineData) => {
         if (!room) return;
         if (removed) return;
         if (room.roomId !== this.room.roomId) return;
@@ -79,9 +86,9 @@ export default class UserProvider extends AutocompleteProvider {
 
         // TODO: lazyload if we have no ev.sender room member?
         this.onUserSpoke(ev.sender);
-    }
+    };
 
-    _onRoomStateMember(ev: MatrixEvent, state: RoomState, member: RoomMember) {
+    private onRoomStateMember = (ev: MatrixEvent, state: RoomState, member: RoomMember) => {
         // ignore members in other rooms
         if (member.roomId !== this.room.roomId) {
             return;
@@ -89,16 +96,16 @@ export default class UserProvider extends AutocompleteProvider {
 
         // blow away the users cache
         this.users = null;
-    }
+    };
 
-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(rawQuery: string, selection: ISelectionRange, force = false): Promise<ICompletion[]> {
         const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
 
         // lazy-load user list into matcher
-        if (this.users === null) this._makeUsers();
+        if (!this.users) this._makeUsers();
 
         let completions = [];
-        const {command, range} = this.getCurrentCommand(query, selection, force);
+        const {command, range} = this.getCurrentCommand(rawQuery, selection, force);
 
         if (!command) return completions;
 
@@ -151,7 +158,7 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     onUserSpoke(user: RoomMember) {
-        if (this.users === null) return;
+        if (!this.users) return;
         if (!user) return;
         if (user.userId === MatrixClientPeg.get().credentials.userId) return;
 
@@ -163,7 +170,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.matcher.setObjects(this.users);
     }
 
-    renderCompletions(completions: [React.Component]): ?React.Component {
+    renderCompletions(completions: React.ReactNode[]): React.ReactNode {
         return (
             <div className="mx_Autocomplete_Completion_container_pill" role="listbox" aria-label={_t("User Autocomplete")}>
                 { completions }

src/components/structures/AutoHideScrollbar.js

@@ -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.
@@ -16,93 +17,10 @@ limitations under the License.
 
 import React from "react";
 
-// derived from code from github.com/noeldelgado/gemini-scrollbar
-// Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
-function getScrollbarWidth(alternativeOverflow) {
-    const div = document.createElement('div');
-    div.className = 'mx_AutoHideScrollbar'; //to get width of css scrollbar
-    div.style.position = 'absolute';
-    div.style.top = '-9999px';
-    div.style.width = '100px';
-    div.style.height = '100px';
-    div.style.overflow = "scroll";
-    if (alternativeOverflow) {
-        div.style.overflow = alternativeOverflow;
-    }
-    div.style.msOverflowStyle = '-ms-autohiding-scrollbar';
-    document.body.appendChild(div);
-    const scrollbarWidth = (div.offsetWidth - div.clientWidth);
-    document.body.removeChild(div);
-    return scrollbarWidth;
-}
-
-function install() {
-    const scrollbarWidth = getScrollbarWidth();
-    if (scrollbarWidth !== 0) {
-        const hasForcedOverlayScrollbar = getScrollbarWidth('overlay') === 0;
-        // overflow: overlay on webkit doesn't auto hide the scrollbar
-        if (hasForcedOverlayScrollbar) {
-            document.body.classList.add("mx_scrollbar_overlay_noautohide");
-        } else {
-            document.body.classList.add("mx_scrollbar_nooverlay");
-            const style = document.createElement('style');
-            style.type = 'text/css';
-            style.innerText =
-                `body.mx_scrollbar_nooverlay { --scrollbar-width: ${scrollbarWidth}px; }`;
-            document.head.appendChild(style);
-        }
-    }
-}
-
-const installBodyClassesIfNeeded = (function() {
-    let installed = false;
-    return function() {
-        if (!installed) {
-            install();
-            installed = true;
-        }
-    };
-})();
-
 export default class AutoHideScrollbar extends React.Component {
     constructor(props) {
         super(props);
-        this.onOverflow = this.onOverflow.bind(this);
-        this.onUnderflow = this.onUnderflow.bind(this);
         this._collectContainerRef = this._collectContainerRef.bind(this);
-        this._needsOverflowListener = null;
-    }
-
-    onOverflow() {
-        this.containerRef.classList.add("mx_AutoHideScrollbar_overflow");
-        this.containerRef.classList.remove("mx_AutoHideScrollbar_underflow");
-    }
-
-    onUnderflow() {
-        this.containerRef.classList.remove("mx_AutoHideScrollbar_overflow");
-        this.containerRef.classList.add("mx_AutoHideScrollbar_underflow");
-    }
-
-    checkOverflow() {
-        if (!this._needsOverflowListener) {
-            return;
-        }
-        if (this.containerRef.scrollHeight > this.containerRef.clientHeight) {
-            this.onOverflow();
-        } else {
-            this.onUnderflow();
-        }
-    }
-
-    componentDidUpdate() {
-        this.checkOverflow();
-    }
-
-    componentDidMount() {
-        installBodyClassesIfNeeded();
-        this._needsOverflowListener =
-            document.body.classList.contains("mx_scrollbar_nooverlay");
-        this.checkOverflow();
     }
 
     _collectContainerRef(ref) {
@@ -126,9 +44,7 @@ export default class AutoHideScrollbar extends React.Component {
                     onScroll={this.props.onScroll}
                     onWheel={this.props.onWheel}
                 >
-            <div className="mx_AutoHideScrollbar_offset">
-                { this.props.children }
-            </div>
+            { this.props.children }
         </div>);
     }
 }

src/components/structures/CompatibilityPage.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,7 +21,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'CompatibilityPage',
     propTypes: {
         onAccept: PropTypes.func,

src/components/structures/ContextMenu.js

@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Key} from "../../Keyboard";
-import sdk from "../../index";
+import * as sdk from "../../index";
 import AccessibleButton from "../views/elements/AccessibleButton";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
@@ -71,12 +71,12 @@ export class ContextMenu extends React.Component {
         // on resize callback
         windowResize: PropTypes.func,
 
-        catchTab: PropTypes.bool, // whether to close the ContextMenu on TAB (default=true)
+        managed: PropTypes.bool, // whether this context menu should be focus managed. If false it must handle itself
     };
 
     static defaultProps = {
         hasBackground: true,
-        catchTab: true,
+        managed: true,
     };
 
     constructor() {
@@ -186,15 +186,19 @@ export class ContextMenu extends React.Component {
     };
 
     _onKeyDown = (ev) => {
+        if (!this.props.managed) {
+            if (ev.key === Key.ESCAPE) {
+                this.props.onFinished();
+                ev.stopPropagation();
+                ev.preventDefault();
+            }
+            return;
+        }
+
         let handled = true;
 
         switch (ev.key) {
             case Key.TAB:
-                if (!this.props.catchTab) {
-                    handled = false;
-                    break;
-                }
-                // fallthrough
             case Key.ESCAPE:
                 this.props.onFinished();
                 break;
@@ -241,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) {
@@ -251,7 +254,7 @@ export class ContextMenu extends React.Component {
 
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
-        } else {
+        } else if (position.top !== undefined) {
             const target = position.top;
 
             // By default, no adjustment is made
@@ -260,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;
@@ -321,7 +325,7 @@ export class ContextMenu extends React.Component {
 
         return (
             <div className="mx_ContextualMenu_wrapper" style={{...position, ...wrapperStyle}} onKeyDown={this._onKeyDown}>
-                <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} role="menu">
+                <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} role={this.props.managed ? "menu" : undefined}>
                     { chevron }
                     { props.children }
                 </div>
@@ -346,7 +350,7 @@ export const ContextMenuButton = ({ label, isExpanded, children, ...props }) =>
 };
 ContextMenuButton.propTypes = {
     ...AccessibleButton.propTypes,
-    label: PropTypes.string.isRequired,
+    label: PropTypes.string,
     isExpanded: PropTypes.bool.isRequired, // whether or not the context menu is currently open
 };
 
@@ -373,7 +377,6 @@ export const MenuGroup = ({children, label, ...props}) => {
     </div>;
 };
 MenuGroup.propTypes = {
-    ...AccessibleButton.propTypes,
     label: PropTypes.string.isRequired,
     className: PropTypes.string, // optional
 };

src/components/structures/CustomRoomTagPanel.js

@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import CustomRoomTagStore from '../../stores/CustomRoomTagStore';
 import AutoHideScrollbar from './AutoHideScrollbar';
-import sdk from '../../index';
-import dis from '../../dispatcher';
+import * as sdk from '../../index';
+import dis from '../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 
@@ -30,7 +30,7 @@ class CustomRoomTagPanel extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._tagStoreToken = CustomRoomTagStore.addListener(() => {
             this.setState({tags: CustomRoomTagStore.getSortedTags()});
         });
@@ -61,30 +61,13 @@ class CustomRoomTagPanel extends React.Component {
 }
 
 class CustomRoomTagTile extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {hover: false};
-        this.onClick = this.onClick.bind(this);
-        this.onMouseOut = this.onMouseOut.bind(this);
-        this.onMouseOver = this.onMouseOver.bind(this);
-    }
-
-    onMouseOver() {
-        this.setState({hover: true});
-    }
-
-    onMouseOut() {
-        this.setState({hover: false});
-    }
-
-    onClick() {
+    onClick = () => {
         dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
-    }
+    };
 
     render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Tooltip = sdk.getComponent('elements.Tooltip');
+        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
 
         const tag = this.props.tag;
         const avatarHeight = 40;
@@ -102,12 +85,9 @@ class CustomRoomTagTile extends React.Component {
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        const tip = (this.state.hover ?
-            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
-            <div />);
         return (
-            <AccessibleButton className={className} onClick={this.onClick}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+            <AccessibleTooltipButton className={className} onClick={this.onClick} title={name}>
+                <div className="mx_TagTile_avatar">
                     <BaseAvatar
                         name={tag.avatarLetter}
                         idName={name}
@@ -115,9 +95,8 @@ class CustomRoomTagTile extends React.Component {
                         height={avatarHeight}
                     />
                     { badgeElement }
-                    { tip }
                 </div>
-            </AccessibleButton>
+            </AccessibleTooltipButton>
         );
     }
 }

src/components/structures/EmbeddedPage.js

@@ -23,11 +23,11 @@ import PropTypes from 'prop-types';
 import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
-import sdk from '../../index';
-import dis from '../../dispatcher';
-import MatrixClientPeg from '../../MatrixClientPeg';
-import { MatrixClient } from 'matrix-js-sdk';
+import dis from '../../dispatcher/dispatcher';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import classnames from 'classnames';
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 export default class EmbeddedPage extends React.PureComponent {
     static propTypes = {
@@ -37,11 +37,11 @@ export default class EmbeddedPage extends React.PureComponent {
         className: PropTypes.string,
         // Whether to wrap the page in a scrollbar
         scrollbar: PropTypes.bool,
+        // Map of keys to replace with values, e.g {$placeholder: "value"}
+        replaceMap: PropTypes.object,
     };
 
-    static contextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    };
+    static contextType = MatrixClientContext;
 
     constructor(props) {
         super(props);
@@ -58,7 +58,7 @@ export default class EmbeddedPage extends React.PureComponent {
         return sanitizeHtml(_t(s));
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
 
         if (!this.props.url) {
@@ -83,6 +83,13 @@ export default class EmbeddedPage extends React.PureComponent {
                 }
 
                 body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
+
+                if (this.props.replaceMap) {
+                    Object.keys(this.props.replaceMap).forEach(key => {
+                        body = body.split(key).join(this.props.replaceMap[key]);
+                    });
+                }
+
                 this.setState({ page: body });
             },
         );
@@ -104,7 +111,7 @@ export default class EmbeddedPage extends React.PureComponent {
 
     render() {
         // HACK: Workaround for the context's MatrixClient not updating.
-        const client = this.context.matrixClient || MatrixClientPeg.get();
+        const client = this.context || MatrixClientPeg.get();
         const isGuest = client ? client.isGuest() : true;
         const className = this.props.className;
         const classes = classnames({
@@ -119,10 +126,9 @@ export default class EmbeddedPage extends React.PureComponent {
         </div>;
 
         if (this.props.scrollbar) {
-            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-            return <GeminiScrollbarWrapper autoshow={true} className={classes}>
+            return <AutoHideScrollbar className={classes}>
                 {content}
-            </GeminiScrollbarWrapper>;
+            </AutoHideScrollbar>;
         } else {
             return <div className={classes}>
                 {content}

src/components/structures/FilePanel.js

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

src/components/structures/GroupView.js

@@ -19,9 +19,9 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../MatrixClientPeg';
-import sdk from '../../index';
-import dis from '../../dispatcher';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
+import * as sdk from '../../index';
+import dis from '../../dispatcher/dispatcher';
 import { getHostingLink } from '../../utils/HostingLink';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
@@ -39,6 +39,7 @@ import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Perm
 import {Group} from "matrix-js-sdk";
 import {allSettled, sleep} from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 const LONG_DESC_PLACEHOLDER = _td(
 `<h1>HTML for your community's page</h1>
@@ -91,7 +92,7 @@ const CategoryRoomList = createReactClass({
         Modal.createTrackedDialog('Add Rooms to Group Summary', '', AddressPickerDialog, {
             title: _t('Add rooms to the community summary'),
             description: _t("Which rooms would you like to add to this summary?"),
-            placeholder: _t("Room name or alias"),
+            placeholder: _t("Room name or address"),
             button: _t("Add to summary"),
             pickerType: 'room',
             validAddressTypes: ['mx-room-id'],
@@ -423,28 +424,35 @@ export default createReactClass({
             membershipBusy: false,
             publicityBusy: false,
             inviterProfile: null,
+            showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
         this._matrixClient.on("Group.myMembership", this._onGroupMyMembership);
 
-        this._changeAvatarComponent = null;
         this._initGroupStore(this.props.groupId, true);
 
         this._dispatcherRef = dis.register(this._onAction);
+        this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
     },
 
     componentWillUnmount: function() {
         this._unmounted = true;
         this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
         dis.unregister(this._dispatcherRef);
+
+        // Remove RightPanelStore listener
+        if (this._rightPanelStoreToken) {
+            this._rightPanelStoreToken.remove();
+        }
     },
 
-    componentWillReceiveProps: function(newProps) {
-        if (this.props.groupId != newProps.groupId) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
+        if (this.props.groupId !== newProps.groupId) {
             this.setState({
                 summary: null,
                 error: null,
@@ -454,6 +462,12 @@ export default createReactClass({
         }
     },
 
+    _onRightPanelStoreUpdate: function() {
+        this.setState({
+            showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
+        });
+    },
+
     _onGroupMyMembership: function(group) {
         if (this._unmounted || group.groupId !== this.props.groupId) return;
         if (group.myMembership === 'leave') {
@@ -481,7 +495,7 @@ export default createReactClass({
                         group_id: groupId,
                     },
                 });
-                dis.dispatch({action: 'require_registration'});
+                dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${groupId}`}});
                 willDoOnboarding = true;
             }
             if (stateKey === GroupStore.STATE_KEY.Summary) {
@@ -554,10 +568,6 @@ export default createReactClass({
                         GROUP_JOINPOLICY_INVITE,
             },
         });
-        dis.dispatch({
-            action: 'panel_disable',
-            sideDisabled: true,
-        });
     },
 
     _onShareClick: function() {
@@ -580,10 +590,6 @@ export default createReactClass({
                     profileForm: null,
                 });
                 break;
-            case 'after_right_panel_phase_change':
-                // We don't keep state on the right panel, so just re-render to update
-                this.forceUpdate();
-                break;
             default:
                 break;
         }
@@ -726,7 +732,7 @@ export default createReactClass({
 
     _onJoinClick: async function() {
         if (this._matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
+            dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
             return;
         }
 
@@ -821,10 +827,10 @@ export default createReactClass({
                 {_t(
                     "Want more than a community? <a>Get your own server</a>", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{sub}</a>,
                     },
                 )}
-                <a href={hostingSignupLink} target="_blank" rel="noopener">
+                <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
                     <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </div>;
@@ -1173,7 +1179,6 @@ export default createReactClass({
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
@@ -1299,9 +1304,7 @@ export default createReactClass({
                 );
             }
 
-            const rightPanel = !RightPanelStore.getSharedInstance().isOpenForGroup
-                ? <RightPanel groupId={this.props.groupId} />
-                : undefined;
+            const rightPanel = this.state.showRightPanel ? <RightPanel groupId={this.props.groupId} /> : undefined;
 
             const headerClasses = {
                 "mx_GroupView_header": true,
@@ -1332,10 +1335,10 @@ export default createReactClass({
                         <GroupHeaderButtons />
                     </div>
                     <MainSplit panel={rightPanel}>
-                        <GeminiScrollbarWrapper className="mx_GroupView_body">
+                        <AutoHideScrollbar className="mx_GroupView_body">
                             { this._getMembershipSection() }
                             { this._getGroupSection() }
-                        </GeminiScrollbarWrapper>
+                        </AutoHideScrollbar>
                     </MainSplit>
                 </main>
             );

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

@@ -66,6 +66,22 @@ export default class IndicatorScrollbar extends React.Component {
         this._autoHideScrollbar = autoHideScrollbar;
     }
 
+
+    componentDidUpdate(prevProps) {
+        const prevLen = prevProps && prevProps.children && prevProps.children.length || 0;
+        const curLen = this.props.children && this.props.children.length || 0;
+        // check overflow only if amount of children changes.
+        // if we don't guard here, we end up with an infinite
+        // render > componentDidUpdate > checkOverflow > setState > render loop
+        if (prevLen !== curLen) {
+            this.checkOverflow();
+        }
+    }
+
+    componentDidMount() {
+        this.checkOverflow();
+    }
+
     checkOverflow() {
         const hasTopOverflow = this._scrollElement.scrollTop > 0;
         const hasBottomOverflow = this._scrollElement.scrollHeight >
@@ -95,10 +111,6 @@ export default class IndicatorScrollbar extends React.Component {
             this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow");
         }
 
-        if (this._autoHideScrollbar) {
-            this._autoHideScrollbar.checkOverflow();
-        }
-
         if (this.props.trackHorizontalOverflow) {
             this.setState({
                 // Offset from absolute position of the container

src/components/structures/InteractiveAuth.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations 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.
@@ -15,16 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
-const InteractiveAuth = Matrix.InteractiveAuth;
-
+import {InteractiveAuth} from "matrix-js-sdk";
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
+import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
 
-import sdk from '../../index';
+import * as sdk from '../../index';
+
+export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
 
 export default createReactClass({
     displayName: 'InteractiveAuth',
@@ -49,7 +49,7 @@ export default createReactClass({
         // @param {bool} status True if the operation requiring
         //     auth was completed sucessfully, false if canceled.
         // @param {object} result The result of the authenticated call
-        //     if successful, otherwise the error object
+        //     if successful, otherwise the error object.
         // @param {object} extra Additional information about the UI Auth
         //     process:
         //      * emailSid {string} If email auth was performed, the sid of
@@ -77,6 +77,15 @@ export default createReactClass({
         // is managed by some other party and should not be managed by
         // the component itself.
         continueIsManaged: PropTypes.bool,
+
+        // Called when the stage changes, or the stage's phase changes. First
+        // argument is the stage, second is the phase. Some stages do not have
+        // phases and will be counted as 0 (numeric).
+        onStagePhaseChange: PropTypes.func,
+
+        // continueText and continueKind are passed straight through to the AuthEntryComponent.
+        continueText: PropTypes.string,
+        continueKind: PropTypes.string,
     },
 
     getInitialState: function() {
@@ -89,7 +98,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
         this._authLogic = new InteractiveAuth({
             authData: this.props.authData,
@@ -163,6 +173,7 @@ export default createReactClass({
     _authStateUpdated: function(stageType, stageState) {
         const oldStage = this.state.authStage;
         this.setState({
+            busy: false,
             authStage: stageType,
             stageState: stageState,
             errorText: stageState.error,
@@ -186,11 +197,13 @@ export default createReactClass({
                 errorText: null,
                 stageErrorText: null,
             });
-        } else {
-            this.setState({
-                busy: false,
-            });
         }
+        // The JS SDK eagerly reports itself as "not busy" right after any
+        // immediate work has completed, but that's not really what we want at
+        // the UI layer, so we ignore this signal and show a spinner until
+        // there's a new screen to show the user. This is implemented by setting
+        // `busy: false` in `_authStateUpdated`.
+        // See also https://github.com/vector-im/riot-web/issues/12546
     },
 
     _setFocus: function() {
@@ -203,6 +216,16 @@ export default createReactClass({
         this._authLogic.submitAuthDict(authData);
     },
 
+    _onPhaseChange: function(newPhase) {
+        if (this.props.onStagePhaseChange) {
+            this.props.onStagePhaseChange(this.state.authStage, newPhase || 0);
+        }
+    },
+
+    _onStageCancel: function() {
+        this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
+    },
+
     _renderCurrentStage: function() {
         const stage = this.state.authStage;
         if (!stage) {
@@ -231,6 +254,10 @@ export default createReactClass({
                 fail={this._onAuthStageFailed}
                 setEmailSid={this._setEmailSid}
                 showContinue={!this.props.continueIsManaged}
+                onPhaseChange={this._onPhaseChange}
+                continueText={this.props.continueText}
+                continueKind={this.props.continueKind}
+                onCancel={this._onStageCancel}
             />
         );
     },

src/components/structures/LeftPanel.js

@@ -19,15 +19,14 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { MatrixClient } from 'matrix-js-sdk';
 import { Key } from '../../Keyboard';
-import sdk from '../../index';
-import dis from '../../dispatcher';
-import VectorConferenceHandler from '../../VectorConferenceHandler';
-import TagPanelButtons from './TagPanelButtons';
+import * as sdk from '../../index';
+import dis from '../../dispatcher/dispatcher';
+import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
+import RoomList2 from "../views/rooms/RoomList2";
 
 
 const LeftPanel = createReactClass({
@@ -39,10 +38,6 @@ const LeftPanel = createReactClass({
         collapsed: PropTypes.bool.isRequired,
     },
 
-    contextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    },
-
     getInitialState: function() {
         return {
             searchFilter: '',
@@ -50,7 +45,8 @@ const LeftPanel = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this.focusedElement = null;
 
         this._breadcrumbsWatcherRef = SettingsStore.watchSetting(
@@ -135,9 +131,6 @@ const LeftPanel = createReactClass({
         if (!this.focusedElement) return;
 
         switch (ev.key) {
-            case Key.TAB:
-                this._onMoveFocus(ev, ev.shiftKey);
-                break;
             case Key.ARROW_UP:
                 this._onMoveFocus(ev, true, true);
                 break;
@@ -243,7 +236,6 @@ const LeftPanel = createReactClass({
             tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel />
                 { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-                <TagPanelButtons />
             </div>);
         }
 
@@ -282,6 +274,29 @@ const LeftPanel = createReactClass({
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 
+        let roomList = null;
+        if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
+            roomList = <RoomList2
+                onKeyDown={this._onKeyDown}
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapsed}
+                searchFilter={this.state.searchFilter}
+                ref={this.collectRoomList}
+                onFocus={this._onFocus}
+                onBlur={this._onBlur}
+            />;
+        } else {
+            roomList = <RoomList
+                onKeyDown={this._onKeyDown}
+                onFocus={this._onFocus}
+                onBlur={this._onBlur}
+                ref={this.collectRoomList}
+                resizeNotifier={this.props.resizeNotifier}
+                collapsed={this.props.collapsed}
+                searchFilter={this.state.searchFilter}
+                ConferenceHandler={VectorConferenceHandler} />;
+        }
+
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }
@@ -293,19 +308,11 @@ const LeftPanel = createReactClass({
                         { exploreButton }
                         { searchBox }
                     </div>
-                    <RoomList
-                        onKeyDown={this._onKeyDown}
-                        onFocus={this._onFocus}
-                        onBlur={this._onBlur}
-                        ref={this.collectRoomList}
-                        resizeNotifier={this.props.resizeNotifier}
-                        collapsed={this.props.collapsed}
-                        searchFilter={this.state.searchFilter}
-                        ConferenceHandler={VectorConferenceHandler} />
+                    {roomList}
                 </aside>
             </div>
         );
     },
 });
 
-module.exports = LeftPanel;
+export default LeftPanel;

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,28 +16,42 @@ 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 } from '../../Keyboard';
+import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent} from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
-import sdk from '../../index';
-import dis from '../../dispatcher';
+import * as sdk from '../../index';
+import dis from '../../dispatcher/dispatcher';
 import sessionStore from '../../stores/SessionStore';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg, IMatrixClientCreds} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
-import RoomListStore from "../../stores/RoomListStore";
-import { getHomePageUrl } from '../../utils/pages';
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
 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";
+import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
+import { DefaultTagID } from "../../stores/room-list/models";
+import {
+    showToast as showSetPasswordToast,
+    hideToast as hideSetPasswordToast
+} from "../../toasts/SetPasswordToast";
+import {
+    showToast as showServerLimitToast,
+    hideToast as hideServerLimitToast
+} from "../../toasts/ServerLimitToast";
+
 // 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.
@@ -50,6 +64,44 @@ function canElementReceiveInput(el) {
         !!el.getAttribute("contenteditable");
 }
 
+interface IProps {
+    matrixClient: MatrixClient;
+    onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
+    viaServers?: string[];
+    hideToSRUsers: boolean;
+    resizeNotifier: ResizeNotifier;
+    middleDisabled: boolean;
+    initialEventPixelOffset: number;
+    leftDisabled: boolean;
+    rightDisabled: boolean;
+    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;
+}
+
+interface IState {
+    mouseDown?: {
+        x: number;
+        y: number;
+    };
+    syncErrorData: any;
+    useCompactLayout: boolean;
+}
+
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
  * determined by the page_type property.
@@ -59,10 +111,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,
@@ -75,39 +127,25 @@ const LoggedInView = createReactClass({
         viaServers: PropTypes.arrayOf(PropTypes.string),
 
         // and lots and lots of other stuff.
-    },
+    };
 
-    childContextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-        authCache: PropTypes.object,
-    },
+    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;
 
-    getChildContext: function() {
-        return {
-            matrixClient: this._matrixClient,
-            authCache: {
-                auth: {},
-                lastUpdate: 0,
-            },
-        };
-    },
+    constructor(props, context) {
+        super(props, context);
 
-    getInitialState: function() {
-        return {
+        this.state = {
+            mouseDown: undefined,
+            syncErrorData: undefined,
             // 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();
-    },
-
-    componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
 
@@ -129,22 +167,26 @@ 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) ||
-            (prevProps.showNotifierToolbar !== this.props.showNotifierToolbar)
+            (prevProps.checkingForUpdate !== this.props.checkingForUpdate)
         ) {
             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);
@@ -153,7 +195,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.
@@ -161,22 +203,24 @@ 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() {
-        this.setState({
-            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
-        });
-    },
+    _setStateFromSessionStore = () => {
+        if (this._sessionStore.getCachedPassword()) {
+            showSetPasswordToast();
+        } else {
+            hideSetPasswordToast();
+        }
+    };
 
     _createResizer() {
         const classNames = {
@@ -200,24 +244,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,
@@ -226,9 +268,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 &&
@@ -249,22 +291,37 @@ const LoggedInView = createReactClass({
 
         if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
             this._updateServerNoticeEvents();
+        } else {
+            this._calculateServerLimitToast(data);
         }
-    },
+    };
 
-    onRoomStateEvents: function(ev, state) {
-        const roomLists = RoomListStore.getRoomLists();
-        if (roomLists['m.server_notice'] && roomLists['m.server_notice'].some(r => r.roomId === ev.getRoomId())) {
+    onRoomStateEvents = (ev, state) => {
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (roomLists[DefaultTagID.ServerNotice] && roomLists[DefaultTagID.ServerNotice].some(r => r.roomId === ev.getRoomId())) {
             this._updateServerNoticeEvents();
         }
-    },
+    };
 
-    _updateServerNoticeEvents: async function() {
-        const roomLists = RoomListStore.getRoomLists();
-        if (!roomLists['m.server_notice']) return [];
+    _calculateServerLimitToast(syncErrorData, usageLimitEventContent?) {
+        const error = syncErrorData && syncErrorData.error && syncErrorData.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
+        if (error) {
+            usageLimitEventContent = syncErrorData.error.data;
+        }
 
-        const pinnedEvents = [];
-        for (const room of roomLists['m.server_notice']) {
+        if (usageLimitEventContent) {
+            showServerLimitToast(usageLimitEventContent.limit_type, usageLimitEventContent.admin_contact, error);
+        } else {
+            hideServerLimitToast();
+        }
+    }
+
+    _updateServerNoticeEvents = async () => {
+        const roomLists = RoomListStoreTempProxy.getRoomLists();
+        if (!roomLists[DefaultTagID.ServerNotice]) return [];
+
+        const events = [];
+        for (const room of roomLists[DefaultTagID.ServerNotice]) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
@@ -272,16 +329,22 @@ 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) events.push(event);
             }
         }
-        this.setState({
-            serverNoticeEvents: pinnedEvents,
-        });
-    },
 
-    _onPaste: function(ev) {
+        const usageLimitEvent = events.find((e) => {
+            return (
+                e && e.getType() === 'm.room.message' &&
+                e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
+            );
+        });
+
+        this._calculateServerLimitToast(this.state.syncErrorData, usageLimitEvent && usageLimitEvent.getContent());
+    };
+
+    _onPaste = (ev) => {
         let canReceiveInput = false;
         let element = ev.target;
         // test for all parents because the target can be a child of a contenteditable element
@@ -295,7 +358,7 @@ const LoggedInView = createReactClass({
             // so dispatch synchronously before paste happens
             dis.dispatch({action: 'focus_composer'}, true);
         }
-    },
+    };
 
     /*
     SOME HACKERY BELOW:
@@ -319,22 +382,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.
@@ -351,13 +414,13 @@ const LoggedInView = createReactClass({
 
         let handled = false;
         const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
-        const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey ||
-            ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
+        const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey;
+        const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT;
 
         switch (ev.key) {
             case Key.PAGE_UP:
             case Key.PAGE_DOWN:
-                if (!hasModifier) {
+                if (!hasModifier && !isModifier) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
                 }
@@ -379,8 +442,6 @@ const LoggedInView = createReactClass({
                 }
                 break;
             case Key.BACKTICK:
-                if (ev.key !== "`") break;
-
                 // Ideally this would be CTRL+P for "Profile", but that's
                 // taken by the print dialog. CTRL+I for "Information"
                 // was previously chosen but conflicted with italics in
@@ -393,12 +454,48 @@ const LoggedInView = createReactClass({
                     handled = true;
                 }
                 break;
+
+            case Key.SLASH:
+                if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev)) {
+                    KeyboardShortcuts.toggleDialog();
+                    handled = true;
+                }
+                break;
+
+            case Key.ARROW_UP:
+            case Key.ARROW_DOWN:
+                if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
+                    dis.dispatch({
+                        action: 'view_room_delta',
+                        delta: ev.key === Key.ARROW_UP ? -1 : 1,
+                        unread: ev.shiftKey,
+                    });
+                    handled = true;
+                }
+                break;
+
+            case Key.PERIOD:
+                if (ctrlCmdOnly && (this.props.page_type === "room_view" || this.props.page_type === "group_view")) {
+                    dis.dispatch({
+                        action: 'toggle_right_panel',
+                        type: this.props.page_type === "room_view" ? "room" : "group",
+                    });
+                    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) {
             ev.stopPropagation();
             ev.preventDefault();
-        } else if (!hasModifier) {
+        } else if (!isModifier && !ev.altKey && !ev.ctrlKey && !ev.metaKey) {
+            // The above condition is crafted to _allow_ characters with Shift
+            // already pressed (but not the Shift key down itself).
+
             const isClickShortcut = ev.target !== document.body &&
                 (ev.key === Key.SPACE || ev.key === Key.ENTER);
 
@@ -407,13 +504,6 @@ const LoggedInView = createReactClass({
                 return;
             }
 
-            // XXX: Remove after CIDER replaces Slate completely: https://github.com/vector-im/riot-web/issues/11036
-            // If using Slate, consume the Backspace without first focusing as it causes an implosion
-            if (ev.key === Key.BACKSPACE && !SettingsStore.getValue("useCiderComposer")) {
-                ev.stopPropagation();
-                return;
-            }
-
             if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
                 // synchronous dispatch so we focus before key generates input
                 dis.dispatch({action: 'focus_composer'}, true);
@@ -422,19 +512,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;
@@ -457,9 +547,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;
@@ -476,9 +566,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).
@@ -497,9 +587,9 @@ const LoggedInView = createReactClass({
                 });
             }
         }
-    },
+    };
 
-    _onMouseUp: function(ev) {
+    _onMouseUp = (ev) => {
         if (!this.state.mouseDown) return;
 
         const deltaX = ev.pageX - this.state.mouseDown.x;
@@ -518,26 +608,16 @@ 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');
-        const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
-        const CookieBar = sdk.getComponent('globals.CookieBar');
-        const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
-        const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
-        const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
         let pageElement;
 
@@ -567,13 +647,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:
@@ -587,39 +661,9 @@ const LoggedInView = createReactClass({
                 break;
         }
 
-        const usageLimitEvent = this.state.serverNoticeEvents.find((e) => {
-            return (
-                e && e.getType() === 'm.room.message' &&
-                e.getContent()['server_notice_type'] === 'm.server_notice.usage_limit_reached'
-            );
-        });
-
         let topBar;
-        if (this.state.syncErrorData && this.state.syncErrorData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
-            topBar = <ServerLimitBar kind='hard'
-                adminContact={this.state.syncErrorData.error.data.admin_contact}
-                limitType={this.state.syncErrorData.error.data.limit_type}
-            />;
-        } else if (usageLimitEvent) {
-            topBar = <ServerLimitBar kind='soft'
-                adminContact={usageLimitEvent.getContent().admin_contact}
-                limitType={usageLimitEvent.getContent().limit_type}
-            />;
-        } else if (this.props.showCookieBar &&
-            this.props.config.piwik
-        ) {
-            const policyUrl = this.props.config.piwik.policyUrl || null;
-            topBar = <CookieBar policyUrl={policyUrl} />;
-        } else if (this.props.hasNewVersion) {
-            topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
-                                    releaseNotes={this.props.newVersionReleaseNotes}
-            />;
-        } else if (this.props.checkingForUpdate) {
+        if (this.props.checkingForUpdate) {
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
-        } else if (this.state.userHasGeneratedPassword) {
-            topBar = <PasswordNagBar />;
-        } else if (this.props.showNotifierToolbar) {
-            topBar = <MatrixToolbar />;
         }
 
         let bodyClasses = 'mx_MatrixChat';
@@ -631,23 +675,32 @@ const LoggedInView = createReactClass({
         }
 
         return (
-            <div onPaste={this._onPaste} onKeyDown={this._onReactKeyDown} className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
-                { topBar }
-                <ToastContainer />
-                <DragDropContext onDragEnd={this._onDragEnd}>
-                    <div ref={this._setResizeContainerRef} className={bodyClasses}>
-                        <LeftPanel
-                            resizeNotifier={this.props.resizeNotifier}
-                            collapsed={this.props.collapseLhs || false}
-                            disabled={this.props.leftDisabled}
-                        />
-                        <ResizeHandle />
-                        { pageElement }
-                    </div>
-                </DragDropContext>
-            </div>
+            <MatrixClientContext.Provider value={this._matrixClient}>
+                <div
+                    onPaste={this._onPaste}
+                    onKeyDown={this._onReactKeyDown}
+                    className='mx_MatrixChat_wrapper'
+                    aria-hidden={this.props.hideToSRUsers}
+                    onMouseDown={this._onMouseDown}
+                    onMouseUp={this._onMouseUp}
+                >
+                    { topBar }
+                    <ToastContainer />
+                    <DragDropContext onDragEnd={this._onDragEnd}>
+                        <div ref={this._resizeContainer} className={bodyClasses}>
+                            <LeftPanel
+                                resizeNotifier={this.props.resizeNotifier}
+                                collapsed={this.props.collapseLhs || false}
+                                disabled={this.props.leftDisabled}
+                            />
+                            <ResizeHandle />
+                            { pageElement }
+                        </div>
+                    </DragDropContext>
+                </div>
+            </MatrixClientContext.Provider>
         );
-    },
-});
+    }
+}
 
 export default LoggedInView;

src/components/structures/MainSplit.js

@@ -74,18 +74,38 @@ export default class MainSplit extends React.Component {
         }
     }
 
+    componentDidUpdate(prevProps) {
+        const wasPanelSet = this.props.panel && !prevProps.panel;
+        const wasPanelCleared = !this.props.panel && prevProps.panel;
+
+        if (this.resizeContainer && wasPanelSet) {
+            // The resizer can only be created when **both** expanded and the panel is
+            // set. Once both are true, the container ref will mount, which is required
+            // for the resizer to work.
+            this._createResizer();
+        } else if (this.resizer && wasPanelCleared) {
+            this.resizer.detach();
+            this.resizer = null;
+        }
+    }
+
     render() {
         const bodyView = React.Children.only(this.props.children);
         const panelView = this.props.panel;
 
-        if (this.props.collapsedRhs || !panelView) {
-            return bodyView;
-        } else {
-            return <div className="mx_MainSplit" ref={this._setResizeContainerRef}>
-                { bodyView }
+        const hasResizer = !this.props.collapsedRhs && panelView;
+
+        let children;
+        if (hasResizer) {
+            children = <React.Fragment>
                 <ResizeHandle reverse={true} />
                 { panelView }
-            </div>;
+            </React.Fragment>;
         }
+
+        return <div className="mx_MainSplit" ref={hasResizer ? this._setResizeContainerRef : undefined}>
+            { bodyView }
+            { children }
+        </div>;
     }
 }

src/components/structures/MessagePanel.js

@@ -22,11 +22,14 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
-import sdk from '../../index';
+import * as sdk from '../../index';
 
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
+import {haveTileForEvent} from "../views/rooms/EventTile";
+import {textForEvent} from "../../TextForEvent";
+import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -107,13 +110,16 @@ export default class MessagePanel extends React.Component {
         showReactions: PropTypes.bool,
     };
 
-    constructor() {
-        super();
+    // Force props to be loaded for useIRCLayout
+    constructor(props) {
+        super(props);
 
         this.state = {
             // previous positions the read marker has been in, so we can
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -163,6 +169,11 @@ export default class MessagePanel extends React.Component {
         this._readMarkerNode = createRef();
         this._whoIsTyping = createRef();
         this._scrollPanel = createRef();
+
+        this._showTypingNotificationsWatcherRef =
+            SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
+
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
     }
 
     componentDidMount() {
@@ -171,6 +182,8 @@ export default class MessagePanel extends React.Component {
 
     componentWillUnmount() {
         this._isMounted = false;
+        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+        SettingsStore.unwatchSetting(this._layoutWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -183,6 +196,23 @@ export default class MessagePanel extends React.Component {
         }
     }
 
+    onShowTypingNotificationsChange = () => {
+        this.setState({
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+        });
+    };
+
+    onLayoutChange = () => {
+        this.setState({
+            useIRCLayout: this.useIRCLayout(SettingsStore.getValue("feature_irc_ui")),
+        });
+    }
+
+    useIRCLayout(ircLayoutSelected) {
+        // if room is null we are not in a normal room list
+        return ircLayoutSelected && this.props.room;
+    }
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -318,8 +348,7 @@ export default class MessagePanel extends React.Component {
             return true;
         }
 
-        const EventTile = sdk.getComponent('rooms.EventTile');
-        if (!EventTile.haveTileForEvent(mxEv)) {
+        if (!haveTileForEvent(mxEv)) {
             return false; // no tile = no show
         }
 
@@ -402,10 +431,6 @@ export default class MessagePanel extends React.Component {
     };
 
     _getEventTiles() {
-        const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
-        const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
-
         this.eventNodes = {};
 
         let i;
@@ -447,190 +472,55 @@ export default class MessagePanel extends React.Component {
             this._readReceiptsByEvent = this._getReadReceiptsByShownEvent();
         }
 
+        let grouper = null;
+
         for (i = 0; i < this.props.events.length; i++) {
             const mxEv = this.props.events[i];
             const eventId = mxEv.getId();
             const last = (mxEv === lastShownEvent);
 
-            // Wrap initial room creation events into an EventListSummary
-            // Grouping only events sent by the same user that sent the `m.room.create` and only until
-            // the first non-state event or membership event which is not regarding the sender of the `m.room.create` event
-            const shouldGroup = (ev) => {
-               if (ev.getType() === "m.room.member"
-                   && (ev.getStateKey() !== mxEv.getSender() || ev.getContent()["membership"] !== "join")) {
-                   return false;
-               }
-               if (ev.isState() && ev.getSender() === mxEv.getSender()) {
-                   return true;
-               }
-               return false;
-            };
-            if (mxEv.getType() === "m.room.create") {
-                let summaryReadMarker = null;
-                const ts1 = mxEv.getTs();
-
-                if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    const dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} /></li>;
-                    ret.push(dateSeparator);
+            if (grouper) {
+                if (grouper.shouldGroup(mxEv)) {
+                    grouper.add(mxEv);
+                    continue;
+                } else {
+                    // not part of group, so get the group tiles, close the
+                    // group, and continue like a normal event
+                    ret.push(...grouper.getTiles());
+                    prevEvent = grouper.getNewPrevEvent();
+                    grouper = null;
                 }
-
-                // If RM event is the first in the summary, append the RM after the summary
-                summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(mxEv.getId());
-
-                // If this m.room.create event should be shown (room upgrade) then show it before the summary
-                if (this._shouldShowEvent(mxEv)) {
-                    // pass in the mxEv as prevEvent as well so no extra DateSeparator is rendered
-                    ret.push(...this._getTilesForEvent(mxEv, mxEv, false));
-                }
-
-                const summarisedEvents = []; // Don't add m.room.create here as we don't want it inside the summary
-                for (;i + 1 < this.props.events.length; i++) {
-                    const collapsedMxEv = this.props.events[i + 1];
-
-                    // Ignore redacted/hidden member events
-                    if (!this._shouldShowEvent(collapsedMxEv)) {
-                        // If this hidden event is the RM and in or at end of a summary put RM after the summary.
-                        summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-                        continue;
-                    }
-
-                    if (!shouldGroup(collapsedMxEv) || this._wantsDateSeparator(mxEv, collapsedMxEv.getDate())) {
-                        break;
-                    }
-
-                    // If RM event is in the summary, mark it as such and the RM will be appended after the summary.
-                    summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-
-                    summarisedEvents.push(collapsedMxEv);
-                }
-
-                // At this point, i = the index of the last event in the summary sequence
-                const eventTiles = summarisedEvents.map((e) => {
-                    // In order to prevent DateSeparators from appearing in the expanded form
-                    // of EventListSummary, render each member event as if the previous
-                    // one was itself. This way, the timestamp of the previous event === the
-                    // timestamp of the current event, and no DateSeparator is inserted.
-                    return this._getTilesForEvent(e, e, e === lastShownEvent);
-                }).reduce((a, b) => a.concat(b), []);
-
-                // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
-                const ev = this.props.events[i];
-                ret.push(<EventListSummary
-                    key="roomcreationsummary"
-                    events={summarisedEvents}
-                    onToggle={this._onHeightChanged} // Update scroll state
-                    summaryMembers={[ev.sender]}
-                    summaryText={_t("%(creator)s created and configured the room.", {
-                        creator: ev.sender ? ev.sender.name : ev.getSender(),
-                    })}
-                >
-                    { eventTiles }
-                </EventListSummary>);
-
-                if (summaryReadMarker) {
-                    ret.push(summaryReadMarker);
-                }
-
-                prevEvent = mxEv;
-                continue;
             }
 
-            const wantTile = this._shouldShowEvent(mxEv);
-
-            // Wrap consecutive member events in a ListSummary, ignore if redacted
-            if (isMembershipChange(mxEv) && wantTile) {
-                let summaryReadMarker = null;
-                const ts1 = mxEv.getTs();
-                // Ensure that the key of the MemberEventListSummary does not change with new
-                // member events. This will prevent it from being re-created unnecessarily, and
-                // instead will allow new props to be provided. In turn, the shouldComponentUpdate
-                // method on MELS can be used to prevent unnecessary renderings.
-                //
-                // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
-                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
-                // membership event, which will not change during forward pagination.
-                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
-
-                if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    const dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} /></li>;
-                    ret.push(dateSeparator);
+            for (const Grouper of groupers) {
+                if (Grouper.canStartGroup(this, mxEv)) {
+                    grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent);
                 }
-
-                // If RM event is the first in the MELS, append the RM after MELS
-                summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(mxEv.getId());
-
-                const summarisedEvents = [mxEv];
-                for (;i + 1 < this.props.events.length; i++) {
-                    const collapsedMxEv = this.props.events[i + 1];
-
-                    // Ignore redacted/hidden member events
-                    if (!this._shouldShowEvent(collapsedMxEv)) {
-                        // If this hidden event is the RM and in or at end of a MELS put RM after MELS.
-                        summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-                        continue;
-                    }
-
-                    if (!isMembershipChange(collapsedMxEv) ||
-                        this._wantsDateSeparator(mxEv, collapsedMxEv.getDate())) {
-                        break;
-                    }
-
-                    // If RM event is in MELS mark it as such and the RM will be appended after MELS.
-                    summaryReadMarker = summaryReadMarker || this._readMarkerForEvent(collapsedMxEv.getId());
-
-                    summarisedEvents.push(collapsedMxEv);
-                }
-
-                let highlightInMels = false;
-
-                // At this point, i = the index of the last event in the summary sequence
-                let eventTiles = summarisedEvents.map((e) => {
-                    if (e.getId() === this.props.highlightedEventId) {
-                        highlightInMels = true;
-                    }
-                    // In order to prevent DateSeparators from appearing in the expanded form
-                    // of MemberEventListSummary, render each member event as if the previous
-                    // one was itself. This way, the timestamp of the previous event === the
-                    // timestamp of the current event, and no DateSeparator is inserted.
-                    return this._getTilesForEvent(e, e, e === lastShownEvent);
-                }).reduce((a, b) => a.concat(b), []);
-
-                if (eventTiles.length === 0) {
-                    eventTiles = null;
-                }
-
-                ret.push(<MemberEventListSummary key={key}
-                    events={summarisedEvents}
-                    onToggle={this._onHeightChanged} // Update scroll state
-                    startExpanded={highlightInMels}
-                >
-                        { eventTiles }
-                </MemberEventListSummary>);
-
-                if (summaryReadMarker) {
-                    ret.push(summaryReadMarker);
-                }
-
-                prevEvent = mxEv;
-                continue;
             }
+            if (!grouper) {
+                const wantTile = this._shouldShowEvent(mxEv);
+                if (wantTile) {
+                    // make sure we unpack the array returned by _getTilesForEvent,
+                    // otherwise react will auto-generate keys and we will end up
+                    // replacing all of the DOM elements every time we paginate.
+                    ret.push(...this._getTilesForEvent(prevEvent, mxEv, last));
+                    prevEvent = mxEv;
+                }
 
-            if (wantTile) {
-                // make sure we unpack the array returned by _getTilesForEvent,
-                // otherwise react will auto-generate keys and we will end up
-                // replacing all of the DOM elements every time we paginate.
-                ret.push(...this._getTilesForEvent(prevEvent, mxEv, last));
-                prevEvent = mxEv;
+                const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
+                if (readMarker) ret.push(readMarker);
             }
+        }
 
-            const readMarker = this._readMarkerForEvent(eventId, i >= lastShownNonLocalEchoIndex);
-            if (readMarker) ret.push(readMarker);
+        if (grouper) {
+            ret.push(...grouper.getTiles());
         }
 
         return ret;
     }
 
     _getTilesForEvent(prevEvent, mxEv, last) {
+        const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
@@ -651,7 +541,8 @@ export default class MessagePanel extends React.Component {
         // if there is a previous event and it has the same sender as this event
         // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
         if (prevEvent !== null && prevEvent.sender && mxEv.sender && mxEv.sender.userId === prevEvent.sender.userId &&
-            (mxEv.getType() === prevEvent.getType() || eventTypeContinues) &&
+            // if we don't have tile for previous event then it was shown by showHiddenEvents and has no SenderProfile
+            haveTileForEvent(prevEvent) && (mxEv.getType() === prevEvent.getType() || eventTypeContinues) &&
             (mxEv.getTs() - prevEvent.getTs() <= CONTINUATION_MAX_INTERVAL)) {
             continuation = true;
         }
@@ -704,25 +595,28 @@ export default class MessagePanel extends React.Component {
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
-                <EventTile mxEvent={mxEv}
-                    continuation={continuation}
-                    isRedacted={mxEv.isRedacted()}
-                    replacingEventId={mxEv.replacingEventId()}
-                    editState={isEditing && this.props.editState}
-                    onHeightChanged={this._onHeightChanged}
-                    readReceipts={readReceipts}
-                    readReceiptMap={this._readReceiptMap}
-                    showUrlPreview={this.props.showUrlPreview}
-                    checkUnmounting={this._isUnmounting.bind(this)}
-                    eventSendStatus={mxEv.getAssociatedStatus()}
-                    tileShape={this.props.tileShape}
-                    isTwelveHour={this.props.isTwelveHour}
-                    permalinkCreator={this.props.permalinkCreator}
-                    last={last}
-                    isSelectedEvent={highlight}
-                    getRelationsForEvent={this.props.getRelationsForEvent}
-                    showReactions={this.props.showReactions}
-                />
+                <TileErrorBoundary mxEvent={mxEv}>
+                    <EventTile mxEvent={mxEv}
+                        continuation={continuation}
+                        isRedacted={mxEv.isRedacted()}
+                        replacingEventId={mxEv.replacingEventId()}
+                        editState={isEditing && this.props.editState}
+                        onHeightChanged={this._onHeightChanged}
+                        readReceipts={readReceipts}
+                        readReceiptMap={this._readReceiptMap}
+                        showUrlPreview={this.props.showUrlPreview}
+                        checkUnmounting={this._isUnmounting.bind(this)}
+                        eventSendStatus={mxEv.getAssociatedStatus()}
+                        tileShape={this.props.tileShape}
+                        isTwelveHour={this.props.isTwelveHour}
+                        permalinkCreator={this.props.permalinkCreator}
+                        last={last}
+                        isSelectedEvent={highlight}
+                        getRelationsForEvent={this.props.getRelationsForEvent}
+                        showReactions={this.props.showReactions}
+                        useIRCLayout={this.state.useIRCLayout}
+                    />
+                </TileErrorBoundary>
             </li>,
         );
 
@@ -884,6 +778,7 @@ export default class MessagePanel extends React.Component {
     }
 
     render() {
+        const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary');
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
@@ -902,11 +797,13 @@ export default class MessagePanel extends React.Component {
             this.props.className,
             {
                 "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+                "mx_IRCLayout": this.state.useIRCLayout,
+                "mx_GroupLayout": !this.state.useIRCLayout,
             },
         );
 
         let whoIsTyping;
-        if (this.props.room && !this.props.tileShape) {
+        if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
                 room={this.props.room}
                 onShown={this._onTypingShown}
@@ -915,23 +812,285 @@ export default class MessagePanel extends React.Component {
             );
         }
 
+        let ircResizer = null;
+        if (this.state.useIRCLayout) {
+            ircResizer = <IRCTimelineProfileResizer
+                minWidth={20}
+                maxWidth={600}
+                roomId={this.props.room ? this.props.roomroomId : null}
+            />;
+        }
+
         return (
-            <ScrollPanel
-                ref={this._scrollPanel}
-                className={className}
-                onScroll={this.props.onScroll}
-                onResize={this.onResize}
-                onFillRequest={this.props.onFillRequest}
-                onUnfillRequest={this.props.onUnfillRequest}
-                style={style}
-                stickyBottom={this.props.stickyBottom}
-                resizeNotifier={this.props.resizeNotifier}
-            >
-                { topSpinner }
-                { this._getEventTiles() }
-                { whoIsTyping }
-                { bottomSpinner }
-            </ScrollPanel>
+            <ErrorBoundary>
+                <ScrollPanel
+                    ref={this._scrollPanel}
+                    className={className}
+                    onScroll={this.props.onScroll}
+                    onResize={this.onResize}
+                    onFillRequest={this.props.onFillRequest}
+                    onUnfillRequest={this.props.onUnfillRequest}
+                    style={style}
+                    stickyBottom={this.props.stickyBottom}
+                    resizeNotifier={this.props.resizeNotifier}
+                    fixedChildren={ircResizer}
+                >
+                    { topSpinner }
+                    { this._getEventTiles() }
+                    { whoIsTyping }
+                    { bottomSpinner }
+                </ScrollPanel>
+            </ErrorBoundary>
         );
     }
 }
+
+/* Grouper classes determine when events can be grouped together in a summary.
+ * Groupers should have the following methods:
+ * - canStartGroup (static): determines if a new group should be started with the
+ *   given event
+ * - shouldGroup: determines if the given event should be added to an existing group
+ * - add: adds an event to an existing group (should only be called if shouldGroup
+ *   return true)
+ * - getTiles: returns the tiles that represent the group
+ * - getNewPrevEvent: returns the event that should be used as the new prevEvent
+ *   when determining things such as whether a date separator is necessary
+ */
+
+// Wrap initial room creation events into an EventListSummary
+// Grouping only events sent by the same user that sent the `m.room.create` and only until
+// the first non-state event or membership event which is not regarding the sender of the `m.room.create` event
+class CreationGrouper {
+    static canStartGroup = function(panel, ev) {
+        return ev.getType() === "m.room.create";
+    };
+
+    constructor(panel, createEvent, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.createEvent = createEvent;
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+        this.events = [];
+        // events that we include in the group but then eject out and place
+        // above the group.
+        this.ejectedEvents = [];
+        this.readMarker = panel._readMarkerForEvent(
+            createEvent.getId(),
+            createEvent === lastShownEvent,
+        );
+    }
+
+    shouldGroup(ev) {
+        const panel = this.panel;
+        const createEvent = this.createEvent;
+        if (!panel._shouldShowEvent(ev)) {
+            return true;
+        }
+        if (panel._wantsDateSeparator(this.createEvent, ev.getDate())) {
+            return false;
+        }
+        if (ev.getType() === "m.room.member"
+            && (ev.getStateKey() !== createEvent.getSender() || ev.getContent()["membership"] !== "join")) {
+            return false;
+        }
+        if (ev.isState() && ev.getSender() === createEvent.getSender()) {
+            return true;
+        }
+        return false;
+    }
+
+    add(ev) {
+        const panel = this.panel;
+        this.readMarker = this.readMarker || panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        if (!panel._shouldShowEvent(ev)) {
+            return;
+        }
+        if (ev.getType() === "m.room.encryption") {
+            this.ejectedEvents.push(ev);
+        } else {
+            this.events.push(ev);
+        }
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventListSummary = sdk.getComponent('views.elements.EventListSummary');
+
+        const panel = this.panel;
+        const ret = [];
+        const createEvent = this.createEvent;
+        const lastShownEvent = this.lastShownEvent;
+
+        if (panel._wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
+            const ts = createEvent.getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // If this m.room.create event should be shown (room upgrade) then show it before the summary
+        if (panel._shouldShowEvent(createEvent)) {
+            // pass in the createEvent as prevEvent as well so no extra DateSeparator is rendered
+            ret.push(...panel._getTilesForEvent(createEvent, createEvent, false));
+        }
+
+        for (const ejected of this.ejectedEvents) {
+            ret.push(...panel._getTilesForEvent(
+                createEvent, ejected, createEvent === lastShownEvent,
+            ));
+        }
+
+        const eventTiles = this.events.map((e) => {
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of EventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+        // Get sender profile from the latest event in the summary as the m.room.create doesn't contain one
+        const ev = this.events[this.events.length - 1];
+        ret.push(
+            <EventListSummary
+                 key="roomcreationsummary"
+                 events={this.events}
+                 onToggle={panel._onHeightChanged} // Update scroll state
+                 summaryMembers={[ev.sender]}
+                 summaryText={_t("%(creator)s created and configured the room.", {
+                     creator: ev.sender ? ev.sender.name : ev.getSender(),
+                 })}
+            >
+                 { eventTiles }
+            </EventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.createEvent;
+    }
+}
+
+// Wrap consecutive member events in a ListSummary, ignore if redacted
+class MemberGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && isMembershipChange(ev);
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(
+            ev.getId(),
+            ev === lastShownEvent,
+        );
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) {
+            return false;
+        }
+        return isMembershipChange(ev);
+    }
+
+    add(ev) {
+        if (ev.getType() === 'm.room.member') {
+            // We'll just double check that it's worth our time to do so, through an
+            // ugly hack. If textForEvent returns something, we should group it for
+            // rendering but if it doesn't then we'll exclude it.
+            const renderText = textForEvent(ev);
+            if (!renderText || renderText.trim().length === 0) return; // quietly ignore
+        }
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
+
+        const panel = this.panel;
+        const lastShownEvent = this.lastShownEvent;
+        const ret = [];
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // Ensure that the key of the MemberEventListSummary does not change with new
+        // member events. This will prevent it from being re-created unnecessarily, and
+        // instead will allow new props to be provided. In turn, the shouldComponentUpdate
+        // method on MELS can be used to prevent unnecessary renderings.
+        //
+        // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
+        // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
+        // membership event, which will not change during forward pagination.
+        const key = "membereventlistsummary-" + (
+            this.prevEvent ? this.events[0].getId() : "initial"
+        );
+
+        let highlightInMels;
+        let eventTiles = this.events.map((e) => {
+            if (e.getId() === panel.props.highlightedEventId) {
+                highlightInMels = true;
+            }
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of MemberEventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <MemberEventListSummary key={key}
+                 events={this.events}
+                 onToggle={panel._onHeightChanged} // Update scroll state
+                 startExpanded={highlightInMels}
+            >
+                 { eventTiles }
+            </MemberEventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
+// all the grouper classes that we use
+const groupers = [CreationGrouper, MemberGrouper];

src/components/structures/MyGroups.js

@@ -17,12 +17,12 @@ limitations under the License.
 
 import React from 'react';
 import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import { _t } from '../../languageHandler';
-import dis from '../../dispatcher';
+import dis from '../../dispatcher/dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 export default createReactClass({
     displayName: 'MyGroups',
@@ -34,11 +34,11 @@ export default createReactClass({
         };
     },
 
-    contextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    statics: {
+        contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._fetch();
     },
 
@@ -47,7 +47,7 @@ export default createReactClass({
     },
 
     _fetch: function() {
-        this.context.matrixClient.getJoinedGroups().then((result) => {
+        this.context.getJoinedGroups().then((result) => {
             this.setState({groups: result.groups, error: null});
         }, (err) => {
             if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
@@ -63,8 +63,6 @@ export default createReactClass({
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const GroupTile = sdk.getComponent("groups.GroupTile");
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-
 
         let content;
         let contentHeader;
@@ -75,7 +73,7 @@ export default createReactClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbarWrapper>
+                <AutoHideScrollbar className="mx_MyGroups_scrollable">
                     <div className="mx_MyGroups_microcopy">
                         <p>
                             { _t(
@@ -94,7 +92,7 @@ export default createReactClass({
                     <div className="mx_MyGroups_joinedGroups">
                         { groupNodes }
                     </div>
-                </GeminiScrollbarWrapper> :
+                </AutoHideScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",