merge in develop

src/Analytics.js

@@ -14,25 +14,86 @@
  limitations under the License.
  */
 
-import { getCurrentLanguage } from './languageHandler';
+import { getCurrentLanguage, _t, _td } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
+import Modal from './Modal';
+import sdk from './index';
 
+const hashRegex = /#\/(groups?|room|user|settings|register|login|forgot_password|home|directory)/;
+const hashVarRegex = /#\/(group|room|user)\/.*$/;
+
+// Remove all but the first item in the hash path. Redact unexpected hashes.
+function getRedactedHash(hash) {
+    // Don't leak URLs we aren't expecting - they could contain tokens/PII
+    const match = hashRegex.exec(hash);
+    if (!match) {
+        console.warn(`Unexpected hash location "${hash}"`);
+        return '#/<unexpected hash location>';
+    }
+
+    if (hashVarRegex.test(hash)) {
+        return hash.replace(hashVarRegex, "#/$1/<redacted>");
+    }
+
+    return hash.replace(hashRegex, "#/$1");
+}
+
+// Return the current origin, path and hash separated with a `/`. This does
+// not include query parameters.
 function getRedactedUrl() {
-    const redactedHash = window.location.hash.replace(/#\/(room|user)\/(.+)/, "#/$1/<redacted>");
-    // hardcoded url to make piwik happy
-    return 'https://riot.im/app/' + redactedHash;
+    const { origin, hash } = window.location;
+    let { pathname } = window.location;
+
+    // Redact paths which could contain unexpected PII
+    if (origin.startsWith('file://')) {
+        pathname = "/<redacted>/";
+    }
+
+    return origin + pathname + getRedactedHash(hash);
 }
 
 const customVariables = {
-    'App Platform': 1,
-    'App Version': 2,
-    'User Type': 3,
-    'Chosen Language': 4,
-    'Instance': 5,
-    'RTE: Uses Richtext Mode': 6,
-    'Homeserver URL': 7,
-    'Identity Server URL': 8,
+    'App Platform': {
+        id: 1,
+        expl: _td('The platform you\'re on'),
+        example: 'Electron Platform',
+    },
+    'App Version': {
+        id: 2,
+        expl: _td('The version of Riot.im'),
+        example: '15.0.0',
+    },
+    'User Type': {
+        id: 3,
+        expl: _td('Whether or not you\'re logged in (we don\'t record your user name)'),
+        example: 'Logged In',
+    },
+    'Chosen Language': {
+        id: 4,
+        expl: _td('Your language of choice'),
+        example: 'en',
+    },
+    'Instance': {
+        id: 5,
+        expl: _td('Which officially provided instance you are using, if any'),
+        example: 'app',
+    },
+    'RTE: Uses Richtext Mode': {
+        id: 6,
+        expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
+        example: 'off',
+    },
+    'Homeserver URL': {
+        id: 7,
+        expl: _td('Your homeserver\'s URL'),
+        example: 'https://matrix.org',
+    },
+    'Identity Server URL': {
+        id: 8,
+        expl: _td('Your identity server\'s URL'),
+        example: 'https://vector.im',
+    },
 };
 
 function whitelistRedact(whitelist, str) {
@@ -40,9 +101,6 @@ function whitelistRedact(whitelist, str) {
     return '<redacted>';
 }
 
-const whitelistedHSUrls = ["https://matrix.org"];
-const whitelistedISUrls = ["https://vector.im"];
-
 class Analytics {
     constructor() {
         this._paq = null;
@@ -66,6 +124,10 @@ class Analytics {
      */
     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;
     }
 
@@ -117,7 +179,7 @@ class Analytics {
         return true;
     }
 
-    trackPageChange() {
+    trackPageChange(generationTimeMs) {
         if (this.disabled) return;
         if (this.firstPage) {
             // De-duplicate first page
@@ -125,13 +187,21 @@ class Analytics {
             this.firstPage = false;
             return;
         }
+
+        if (typeof generationTimeMs === 'number') {
+            this._paq.push(['setGenerationTimeMs', generationTimeMs]);
+        } else {
+            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']);
     }
 
-    trackEvent(category, action, name) {
+    trackEvent(category, action, name, value) {
         if (this.disabled) return;
-        this._paq.push(['trackEvent', category, action, name]);
+        this._paq.push(['trackEvent', category, action, name, value]);
     }
 
     logout() {
@@ -140,11 +210,19 @@ class Analytics {
     }
 
     _setVisitVariable(key, value) {
-        this._paq.push(['setCustomVariable', customVariables[key], key, value, 'visit']);
+        if (this.disabled) return;
+        this._paq.push(['setCustomVariable', customVariables[key].id, key, value, 'visit']);
     }
 
     setLoggedIn(isGuest, homeserverUrl, identityServerUrl) {
         if (this.disabled) return;
+
+        const config = SdkConfig.get();
+        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));
@@ -154,6 +232,64 @@ class Analytics {
         if (this.disabled) return;
         this._setVisitVariable('RTE: Uses Richtext Mode', state ? 'on' : 'off');
     }
+
+    showDetailsModal() {
+        let rows = [];
+        if (window.Piwik) {
+            const Tracker = window.Piwik.getAsyncTracker();
+            rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+        } else {
+            // Piwik may not have been enabled, so show example values
+            rows = Object.keys(customVariables).map(
+                (k) => [
+                    k,
+                    _t('e.g. %(exampleValue)s', { exampleValue: customVariables[k].example }),
+                ],
+            );
+        }
+
+        const resolution = `${window.screen.width}x${window.screen.height}`;
+        const otherVariables = [
+            {
+                expl: _td('Every page you use in the app'),
+                value: _t(
+                    'e.g. <CurrentPageURL>',
+                    {},
+                    {
+                        CurrentPageURL: getRedactedUrl(),
+                    },
+                ),
+            },
+            { expl: _td('Your User Agent'), value: navigator.userAgent },
+            { expl: _td('Your device resolution'), value: resolution },
+        ];
+
+        const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+        Modal.createTrackedDialog('Analytics Details', '', ErrorDialog, {
+            title: _t('Analytics'),
+            description: <div className="mx_UserSettings_analyticsModal">
+                <div>
+                    { _t('The information being sent to us to help make Riot.im better includes:') }
+                </div>
+                <table>
+                    { rows.map((row) => <tr key={row[0]}>
+                        <td>{ _t(customVariables[row[0]].expl) }</td>
+                        { row[1] !== undefined && <td><code>{ row[1] }</code></td> }
+                    </tr>) }
+                    { otherVariables.map((item, index) =>
+                        <tr key={index}>
+                            <td>{ _t(item.expl) }</td>
+                            <td><code>{ item.value }</code></td>
+                        </tr>,
+                    ) }
+                </table>
+                <div>
+                    { _t('Where this page includes identifiable information, such as a room, '
+                        + 'user or group ID, that data is removed before being sent to the server.') }
+                </div>
+            </div>,
+        });
+    }
 }
 
 if (!global.mxAnalytics) {

src/BasePlatform.js

@@ -107,6 +107,9 @@ export default class BasePlatform {
 
     isElectron(): boolean { return false; }
 
+    setupScreenSharingForIframe() {
+    }
+
     /**
      * Restarts the application, without neccessarily reloading
      * any application code

src/CallHandler.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 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.
@@ -52,34 +53,37 @@ limitations under the License.
  */
 
 import MatrixClientPeg from './MatrixClientPeg';
-import UserSettingsStore from './UserSettingsStore';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import sdk from './index';
 import { _t } from './languageHandler';
 import Matrix from 'matrix-js-sdk';
 import dis from './dispatcher';
+import SdkConfig from './SdkConfig';
+import { showUnknownDeviceDialogForCalls } from './cryptodevices';
+import WidgetUtils from './utils/WidgetUtils';
+import WidgetEchoStore from './stores/WidgetEchoStore';
+import ScalarAuthClient from './ScalarAuthClient';
 
 global.mxCalls = {
     //room_id: MatrixCall
 };
-var calls = global.mxCalls;
-var ConferenceHandler = null;
+const calls = global.mxCalls;
+let ConferenceHandler = null;
 
-var audioPromises = {};
+const audioPromises = {};
 
 function play(audioId) {
     // TODO: Attach an invisible element for this instead
     // which listens?
-    var audio = document.getElementById(audioId);
+    const audio = document.getElementById(audioId);
     if (audio) {
         if (audioPromises[audioId]) {
             audioPromises[audioId] = audioPromises[audioId].then(()=>{
                 audio.load();
                 return audio.play();
             });
-        }
-        else {
+        } else {
             audioPromises[audioId] = audio.play();
         }
     }
@@ -88,31 +92,65 @@ function play(audioId) {
 function pause(audioId) {
     // TODO: Attach an invisible element for this instead
     // which listens?
-    var audio = document.getElementById(audioId);
+    const audio = document.getElementById(audioId);
     if (audio) {
         if (audioPromises[audioId]) {
             audioPromises[audioId] = audioPromises[audioId].then(()=>audio.pause());
-        }
-        else {
+        } else {
             // pause doesn't actually return a promise, but might as well do this for symmetry with play();
             audioPromises[audioId] = audio.pause();
         }
     }
 }
 
+function _reAttemptCall(call) {
+    if (call.direction === 'outbound') {
+        dis.dispatch({
+            action: 'place_call',
+            room_id: call.roomId,
+            type: call.type,
+        });
+    } else {
+        call.answer();
+    }
+}
+
 function _setCallListeners(call) {
     call.on("error", function(err) {
         console.error("Call error: %s", err);
         console.error(err.stack);
-        call.hangup();
-        _setCallState(undefined, call.roomId, "ended");
-    });
-    call.on('send_event_error', function(err) {
-        if (err.name === "UnknownDeviceError") {
-            dis.dispatch({
-                action: 'unknown_device_error',
-                err: err,
-                room: MatrixClientPeg.get().getRoom(call.roomId),
+        if (err.code === 'unknown_devices') {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+            Modal.createTrackedDialog('Call Failed', '', QuestionDialog, {
+                title: _t('Call Failed'),
+                description: _t(
+                    "There are unknown devices in this room: "+
+                    "if you proceed without verifying them, it will be "+
+                    "possible for someone to eavesdrop on your call.",
+                ),
+                button: _t('Review Devices'),
+                onFinished: function(confirmed) {
+                    if (confirmed) {
+                        const room = MatrixClientPeg.get().getRoom(call.roomId);
+                        showUnknownDeviceDialogForCalls(
+                            MatrixClientPeg.get(),
+                            room,
+                            () => {
+                                _reAttemptCall(call);
+                            },
+                            call.direction === 'outbound' ? _t("Call Anyway") : _t("Answer Anyway"),
+                            call.direction === 'outbound' ? _t("Call") : _t("Answer"),
+                        );
+                    }
+                },
+            });
+        } else {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+            Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
+                title: _t('Call Failed'),
+                description: err.message,
             });
         }
     });
@@ -125,38 +163,32 @@ function _setCallListeners(call) {
         if (newState === "ringing") {
             _setCallState(call, call.roomId, "ringing");
             pause("ringbackAudio");
-        }
-        else if (newState === "invite_sent") {
+        } else if (newState === "invite_sent") {
             _setCallState(call, call.roomId, "ringback");
             play("ringbackAudio");
-        }
-        else if (newState === "ended" && oldState === "connected") {
+        } else if (newState === "ended" && oldState === "connected") {
             _setCallState(undefined, call.roomId, "ended");
             pause("ringbackAudio");
             play("callendAudio");
-        }
-        else if (newState === "ended" && oldState === "invite_sent" &&
+        } else if (newState === "ended" && oldState === "invite_sent" &&
                 (call.hangupParty === "remote" ||
                 (call.hangupParty === "local" && call.hangupReason === "invite_timeout")
                 )) {
             _setCallState(call, call.roomId, "busy");
             pause("ringbackAudio");
             play("busyAudio");
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Call Handler', 'Call Timeout', ErrorDialog, {
                 title: _t('Call Timeout'),
                 description: _t('The remote side failed to pick up') + '.',
             });
-        }
-        else if (oldState === "invite_sent") {
+        } else if (oldState === "invite_sent") {
             _setCallState(call, call.roomId, "stop_ringback");
             pause("ringbackAudio");
-        }
-        else if (oldState === "ringing") {
+        } else if (oldState === "ringing") {
             _setCallState(call, call.roomId, "stop_ringing");
             pause("ringbackAudio");
-        }
-        else if (newState === "connected") {
+        } else if (newState === "connected") {
             _setCallState(call, call.roomId, "connected");
             pause("ringbackAudio");
         }
@@ -165,14 +197,13 @@ function _setCallListeners(call) {
 
 function _setCallState(call, roomId, status) {
     console.log(
-        "Call state in %s changed to %s (%s)", roomId, status, (call ? call.call_state : "-")
+        "Call state in %s changed to %s (%s)", roomId, status, (call ? call.call_state : "-"),
     );
     calls[roomId] = call;
 
     if (status === "ringing") {
         play("ringAudio");
-    }
-    else if (call && call.call_state === "ringing") {
+    } else if (call && call.call_state === "ringing") {
         pause("ringAudio");
     }
 
@@ -189,17 +220,14 @@ function _setCallState(call, roomId, status) {
 function _onAction(payload) {
     function placeCall(newCall) {
         _setCallListeners(newCall);
-        _setCallState(newCall, newCall.roomId, "ringback");
         if (payload.type === 'voice') {
             newCall.placeVoiceCall();
-        }
-        else if (payload.type === 'video') {
+        } else if (payload.type === 'video') {
             newCall.placeVideoCall(
                 payload.remote_element,
-                payload.local_element
+                payload.local_element,
             );
-        }
-        else if (payload.type === 'screensharing') {
+        } else if (payload.type === 'screensharing') {
             const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
             if (screenCapErrorString) {
                 _setCallState(undefined, newCall.roomId, "ended");
@@ -213,134 +241,86 @@ function _onAction(payload) {
             }
             newCall.placeScreenSharingCall(
                 payload.remote_element,
-                payload.local_element
+                payload.local_element,
             );
-        }
-        else {
+        } else {
             console.error("Unknown conf call type: %s", payload.type);
         }
     }
 
     switch (payload.action) {
         case 'place_call':
-            if (module.exports.getAnyActiveCall()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
-                    title: _t('Existing Call'),
-                    description: _t('You are already in a call.'),
-                });
-                return; // don't allow >1 call to be placed.
-            }
+            {
+                if (module.exports.getAnyActiveCall()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
+                        title: _t('Existing Call'),
+                        description: _t('You are already in a call.'),
+                    });
+                    return; // don't allow >1 call to be placed.
+                }
 
-            // if the runtime env doesn't do VoIP, whine.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-                return;
-            }
+                // if the runtime env doesn't do VoIP, whine.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                        title: _t('VoIP is unsupported'),
+                        description: _t('You cannot place VoIP calls in this browser.'),
+                    });
+                    return;
+                }
 
-            var room = MatrixClientPeg.get().getRoom(payload.room_id);
-            if (!room) {
-                console.error("Room %s does not exist.", payload.room_id);
-                return;
-            }
+                const room = MatrixClientPeg.get().getRoom(payload.room_id);
+                if (!room) {
+                    console.error("Room %s does not exist.", payload.room_id);
+                    return;
+                }
 
-            var members = room.getJoinedMembers();
-            if (members.length <= 1) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
-                    description: _t('You cannot place a call with yourself.'),
-                });
-                return;
-            }
-            else if (members.length === 2) {
-                console.log("Place %s call in %s", payload.type, payload.room_id);
-                const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id, {
-                    forceTURN: UserSettingsStore.getLocalSetting('webRtcForceTURN', false),
-                });
-                placeCall(call);
-            }
-            else { // > 2
-                dis.dispatch({
-                    action: "place_conference_call",
-                    room_id: payload.room_id,
-                    type: payload.type,
-                    remote_element: payload.remote_element,
-                    local_element: payload.local_element
-                });
+                const members = room.getJoinedMembers();
+                if (members.length <= 1) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
+                        description: _t('You cannot place a call with yourself.'),
+                    });
+                    return;
+                } else if (members.length === 2) {
+                    console.log("Place %s call in %s", payload.type, payload.room_id);
+                    const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
+                    placeCall(call);
+                } else { // > 2
+                    dis.dispatch({
+                        action: "place_conference_call",
+                        room_id: payload.room_id,
+                        type: payload.type,
+                        remote_element: payload.remote_element,
+                        local_element: payload.local_element,
+                    });
+                }
             }
             break;
         case 'place_conference_call':
             console.log("Place conference call in %s", payload.room_id);
-            if (!ConferenceHandler) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, {
-                    description: _t('Conference calls are not supported in this client'),
-                });
-            }
-            else if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-            }
-            else if (MatrixClientPeg.get().isRoomEncrypted(payload.room_id)) {
-                // Conference calls are implemented by sending the media to central
-                // server which combines the audio from all the participants together
-                // into a single stream. This is incompatible with end-to-end encryption
-                // because a central server would be decrypting the audio for each
-                // participant.
-                // Therefore we disable conference calling in E2E rooms.
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference calls unsupported e2e', ErrorDialog, {
-                    description: _t('Conference calls are not supported in encrypted rooms'),
-                });
-            }
-            else {
-                var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, {
-                    title: _t('Warning!'),
-                    description: _t('Conference calling is in development and may not be reliable.'),
-                    onFinished: confirm=>{
-                        if (confirm) {
-                            ConferenceHandler.createNewMatrixCall(
-                                MatrixClientPeg.get(), payload.room_id
-                            ).done(function(call) {
-                                placeCall(call);
-                            }, function(err) {
-                                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                                console.error("Conference call failed: " + err);
-                                Modal.createTrackedDialog('Call Handler', 'Failed to set up conference call', ErrorDialog, {
-                                    title: _t('Failed to set up conference call'),
-                                    description: _t('Conference call failed.') + ' ' + ((err && err.message) ? err.message : ''),
-                                });
-                            });
-                        }
-                    },
-                });
-            }
+            _startCallApp(payload.room_id, payload.type);
             break;
         case 'incoming_call':
-            if (module.exports.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.
-                // see https://github.com/vector-im/vector-web/issues/1964
-                return;
-            }
+            {
+                if (module.exports.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.
+                    // see https://github.com/vector-im/vector-web/issues/1964
+                    return;
+                }
 
-            // if the runtime env doesn't do VoIP, stop here.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                return;
-            }
+                // if the runtime env doesn't do VoIP, stop here.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    return;
+                }
 
-            var call = payload.call;
-            _setCallListeners(call);
-            _setCallState(call, call.roomId, "ringing");
+                const call = payload.call;
+                _setCallListeners(call);
+                _setCallState(call, call.roomId, "ringing");
+            }
             break;
         case 'hangup':
             if (!calls[payload.room_id]) {
@@ -357,20 +337,126 @@ function _onAction(payload) {
             _setCallState(calls[payload.room_id], payload.room_id, "connected");
             dis.dispatch({
                 action: "view_room",
-                room_id: payload.room_id
+                room_id: payload.room_id,
             });
             break;
     }
 }
+
+async function _startCallApp(roomId, type) {
+    // check for a working intgrations 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 scalarClient = new ScalarAuthClient();
+    let haveScalar = false;
+    try {
+        await scalarClient.connect();
+        haveScalar = scalarClient.hasCredentials();
+    } catch (e) {
+        // fall through
+    }
+    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 intgrations server is not available'),
+        });
+        return;
+    }
+
+    dis.dispatch({
+        action: 'appsDrawer',
+        show: true,
+    });
+
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    const currentRoomWidgets = WidgetUtils.getRoomWidgets(room);
+
+    if (WidgetEchoStore.roomHasPendingWidgetsOfType(roomId, currentRoomWidgets, 'jitsi')) {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        Modal.createTrackedDialog('Call already in progress', '', ErrorDialog, {
+            title: _t('Call in Progress'),
+            description: _t('A call is currently being placed!'),
+        });
+        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 +
+            " a conference call widget is already present",
+        );
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, {
+            title: _t('Call in Progress'),
+            description: _t('A call is already in progress!'),
+        });
+        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('&');
+
+    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 {
+        widgetUrl = SdkConfig.get().integrations_rest_url + '/widgets/jitsi.html?' + queryString;
+    }
+
+    const widgetData = { widgetSessionId };
+
+    const widgetId = (
+        'jitsi_' +
+        MatrixClientPeg.get().credentials.userId +
+        '_' +
+        Date.now()
+    );
+
+    WidgetUtils.setRoomWidget(roomId, widgetId, 'jitsi', widgetUrl, 'Jitsi', widgetData).then(() => {
+        console.log('Jitsi widget added');
+    }).catch((e) => {
+        if (e.errcode === 'M_FORBIDDEN') {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+            Modal.createTrackedDialog('Call Failed', '', ErrorDialog, {
+                title: _t('Permission Required'),
+                description: _t("You do not have permission to start a conference call in this room"),
+            });
+        }
+        console.error(e);
+    });
+}
+
 // FIXME: Nasty way of making sure we only register
 // with the dispatcher once
 if (!global.mxCallHandler) {
     dis.register(_onAction);
 }
 
-var callHandler = {
+const callHandler = {
     getCallForRoom: function(roomId) {
-        var call = module.exports.getCall(roomId);
+        let call = module.exports.getCall(roomId);
         if (call) return call;
 
         if (ConferenceHandler) {
@@ -386,8 +472,8 @@ var callHandler = {
     },
 
     getAnyActiveCall: function() {
-        var roomsWithCalls = Object.keys(calls);
-        for (var i = 0; i < roomsWithCalls.length; i++) {
+        const roomsWithCalls = Object.keys(calls);
+        for (let i = 0; i < roomsWithCalls.length; i++) {
             if (calls[roomsWithCalls[i]] &&
                     calls[roomsWithCalls[i]].call_state !== "ended") {
                 return calls[roomsWithCalls[i]];
@@ -396,13 +482,31 @@ var callHandler = {
         return null;
     },
 
+    /**
+     * The conference handler is a module that deals with implementation-specific
+     * multi-party calling implementations. Riot passes in its own which creates
+     * a one-to-one call with a freeswitch conference bridge. As of July 2018,
+     * the de-facto way of conference calling is a Jitsi widget, so this is
+     * deprecated. It reamins here for two reasons:
+     *  1. So Riot still supports joining existing freeswitch conference calls
+     *     (but doesn't support creating them). After a transition period, we can
+     *     remove support for joining them too.
+     *  2. To hide the one-to-one rooms that old-style conferencing creates. This
+     *     is much harder to remove: probably either we make Riot leave & forget these
+     *     rooms after we remove support for joining freeswitch conferences, or we
+     *     accept that random rooms with cryptic users will suddently appear for
+     *     anyone who's ever used conference calling, or we are stuck with this
+     *     code forever.
+     *
+     * @param {object} confHandler The conference handler object
+     */
     setConferenceHandler: function(confHandler) {
         ConferenceHandler = confHandler;
     },
 
     getConferenceHandler: function() {
         return ConferenceHandler;
-    }
+    },
 };
 // Only things in here which actually need to be global are the
 // calls list (done separately) and making sure we only register

src/CallMediaHandler.js

@@ -14,51 +14,59 @@
  limitations under the License.
 */
 
-import UserSettingsStore from './UserSettingsStore';
 import * as Matrix from 'matrix-js-sdk';
+import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
 
 export default {
     getDevices: function() {
         // Only needed for Electron atm, though should work in modern browsers
         // once permission has been granted to the webapp
         return navigator.mediaDevices.enumerateDevices().then(function(devices) {
-            const audioIn = [];
-            const videoIn = [];
+            const audiooutput = [];
+            const audioinput = [];
+            const videoinput = [];
 
             if (devices.some((device) => !device.label)) return false;
 
             devices.forEach((device) => {
                 switch (device.kind) {
-                    case 'audioinput': audioIn.push(device); break;
-                    case 'videoinput': videoIn.push(device); break;
+                    case 'audiooutput': audiooutput.push(device); break;
+                    case 'audioinput': audioinput.push(device); break;
+                    case 'videoinput': videoinput.push(device); break;
                 }
             });
 
             // console.log("Loaded WebRTC Devices", mediaDevices);
             return {
-                audioinput: audioIn,
-                videoinput: videoIn,
+                audiooutput,
+                audioinput,
+                videoinput,
             };
         }, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); });
     },
 
     loadDevices: function() {
-    //     this.getDevices().then((devices) => {
-        const localSettings = UserSettingsStore.getLocalSettings();
-    //         // if deviceId is not found, automatic fallback is in spec
-    //         // recall previously stored inputs if any
-        Matrix.setMatrixCallAudioInput(localSettings['webrtc_audioinput']);
-        Matrix.setMatrixCallVideoInput(localSettings['webrtc_videoinput']);
-        // });
+        const audioOutDeviceId = SettingsStore.getValue("webrtc_audiooutput");
+        const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
+        const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
+
+        Matrix.setMatrixCallAudioOutput(audioOutDeviceId);
+        Matrix.setMatrixCallAudioInput(audioDeviceId);
+        Matrix.setMatrixCallVideoInput(videoDeviceId);
+    },
+
+    setAudioOutput: function(deviceId) {
+        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
+        Matrix.setMatrixCallAudioOutput(deviceId);
     },
 
     setAudioInput: function(deviceId) {
-        UserSettingsStore.setLocalSetting('webrtc_audioinput', deviceId);
+        SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         Matrix.setMatrixCallAudioInput(deviceId);
     },
 
     setVideoInput: function(deviceId) {
-        UserSettingsStore.setLocalSetting('webrtc_videoinput', deviceId);
+        SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         Matrix.setMatrixCallVideoInput(deviceId);
     },
 };

src/ComposerHistoryManager.js

@@ -15,70 +15,73 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ContentState, convertToRaw, convertFromRaw} from 'draft-js';
-import * as RichText from './RichText';
-import Markdown from './Markdown';
+import { Value } from 'slate';
+
 import _clamp from 'lodash/clamp';
 
-type MessageFormat = 'html' | 'markdown';
+type MessageFormat = 'rich' | 'markdown';
 
 class HistoryItem {
 
-    // Keeping message for backwards-compatibility
-    message: string;
-    rawContentState: RawDraftContentState;
-    format: MessageFormat = 'html';
+    // 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(contentState: ?ContentState, format: ?MessageFormat) {
-        this.rawContentState = contentState ? convertToRaw(contentState) : null;
+    constructor(value: ?Value, format: ?MessageFormat) {
+        this.value = value;
         this.format = format;
     }
 
-    toContentState(outputFormat: MessageFormat): ContentState {
-        const contentState = convertFromRaw(this.rawContentState);
-        if (outputFormat === 'markdown') {
-            if (this.format === 'html') {
-                return ContentState.createFromText(RichText.stateToMarkdown(contentState));
-            }
-        } else {
-            if (this.format === 'markdown') {
-                return RichText.htmlToContentState(new Markdown(contentState.getPlainText()).toHTML());
-            }
-        }
-        // history item has format === outputFormat
-        return contentState;
+    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 ComposerHistoryManager {
     history: Array<HistoryItem> = [];
     prefix: string;
-    lastIndex: number = 0;
-    currentIndex: number = 0;
+    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++) {
-            this.history.push(
-                Object.assign(new HistoryItem(), JSON.parse(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(contentState: ContentState, format: MessageFormat) {
-        const item = new HistoryItem(contentState, format);
+    save(value: Value, format: MessageFormat) {
+        const item = new HistoryItem(value, format);
         this.history.push(item);
-        this.currentIndex = this.lastIndex + 1;
-        sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item));
+        this.currentIndex = this.history.length;
+        sessionStorage.setItem(`${this.prefix}[${this.lastIndex++}]`, JSON.stringify(item.toJSON()));
     }
 
-    getItem(offset: number, format: MessageFormat): ?ContentState {
-        this.currentIndex = _clamp(this.currentIndex + offset, 0, this.lastIndex - 1);
-        const item = this.history[this.currentIndex];
-        return item ? item.toContentState(format) : null;
+    getItem(offset: number): ?HistoryItem {
+        this.currentIndex = _clamp(this.currentIndex + offset, 0, this.history.length - 1);
+        return this.history[this.currentIndex];
     }
 }

src/ContentMessages.js

@@ -17,14 +17,14 @@ limitations under the License.
 'use strict';
 
 import Promise from 'bluebird';
-var extend = require('./extend');
-var dis = require('./dispatcher');
-var MatrixClientPeg = require('./MatrixClientPeg');
-var sdk = require('./index');
+const extend = require('./extend');
+const dis = require('./dispatcher');
+const MatrixClientPeg = require('./MatrixClientPeg');
+const sdk = require('./index');
 import { _t } from './languageHandler';
-var Modal = require('./Modal');
+const Modal = require('./Modal');
 
-var encrypt = require("browser-encrypt-attachment");
+const encrypt = require("browser-encrypt-attachment");
 
 // Polyfill for Canvas.toBlob API using Canvas.toDataURL
 require("blueimp-canvas-to-blob");
@@ -54,8 +54,8 @@ const MAX_HEIGHT = 600;
 function createThumbnail(element, inputWidth, inputHeight, mimeType) {
     const deferred = Promise.defer();
 
-    var targetWidth = inputWidth;
-    var targetHeight = inputHeight;
+    let targetWidth = inputWidth;
+    let targetHeight = inputHeight;
     if (targetHeight > MAX_HEIGHT) {
         targetWidth = Math.floor(targetWidth * (MAX_HEIGHT / targetHeight));
         targetHeight = MAX_HEIGHT;
@@ -81,7 +81,7 @@ function createThumbnail(element, inputWidth, inputHeight, mimeType) {
                 w: inputWidth,
                 h: inputHeight,
             },
-            thumbnail: thumbnail
+            thumbnail: thumbnail,
         });
     }, mimeType);
 
@@ -99,23 +99,17 @@ function loadImageElement(imageFile) {
 
     // Load the file into an html element
     const img = document.createElement("img");
+    const objectUrl = URL.createObjectURL(imageFile);
+    img.src = objectUrl;
 
-    const reader = new FileReader();
-    reader.onload = function(e) {
-        img.src = e.target.result;
-
-        // Once ready, create a thumbnail
-        img.onload = function() {
-            deferred.resolve(img);
-        };
-        img.onerror = function(e) {
-            deferred.reject(e);
-        };
+    // Once ready, create a thumbnail
+    img.onload = function() {
+        URL.revokeObjectURL(objectUrl);
+        deferred.resolve(img);
     };
-    reader.onerror = function(e) {
+    img.onerror = function(e) {
         deferred.reject(e);
     };
-    reader.readAsDataURL(imageFile);
 
     return deferred.promise;
 }
@@ -129,12 +123,12 @@ function loadImageElement(imageFile) {
  * @return {Promise} A promise that resolves with the attachment info.
  */
 function infoForImageFile(matrixClient, roomId, imageFile) {
-    var thumbnailType = "image/png";
+    let thumbnailType = "image/png";
     if (imageFile.type == "image/jpeg") {
         thumbnailType = "image/jpeg";
     }
 
-    var imageInfo;
+    let imageInfo;
     return loadImageElement(imageFile).then(function(img) {
         return createThumbnail(img, img.width, img.height, thumbnailType);
     }).then(function(result) {
@@ -191,7 +185,7 @@ function loadVideoElement(videoFile) {
 function infoForVideoFile(matrixClient, roomId, videoFile) {
     const thumbnailType = "image/jpeg";
 
-    var videoInfo;
+    let videoInfo;
     return loadVideoElement(videoFile).then(function(video) {
         return createThumbnail(video, video.videoWidth, video.videoHeight, thumbnailType);
     }).then(function(result) {
@@ -249,6 +243,7 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
             const blob = new Blob([encryptResult.data]);
             return matrixClient.uploadContent(blob, {
                 progressHandler: progressHandler,
+                includeFilename: false,
             }).then(function(url) {
                 // If the attachment is encrypted then bundle the URL along
                 // with the information needed to decrypt the attachment and
@@ -281,12 +276,19 @@ class ContentMessages {
         this.nextId = 0;
     }
 
+    sendStickerContentToRoom(url, roomId, info, text, 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;
+        });
+    }
+
     sendContentToRoom(file, roomId, matrixClient) {
         const content = {
             body: file.name || 'Attachment',
             info: {
                 size: file.size,
-            }
+            },
         };
 
         // if we have a mime type for the file, add it to the message metadata
@@ -297,10 +299,10 @@ class ContentMessages {
         const def = Promise.defer();
         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);
                 def.resolve();
-            }, error=>{
+            }, (error)=>{
                 console.error(error);
                 content.msgtype = 'm.file';
                 def.resolve();
@@ -310,10 +312,10 @@ class ContentMessages {
             def.resolve();
         } 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);
                 def.resolve();
-            }, error=>{
+            }, (error)=>{
                 content.msgtype = 'm.file';
                 def.resolve();
             });
@@ -331,7 +333,7 @@ class ContentMessages {
         this.inprogress.push(upload);
         dis.dispatch({action: 'upload_started'});
 
-        var error;
+        let error;
 
         function onProgress(ev) {
             upload.total = ev.total;
@@ -355,11 +357,11 @@ class ContentMessages {
         }, function(err) {
             error = err;
             if (!upload.canceled) {
-                var desc = _t('The file \'%(fileName)s\' failed to upload', {fileName: upload.fileName}) + '.';
+                let desc = _t('The file \'%(fileName)s\' failed to upload', {fileName: upload.fileName}) + '.';
                 if (err.http_status == 413) {
                     desc = _t('The file \'%(fileName)s\' exceeds this home server\'s size limit for uploads', {fileName: upload.fileName});
                 }
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createTrackedDialog('Upload failed', '', ErrorDialog, {
                     title: _t('Upload Failed'),
                     description: desc,
@@ -367,8 +369,8 @@ class ContentMessages {
             }
         }).finally(() => {
             const inprogressKeys = Object.keys(this.inprogress);
-            for (var i = 0; i < this.inprogress.length; ++i) {
-                var k = inprogressKeys[i];
+            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);
                     break;
@@ -376,8 +378,7 @@ class ContentMessages {
             }
             if (error) {
                 dis.dispatch({action: 'upload_failed', upload: upload});
-            }
-            else {
+            } else {
                 dis.dispatch({action: 'upload_finished', upload: upload});
             }
         });
@@ -389,9 +390,9 @@ class ContentMessages {
 
     cancelUpload(promise) {
         const inprogressKeys = Object.keys(this.inprogress);
-        var upload;
-        for (var i = 0; i < this.inprogress.length; ++i) {
-            var k = inprogressKeys[i];
+        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;

src/DateUtils.js

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
 import { _t } from './languageHandler';
 
 function getDaysArray() {
@@ -51,55 +50,89 @@ function pad(n) {
     return (n < 10 ? '0' : '') + n;
 }
 
-function twelveHourTime(date) {
+function twelveHourTime(date, showSeconds=false) {
     let hours = date.getHours() % 12;
     const minutes = pad(date.getMinutes());
     const ampm = date.getHours() >= 12 ? _t('PM') : _t('AM');
     hours = hours ? hours : 12; // convert 0 -> 12
+    if (showSeconds) {
+        const seconds = pad(date.getSeconds());
+        return `${hours}:${minutes}:${seconds}${ampm}`;
+    }
     return `${hours}:${minutes}${ampm}`;
 }
 
-module.exports = {
-    formatDate: function(date, showTwelveHour=false) {
-        const now = new Date();
-        const days = getDaysArray();
-        const months = getMonthsArray();
-        if (date.toDateString() === now.toDateString()) {
-            return this.formatTime(date, showTwelveHour);
-        } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            // TODO: use standard date localize function provided in counterpart
-            return _t('%(weekDayName)s %(time)s', {
-                weekDayName: days[date.getDay()],
-                time: this.formatTime(date, showTwelveHour),
-            });
-        } else if (now.getFullYear() === date.getFullYear()) {
-            // TODO: use standard date localize function provided in counterpart
-            return _t('%(weekDayName)s, %(monthName)s %(day)s %(time)s', {
-                weekDayName: days[date.getDay()],
-                monthName: months[date.getMonth()],
-                day: date.getDate(),
-                time: this.formatTime(date, showTwelveHour),
-            });
-        }
-        return this.formatFullDate(date, showTwelveHour);
-    },
-
-    formatFullDate: function(date, showTwelveHour=false) {
-        const days = getDaysArray();
-        const months = getMonthsArray();
-        return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
+export function formatDate(date, showTwelveHour=false) {
+    const now = new Date();
+    const days = getDaysArray();
+    const months = getMonthsArray();
+    if (date.toDateString() === now.toDateString()) {
+        return formatTime(date, showTwelveHour);
+    } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+        // TODO: use standard date localize function provided in counterpart
+        return _t('%(weekDayName)s %(time)s', {
+            weekDayName: days[date.getDay()],
+            time: formatTime(date, showTwelveHour),
+        });
+    } else if (now.getFullYear() === date.getFullYear()) {
+        // TODO: use standard date localize function provided in counterpart
+        return _t('%(weekDayName)s, %(monthName)s %(day)s %(time)s', {
             weekDayName: days[date.getDay()],
             monthName: months[date.getMonth()],
             day: date.getDate(),
-            fullYear: date.getFullYear(),
-            time: this.formatTime(date, showTwelveHour),
+            time: formatTime(date, showTwelveHour),
         });
-    },
+    }
+    return formatFullDate(date, showTwelveHour);
+}
 
-    formatTime: function(date, showTwelveHour=false) {
-        if (showTwelveHour) {
-            return twelveHourTime(date);
-        }
-        return pad(date.getHours()) + ':' + pad(date.getMinutes());
-    },
-};
+export function formatFullDateNoTime(date) {
+    const days = getDaysArray();
+    const months = getMonthsArray();
+    return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s', {
+        weekDayName: days[date.getDay()],
+        monthName: months[date.getMonth()],
+        day: date.getDate(),
+        fullYear: date.getFullYear(),
+    });
+}
+
+export function formatFullDate(date, showTwelveHour=false) {
+    const days = getDaysArray();
+    const months = getMonthsArray();
+    return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
+        weekDayName: days[date.getDay()],
+        monthName: months[date.getMonth()],
+        day: date.getDate(),
+        fullYear: date.getFullYear(),
+        time: formatFullTime(date, showTwelveHour),
+    });
+}
+
+export function formatFullTime(date, showTwelveHour=false) {
+    if (showTwelveHour) {
+        return twelveHourTime(date, true);
+    }
+    return pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds());
+}
+
+export function formatTime(date, showTwelveHour=false) {
+    if (showTwelveHour) {
+        return twelveHourTime(date);
+    }
+    return pad(date.getHours()) + ':' + pad(date.getMinutes());
+}
+
+const MILLIS_IN_DAY = 86400000;
+export function wantsDateSeparator(prevEventDate, nextEventDate) {
+    if (!nextEventDate || !prevEventDate) {
+        return false;
+    }
+    // Return early for events that are > 24h apart
+    if (Math.abs(prevEventDate.getTime() - nextEventDate.getTime()) > MILLIS_IN_DAY) {
+        return true;
+    }
+
+    // Compare weekdays
+    return prevEventDate.getDay() !== nextEventDate.getDay();
+}

src/DecryptionFailureTracker.js

@@ -0,0 +1,202 @@
+/*
+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.
+*/
+
+export class DecryptionFailure {
+    constructor(failedEventId, errorCode) {
+        this.failedEventId = failedEventId;
+        this.errorCode = errorCode;
+        this.ts = Date.now();
+    }
+}
+
+export class DecryptionFailureTracker {
+    // Array of items of type DecryptionFailure. Every `CHECK_INTERVAL_MS`, this list
+    // is checked for failures that happened > `GRACE_PERIOD_MS` ago. Those that did
+    // are accumulated in `failureCounts`.
+    failures = [];
+
+    // A histogram of the number of failures that will be tracked at the next tracking
+    // interval, split by failure error code.
+    failureCounts = {
+        // [errorCode]: 42
+    };
+
+    // Event IDs of failures that were tracked previously
+    trackedEventHashMap = {
+        // [eventId]: true
+    };
+
+    // Set to an interval ID when `start` is called
+    checkInterval = null;
+    trackInterval = null;
+
+    // Spread the load on `Analytics` by tracking at a low frequency, `TRACK_INTERVAL_MS`.
+    static TRACK_INTERVAL_MS = 60000;
+
+    // Call `checkFailures` every `CHECK_INTERVAL_MS`.
+    static CHECK_INTERVAL_MS = 5000;
+
+    // Give events a chance to be decrypted by waiting `GRACE_PERIOD_MS` before counting
+    // the failure in `failureCounts`.
+    static GRACE_PERIOD_MS = 60000;
+
+    /**
+     * Create a new DecryptionFailureTracker.
+     *
+     * Call `eventDecrypted(event, err)` on this instance when an event is decrypted.
+     *
+     * Call `start()` to start the tracker, and `stop()` to stop tracking.
+     *
+     * @param {function} fn The tracking function, which will be called when failures
+     * are tracked. The function should have a signature `(count, trackedErrorCode) => {...}`,
+     * where `count` is the number of failures and `errorCode` matches the `.code` of
+     * provided DecryptionError errors (by default, unless `errorCodeMapFn` is specified.
+     * @param {function?} errorCodeMapFn The function used to map error codes to the
+     * trackedErrorCode. If not provided, the `.code` of errors will be used.
+     */
+    constructor(fn, errorCodeMapFn) {
+        if (!fn || typeof fn !== 'function') {
+            throw new Error('DecryptionFailureTracker requires tracking function');
+        }
+
+        if (errorCodeMapFn && typeof errorCodeMapFn !== 'function') {
+            throw new Error('DecryptionFailureTracker second constructor argument should be a function');
+        }
+
+        this._trackDecryptionFailure = fn;
+        this._mapErrorCode = errorCodeMapFn;
+    }
+
+    // loadTrackedEventHashMap() {
+    //     this.trackedEventHashMap = JSON.parse(localStorage.getItem('mx-decryption-failure-event-id-hashes')) || {};
+    // }
+
+    // saveTrackedEventHashMap() {
+    //     localStorage.setItem('mx-decryption-failure-event-id-hashes', JSON.stringify(this.trackedEventHashMap));
+    // }
+
+    eventDecrypted(e, err) {
+        if (err) {
+            this.addDecryptionFailure(new DecryptionFailure(e.getId(), err.code));
+        } else {
+            // Could be an event in the failures, remove it
+            this.removeDecryptionFailuresForEvent(e);
+        }
+    }
+
+    addDecryptionFailure(failure) {
+        this.failures.push(failure);
+    }
+
+    removeDecryptionFailuresForEvent(e) {
+        this.failures = this.failures.filter((f) => f.failedEventId !== e.getId());
+    }
+
+    /**
+     * Start checking for and tracking failures.
+     */
+    start() {
+        this.checkInterval = setInterval(
+            () => this.checkFailures(Date.now()),
+            DecryptionFailureTracker.CHECK_INTERVAL_MS,
+        );
+
+        this.trackInterval = setInterval(
+            () => this.trackFailures(),
+            DecryptionFailureTracker.TRACK_INTERVAL_MS,
+        );
+    }
+
+    /**
+     * Clear state and stop checking for and tracking failures.
+     */
+    stop() {
+        clearInterval(this.checkInterval);
+        clearInterval(this.trackInterval);
+
+        this.failures = [];
+        this.failureCounts = {};
+    }
+
+    /**
+     * Mark failures that occured before nowTs - GRACE_PERIOD_MS as failures that should be
+     * tracked. Only mark one failure per event ID.
+     * @param {number} nowTs the timestamp that represents the time now.
+     */
+    checkFailures(nowTs) {
+        const failuresGivenGrace = [];
+        const failuresNotReady = [];
+        while (this.failures.length > 0) {
+            const f = this.failures.shift();
+            if (nowTs > f.ts + DecryptionFailureTracker.GRACE_PERIOD_MS) {
+                failuresGivenGrace.push(f);
+            } else {
+                failuresNotReady.push(f);
+            }
+        }
+        this.failures = failuresNotReady;
+
+        // Only track one failure per event
+        const dedupedFailuresMap = failuresGivenGrace.reduce(
+            (map, failure) => {
+                if (!this.trackedEventHashMap[failure.failedEventId]) {
+                    return map.set(failure.failedEventId, failure);
+                } else {
+                    return map;
+                }
+            },
+            // Use a map to preseve key ordering
+            new Map(),
+        );
+
+        const trackedEventIds = [...dedupedFailuresMap.keys()];
+
+        this.trackedEventHashMap = trackedEventIds.reduce(
+            (result, eventId) => ({...result, [eventId]: true}),
+            this.trackedEventHashMap,
+        );
+
+        // Commented out for now for expediency, we need to consider unbound nature of storing
+        // this in localStorage
+        // this.saveTrackedEventHashMap();
+
+        const dedupedFailures = dedupedFailuresMap.values();
+
+        this._aggregateFailures(dedupedFailures);
+    }
+
+    _aggregateFailures(failures) {
+        for (const failure of failures) {
+            const errorCode = failure.errorCode;
+            this.failureCounts[errorCode] = (this.failureCounts[errorCode] || 0) + 1;
+        }
+    }
+
+    /**
+     * If there are failures that should be tracked, call the given trackDecryptionFailure
+     * function with the number of failures that should be tracked.
+     */
+    trackFailures() {
+        for (const errorCode of Object.keys(this.failureCounts)) {
+            if (this.failureCounts[errorCode] > 0) {
+                const trackedErrorCode = this._mapErrorCode ? this._mapErrorCode(errorCode) : errorCode;
+
+                this._trackDecryptionFailure(this.failureCounts[errorCode], trackedErrorCode);
+                this.failureCounts[errorCode] = 0;
+            }
+        }
+    }
+}

src/FromWidgetPostMessageApi.js

@@ -0,0 +1,219 @@
+/*
+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 URL from 'url';
+import dis from './dispatcher';
+import IntegrationManager from './IntegrationManager';
+import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
+import ActiveWidgetStore from './stores/ActiveWidgetStore';
+
+const WIDGET_API_VERSION = '0.0.1'; // Current API version
+const SUPPORTED_WIDGET_API_VERSIONS = [
+    '0.0.1',
+];
+const INBOUND_API_NAME = 'fromWidget';
+
+// Listen for and handle incomming requests using the 'fromWidget' postMessage
+// API and initiate responses
+export default class FromWidgetPostMessageApi {
+    constructor() {
+        this.widgetMessagingEndpoints = [];
+
+        this.start = this.start.bind(this);
+        this.stop = this.stop.bind(this);
+        this.onPostMessage = this.onPostMessage.bind(this);
+    }
+
+    start() {
+        window.addEventListener('message', this.onPostMessage);
+    }
+
+    stop() {
+        window.removeEventListener('message', this.onPostMessage);
+    }
+
+    /**
+     * Register a widget endpoint for trusted postMessage communication
+     * @param {string} widgetId    Unique widget identifier
+     * @param {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
+     */
+    addEndpoint(widgetId, endpointUrl) {
+        const u = URL.parse(endpointUrl);
+        if (!u || !u.protocol || !u.host) {
+            console.warn('Add FromWidgetPostMessageApi endpoint - Invalid origin:', endpointUrl);
+            return;
+        }
+
+        const origin = u.protocol + '//' + u.host;
+        const endpoint = new WidgetMessagingEndpoint(widgetId, origin);
+        if (this.widgetMessagingEndpoints.some(function(ep) {
+            return (ep.widgetId === widgetId && ep.endpointUrl === endpointUrl);
+        })) {
+            // Message endpoint already registered
+            console.warn('Add FromWidgetPostMessageApi - Endpoint already registered');
+            return;
+        } else {
+            console.warn(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint);
+            this.widgetMessagingEndpoints.push(endpoint);
+        }
+    }
+
+    /**
+     * De-register a widget endpoint from trusted communication sources
+     * @param  {string} widgetId Unique widget identifier
+     * @param  {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
+     * @return {boolean} True if endpoint was successfully removed
+     */
+    removeEndpoint(widgetId, endpointUrl) {
+        const u = URL.parse(endpointUrl);
+        if (!u || !u.protocol || !u.host) {
+            console.warn('Remove widget messaging endpoint - Invalid origin');
+            return;
+        }
+
+        const origin = u.protocol + '//' + u.host;
+        if (this.widgetMessagingEndpoints && this.widgetMessagingEndpoints.length > 0) {
+            const length = this.widgetMessagingEndpoints.length;
+            this.widgetMessagingEndpoints = this.widgetMessagingEndpoints.
+                filter(function(endpoint) {
+                return (endpoint.widgetId != widgetId || endpoint.endpointUrl != origin);
+            });
+            return (length > this.widgetMessagingEndpoints.length);
+        }
+        return false;
+    }
+
+    /**
+     * Handle widget postMessage events
+     * Messages are only handled where a valid, registered messaging endpoints
+     * @param  {Event} event Event to handle
+     * @return {undefined}
+     */
+    onPostMessage(event) {
+        if (!event.origin) { // Handle chrome
+            event.origin = event.originalEvent.origin;
+        }
+
+        // Event origin is empty string if undefined
+        if (
+            event.origin.length === 0 ||
+            !this.trustedEndpoint(event.origin) ||
+            event.data.api !== INBOUND_API_NAME ||
+            !event.data.widgetId
+        ) {
+            return; // don't log this - debugging APIs like to spam postMessage which floods the log otherwise
+        }
+
+        // Although the requestId is required, we don't use it. We'll be nice and process the message
+        // if the property is missing, but with a warning for widget developers.
+        if (!event.data.requestId) {
+            console.warn("fromWidget action '" + event.data.action + "' does not have a requestId");
+        }
+
+        const action = event.data.action;
+        const widgetId = event.data.widgetId;
+        if (action === 'content_loaded') {
+            console.warn('Widget reported content loaded for', widgetId);
+            dis.dispatch({
+                action: 'widget_content_loaded',
+                widgetId: widgetId,
+            });
+            this.sendResponse(event, {success: true});
+        } else if (action === 'supported_api_versions') {
+            this.sendResponse(event, {
+                api: INBOUND_API_NAME,
+                supported_versions: SUPPORTED_WIDGET_API_VERSIONS,
+            });
+        } else if (action === 'api_version') {
+            this.sendResponse(event, {
+                api: INBOUND_API_NAME,
+                version: WIDGET_API_VERSION,
+            });
+        } else if (action === 'm.sticker') {
+            // console.warn('Got sticker message from widget', widgetId);
+            // NOTE -- The widgetData field is deprecated (in favour of the 'data' field) and will be removed eventually
+            const data = event.data.data || event.data.widgetData;
+            dis.dispatch({action: 'm.sticker', data: data, widgetId: event.data.widgetId});
+        } else if (action === 'integration_manager_open') {
+            // Close the stickerpicker
+            dis.dispatch({action: 'stickerpicker_close'});
+            // Open the integration manager
+            // NOTE -- The widgetData field is deprecated (in favour of the 'data' field) and will be removed eventually
+            const data = event.data.data || event.data.widgetData;
+            const integType = (data && data.integType) ? data.integType : null;
+            const integId = (data && data.integId) ? data.integId : null;
+            IntegrationManager.open(integType, integId);
+        } else if (action === 'set_always_on_screen') {
+            // This is a new message: there is no reason to support the deprecated widgetData here
+            const data = event.data.data;
+            const val = data.value;
+
+            if (ActiveWidgetStore.widgetHasCapability(widgetId, 'm.always_on_screen')) {
+                ActiveWidgetStore.setWidgetPersistence(widgetId, val);
+            }
+        } else {
+            console.warn('Widget postMessage event unhandled');
+            this.sendError(event, {message: 'The postMessage was unhandled'});
+        }
+    }
+
+    /**
+     * Check if message origin is registered as trusted
+     * @param  {string} origin PostMessage origin to check
+     * @return {boolean}       True if trusted
+     */
+    trustedEndpoint(origin) {
+        if (!origin) {
+            return false;
+        }
+
+        return this.widgetMessagingEndpoints.some((endpoint) => {
+            // TODO / FIXME -- Should this also check the widgetId?
+            return endpoint.endpointUrl === origin;
+        });
+    }
+
+    /**
+     * Send a postmessage response to a postMessage request
+     * @param  {Event} event  The original postMessage request event
+     * @param  {Object} res   Response data
+     */
+    sendResponse(event, res) {
+        const data = JSON.parse(JSON.stringify(event.data));
+        data.response = res;
+        event.source.postMessage(data, event.origin);
+    }
+
+    /**
+     * Send an error response to a postMessage request
+     * @param  {Event} event        The original postMessage request event
+     * @param  {string} msg         Error message
+     * @param  {Error} nestedError  Nested error event (optional)
+     */
+    sendError(event, msg, nestedError) {
+        console.error('Action:' + event.data.action + ' failed with message: ' + msg);
+        const data = JSON.parse(JSON.stringify(event.data));
+        data.response = {
+            error: {
+                message: msg,
+            },
+        };
+        if (nestedError) {
+            data.response.error._error = nestedError;
+        }
+        event.source.postMessage(data, event.origin);
+    }
+}

src/GroupAddressPicker.js

@@ -0,0 +1,158 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Modal from './Modal';
+import sdk from './';
+import MultiInviter from './utils/MultiInviter';
+import { _t } from './languageHandler';
+import MatrixClientPeg from './MatrixClientPeg';
+import GroupStore from './stores/GroupStore';
+
+export function showGroupInviteDialog(groupId) {
+    return new Promise((resolve, reject) => {
+        const description = <div>
+            <div>{ _t("Who would you like to add to this community?") }</div>
+            <div className="warning">
+                { _t(
+                    "Warning: any person you add to a community will be publicly "+
+                    "visible to anyone who knows the community ID",
+                ) }
+            </div>
+        </div>;
+
+        const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
+        Modal.createTrackedDialog('Group Invite', '', AddressPickerDialog, {
+            title: _t("Invite new community members"),
+            description: description,
+            placeholder: _t("Name or matrix ID"),
+            button: _t("Invite to Community"),
+            validAddressTypes: ['mx-user-id'],
+            onFinished: (success, addrs) => {
+                if (!success) return;
+
+                _onGroupInviteFinished(groupId, addrs).then(resolve, reject);
+            },
+        });
+    });
+}
+
+export function showGroupAddRoomDialog(groupId) {
+    return new Promise((resolve, reject) => {
+        let addRoomsPublicly = false;
+        const onCheckboxClicked = (e) => {
+            addRoomsPublicly = e.target.checked;
+        };
+        const description = <div>
+            <div>{ _t("Which rooms would you like to add to this community?") }</div>
+        </div>;
+
+        const checkboxContainer = <label className="mx_GroupAddressPicker_checkboxContainer">
+            <input type="checkbox" onClick={onCheckboxClicked} />
+            <div>
+                { _t("Show these rooms to non-members on the community page and room list?") }
+            </div>
+        </label>;
+
+        const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
+        Modal.createTrackedDialog('Add Rooms to Group', '', AddressPickerDialog, {
+            title: _t("Add rooms to the community"),
+            description: description,
+            extraNode: checkboxContainer,
+            placeholder: _t("Room name or alias"),
+            button: _t("Add to community"),
+            pickerType: 'room',
+            validAddressTypes: ['mx-room-id'],
+            onFinished: (success, addrs) => {
+                if (!success) return;
+
+                _onGroupAddRoomFinished(groupId, addrs, addRoomsPublicly).then(resolve, reject);
+            },
+        });
+    });
+}
+
+function _onGroupInviteFinished(groupId, addrs) {
+    const multiInviter = new MultiInviter(groupId);
+
+    const addrTexts = addrs.map((addr) => addr.address);
+
+    return multiInviter.invite(addrTexts).then((completionStates) => {
+        // Show user any errors
+        const errorList = [];
+        for (const addr of Object.keys(completionStates)) {
+            if (addrs[addr] === "error") {
+                errorList.push(addr);
+            }
+        }
+
+        if (errorList.length > 0) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to invite the following users to the group', '', ErrorDialog, {
+                title: _t("Failed to invite the following users to %(groupId)s:", {groupId: groupId}),
+                description: errorList.join(", "),
+            });
+        }
+    }).catch((err) => {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog('Failed to invite users to group', '', ErrorDialog, {
+            title: _t("Failed to invite users to community"),
+            description: _t("Failed to invite users to %(groupId)s", {groupId: groupId}),
+        });
+    });
+}
+
+function _onGroupAddRoomFinished(groupId, addrs, addRoomsPublicly) {
+    const matrixClient = MatrixClientPeg.get();
+    const errorList = [];
+    return Promise.all(addrs.map((addr) => {
+        return GroupStore
+            .addRoomToGroup(groupId, addr.address, addRoomsPublicly)
+            .catch(() => { errorList.push(addr.address); })
+            .then(() => {
+                const roomId = addr.address;
+                const room = matrixClient.getRoom(roomId);
+                // Can the user change related groups?
+                if (!room || !room.currentState.mayClientSendStateEvent("m.room.related_groups", matrixClient)) {
+                    return;
+                }
+                // Get the related groups
+                const relatedGroupsEvent = room.currentState.getStateEvents('m.room.related_groups', '');
+                const groups = relatedGroupsEvent ? relatedGroupsEvent.getContent().groups || [] : [];
+
+                // Add this group as related
+                if (!groups.includes(groupId)) {
+                    groups.push(groupId);
+                    return MatrixClientPeg.get().sendStateEvent(roomId, 'm.room.related_groups', {groups}, '');
+                }
+            }).reflect();
+    })).then(() => {
+        if (errorList.length === 0) {
+            return;
+        }
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog(
+            'Failed to add the following room to the group',
+            '', ErrorDialog,
+        {
+            title: _t(
+                "Failed to add the following rooms to %(groupId)s:",
+                {groupId},
+            ),
+            description: errorList.join(", "),
+        });
+    });
+}

src/HtmlUtils.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 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.
@@ -17,14 +17,17 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var sanitizeHtml = require('sanitize-html');
-var highlight = require('highlight.js');
-var linkifyMatrix = require('./linkify-matrix');
+import ReplyThread from "./components/views/elements/ReplyThread";
+
+const React = require('react');
+const sanitizeHtml = require('sanitize-html');
+const highlight = require('highlight.js');
+const linkifyMatrix = require('./linkify-matrix');
 import escape from 'lodash/escape';
 import emojione from 'emojione';
 import classNames from 'classnames';
 import MatrixClientPeg from './MatrixClientPeg';
+import url from 'url';
 
 emojione.imagePathSVG = 'emojione/svg/';
 // Store PNG path for displaying many flags at once (for increased performance over SVG)
@@ -32,10 +35,20 @@ emojione.imagePathPNG = 'emojione/png/';
 // Use SVGs for emojis
 emojione.imageType = 'svg';
 
-const SIMPLE_EMOJI_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
+// Anything outside the basic multilingual plane will be a surrogate pair
+const SURROGATE_PAIR_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
+// And there a bunch more symbol characters that emojione has within the
+// BMP, so this includes the ranges from 'letterlike symbols' to
+// 'miscellaneous symbols and arrows' which should catch all of them
+// (with plenty of false positives, but that's OK)
+const SYMBOL_PATTERN = /([\u2100-\u2bff])/;
+
+// And this is emojione's complete regex
 const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
+const PERMITTED_URL_SCHEMES = ['http', 'https', 'ftp', 'mailto', 'magnet'];
+
 /*
  * Return true if the given string contains emoji
  * Uses a much, much simpler regex than emojione's so will give false
@@ -44,16 +57,13 @@ const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
  * unicodeToImage uses this function.
  */
 export function containsEmoji(str) {
-    return SIMPLE_EMOJI_PATTERN.test(str);
+    return SURROGATE_PAIR_PATTERN.test(str) || SYMBOL_PATTERN.test(str);
 }
 
 /* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
  * because we want to include emoji shortnames in title text
  */
-export function unicodeToImage(str) {
-    // fast path
-    if (!containsEmoji(str)) return str;
-
+function unicodeToImage(str) {
     let replaceWith, unicode, alt, short, fname;
     const mappedUnicode = emojione.mapUnicodeToShort();
 
@@ -61,8 +71,7 @@ export function unicodeToImage(str) {
         if ( (typeof unicodeChar === 'undefined') || (unicodeChar === '') || (!(unicodeChar in emojione.jsEscapeMap)) ) {
             // if the unicodeChar doesnt exist just return the entire match
             return unicodeChar;
-        }
-        else {
+        } else {
             // get the unicode codepoint from the actual char
             unicode = emojione.jsEscapeMap[unicodeChar];
 
@@ -103,7 +112,6 @@ export function charactersToImageNode(alt, useSvg, ...unicode) {
     />;
 }
 
-
 export function processHtmlForSending(html: string): string {
     const contentDiv = document.createElement('div');
     contentDiv.innerHTML = html;
@@ -121,13 +129,6 @@ export function processHtmlForSending(html: string): string {
             if (i !== contentDiv.children.length - 1) {
                 contentHTML += '<br />';
             }
-        } else if (element.tagName.toLowerCase() === 'pre') {
-            // Replace "<br>\n" with "\n" within `<pre>` tags because the <br> is
-            // redundant. This is a workaround for a bug in draft-js-export-html:
-            //   https://github.com/sstur/draft-js-export-html/issues/62
-            contentHTML += '<pre>' +
-                element.innerHTML.replace(/<br>\n/g, '\n').trim() +
-                '</pre>';
         } else {
             const temp = document.createElement('div');
             temp.appendChild(element.cloneNode(true));
@@ -148,6 +149,118 @@ export function sanitizedHtmlNode(insaneHtml) {
     return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
 }
 
+/**
+ * Tests if a URL from an untrusted source may be safely put into the DOM
+ * The biggest threat here is javascript: URIs.
+ * Note that the HTML sanitiser library has its own internal logic for
+ * doing this, to which we pass the same list of schemes. This is used in
+ * other places we need to sanitise URLs.
+ * @return true if permitted, otherwise false
+ */
+export function isUrlPermitted(inputUrl) {
+    try {
+        const parsed = url.parse(inputUrl);
+        if (!parsed.protocol) return false;
+        // URL parser protocol includes the trailing colon
+        return PERMITTED_URL_SCHEMES.includes(parsed.protocol.slice(0, -1));
+    } catch (e) {
+        return false;
+    }
+}
+
+const transformTags = { // custom to matrix
+    // add blank targets to all hyperlinks except vector URLs
+    'a': function(tagName, attribs) {
+        if (attribs.href) {
+            attribs.target = '_blank'; // by default
+
+            let m;
+            // FIXME: horrible duplication with linkify-matrix
+            m = attribs.href.match(linkifyMatrix.VECTOR_URL_PATTERN);
+            if (m) {
+                attribs.href = m[1];
+                delete attribs.target;
+            } else {
+                m = attribs.href.match(linkifyMatrix.MATRIXTO_URL_PATTERN);
+                if (m) {
+                    const entity = m[1];
+                    switch (entity[0]) {
+                        case '@':
+                            attribs.href = '#/user/' + entity;
+                            break;
+                        case '+':
+                            attribs.href = '#/group/' + entity;
+                            break;
+                        case '#':
+                        case '!':
+                            attribs.href = '#/room/' + entity;
+                            break;
+                    }
+                    delete attribs.target;
+                }
+            }
+        }
+        attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
+        return { tagName, attribs };
+    },
+    'img': function(tagName, attribs) {
+        // Strip out imgs that aren't `mxc` here instead of using allowedSchemesByTag
+        // because transformTags is used _before_ we filter by allowedSchemesByTag and
+        // we don't want to allow images with `https?` `src`s.
+        if (!attribs.src || !attribs.src.startsWith('mxc://')) {
+            return { tagName, attribs: {}};
+        }
+        attribs.src = MatrixClientPeg.get().mxcUrlToHttp(
+            attribs.src,
+            attribs.width || 800,
+            attribs.height || 600,
+        );
+        return { tagName, attribs };
+    },
+    'code': function(tagName, attribs) {
+        if (typeof attribs.class !== 'undefined') {
+            // Filter out all classes other than ones starting with language- for syntax highlighting.
+            const classes = attribs.class.split(/\s+/).filter(function(cl) {
+                return cl.startsWith('language-');
+            });
+            attribs.class = classes.join(' ');
+        }
+        return { tagName, attribs };
+    },
+    '*': function(tagName, attribs) {
+        // Delete any style previously assigned, style is an allowedTag for font and span
+        // because attributes are stripped after transforming
+        delete attribs.style;
+
+        // Sanitise and transform data-mx-color and data-mx-bg-color to their CSS
+        // equivalents
+        const customCSSMapper = {
+            'data-mx-color': 'color',
+            'data-mx-bg-color': 'background-color',
+            // $customAttributeKey: $cssAttributeKey
+        };
+
+        let style = "";
+        Object.keys(customCSSMapper).forEach((customAttributeKey) => {
+            const cssAttributeKey = customCSSMapper[customAttributeKey];
+            const customAttributeValue = attribs[customAttributeKey];
+            if (customAttributeValue &&
+                typeof customAttributeValue === 'string' &&
+                COLOR_REGEX.test(customAttributeValue)
+            ) {
+                style += cssAttributeKey + ":" + customAttributeValue + ";";
+                delete attribs[customAttributeKey];
+            }
+        });
+
+        if (style) {
+            attribs.style = style;
+        }
+
+        return { tagName, attribs };
+    },
+};
+
 const sanitizeHtmlParams = {
     allowedTags: [
         'font', // custom to matrix for IRC-style font coloring
@@ -168,100 +281,17 @@ const sanitizeHtmlParams = {
     // Lots of these won't come up by default because we don't allow them
     selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
     // URL schemes we permit
-    allowedSchemes: ['http', 'https', 'ftp', 'mailto'],
+    allowedSchemes: PERMITTED_URL_SCHEMES,
 
     allowProtocolRelative: false,
+    transformTags,
+};
 
-    transformTags: { // custom to matrix
-        // add blank targets to all hyperlinks except vector URLs
-        'a': function(tagName, attribs) {
-            if (attribs.href) {
-                attribs.target = '_blank'; // by default
-
-                var m;
-                // FIXME: horrible duplication with linkify-matrix
-                m = attribs.href.match(linkifyMatrix.VECTOR_URL_PATTERN);
-                if (m) {
-                    attribs.href = m[1];
-                    delete attribs.target;
-                }
-                else {
-                    m = attribs.href.match(linkifyMatrix.MATRIXTO_URL_PATTERN);
-                    if (m) {
-                        var entity = m[1];
-                        if (entity[0] === '@') {
-                            attribs.href = '#/user/' + entity;
-                        }
-                        else if (entity[0] === '#' || entity[0] === '!') {
-                            attribs.href = '#/room/' + entity;
-                        }
-                        delete attribs.target;
-                    }
-                }
-            }
-            attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
-            return { tagName: tagName, attribs : attribs };
-        },
-        'img': function(tagName, attribs) {
-            // Strip out imgs that aren't `mxc` here instead of using allowedSchemesByTag
-            // because transformTags is used _before_ we filter by allowedSchemesByTag and
-            // we don't want to allow images with `https?` `src`s.
-            if (!attribs.src.startsWith('mxc://')) {
-                return { tagName, attribs: {}};
-            }
-            attribs.src = MatrixClientPeg.get().mxcUrlToHttp(
-                attribs.src,
-                attribs.width || 800,
-                attribs.height || 600,
-            );
-            return { tagName: tagName, attribs: attribs };
-        },
-        'code': function(tagName, attribs) {
-            if (typeof attribs.class !== 'undefined') {
-                // Filter out all classes other than ones starting with language- for syntax highlighting.
-                let classes = attribs.class.split(/\s+/).filter(function(cl) {
-                    return cl.startsWith('language-');
-                });
-                attribs.class = classes.join(' ');
-            }
-            return {
-                tagName: tagName,
-                attribs: attribs,
-            };
-        },
-        '*': function(tagName, attribs) {
-            // Delete any style previously assigned, style is an allowedTag for font and span
-            // because attributes are stripped after transforming
-            delete attribs.style;
-
-            // Sanitise and transform data-mx-color and data-mx-bg-color to their CSS
-            // equivalents
-            const customCSSMapper = {
-                'data-mx-color': 'color',
-                'data-mx-bg-color': 'background-color',
-                // $customAttributeKey: $cssAttributeKey
-            };
-
-            let style = "";
-            Object.keys(customCSSMapper).forEach((customAttributeKey) => {
-                const cssAttributeKey = customCSSMapper[customAttributeKey];
-                const customAttributeValue = attribs[customAttributeKey];
-                if (customAttributeValue &&
-                    typeof customAttributeValue === 'string' &&
-                    COLOR_REGEX.test(customAttributeValue)
-                ) {
-                    style += cssAttributeKey + ":" + customAttributeValue + ";";
-                    delete attribs[customAttributeKey];
-                }
-            });
-
-            if (style) {
-                attribs.style = style;
-            }
-
-            return { tagName: tagName, attribs: attribs };
-        },
-    },
+// this is the same as the above except with less rewriting
+const composerSanitizeHtmlParams = Object.assign({}, sanitizeHtmlParams);
+composerSanitizeHtmlParams.transformTags = {
+    'code': transformTags['code'],
+    '*': transformTags['*'],
 };
 
 class BaseHighlighter {
@@ -282,11 +312,11 @@ class BaseHighlighter {
      * TextHighlighter).
      */
     applyHighlights(safeSnippet, safeHighlights) {
-        var lastOffset = 0;
-        var offset;
-        var nodes = [];
+        let lastOffset = 0;
+        let offset;
+        let nodes = [];
 
-        var safeHighlight = safeHighlights[0];
+        const safeHighlight = safeHighlights[0];
         while ((offset = safeSnippet.toLowerCase().indexOf(safeHighlight.toLowerCase(), lastOffset)) >= 0) {
             // handle preamble
             if (offset > lastOffset) {
@@ -296,7 +326,7 @@ class BaseHighlighter {
 
             // do highlight. use the original string rather than safeHighlight
             // to preserve the original casing.
-            var endOffset = offset + safeHighlight.length;
+            const endOffset = offset + safeHighlight.length;
             nodes.push(this._processSnippet(safeSnippet.substring(offset, endOffset), true));
 
             lastOffset = endOffset;
@@ -314,8 +344,7 @@ class BaseHighlighter {
         if (safeHighlights[1]) {
             // recurse into this range to check for the next set of highlight matches
             return this.applyHighlights(safeSnippet, safeHighlights.slice(1));
-        }
-        else {
+        } else {
             // no more highlights to be found, just return the unhighlighted string
             return [this._processSnippet(safeSnippet, false)];
         }
@@ -336,7 +365,7 @@ class HtmlHighlighter extends BaseHighlighter {
             return snippet;
         }
 
-        var span = "<span class=\""+this.highlightClass+"\">"
+        let span = "<span class=\""+this.highlightClass+"\">"
             + snippet + "</span>";
 
         if (this.highlightLink) {
@@ -361,15 +390,15 @@ class TextHighlighter extends BaseHighlighter {
      * returns a React node
      */
     _processSnippet(snippet, highlight) {
-        var key = this._key++;
+        const key = this._key++;
 
-        var node =
-            <span key={key} className={highlight ? this.highlightClass : null }>
+        let node =
+            <span key={key} className={highlight ? this.highlightClass : null}>
                 { snippet }
             </span>;
 
         if (highlight && this.highlightLink) {
-            node = <a key={key} href={this.highlightLink}>{node}</a>;
+            node = <a key={key} href={this.highlightLink}>{ node }</a>;
         }
 
         return node;
@@ -377,54 +406,101 @@ class TextHighlighter extends BaseHighlighter {
 }
 
 
-    /* turn a matrix event body into html
-     *
-     * content: 'content' of the MatrixEvent
-     *
-     * highlights: optional list of words to highlight, ordered by longest word first
-     *
-     * opts.highlightLink: optional href to add to highlighted words
-     */
-export function bodyToHtml(content, highlights, opts) {
-    opts = opts || {};
+/* turn a matrix event body into html
+ *
+ * content: 'content' of the MatrixEvent
+ *
+ * highlights: optional list of words to highlight, ordered by longest word first
+ *
+ * opts.highlightLink: optional href to add to highlighted words
+ * opts.disableBigEmoji: optional argument to disable the big emoji class.
+ * 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.emojiOne: optional param to do emojiOne (default true)
+ * opts.forComposerQuote: optional param to lessen the url rewriting done by sanitization, for quoting into composer
+ */
+export function bodyToHtml(content, highlights, opts={}) {
+    const isHtmlMessage = content.format === "org.matrix.custom.html" && content.formatted_body;
 
-    var isHtml = (content.format === "org.matrix.custom.html");
-    let body = isHtml ? content.formatted_body : escape(content.body);
+    const doEmojiOne = opts.emojiOne === undefined ? true : opts.emojiOne;
+    let bodyHasEmoji = false;
 
-    var safeBody;
+    let sanitizeParams = sanitizeHtmlParams;
+    if (opts.forComposerQuote) {
+        sanitizeParams = composerSanitizeHtmlParams;
+    }
+
+    let strippedBody;
+    let safeBody;
+    let isDisplayedWithHtml;
     // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
     // to highlight HTML tags themselves.  However, this does mean that we don't highlight textnodes which
     // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
     // by an attempt to search for 'foobar'.  Then again, the search query probably wouldn't work either
     try {
         if (highlights && highlights.length > 0) {
-            var highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
-            var safeHighlights = highlights.map(function(highlight) {
-                return sanitizeHtml(highlight, sanitizeHtmlParams);
+            const highlighter = new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink);
+            const safeHighlights = highlights.map(function(highlight) {
+                return sanitizeHtml(highlight, sanitizeParams);
             });
-            // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeHtmlParams structure.
-            sanitizeHtmlParams.textFilter = function(safeText) {
+            // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
+            sanitizeParams.textFilter = function(safeText) {
                 return highlighter.applyHighlights(safeText, safeHighlights).join('');
             };
         }
-        safeBody = sanitizeHtml(body, sanitizeHtmlParams);
-        safeBody = unicodeToImage(safeBody);
-    }
-    finally {
-        delete sanitizeHtmlParams.textFilter;
+
+        let formattedBody = content.formatted_body;
+        if (opts.stripReplyFallback && formattedBody) formattedBody = ReplyThread.stripHTMLReply(formattedBody);
+        strippedBody = opts.stripReplyFallback ? ReplyThread.stripPlainReply(content.body) : content.body;
+
+        if (doEmojiOne) {
+            bodyHasEmoji = containsEmoji(isHtmlMessage ? formattedBody : content.body);
+        }
+
+        // Only generate safeBody if the message was sent as org.matrix.custom.html
+        if (isHtmlMessage) {
+            isDisplayedWithHtml = true;
+            safeBody = sanitizeHtml(formattedBody, sanitizeParams);
+        } else {
+            // ... or if there are emoji, which we insert as HTML alongside the
+            // escaped plaintext body.
+            if (bodyHasEmoji) {
+                isDisplayedWithHtml = true;
+                safeBody = sanitizeHtml(escape(strippedBody), sanitizeParams);
+            }
+        }
+
+        // An HTML message with emoji
+        //  or a plaintext message with emoji that was escaped and sanitized into
+        //  HTML.
+        if (bodyHasEmoji) {
+            safeBody = unicodeToImage(safeBody);
+        }
+    } finally {
+        delete sanitizeParams.textFilter;
     }
 
-    EMOJI_REGEX.lastIndex = 0;
-    let contentBodyTrimmed = content.body !== undefined ? content.body.trim() : '';
-    let match = EMOJI_REGEX.exec(contentBodyTrimmed);
-    let emojiBody = match && match[0] && match[0].length === contentBodyTrimmed.length;
+    if (opts.returnString) {
+        return isDisplayedWithHtml ? safeBody : strippedBody;
+    }
+
+    let emojiBody = false;
+    if (!opts.disableBigEmoji && bodyHasEmoji) {
+        EMOJI_REGEX.lastIndex = 0;
+        const contentBodyTrimmed = strippedBody !== undefined ? strippedBody.trim() : '';
+        const match = EMOJI_REGEX.exec(contentBodyTrimmed);
+        emojiBody = match && match[0] && match[0].length === contentBodyTrimmed.length;
+    }
 
     const className = classNames({
         'mx_EventTile_body': true,
         'mx_EventTile_bigEmoji': emojiBody,
-        'markdown-body': isHtml,
+        'markdown-body': isHtmlMessage,
     });
-    return <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" />;
+
+    return isDisplayedWithHtml ?
+        <span className={className} dangerouslySetInnerHTML={{ __html: safeBody }} dir="auto" /> :
+        <span className={className} dir="auto">{ strippedBody }</span>;
 }
 
 export function emojifyText(text) {

src/ImageUtils.js

@@ -42,13 +42,12 @@ module.exports = {
             // no scaling needs to be applied
             return fullHeight;
         }
-        var widthMulti = thumbWidth / fullWidth;
-        var heightMulti = thumbHeight / 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 {
+        } else {
             // height is the dominant dimension so scaling will be fixed on that
             return Math.floor(heightMulti * fullHeight);
         }

src/IntegrationManager.js

@@ -0,0 +1,73 @@
+/*
+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 Modal from './Modal';
+import sdk from './index';
+import SdkConfig from './SdkConfig';
+import ScalarMessaging from './ScalarMessaging';
+import ScalarAuthClient from './ScalarAuthClient';
+import RoomViewStore from './stores/RoomViewStore';
+
+if (!global.mxIntegrationManager) {
+  global.mxIntegrationManager = {};
+}
+
+export default class IntegrationManager {
+  static _init() {
+    if (!global.mxIntegrationManager.client || !global.mxIntegrationManager.connected) {
+      if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+        ScalarMessaging.startListening();
+        global.mxIntegrationManager.client = new ScalarAuthClient();
+
+        return global.mxIntegrationManager.client.connect().then(() => {
+          global.mxIntegrationManager.connected = true;
+        }).catch((e) => {
+          console.error("Failed to connect to integrations server", e);
+          global.mxIntegrationManager.error = e;
+        });
+      } else {
+        console.error('Invalid integration manager config', SdkConfig.get());
+      }
+    }
+  }
+
+  /**
+   * Launch the integrations manager on the stickers integration page
+   * @param  {string} integName integration / widget type
+   * @param  {string} integId   integration / widget ID
+   * @param  {function} onFinished Callback to invoke on integration manager close
+   */
+  static async open(integName, integId, onFinished) {
+    await IntegrationManager._init();
+    const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+    if (global.mxIntegrationManager.error ||
+        !(global.mxIntegrationManager.client && global.mxIntegrationManager.client.hasCredentials())) {
+      console.error("Scalar error", global.mxIntegrationManager);
+      return;
+    }
+    const integType = 'type_' + integName;
+    const src = (global.mxIntegrationManager.client && global.mxIntegrationManager.client.hasCredentials()) ?
+      global.mxIntegrationManager.client.getScalarInterfaceUrlForRoom(
+        {roomId: RoomViewStore.getRoomId()},
+        integType,
+        integId,
+      ) :
+      null;
+    Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+      src: src,
+      onFinished: onFinished,
+    }, "mx_IntegrationsManager");
+  }
+}

src/Keyboard.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +16,7 @@ limitations under the License.
 */
 
 /* a selection of key codes, as used in KeyboardEvent.keyCode */
-module.exports = {
+export const KeyCode = {
     BACKSPACE: 8,
     TAB: 9,
     ENTER: 13,
@@ -58,3 +59,21 @@ module.exports = {
     KEY_Y: 89,
     KEY_Z: 90,
 };
+
+export function isOnlyCtrlOrCmdKeyEvent(ev) {
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    if (isMac) {
+        return ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
+    } else {
+        return ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
+    }
+}
+
+export function isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) {
+    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    if (isMac) {
+        return ev.metaKey && !ev.altKey && !ev.ctrlKey;
+    } else {
+        return ev.ctrlKey && !ev.altKey && !ev.metaKey;
+    }
+}

src/Lifecycle.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,6 +30,7 @@ import DMRoomMap from './utils/DMRoomMap';
 import RtsClient from './RtsClient';
 import Modal from './Modal';
 import sdk from './index';
+import ActiveWidgetStore from './stores/ActiveWidgetStore';
 
 /**
  * Called at startup, to attempt to build a logged-in Matrix session. It tries
@@ -64,33 +66,33 @@ import sdk from './index';
  *     Resolves to `true` if we ended up starting a session, or `false` if we
  *     failed.
  */
-export function loadSession(opts) {
-    const fragmentQueryParams = opts.fragmentQueryParams || {};
-    let enableGuest = opts.enableGuest || false;
-    const guestHsUrl = opts.guestHsUrl;
-    const guestIsUrl = opts.guestIsUrl;
-    const defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
+export async function loadSession(opts) {
+    try {
+        let enableGuest = opts.enableGuest || false;
+        const guestHsUrl = opts.guestHsUrl;
+        const guestIsUrl = opts.guestIsUrl;
+        const fragmentQueryParams = opts.fragmentQueryParams || {};
+        const defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
 
-    if (!guestHsUrl) {
-        console.warn("Cannot enable guest access: can't determine HS URL to use");
-        enableGuest = false;
-    }
+        if (!guestHsUrl) {
+            console.warn("Cannot enable guest access: can't determine HS URL to use");
+            enableGuest = false;
+        }
 
-    if (enableGuest &&
-        fragmentQueryParams.guest_user_id &&
-        fragmentQueryParams.guest_access_token
-       ) {
-        console.log("Using guest access credentials");
-        return _doSetLoggedIn({
-            userId: fragmentQueryParams.guest_user_id,
-            accessToken: fragmentQueryParams.guest_access_token,
-            homeserverUrl: guestHsUrl,
-            identityServerUrl: guestIsUrl,
-            guest: true,
-        }, true).then(() => true);
-    }
-
-    return _restoreFromLocalStorage().then((success) => {
+        if (enableGuest &&
+            fragmentQueryParams.guest_user_id &&
+            fragmentQueryParams.guest_access_token
+           ) {
+            console.log("Using guest access credentials");
+            return _doSetLoggedIn({
+                userId: fragmentQueryParams.guest_user_id,
+                accessToken: fragmentQueryParams.guest_access_token,
+                homeserverUrl: guestHsUrl,
+                identityServerUrl: guestIsUrl,
+                guest: true,
+            }, true).then(() => true);
+        }
+        const success = await _restoreFromLocalStorage();
         if (success) {
             return true;
         }
@@ -101,7 +103,9 @@ export function loadSession(opts) {
 
         // fall back to login screen
         return false;
-    });
+    } catch (e) {
+        return _handleLoadSessionFailure(e);
+    }
 }
 
 /**
@@ -195,9 +199,9 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
 //      The plan is to gradually move the localStorage access done here into
 //      SessionStore to avoid bugs where the view becomes out-of-sync with
 //      localStorage (e.g. teamToken, isGuest etc.)
-function _restoreFromLocalStorage() {
+async function _restoreFromLocalStorage() {
     if (!localStorage) {
-        return Promise.resolve(false);
+        return false;
     }
     const hsUrl = localStorage.getItem("mx_hs_url");
     const isUrl = localStorage.getItem("mx_is_url") || 'https://matrix.org';
@@ -215,26 +219,23 @@ function _restoreFromLocalStorage() {
 
     if (accessToken && userId && hsUrl) {
         console.log(`Restoring session for ${userId}`);
-        try {
-            return _doSetLoggedIn({
-                userId: userId,
-                deviceId: deviceId,
-                accessToken: accessToken,
-                homeserverUrl: hsUrl,
-                identityServerUrl: isUrl,
-                guest: isGuest,
-            }, false).then(() => true);
-        } catch (e) {
-            return _handleRestoreFailure(e);
-        }
+        await _doSetLoggedIn({
+            userId: userId,
+            deviceId: deviceId,
+            accessToken: accessToken,
+            homeserverUrl: hsUrl,
+            identityServerUrl: isUrl,
+            guest: isGuest,
+        }, false);
+        return true;
     } else {
         console.log("No previous session found.");
-        return Promise.resolve(false);
+        return false;
     }
 }
 
-function _handleRestoreFailure(e) {
-    console.log("Unable to restore session", e);
+function _handleLoadSessionFailure(e) {
+    console.log("Unable to load session", e);
 
     const def = Promise.defer();
     const SessionRestoreErrorDialog =
@@ -255,7 +256,7 @@ function _handleRestoreFailure(e) {
         }
 
         // try, try again
-        return _restoreFromLocalStorage();
+        return loadSession();
     });
 }
 
@@ -362,7 +363,7 @@ async function _doSetLoggedIn(credentials, clearStorage) {
         dis.dispatch({action: 'on_logged_in', teamToken: teamToken});
     });
 
-    startMatrixClient();
+    await startMatrixClient();
     return MatrixClientPeg.get();
 }
 
@@ -385,10 +386,14 @@ function _persistCredentialsToLocalStorage(credentials) {
     console.log(`Session persisted for ${credentials.userId}`);
 }
 
+let _isLoggingOut = false;
+
 /**
  * Logs the current session out and transitions to the logged-out state
  */
 export function logout() {
+    if (!MatrixClientPeg.get()) return;
+
     if (MatrixClientPeg.get().isGuest()) {
         // logout doesn't work for guest sessions
         // Also we sometimes want to re-log in a guest session
@@ -402,6 +407,7 @@ export function logout() {
         return;
     }
 
+    _isLoggingOut = true;
     MatrixClientPeg.get().logout().then(onLoggedOut,
         (err) => {
             // Just throwing an error here is going to be very unhelpful
@@ -417,11 +423,15 @@ export function logout() {
     ).done();
 }
 
+export function isLoggingOut() {
+    return _isLoggingOut;
+}
+
 /**
  * Starts the matrix client and all other react-sdk services that
  * listen for events while a session is logged in.
  */
-function startMatrixClient() {
+async function startMatrixClient() {
     console.log(`Lifecycle: Starting MatrixClient`);
 
     // dispatch this before starting the matrix client: it's used
@@ -434,8 +444,13 @@ function startMatrixClient() {
     UserActivity.start();
     Presence.start();
     DMRoomMap.makeShared().start();
+    ActiveWidgetStore.start();
 
-    MatrixClientPeg.start();
+    await MatrixClientPeg.start();
+
+    // 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'});
 }
 
 /*
@@ -443,6 +458,7 @@ function startMatrixClient() {
  * storage. Used after a session has been logged out.
  */
 export function onLoggedOut() {
+    _isLoggingOut = false;
     stopMatrixClient();
     _clearStorage().done();
     dis.dispatch({action: 'on_logged_out'});
@@ -482,6 +498,7 @@ export function stopMatrixClient() {
     Notifier.stop();
     UserActivity.stop();
     Presence.stop();
+    ActiveWidgetStore.stop();
     if (DMRoomMap.shared()) DMRoomMap.shared().stop();
     const cli = MatrixClientPeg.get();
     if (cli) {

src/Login.js

@@ -59,8 +59,8 @@ export default class Login {
     }
 
     getFlows() {
-        var self = this;
-        var client = this._createTemporaryClient();
+        const self = this;
+        const client = this._createTemporaryClient();
         return client.loginFlows().then(function(result) {
             self._flows = result.flows;
             self._currentFlowIndex = 0;
@@ -77,12 +77,12 @@ export default class Login {
     getCurrentFlowStep() {
         // technically the flow can have multiple steps, but no one does this
         // for login so we can ignore it.
-        var flowStep = this._flows[this._currentFlowIndex];
+        const flowStep = this._flows[this._currentFlowIndex];
         return flowStep ? flowStep.type : null;
     }
 
     loginAsGuest() {
-        var client = this._createTemporaryClient();
+        const client = this._createTemporaryClient();
         return client.registerGuest({
             body: {
                 initial_device_display_name: this._defaultDeviceDisplayName,
@@ -94,7 +94,7 @@ export default class Login {
                 accessToken: creds.access_token,
                 homeserverUrl: this._hsUrl,
                 identityServerUrl: this._isUrl,
-                guest: true
+                guest: true,
             };
         }, (error) => {
             throw error;
@@ -143,36 +143,84 @@ export default class Login {
         Object.assign(loginParams, legacyParams);
 
         const client = this._createTemporaryClient();
+
+        const tryFallbackHs = (originalError) => {
+            const fbClient = Matrix.createClient({
+                baseUrl: self._fallbackHsUrl,
+                idBaseUrl: this._isUrl,
+            });
+
+            return fbClient.login('m.login.password', loginParams).then(function(data) {
+                return Promise.resolve({
+                    homeserverUrl: self._fallbackHsUrl,
+                    identityServerUrl: self._isUrl,
+                    userId: data.user_id,
+                    deviceId: data.device_id,
+                    accessToken: data.access_token,
+                });
+            }).catch((fallback_error) => {
+                console.log("fallback HS login failed", fallback_error);
+                // throw the original error
+                throw originalError;
+            });
+        };
+        const tryLowercaseUsername = (originalError) => {
+            const loginParamsLowercase = Object.assign({}, loginParams, {
+                user: username.toLowerCase(),
+                identifier: {
+                    user: username.toLowerCase(),
+                },
+            });
+            return client.login('m.login.password', loginParamsLowercase).then(function(data) {
+                return Promise.resolve({
+                    homeserverUrl: self._hsUrl,
+                    identityServerUrl: self._isUrl,
+                    userId: data.user_id,
+                    deviceId: data.device_id,
+                    accessToken: data.access_token,
+                });
+            }).catch((fallback_error) => {
+                console.log("Lowercase username login failed", fallback_error);
+                // throw the original error
+                throw originalError;
+            });
+        };
+
+        let originalLoginError = null;
         return client.login('m.login.password', loginParams).then(function(data) {
             return Promise.resolve({
                 homeserverUrl: self._hsUrl,
                 identityServerUrl: self._isUrl,
                 userId: data.user_id,
                 deviceId: data.device_id,
-                accessToken: data.access_token
+                accessToken: data.access_token,
             });
-        }, function(error) {
+        }).catch((error) => {
+            originalLoginError = error;
             if (error.httpStatus === 403) {
                 if (self._fallbackHsUrl) {
-                    var fbClient = Matrix.createClient({
-                        baseUrl: self._fallbackHsUrl,
-                        idBaseUrl: this._isUrl,
-                    });
-
-                    return fbClient.login('m.login.password', loginParams).then(function(data) {
-                        return Promise.resolve({
-                            homeserverUrl: self._fallbackHsUrl,
-                            identityServerUrl: self._isUrl,
-                            userId: data.user_id,
-                            deviceId: data.device_id,
-                            accessToken: data.access_token
-                        });
-                    }, function(fallback_error) {
-                        // throw the original error
-                        throw error;
-                    });
+                    return tryFallbackHs(originalLoginError);
                 }
             }
+            throw originalLoginError;
+        }).catch((error) => {
+            // We apparently squash case at login serverside these days:
+            // https://github.com/matrix-org/synapse/blob/1189be43a2479f5adf034613e8d10e3f4f452eb9/synapse/handlers/auth.py#L475
+            // so this wasn't needed after all. Keeping the code around in case the
+            // the situation changes...
+
+            /*
+            if (
+                error.httpStatus === 403 &&
+                loginParams.identifier.type === 'm.id.user' &&
+                username.search(/[A-Z]/) > -1
+            ) {
+                return tryLowercaseUsername(originalLoginError);
+            }
+            */
+            throw originalLoginError;
+        }).catch((error) => {
+            console.log("Login failed", error);
             throw error;
         });
     }

src/Markdown.js

@@ -48,32 +48,13 @@ function html_if_tag_allowed(node) {
  * or false if it is only a single line.
  */
 function is_multi_line(node) {
-    var par = node;
+    let par = node;
     while (par.parent) {
         par = par.parent;
     }
     return par.firstChild != par.lastChild;
 }
 
-import linkifyMatrix from './linkify-matrix';
-import * as linkify from 'linkifyjs';
-linkifyMatrix(linkify);
-
-// Thieved from draft-js-export-markdown
-function escapeMarkdown(s) {
-    return s.replace(/[*_`]/g, '\\$&');
-}
-
-// Replace URLs, room aliases and user IDs with md-escaped URLs
-function linkifyMarkdown(s) {
-    const links = linkify.find(s);
-    links.forEach((l) => {
-        // This may replace several instances of `l.value` at once, but that's OK
-        s = s.replace(l.value, escapeMarkdown(l.value));
-    });
-    return s;
-}
-
 /**
  * Class that wraps commonmark, adding the ability to see whether
  * a given message actually uses any markdown syntax or whether
@@ -81,7 +62,7 @@ function linkifyMarkdown(s) {
  */
 export default class Markdown {
     constructor(input) {
-        this.input = linkifyMarkdown(input);
+        this.input = input;
 
         const parser = new commonmark.Parser();
         this.parsed = parser.parse(this.input);
@@ -121,6 +102,16 @@ export default class Markdown {
             // (https://github.com/vector-im/riot-web/issues/3154)
             softbreak: '<br />',
         });
+
+        // Trying to strip out the wrapping <p/> causes a lot more complication
+        // than it's worth, i think.  For instance, this code will go and strip
+        // out any <p/> tag (no matter where it is in the tree) which doesn't
+        // contain \n's.
+        // On the flip side, <p/>s are quite opionated and restricted on where
+        // you can nest them.
+        //
+        // Let's try sending with <p/>s anyway for now, though.
+
         const real_paragraph = renderer.paragraph;
 
         renderer.paragraph = function(node, entering) {
@@ -134,16 +125,21 @@ export default class Markdown {
             }
         };
 
+
         renderer.html_inline = html_if_tag_allowed;
+
         renderer.html_block = function(node) {
+/*
             // as with `paragraph`, we only insert line breaks
             // if there are multiple lines in the markdown.
             const isMultiLine = is_multi_line(node);
-
             if (isMultiLine) this.cr();
+*/
             html_if_tag_allowed.call(this, node);
+/*
             if (isMultiLine) this.cr();
-        }
+*/
+        };
 
         return renderer.render(this.parsed);
     }
@@ -152,7 +148,10 @@ export default class Markdown {
      * Render the markdown message to plain text. That is, essentially
      * just remove any backslashes escaping what would otherwise be
      * markdown syntax
-     * (to fix https://github.com/vector-im/riot-web/issues/2870)
+     * (to fix https://github.com/vector-im/riot-web/issues/2870).
+     *
+     * N.B. this does **NOT** render arbitrary MD to plain text - only MD
+     * which has no formatting.  Otherwise it emits HTML(!).
      */
     toPlaintext() {
         const renderer = new commonmark.HtmlRenderer({safe: false});
@@ -175,10 +174,11 @@ export default class Markdown {
                 }
             }
         };
+
         renderer.html_block = function(node) {
             this.lit(node.literal);
             if (is_multi_line(node) && node.next) this.lit('\n\n');
-        }
+        };
 
         return renderer.render(this.parsed);
     }

src/MatrixClientPeg.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd.
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,6 +22,8 @@ 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 createMatrixClient from './utils/createMatrixClient';
+import SettingsStore from './settings/SettingsStore';
+import MatrixActionCreators from './actions/MatrixActionCreators';
 
 interface MatrixClientCreds {
     homeserverUrl: string,
@@ -67,6 +70,8 @@ class MatrixClientPeg {
 
     unset() {
         this.matrixClient = null;
+
+        MatrixActionCreators.stop();
     }
 
     /**
@@ -84,7 +89,7 @@ class MatrixClientPeg {
             if (this.matrixClient.initCrypto) {
                 await this.matrixClient.initCrypto();
             }
-        } catch(e) {
+        } catch (e) {
             // this can happen for a number of reasons, the most likely being
             // that the olm library was missing. It's not fatal.
             console.warn("Unable to initialise e2e: " + e);
@@ -94,11 +99,15 @@ class MatrixClientPeg {
         // the react sdk doesn't work without this, so don't allow
         opts.pendingEventOrdering = "detached";
 
+        if (SettingsStore.isFeatureEnabled('feature_lazyloading')) {
+            opts.lazyLoadMembers = true;
+        }
+
         try {
-            let promise = this.matrixClient.store.startup();
+            const promise = this.matrixClient.store.startup();
             console.log(`MatrixClientPeg: waiting for MatrixClient store to initialise`);
             await promise;
-        } catch(err) {
+        } catch (err) {
             // log any errors when starting up the database (if one exists)
             console.error(`Error starting matrixclient store: ${err}`);
         }
@@ -106,8 +115,11 @@ class MatrixClientPeg {
         // regardless of errors, start the client. If we did error out, we'll
         // just end up doing a full initial /sync.
 
+        // Connect the matrix client to the dispatcher
+        MatrixActionCreators.start(this.matrixClient);
+
         console.log(`MatrixClientPeg: really starting MatrixClient`);
-        this.get().startClient(opts);
+        await this.get().startClient(opts);
         console.log(`MatrixClientPeg: MatrixClient started`);
     }
 
@@ -136,13 +148,14 @@ class MatrixClientPeg {
     }
 
     _createClient(creds: MatrixClientCreds) {
-        var opts = {
+        const opts = {
             baseUrl: creds.homeserverUrl,
             idBaseUrl: creds.identityServerUrl,
             accessToken: creds.accessToken,
             userId: creds.userId,
             deviceId: creds.deviceId,
             timelineSupport: true,
+            forceTURN: SettingsStore.getValue('webRtcForceTURN', false),
         };
 
         this.matrixClient = createMatrixClient(opts, this.indexedDbWorkerScript);
@@ -153,8 +166,8 @@ class MatrixClientPeg {
 
         this.matrixClient.setGuest(Boolean(creds.guest));
 
-        var notifTimelineSet = new EventTimelineSet(null, {
-            timelineSupport: true
+        const notifTimelineSet = new EventTimelineSet(null, {
+            timelineSupport: true,
         });
         // XXX: what is our initial pagination token?! it somehow needs to be synchronised with /sync.
         notifTimelineSet.getLiveTimeline().setPaginationToken("", EventTimeline.BACKWARDS);
@@ -165,4 +178,4 @@ class MatrixClientPeg {
 if (!global.mxMatrixClientPeg) {
     global.mxMatrixClientPeg = new MatrixClientPeg();
 }
-module.exports = global.mxMatrixClientPeg;
+export default global.mxMatrixClientPeg;

src/Modal.js

@@ -17,10 +17,12 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
+const React = require('react');
+const ReactDOM = require('react-dom');
+import PropTypes from 'prop-types';
 import Analytics from './Analytics';
 import sdk from './index';
+import dis from './dispatcher';
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 
@@ -33,7 +35,7 @@ const AsyncWrapper = React.createClass({
         /** A function which takes a 'callback' argument which it will call
          * with the real component once it loads.
          */
-        loader: React.PropTypes.func.isRequired,
+        loader: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -79,7 +81,11 @@ class ModalManager {
     constructor() {
         this._counter = 0;
 
-        /** list of the modals we have stacked up, with the most recent at [0] */
+        // The modal to prioritise over all others. If this is set, only show
+        // this modal. Remove all other modals from the stack when this modal
+        // is closed.
+        this._priorityModal = null;
+        // A list of the modals we have stacked up, with the most recent at [0]
         this._modals = [
             /* {
                elem: React component for this dialog
@@ -103,18 +109,18 @@ class ModalManager {
         return container;
     }
 
-    createTrackedDialog(analyticsAction, analyticsInfo, Element, props, className) {
+    createTrackedDialog(analyticsAction, analyticsInfo, ...rest) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialog(Element, props, className);
+        return this.createDialog(...rest);
     }
 
-    createDialog(Element, props, className) {
-        return this.createDialogAsync((cb) => {cb(Element);}, props, className);
+    createDialog(Element, ...rest) {
+        return this.createDialogAsync((cb) => {cb(Element);}, ...rest);
     }
 
-    createTrackedDialogAsync(analyticsAction, analyticsInfo, loader, props, className) {
+    createTrackedDialogAsync(analyticsAction, analyticsInfo, ...rest) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialogAsync(loader, props, className);
+        return this.createDialogAsync(...rest);
     }
 
     /**
@@ -135,20 +141,33 @@ class ModalManager {
      *    component. (We will also pass an 'onFinished' property.)
      *
      * @param {String} className   CSS class to apply to the modal wrapper
+     *
+     * @param {boolean} isPriorityModal if true, this modal will be displayed regardless
+     *                                  of other modals that are currently in the stack.
+     *                                  Also, when closed, all modals will be removed
+     *                                  from the stack.
      */
-    createDialogAsync(loader, props, className) {
-        var self = this;
+    createDialogAsync(loader, props, className, isPriorityModal) {
+        const self = this;
         const modal = {};
 
         // never call this from onFinished() otherwise it will loop
         //
         // nb explicit function() rather than arrow function, to get `arguments`
-        var closeDialog = function() {
+        const closeDialog = function() {
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
-            var i = self._modals.indexOf(modal);
+            const i = self._modals.indexOf(modal);
             if (i >= 0) {
                 self._modals.splice(i, 1);
             }
+
+            if (self._priorityModal === modal) {
+                self._priorityModal = null;
+
+                // XXX: This is destructive
+                self._modals = [];
+            }
+
             self._reRender();
         };
 
@@ -160,12 +179,17 @@ class ModalManager {
         // property set here so you can't close the dialog from a button click!
         modal.elem = (
             <AsyncWrapper key={modalCount} loader={loader} {...props}
-                onFinished={closeDialog}/>
+                onFinished={closeDialog} />
         );
         modal.onFinished = props ? props.onFinished : null;
         modal.className = className;
 
-        this._modals.unshift(modal);
+        if (isPriorityModal) {
+            // XXX: This is destructive
+            this._priorityModal = modal;
+        } else {
+            this._modals.unshift(modal);
+        }
 
         this._reRender();
         return {close: closeDialog};
@@ -186,18 +210,30 @@ class ModalManager {
     }
 
     _reRender() {
-        if (this._modals.length == 0) {
+        if (this._modals.length == 0 && !this._priorityModal) {
+            // If there is no modal to render, make all of Riot available
+            // to screen reader users again
+            dis.dispatch({
+                action: 'aria_unhide_main_app',
+            });
             ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
             return;
         }
 
-        var modal = this._modals[0];
-        var dialog = (
-            <div className={"mx_Dialog_wrapper " + (modal.className ? modal.className : '') }>
+        // Hide the content outside the modal to screen reader users
+        // so they won't be able to navigate into it and act on it using
+        // screen reader specific features
+        dis.dispatch({
+            action: 'aria_hide_main_app',
+        });
+
+        const modal = this._priorityModal ? this._priorityModal : this._modals[0];
+        const dialog = (
+            <div className={"mx_Dialog_wrapper " + (modal.className ? modal.className : '')}>
                 <div className="mx_Dialog">
-                    {modal.elem}
+                    { modal.elem }
                 </div>
-                <div className="mx_Dialog_background" onClick={ this.closeAll }></div>
+                <div className="mx_Dialog_background" onClick={this.closeAll}></div>
             </div>
         );
 

src/Notifier.js

@@ -25,6 +25,7 @@ import dis from './dispatcher';
 import sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
+import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
 
 /*
  * Dispatches:
@@ -80,10 +81,11 @@ const Notifier = {
             if (ev.getContent().body) msg = ev.getContent().body;
         }
 
-        const avatarUrl = ev.sender ? Avatar.avatarUrlForMember(
-            ev.sender, 40, 40, 'crop'
-        ) : null;
+        if (!this.isBodyEnabled()) {
+            msg = '';
+        }
 
+        const avatarUrl = ev.sender ? Avatar.avatarUrlForMember(ev.sender, 40, 40, 'crop') : null;
         const notif = plaf.displayNotification(title, msg, avatarUrl, room);
 
         // if displayNotification returns non-null,  the platform supports
@@ -133,14 +135,16 @@ const Notifier = {
         const plaf = PlatformPeg.get();
         if (!plaf) return;
 
+        // Dev note: We don't set the "notificationsEnabled" setting to true here because it is a
+        // calculated value. It is determined based upon whether or not the master rule is enabled
+        // and other flags. Setting it here would cause a circular reference.
+
         Analytics.trackEvent('Notifier', 'Set Enabled', enable);
 
         // make sure that we persist the current setting audio_enabled setting
         // before changing anything
-        if (global.localStorage) {
-            if (global.localStorage.getItem('audio_notifications_enabled') === null) {
-                this.setAudioEnabled(this.isEnabled());
-            }
+        if (SettingsStore.isLevelSupported(SettingLevel.DEVICE)) {
+            SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, this.isEnabled());
         }
 
         if (enable) {
@@ -148,6 +152,7 @@ const Notifier = {
             plaf.requestNotificationPermission().done((result) => {
                 if (result !== 'granted') {
                     // The permission request was dismissed or denied
+                    // TODO: Support alternative branding in messaging
                     const description = result === 'denied'
                         ? _t('Riot does not have permission to send you notifications - please check your browser settings')
                         : _t('Riot was not given permission to send notifications - please try again');
@@ -159,55 +164,42 @@ const Notifier = {
                     return;
                 }
 
-                if (global.localStorage) {
-                    global.localStorage.setItem('notifications_enabled', 'true');
-                }
-
                 if (callback) callback();
                 dis.dispatch({
                     action: "notifier_enabled",
                     value: true,
                 });
             });
-            // clear the notifications_hidden flag, so that if notifications are
-            // disabled again in the future, we will show the banner again.
-            this.setToolbarHidden(false);
         } else {
-            if (!global.localStorage) return;
-            global.localStorage.setItem('notifications_enabled', 'false');
             dis.dispatch({
                 action: "notifier_enabled",
                 value: false,
             });
         }
+        // set the notifications_hidden flag, as the user has knowingly interacted
+        // with the setting we shouldn't nag them any further
+        this.setToolbarHidden(true);
     },
 
     isEnabled: function() {
+        return this.isPossible() && SettingsStore.getValue("notificationsEnabled");
+    },
+
+    isPossible: function() {
         const plaf = PlatformPeg.get();
         if (!plaf) return false;
         if (!plaf.supportsNotifications()) return false;
         if (!plaf.maySendNotifications()) return false;
 
-        if (!global.localStorage) return true;
-
-        const enabled = global.localStorage.getItem('notifications_enabled');
-        if (enabled === null) return true;
-        return enabled === 'true';
+        return true; // possible, but not necessarily enabled
     },
 
-    setAudioEnabled: function(enable) {
-        if (!global.localStorage) return;
-        global.localStorage.setItem('audio_notifications_enabled',
-            enable ? 'true' : 'false');
+    isBodyEnabled: function() {
+        return this.isEnabled() && SettingsStore.getValue("notificationBodyEnabled");
     },
 
-    isAudioEnabled: function(enable) {
-        if (!global.localStorage) return true;
-        const enabled = global.localStorage.getItem(
-            'audio_notifications_enabled');
-        // default to true if the popups are enabled
-        if (enabled === null) return this.isEnabled();
-        return enabled === 'true';
+    isAudioEnabled: function() {
+        return this.isEnabled() && SettingsStore.getValue("audioNotificationsEnabled");
     },
 
     setToolbarHidden: function(hidden, persistent = true) {
@@ -224,16 +216,14 @@ const Notifier = {
 
         // update the info to localStorage for persistent settings
         if (persistent && global.localStorage) {
-            global.localStorage.setItem('notifications_hidden', hidden);
+            global.localStorage.setItem("notifications_hidden", hidden);
         }
     },
 
     isToolbarHidden: function() {
         // Check localStorage for any such meta data
         if (global.localStorage) {
-            if (global.localStorage.getItem('notifications_hidden') === 'true') {
-                return true;
-            }
+            return global.localStorage.getItem("notifications_hidden") === "true";
         }
 
         return this.toolbarHidden;
@@ -266,6 +256,10 @@ const Notifier = {
     },
 
     onEventDecrypted: function(ev) {
+        // 'decrypted' means the decryption process has finished: it may have failed,
+        // in which case it might decrypt soon if the keys arrive
+        if (ev.isDecryptionFailure()) return;
+
         const idx = this.pendingEncryptedEventIds.indexOf(ev.getId());
         if (idx === -1) return;
 
@@ -303,7 +297,7 @@ const Notifier = {
                 this._playAudioNotification(ev, room);
             }
         }
-    }
+    },
 };
 
 if (!global.mxNotifier) {

src/Presence.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -14,12 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var MatrixClientPeg = require("./MatrixClientPeg");
-var dis = require("./dispatcher");
+const MatrixClientPeg = require("./MatrixClientPeg");
+const dis = require("./dispatcher");
 
  // Time in ms after that a user is considered as unavailable/away
-var UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
-var PRESENCE_STATES = ["online", "offline", "unavailable"];
+const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
+const PRESENCE_STATES = ["online", "offline", "unavailable"];
 
 class Presence {
 
@@ -31,7 +32,7 @@ class Presence {
         this.running = true;
         if (undefined === this.state) {
             this._resetTimer();
-            this.dispatcherRef = dis.register(this._onUserActivity.bind(this));
+            this.dispatcherRef = dis.register(this._onAction.bind(this));
         }
     }
 
@@ -71,14 +72,14 @@ class Presence {
         if (!this.running) {
             return;
         }
-        var old_state = this.state;
+        const old_state = this.state;
         this.state = newState;
 
         if (MatrixClientPeg.get().isGuest()) {
             return; // don't try to set presence when a guest; it won't work.
         }
 
-        var self = this;
+        const self = this;
         MatrixClientPeg.get().setPresence(this.state).done(function() {
             console.log("Presence: %s", newState);
         }, function(err) {
@@ -95,8 +96,10 @@ class Presence {
         this.setState("unavailable");
     }
 
-    _onUserActivity() {
-        this._resetTimer();
+    _onAction(payload) {
+        if (payload.action === "user_activity") {
+            this._resetTimer();
+        }
     }
 
     /**
@@ -104,7 +107,7 @@ class Presence {
      * @private
      */
     _resetTimer() {
-        var self = this;
+        const self = this;
         this.setState("online");
         // Re-arm the timer
         clearTimeout(this.timer);

src/Registration.js

@@ -0,0 +1,92 @@
+/*
+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.
+*/
+
+/**
+ * Utility code for registering with a homeserver
+ * Note that this is currently *not* used by the actual
+ * registration code.
+ */
+
+import dis from './dispatcher';
+import sdk from './index';
+import MatrixClientPeg from './MatrixClientPeg';
+import Modal from './Modal';
+import { _t } from './languageHandler';
+
+/**
+ * Starts either the ILAG or full registration flow, depending
+ * on what the HS supports
+ *
+ * @param {object} options
+ * @param {bool} options.go_home_on_cancel If true, goes to
+ *     the hame page if the user cancels the action
+ */
+export async function startAnyRegistrationFlow(options) {
+    if (options === undefined) options = {};
+    const flows = await _getRegistrationFlows();
+    // look for an ILAG compatible flow. We define this as one
+    // which has only dummy or recaptcha flows. In practice it
+    // would support any stage InteractiveAuth supports, just not
+    // ones like email & msisdn which require the user to supply
+    // the relevant details in advance. We err on the side of
+    // caution though.
+    const hasIlagFlow = flows.some((flow) => {
+        return flow.stages.every((stage) => {
+            return ['m.login.dummy', 'm.login.recaptcha'].includes(stage);
+        });
+    });
+
+    if (hasIlagFlow) {
+        dis.dispatch({
+            action: 'view_set_mxid',
+            go_home_on_cancel: options.go_home_on_cancel,
+        });
+    } 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"),
+            onFinished: (proceed) => {
+                if (proceed) {
+                    dis.dispatch({action: 'start_registration'});
+                } else if (options.go_home_on_cancel) {
+                    dis.dispatch({action: 'view_home_page'});
+                }
+            },
+        });
+    }
+}
+
+async function _getRegistrationFlows() {
+    try {
+        await MatrixClientPeg.get().register(
+            null,
+            null,
+            undefined,
+            {},
+            {},
+        );
+        console.log("Register request succeeded when it should have returned 401!");
+    } catch (e) {
+        if (e.httpStatus === 401) {
+            return e.data.flows;
+        }
+        throw e;
+    }
+    throw new Error("Register request succeeded when it should have returned 401!");
+}
+

src/Resend.js

@@ -44,13 +44,6 @@ module.exports = {
             // 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+')');
-            if (err.name === "UnknownDeviceError") {
-                dis.dispatch({
-                    action: 'unknown_device_error',
-                    err: err,
-                    room: room,
-                });
-            }
 
             dis.dispatch({
                 action: 'message_send_failed',
@@ -60,9 +53,5 @@ module.exports = {
     },
     removeFromQueue: function(event) {
         MatrixClientPeg.get().cancelPendingEvent(event);
-        dis.dispatch({
-            action: 'message_send_cancelled',
-            event: event,
-        });
     },
 };

src/RichText.js

@@ -1,301 +1,40 @@
-import React from 'react';
-import {
-    Editor,
-    EditorState,
-    Modifier,
-    ContentState,
-    ContentBlock,
-    convertFromHTML,
-    DefaultDraftBlockRenderMap,
-    DefaultDraftInlineStyle,
-    CompositeDecorator,
-    SelectionState,
-    Entity,
-} from 'draft-js';
-import * as sdk from './index';
+/*
+Copyright 2015 - 2017 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import * as emojione from 'emojione';
-import {stateToHTML} from 'draft-js-export-html';
-import {SelectionRange} from "./autocomplete/Autocompleter";
-import {stateToMarkdown as __stateToMarkdown} from 'draft-js-export-markdown';
 
-const MARKDOWN_REGEX = {
-    LINK: /(?:\[([^\]]+)\]\(([^\)]+)\))|\<(\w+:\/\/[^\>]+)\>/g,
-    ITALIC: /([\*_])([\w\s]+?)\1/g,
-    BOLD: /([\*_])\1([\w\s]+?)\1\1/g,
-    HR: /(\n|^)((-|\*|_) *){3,}(\n|$)/g,
-    CODE: /`[^`]*`/g,
-    STRIKETHROUGH: /~{2}[^~]*~{2}/g,
-};
 
-const USERNAME_REGEX = /@\S+:\S+/g;
-const ROOM_REGEX = /#\S+:\S+/g;
-const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp, 'g');
+export function unicodeToEmojiUri(str) {
+    const mappedUnicode = emojione.mapUnicodeToShort();
 
-const ZWS_CODE = 8203;
-const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
-export function stateToMarkdown(state) {
-    return __stateToMarkdown(state)
-        .replace(
-            ZWS, // draft-js-export-markdown adds these
-            ''); // this is *not* a zero width space, trust me :)
-}
-
-export const contentStateToHTML = (contentState: ContentState) => {
-    return stateToHTML(contentState, {
-        inlineStyles: {
-            UNDERLINE: {
-                element: 'u'
-            }
-        }
-    });
-};
-
-export function htmlToContentState(html: string): ContentState {
-    const blockArray = convertFromHTML(html).contentBlocks;
-    return ContentState.createFromBlockArray(blockArray);
-}
-
-function unicodeToEmojiUri(str) {
-    let replaceWith, unicode, alt;
-    if ((!emojione.unicodeAlt) || (emojione.sprites)) {
-        // if we are using the shortname as the alt tag then we need a reversed array to map unicode code point to shortnames
-        let mappedUnicode = emojione.mapUnicodeToShort();
-    }
-
-    str = str.replace(emojione.regUnicode, function(unicodeChar) {
-        if ( (typeof unicodeChar === 'undefined') || (unicodeChar === '') || (!(unicodeChar in emojione.jsEscapeMap)) ) {
-            // if the unicodeChar doesnt exist just return the entire match
+    // remove any zero width joiners/spaces used in conjugate emojis as the emojione URIs don't contain them
+    return str.replace(emojione.regUnicode, function(unicodeChar) {
+        if ((typeof unicodeChar === 'undefined') || (unicodeChar === '') || (!(unicodeChar in emojione.jsEscapeMap))) {
+            // if the unicodeChar doesn't exist just return the entire match
             return unicodeChar;
         } else {
             // get the unicode codepoint from the actual char
-            unicode = emojione.jsEscapeMap[unicodeChar];
-            return emojione.imagePathSVG+unicode+'.svg'+emojione.cacheBustParam;
+            const unicode = emojione.jsEscapeMap[unicodeChar];
+
+            const short = mappedUnicode[unicode];
+            const fname = emojione.emojioneList[short].fname;
+
+            return emojione.imagePathSVG+fname+'.svg'+emojione.cacheBustParam;
         }
     });
-
-    return str;
-}
-
-/**
- * Utility function that looks for regex matches within a ContentBlock and invokes {callback} with (start, end)
- * From https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html
- */
-function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: number, end: number) => any) {
-    const text = contentBlock.getText();
-    let matchArr, start;
-    while ((matchArr = regex.exec(text)) !== null) {
-        start = matchArr.index;
-        callback(start, start + matchArr[0].length);
-    }
-}
-
-// Workaround for https://github.com/facebook/draft-js/issues/414
-let emojiDecorator = {
-    strategy: (contentState, contentBlock, callback) => {
-        findWithRegex(EMOJI_REGEX, contentBlock, callback);
-    },
-    component: (props) => {
-        let uri = unicodeToEmojiUri(props.children[0].props.text);
-        let shortname = emojione.toShort(props.children[0].props.text);
-        let style = {
-            display: 'inline-block',
-            width: '1em',
-            maxHeight: '1em',
-            background: `url(${uri})`,
-            backgroundSize: 'contain',
-            backgroundPosition: 'center center',
-            overflow: 'hidden',
-        };
-        return (<span title={shortname} style={style}><span style={{opacity: 0}}>{props.children}</span></span>);
-    },
-};
-
-/**
- * Returns a composite decorator which has access to provided scope.
- */
-export function getScopedRTDecorators(scope: any): CompositeDecorator {
-    return [emojiDecorator];
-}
-
-export function getScopedMDDecorators(scope: any): CompositeDecorator {
-    let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
-        (style) => ({
-            strategy: (contentState, contentBlock, callback) => {
-                return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
-            },
-            component: (props) => (
-                <span className={"mx_MarkdownElement mx_Markdown_" + style}>
-                    {props.children}
-                </span>
-            )
-        }));
-
-    markdownDecorators.push({
-        strategy: (contentState, contentBlock, callback) => {
-            return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
-        },
-        component: (props) => (
-            <a href="#" className="mx_MarkdownElement mx_Markdown_LINK">
-                {props.children}
-            </a>
-        )
-    });
-    // markdownDecorators.push(emojiDecorator);
-    // TODO Consider renabling "syntax highlighting" when we can do it properly
-    return [emojiDecorator];
-}
-
-/**
- * Passes rangeToReplace to modifyFn and replaces it in contentState with the result.
- */
-export function modifyText(contentState: ContentState, rangeToReplace: SelectionState,
-                           modifyFn: (text: string) => string, inlineStyle, entityKey): ContentState {
-    let getText = (key) => contentState.getBlockForKey(key).getText(),
-        startKey = rangeToReplace.getStartKey(),
-        startOffset = rangeToReplace.getStartOffset(),
-        endKey = rangeToReplace.getEndKey(),
-        endOffset = rangeToReplace.getEndOffset(),
-        text = "";
-
-
-    for (let currentKey = startKey;
-            currentKey && currentKey !== endKey;
-            currentKey = contentState.getKeyAfter(currentKey)) {
-        let blockText = getText(currentKey);
-        text += blockText.substring(startOffset, blockText.length);
-
-        // from now on, we'll take whole blocks
-        startOffset = 0;
-    }
-
-    // add remaining part of last block
-    text += getText(endKey).substring(startOffset, endOffset);
-
-    return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), inlineStyle, entityKey);
-}
-
-/**
- * Computes the plaintext offsets of the given SelectionState.
- * Note that this inherently means we make assumptions about what that means (no separator between ContentBlocks, etc)
- * Used by autocomplete to show completions when the current selection lies within, or at the edges of a command.
- */
-export function selectionStateToTextOffsets(selectionState: SelectionState,
-                                            contentBlocks: Array<ContentBlock>): {start: number, end: number} {
-    let offset = 0, start = 0, end = 0;
-    for (let block of contentBlocks) {
-        if (selectionState.getStartKey() === block.getKey()) {
-            start = offset + selectionState.getStartOffset();
-        }
-        if (selectionState.getEndKey() === block.getKey()) {
-            end = offset + selectionState.getEndOffset();
-            break;
-        }
-        offset += block.getLength();
-    }
-
-    return {
-        start,
-        end,
-    };
-}
-
-export function textOffsetsToSelectionState({start, end}: SelectionRange,
-                                            contentBlocks: Array<ContentBlock>): SelectionState {
-    let selectionState = SelectionState.createEmpty();
-    // Subtract block lengths from `start` and `end` until they are less than the current
-    // block length (accounting for the NL at the end of each block). Set them to -1 to
-    // indicate that the corresponding selection state has been determined.
-    for (const block of contentBlocks) {
-        const blockLength = block.getLength();
-        // -1 indicating that the position start position has been found
-        if (start !== -1) {
-            if (start < blockLength + 1) {
-                selectionState = selectionState.merge({
-                    anchorKey: block.getKey(),
-                    anchorOffset: start,
-                });
-                start = -1; // selection state for the start calculated
-            } else {
-                start -= blockLength + 1; // +1 to account for newline between blocks
-            }
-        }
-        // -1 indicating that the position end position has been found
-        if (end !== -1) {
-            if (end < blockLength + 1) {
-                selectionState = selectionState.merge({
-                    focusKey: block.getKey(),
-                    focusOffset: end,
-                });
-                end = -1; // selection state for the end calculated
-            } else {
-                end -= blockLength + 1; // +1 to account for newline between blocks
-            }
-        }
-    }
-    return selectionState;
-}
-
-// modified version of https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js
-export function attachImmutableEntitiesToEmoji(editorState: EditorState): EditorState {
-    const contentState = editorState.getCurrentContent();
-    const blocks = contentState.getBlockMap();
-    let newContentState = contentState;
-
-    blocks.forEach((block) => {
-        const plainText = block.getText();
-
-        const addEntityToEmoji = (start, end) => {
-            const existingEntityKey = block.getEntityAt(start);
-            if (existingEntityKey) {
-                // avoid manipulation in case the emoji already has an entity
-                const entity = newContentState.getEntity(existingEntityKey);
-                if (entity && entity.get('type') === 'emoji') {
-                    return;
-                }
-            }
-
-            const selection = SelectionState.createEmpty(block.getKey())
-                .set('anchorOffset', start)
-                .set('focusOffset', end);
-            const emojiText = plainText.substring(start, end);
-            newContentState = newContentState.createEntity(
-                'emoji', 'IMMUTABLE', { emojiUnicode: emojiText }
-            );
-            const entityKey = newContentState.getLastCreatedEntityKey();
-            newContentState = Modifier.replaceText(
-                newContentState,
-                selection,
-                emojiText,
-                null,
-                entityKey,
-            );
-        };
-
-        findWithRegex(EMOJI_REGEX, block, addEntityToEmoji);
-    });
-
-    if (!newContentState.equals(contentState)) {
-        const oldSelection = editorState.getSelection();
-        editorState = EditorState.push(
-            editorState,
-            newContentState,
-            'convert-to-immutable-emojis',
-        );
-        // this is somewhat of a hack, we're undoing selection changes caused above
-        // it would be better not to make those changes in the first place
-        editorState = EditorState.forceSelection(editorState, oldSelection);
-    }
-
-    return editorState;
-}
-
-export function hasMultiLineSelection(editorState: EditorState): boolean {
-    const selectionState = editorState.getSelection();
-    const anchorKey = selectionState.getAnchorKey();
-    const currentContent = editorState.getCurrentContent();
-    const currentContentBlock = currentContent.getBlockForKey(anchorKey);
-    const start = selectionState.getStartOffset();
-    const end = selectionState.getEndOffset();
-    const selectedText = currentContentBlock.getText().slice(start, end);
-    return selectedText.includes('\n');
 }

src/Roles.js

@@ -15,19 +15,20 @@ limitations under the License.
 */
 import { _t } from './languageHandler';
 
-export function levelRoleMap() {
+export function levelRoleMap(usersDefault) {
     return {
         undefined: _t('Default'),
-        0: _t('User'),
+        0: _t('Restricted'),
+        [usersDefault]: _t('Default'),
         50: _t('Moderator'),
         100: _t('Admin'),
     };
 }
 
-export function textualPowerLevel(level, userDefault) {
-    const LEVEL_ROLE_MAP = this.levelRoleMap();
+export function textualPowerLevel(level, usersDefault) {
+    const LEVEL_ROLE_MAP = this.levelRoleMap(usersDefault);
     if (LEVEL_ROLE_MAP[level]) {
-        return LEVEL_ROLE_MAP[level] + (level !== undefined ? ` (${level})` : ` (${userDefault})`);
+        return LEVEL_ROLE_MAP[level] + (level !== undefined ? ` (${level})` : ` (${usersDefault})`);
     } else {
         return level;
     }

src/RoomInvite.js

@@ -21,6 +21,8 @@ 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 { _t } from './languageHandler';
 
 export function inviteToRoom(roomId, addr) {
@@ -28,7 +30,7 @@ export function inviteToRoom(roomId, addr) {
 
     if (addrType == 'email') {
         return MatrixClientPeg.get().inviteByEmail(roomId, addr);
-    } else if (addrType == 'mx') {
+    } else if (addrType == 'mx-user-id') {
         return MatrixClientPeg.get().invite(roomId, addr);
     } else {
         throw new Error('Unsupported address');
@@ -50,19 +52,20 @@ export function inviteMultipleToRoom(roomId, addrs) {
 }
 
 export function showStartChatInviteDialog() {
-    const UserPickerDialog = sdk.getComponent("dialogs.UserPickerDialog");
-    Modal.createTrackedDialog('Start a chat', '', UserPickerDialog, {
+    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: _t("Email, name or matrix ID"),
+        validAddressTypes: ['mx-user-id', 'email'],
         button: _t("Start Chat"),
         onFinished: _onStartChatFinished,
     });
 }
 
 export function showRoomInviteDialog(roomId) {
-    const UserPickerDialog = sdk.getComponent("dialogs.UserPickerDialog");
-    Modal.createTrackedDialog('Chat Invite', '', UserPickerDialog, {
+    const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
+    Modal.createTrackedDialog('Chat Invite', '', AddressPickerDialog, {
         title: _t('Invite new room members'),
         description: _t('Who would you like to add to this room?'),
         button: _t('Send Invites'),
@@ -79,9 +82,41 @@ function _onStartChatFinished(shouldInvite, addrs) {
     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 select a
+            // room from a list that is similar to the one in MemberInfo panel
+            const ChatCreateOrReuseDialog = sdk.getComponent("views.dialogs.ChatCreateOrReuseDialog");
+            const close = Modal.createTrackedDialog('Create or Reuse', '', ChatCreateOrReuseDialog, {
+                userId: addrTexts[0],
+                onNewDMClick: () => {
+                    dis.dispatch({
+                        action: 'start_chat',
+                        user_id: addrTexts[0],
+                    });
+                    close(true);
+                },
+                onExistingRoomSelected: (roomId) => {
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: roomId,
+                    });
+                    close(true);
+                },
+            }).close;
+        } else {
+            // Start a new DM chat
+            createRoom({dmUserId: addrTexts[0]}).catch((err) => {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createTrackedDialog('Failed to invite user', '', ErrorDialog, {
+                    title: _t("Failed to invite user"),
+                    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) => {
-            console.error(err.stack);
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to invite user', '', ErrorDialog, {
                 title: _t("Failed to invite user"),
@@ -127,7 +162,7 @@ function _onRoomInviteFinished(roomId, shouldInvite, addrs) {
 }
 
 function _isDmChat(addrTexts) {
-    if (addrTexts.length === 1 && getAddressType(addrTexts[0]) === 'mx') {
+    if (addrTexts.length === 1 && getAddressType(addrTexts[0]) === 'mx-user-id') {
         return true;
     } else {
         return false;
@@ -153,3 +188,15 @@ function _showAnyInviteErrors(addrs, room) {
     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/RoomNotifs.js

@@ -34,7 +34,14 @@ export function getRoomNotifsState(roomId) {
     }
 
     // for everything else, look at the room rule.
-    const roomRule = MatrixClientPeg.get().getRoomPushRule('global', roomId);
+    let roomRule = null;
+    try {
+        roomRule = MatrixClientPeg.get().getRoomPushRule('global', roomId);
+    } catch (err) {
+        // Possible that the client doesn't have pushRules yet. If so, it
+        // hasn't started eiher, so indicate that this room is not notifying.
+        return null;
+    }
 
     // XXX: We have to assume the default is to notify for all messages
     // (in particular this will be 'wrong' for one to one rooms because
@@ -130,6 +137,11 @@ function setRoomNotifsStateUnmuted(roomId, newState) {
 }
 
 function findOverrideMuteRule(roomId) {
+    if (!MatrixClientPeg.get().pushRules ||
+        !MatrixClientPeg.get().pushRules['global'] ||
+        !MatrixClientPeg.get().pushRules['global'].override) {
+        return null;
+    }
     for (const rule of MatrixClientPeg.get().pushRules['global'].override) {
         if (isRuleForRoom(roomId, rule)) {
             if (isMuteRule(rule) && rule.enabled) {

src/Rooms.js

@@ -31,47 +31,68 @@ export function getDisplayAliasForRoom(room) {
  * If the room contains only two members including the logged-in user,
  * return the other one. Otherwise, return null.
  */
-export function getOnlyOtherMember(room, me) {
-    const joinedMembers = room.getJoinedMembers();
+export function getOnlyOtherMember(room, myUserId) {
 
-    if (joinedMembers.length === 2) {
-        return joinedMembers.filter(function(m) {
-            return m.userId !== me.userId;
+    if (room.currentState.getJoinedMemberCount() === 2) {
+        return room.getJoinedMembers().filter(function(m) {
+            return m.userId !== myUserId;
         })[0];
     }
 
     return null;
 }
 
-export function isConfCallRoom(room, me, conferenceHandler) {
+function _isConfCallRoom(room, myUserId, conferenceHandler) {
     if (!conferenceHandler) return false;
 
-    if (me.membership != "join") {
+    const myMembership = room.getMyMembership();
+    if (myMembership != "join") {
         return false;
     }
 
-    const otherMember = getOnlyOtherMember(room, me);
-    if (otherMember === null) {
+    const otherMember = getOnlyOtherMember(room, myUserId);
+    if (!otherMember) {
         return false;
     }
 
     if (conferenceHandler.isConferenceUser(otherMember.userId)) {
         return true;
     }
+
+    return false;
 }
 
-export function looksLikeDirectMessageRoom(room, me) {
-    if (me.membership == "join" || me.membership === "ban" ||
-        (me.membership === "leave" && me.events.member.getSender() !== me.events.member.getStateKey()))
-    {
+// Cache whether a room is a conference call. Assumes that rooms will always
+// either will or will not be a conference call room.
+const isConfCallRoomCache = {
+    // $roomId: bool
+};
+
+export function isConfCallRoom(room, myUserId, conferenceHandler) {
+    if (isConfCallRoomCache[room.roomId] !== undefined) {
+        return isConfCallRoomCache[room.roomId];
+    }
+
+    const result = _isConfCallRoom(room, myUserId, conferenceHandler);
+
+    isConfCallRoomCache[room.roomId] = result;
+
+    return result;
+}
+
+export function looksLikeDirectMessageRoom(room, myUserId) {
+    const myMembership = room.getMyMembership();
+    const me = room.getMember(myUserId);
+
+    if (myMembership == "join" || myMembership === "ban" || (me && me.isKicked())) {
         // Used to split rooms via tags
         const tagNames = Object.keys(room.tags);
         // Used for 1:1 direct chats
-        const members = room.currentState.getMembers();
-
         // Show 1:1 chats in seperate "Direct Messages" section as long as they haven't
         // been moved to a different tag section
-        if (members.length === 2 && !tagNames.length) {
+        const totalMemberCount = room.currentState.getJoinedMemberCount() +
+            room.currentState.getInvitedMemberCount();
+        if (totalMemberCount === 2 && !tagNames.length) {
             return true;
         }
     }
@@ -81,10 +102,10 @@ export function looksLikeDirectMessageRoom(room, me) {
 export function guessAndSetDMRoom(room, isDirect) {
     let newTarget;
     if (isDirect) {
-        const guessedTarget = guessDMRoomTarget(
-            room, room.getMember(MatrixClientPeg.get().credentials.userId),
+        const guessedUserId = guessDMRoomTargetId(
+            room, MatrixClientPeg.get().getUserId()
         );
-        newTarget = guessedTarget.userId;
+        newTarget = guessedUserId;
     } else {
         newTarget = null;
     }
@@ -140,15 +161,15 @@ export function setDMRoom(roomId, userId) {
  * Given a room, estimate which of its members is likely to
  * be the target if the room were a DM room and return that user.
  */
-export function guessDMRoomTarget(room, me) {
+function guessDMRoomTargetId(room, myUserId) {
     let oldestTs;
     let oldestUser;
 
     // Pick the joined user who's been here longest (and isn't us),
     for (const user of room.getJoinedMembers()) {
-        if (user.userId == me.userId) continue;
+        if (user.userId == myUserId) continue;
 
-        if (oldestTs === undefined || user.events.member.getTs() < oldestTs) {
+        if (oldestTs === undefined || (user.events.member && user.events.member.getTs() < oldestTs)) {
             oldestUser = user;
             oldestTs = user.events.member.getTs();
         }
@@ -157,14 +178,14 @@ export function guessDMRoomTarget(room, me) {
 
     // if there are no joined members other than us, use the oldest member
     for (const user of room.currentState.getMembers()) {
-        if (user.userId == me.userId) continue;
+        if (user.userId == myUserId) continue;
 
-        if (oldestTs === undefined || user.events.member.getTs() < oldestTs) {
+        if (oldestTs === undefined || (user.events.member && user.events.member.getTs() < oldestTs)) {
             oldestUser = user;
             oldestTs = user.events.member.getTs();
         }
     }
 
-    if (oldestUser === undefined) return me;
+    if (oldestUser === undefined) return myUserId;
     return oldestUser;
 }

src/ScalarAuthClient.js

@@ -15,10 +15,11 @@ limitations under the License.
 */
 
 import Promise from 'bluebird';
-var request = require('browser-request');
+import SettingsStore from "./settings/SettingsStore";
+const request = require('browser-request');
 
-var SdkConfig = require('./SdkConfig');
-var MatrixClientPeg = require('./MatrixClientPeg');
+const SdkConfig = require('./SdkConfig');
+const MatrixClientPeg = require('./MatrixClientPeg');
 
 class ScalarAuthClient {
 
@@ -38,11 +39,53 @@ class ScalarAuthClient {
 
     // Returns a scalar_token string
     getScalarToken() {
-        var tok = window.localStorage.getItem("mx_scalar_token");
-        if (tok) return Promise.resolve(tok);
+        const token = window.localStorage.getItem("mx_scalar_token");
 
-        // No saved token, so do the dance to get one. First, we
-        // need an openid bearer token from the HS.
+        if (!token) {
+            return this.registerForToken();
+        } else {
+            return this.validateToken(token).then(userId => {
+                const me = MatrixClientPeg.get().getUserId();
+                if (userId !== me) {
+                    throw new Error("Scalar token is owned by someone else: " + me);
+                }
+                return token;
+            }).catch(err => {
+                console.error(err);
+
+                // Something went wrong - try to get a new token.
+                console.warn("Registering for new scalar token");
+                return this.registerForToken();
+            })
+        }
+    }
+
+    validateToken(token) {
+        let url = SdkConfig.get().integrations_rest_url + "/account";
+
+        const defer = Promise.defer();
+        request({
+            method: "GET",
+            uri: url,
+            qs: {scalar_token: token},
+            json: true,
+        }, (err, response, body) => {
+            if (err) {
+                defer.reject(err);
+            } else if (response.statusCode / 100 !== 2) {
+                defer.reject({statusCode: response.statusCode});
+            } else if (!body || !body.user_id) {
+                defer.reject(new Error("Missing user_id in response"));
+            } else {
+                defer.resolve(body.user_id);
+            }
+        });
+
+        return defer.promise;
+    }
+
+    registerForToken() {
+        // Get openid bearer token from the HS as the first part of our dance
         return MatrixClientPeg.get().getOpenIdToken().then((token_object) => {
             // Now we can send that to scalar and exchange it for a scalar token
             return this.exchangeForScalarToken(token_object);
@@ -53,9 +96,9 @@ class ScalarAuthClient {
     }
 
     exchangeForScalarToken(openid_token_object) {
-        var defer = Promise.defer();
+        const defer = Promise.defer();
 
-        var scalar_rest_url = SdkConfig.get().integrations_rest_url;
+        const scalar_rest_url = SdkConfig.get().integrations_rest_url;
         request({
             method: 'POST',
             uri: scalar_rest_url+'/register',
@@ -76,10 +119,78 @@ class ScalarAuthClient {
         return defer.promise;
     }
 
-    getScalarInterfaceUrlForRoom(roomId, screen, id) {
-        var url = SdkConfig.get().integrations_ui_url;
+    getScalarPageTitle(url) {
+        const defer = Promise.defer();
+
+        let scalarPageLookupUrl = SdkConfig.get().integrations_rest_url + '/widgets/title_lookup';
+        scalarPageLookupUrl = this.getStarterLink(scalarPageLookupUrl);
+        scalarPageLookupUrl += '&curl=' + encodeURIComponent(url);
+        request({
+            method: 'GET',
+            uri: scalarPageLookupUrl,
+            json: true,
+        }, (err, response, body) => {
+            if (err) {
+                defer.reject(err);
+            } else if (response.statusCode / 100 !== 2) {
+                defer.reject({statusCode: response.statusCode});
+            } else if (!body) {
+                defer.reject(new Error("Missing page title in response"));
+            } else {
+                let title = "";
+                if (body.page_title_cache_item && body.page_title_cache_item.cached_title) {
+                    title = body.page_title_cache_item.cached_title;
+                }
+                defer.resolve(title);
+            }
+        });
+
+        return defer.promise;
+    }
+
+    /**
+     * 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]
+     * @return {Promise}           Resolves on completion
+     */
+    disableWidgetAssets(widgetType, widgetId) {
+        let url = SdkConfig.get().integrations_rest_url + '/widgets/set_assets_state';
+        url = this.getStarterLink(url);
+        return new Promise((resolve, reject) => {
+            request({
+                method: 'GET',
+                uri: url,
+                json: true,
+                qs: {
+                    'widget_type': widgetType,
+                    'widget_id': widgetId,
+                    'state': 'disable',
+                },
+            }, (err, response, body) => {
+                if (err) {
+                    reject(err);
+                } else if (response.statusCode / 100 !== 2) {
+                    reject({statusCode: response.statusCode});
+                } else if (!body) {
+                    reject(new Error("Failed to set widget assets state"));
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    getScalarInterfaceUrlForRoom(room, screen, id) {
+        const roomId = room.roomId;
+        const roomName = room.name;
+        let url = SdkConfig.get().integrations_ui_url;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);
         url += "&room_id=" + encodeURIComponent(roomId);
+        url += "&room_name=" + encodeURIComponent(roomName);
+        url += "&theme=" + encodeURIComponent(SettingsStore.getValue("theme"));
         if (id) {
             url += '&integ_id=' + encodeURIComponent(id);
         }

src/ScalarMessaging.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -231,10 +232,12 @@ Example:
 }
 */
 
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require("./MatrixClientPeg");
-const MatrixEvent = require("matrix-js-sdk").MatrixEvent;
-const dis = require("./dispatcher");
+import SdkConfig from './SdkConfig';
+import MatrixClientPeg from './MatrixClientPeg';
+import { MatrixEvent } from 'matrix-js-sdk';
+import dis from './dispatcher';
+import WidgetUtils from './utils/WidgetUtils';
+import RoomViewStore from './stores/RoomViewStore';
 import { _t } from './languageHandler';
 
 function sendResponse(event, res) {
@@ -291,12 +294,7 @@ function setWidget(event, roomId) {
     const widgetUrl = event.data.url;
     const widgetName = event.data.name; // optional
     const widgetData = event.data.data; // optional
-
-    const client = MatrixClientPeg.get();
-    if (!client) {
-        sendError(event, _t('You need to be logged in.'));
-        return;
-    }
+    const userWidget = event.data.userWidget;
 
     // both adding/removing widgets need these checks
     if (!widgetId || widgetUrl === undefined) {
@@ -324,26 +322,57 @@ function setWidget(event, roomId) {
         }
     }
 
-    let content = {
-        type: widgetType,
-        url: widgetUrl,
-        name: widgetName,
-        data: widgetData,
-    };
-    if (widgetUrl === null) { // widget is being deleted
-        content = {};
-    }
+    if (userWidget) {
+        WidgetUtils.setUserWidget(widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
+            sendResponse(event, {
+                success: true,
+            });
 
-    client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
-        sendResponse(event, {
-            success: true,
+            dis.dispatch({ action: "user_widget_updated" });
+        }).catch((e) => {
+            sendError(event, _t('Unable to create widget.'), e);
         });
-    }, (err) => {
-        sendError(event, _t('Failed to send request.'), err);
-    });
+    } else { // Room widget
+        if (!roomId) {
+            sendError(event, _t('Missing roomId.'), null);
+        }
+        WidgetUtils.setRoomWidget(roomId, widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
+            sendResponse(event, {
+                success: true,
+            });
+        }, (err) => {
+            sendError(event, _t('Failed to send request.'), err);
+        });
+    }
 }
 
 function getWidgets(event, roomId) {
+    const client = MatrixClientPeg.get();
+    if (!client) {
+        sendError(event, _t('You need to be logged in.'));
+        return;
+    }
+    let widgetStateEvents = [];
+
+    if (roomId) {
+        const room = client.getRoom(roomId);
+        if (!room) {
+            sendError(event, _t('This room is not recognised.'));
+            return;
+        }
+        // XXX: This gets the raw event object (I think because we can't
+        // send the MatrixEvent over postMessage?)
+        widgetStateEvents = WidgetUtils.getRoomWidgets(room).map((ev) => ev.event);
+    }
+
+    // Add user widgets (not linked to a specific room)
+    const userWidgets = WidgetUtils.getUserWidgetsArray();
+    widgetStateEvents = widgetStateEvents.concat(userWidgets);
+
+    sendResponse(event, widgetStateEvents);
+}
+
+function getRoomEncState(event, roomId) {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t('You need to be logged in.'));
@@ -354,16 +383,9 @@ function getWidgets(event, roomId) {
         sendError(event, _t('This room is not recognised.'));
         return;
     }
-    const stateEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
-    // Only return widgets which have required fields
-    let widgetStateEvents = [];
-    stateEvents.forEach((ev) => {
-        if (ev.getContent().type && ev.getContent().url) {
-            widgetStateEvents.push(ev.event); // return the raw event
-        }
-    })
+    const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
-    sendResponse(event, widgetStateEvents);
+    sendResponse(event, roomIsEncrypted);
 }
 
 function setPlumbingState(event, roomId, status) {
@@ -376,7 +398,7 @@ function setPlumbingState(event, roomId, status) {
         sendError(event, _t('You need to be logged in.'));
         return;
     }
-    client.sendStateEvent(roomId, "m.room.plumbing", { status : status }).done(() => {
+    client.sendStateEvent(roomId, "m.room.plumbing", { status: status }).done(() => {
         sendResponse(event, {
             success: true,
         });
@@ -415,11 +437,11 @@ function setBotPower(event, roomId, userId, level) {
     }
 
     client.getStateEvent(roomId, "m.room.power_levels", "").then((powerLevels) => {
-        let powerEvent = new MatrixEvent(
+        const powerEvent = new MatrixEvent(
             {
                 type: "m.room.power_levels",
                 content: powerLevels,
-            }
+            },
         );
 
         client.setPowerLevel(roomId, userId, level, powerEvent).done(() => {
@@ -458,7 +480,7 @@ function getMembershipCount(event, roomId) {
         sendError(event, _t('This room is not recognised.'));
         return;
     }
-    const count = room.getJoinedMembers().length;
+    const count = room.getJoinedMemberCount();
     sendResponse(event, count);
 }
 
@@ -475,18 +497,16 @@ function canSendEvent(event, roomId) {
         sendError(event, _t('This room is not recognised.'));
         return;
     }
-    const me = client.credentials.userId;
-    const member = room.getMember(me);
-    if (!member || member.membership !== "join") {
+    if (room.getMyMembership() !== "join") {
         sendError(event, _t('You are not in this room.'));
         return;
     }
+    const me = client.credentials.userId;
 
     let canSend = false;
     if (isState) {
         canSend = room.currentState.maySendStateEvent(evType, me);
-    }
-    else {
+    } else {
         canSend = room.currentState.maySendEvent(evType, me);
     }
 
@@ -517,19 +537,6 @@ function returnStateEvent(event, roomId, eventType, stateKey) {
     sendResponse(event, stateEvent.getContent());
 }
 
-var currentRoomId = null;
-var currentRoomAlias = null;
-
-// Listen for when a room is viewed
-dis.register(onAction);
-function onAction(payload) {
-    if (payload.action !== "view_room") {
-        return;
-    }
-    currentRoomId = payload.room_id;
-    currentRoomAlias = payload.room_alias;
-}
-
 const onMessage = function(event) {
     if (!event.origin) { // stupid chrome
         event.origin = event.originalEvent.origin;
@@ -542,8 +549,16 @@ const onMessage = function(event) {
     //
     // All strings start with the empty string, so for sanity return if the length
     // of the event origin is 0.
-    let url = SdkConfig.get().integrations_ui_url;
-    if (event.origin.length === 0 || !url.startsWith(event.origin) || !event.data.action) {
+    //
+    // TODO -- Scalar postMessage API should be namespaced with event.data.api field
+    // Fix following "if" statement to respond only to specific API messages.
+    const url = SdkConfig.get().integrations_ui_url;
+    if (
+        event.origin.length === 0 ||
+        !url.startsWith(event.origin + '/') ||
+        !event.data.action ||
+        event.data.api // Ignore messages with specific API set
+    ) {
         return; // don't log this - debugging APIs like to spam postMessage which floods the log otherwise
     }
 
@@ -555,78 +570,80 @@ const onMessage = function(event) {
 
     const roomId = event.data.room_id;
     const userId = event.data.user_id;
+
     if (!roomId) {
-        sendError(event, _t('Missing room_id in request'));
-        return;
-    }
-    let promise = Promise.resolve(currentRoomId);
-    if (!currentRoomId) {
-        if (!currentRoomAlias) {
-            sendError(event, _t('Must be viewing a room'));
-            return;
-        }
-        // no room ID but there is an alias, look it up.
-        console.log("Looking up alias " + currentRoomAlias);
-        promise = MatrixClientPeg.get().getRoomIdForAlias(currentRoomAlias).then((res) => {
-            return res.room_id;
-        });
-    }
-
-    promise.then((viewingRoomId) => {
-        if (roomId !== viewingRoomId) {
-            sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
-            return;
-        }
-
-        // These APIs don't require userId
-        if (event.data.action === "join_rules_state") {
-            getJoinRules(event, roomId);
-            return;
-        } else if (event.data.action === "set_plumbing_state") {
-            setPlumbingState(event, roomId, event.data.status);
-            return;
-        } else if (event.data.action === "get_membership_count") {
-            getMembershipCount(event, roomId);
+        // These APIs don't require roomId
+        // Get and set user widgets (not associated with a specific room)
+        // If roomId is specified, it must be validated, so room-based widgets agreed
+        // handled further down.
+        if (event.data.action === "get_widgets") {
+            getWidgets(event, null);
             return;
         } else if (event.data.action === "set_widget") {
-            setWidget(event, roomId);
+            setWidget(event, null);
             return;
-        } else if (event.data.action === "get_widgets") {
-            getWidgets(event, roomId);
-            return;
-        } else if (event.data.action === "can_send_event") {
-            canSendEvent(event, roomId);
+        } else {
+            sendError(event, _t('Missing room_id in request'));
             return;
         }
+    }
 
-        if (!userId) {
-            sendError(event, _t('Missing user_id in request'));
-            return;
-        }
-        switch (event.data.action) {
-            case "membership_state":
-                getMembershipState(event, roomId, userId);
-                break;
-            case "invite":
-                inviteUser(event, roomId, userId);
-                break;
-            case "bot_options":
-                botOptions(event, roomId, userId);
-                break;
-            case "set_bot_options":
-                setBotOptions(event, roomId, userId);
-                break;
-            case "set_bot_power":
-                setBotPower(event, roomId, userId, event.data.level);
-                break;
-            default:
-                console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
-                break;
-        }
-    }, (err) => {
-        console.error(err);
-        sendError(event, _t('Failed to lookup current room') + '.');
-    });
+    if (roomId !== RoomViewStore.getRoomId()) {
+        sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
+        return;
+    }
+
+    // Get and set room-based widgets
+    if (event.data.action === "get_widgets") {
+        getWidgets(event, roomId);
+        return;
+    } else if (event.data.action === "set_widget") {
+        setWidget(event, roomId);
+        return;
+    }
+
+    // These APIs don't require userId
+    if (event.data.action === "join_rules_state") {
+        getJoinRules(event, roomId);
+        return;
+    } else if (event.data.action === "set_plumbing_state") {
+        setPlumbingState(event, roomId, event.data.status);
+        return;
+    } else if (event.data.action === "get_membership_count") {
+        getMembershipCount(event, roomId);
+        return;
+    } else if (event.data.action === "get_room_enc_state") {
+        getRoomEncState(event, roomId);
+        return;
+    } else if (event.data.action === "can_send_event") {
+        canSendEvent(event, roomId);
+        return;
+    }
+
+    if (!userId) {
+        sendError(event, _t('Missing user_id in request'));
+        return;
+    }
+    switch (event.data.action) {
+        case "membership_state":
+            getMembershipState(event, roomId, userId);
+            break;
+        case "invite":
+            inviteUser(event, roomId, userId);
+            break;
+        case "bot_options":
+            botOptions(event, roomId, userId);
+            break;
+        case "set_bot_options":
+            setBotOptions(event, roomId, userId);
+            break;
+        case "set_bot_power":
+            setBotPower(event, roomId, userId, event.data.level);
+            break;
+        default:
+            console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
+            break;
+    }
 };
 
 let listenerCount = 0;
@@ -647,7 +664,7 @@ module.exports = {
             // Make an error so we get a stack trace
             const e = new Error(
                 "ScalarMessaging: mismatched startListening / stopListening detected." +
-                " Negative count"
+                " Negative count",
             );
             console.error(e);
         }

src/SdkConfig.js

@@ -26,7 +26,7 @@ const DEFAULTS = {
 class SdkConfig {
 
     static get() {
-        return global.mxReactSdkConfig;
+        return global.mxReactSdkConfig || {};
     }
 
     static put(cfg) {

src/SlashCommands.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -14,27 +15,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "./MatrixClientPeg";
-import dis from "./dispatcher";
-import Tinter from "./Tinter";
+
+import React from 'react';
+import MatrixClientPeg from './MatrixClientPeg';
+import dis from './dispatcher';
+import Tinter from './Tinter';
 import sdk from './index';
-import { _t } from './languageHandler';
+import {_t, _td} from './languageHandler';
 import Modal from './Modal';
+import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 
 
 class Command {
-    constructor(name, paramArgs, runFn) {
-        this.name = name;
-        this.paramArgs = paramArgs;
+    constructor({name, args='', description, runFn, hideCompletionAfterSpace=false}) {
+        this.command = '/' + name;
+        this.args = args;
+        this.description = description;
         this.runFn = runFn;
+        this.hideCompletionAfterSpace = hideCompletionAfterSpace;
     }
 
     getCommand() {
-        return "/" + this.name;
+        return this.command;
     }
 
     getCommandWithArgs() {
-        return this.getCommand() + " " + this.paramArgs;
+        return this.getCommand() + " " + this.args;
     }
 
     run(roomId, args) {
@@ -46,16 +52,12 @@ class Command {
     }
 }
 
-function reject(msg) {
-    return {
-        error: msg,
-    };
+function reject(error) {
+    return {error};
 }
 
 function success(promise) {
-    return {
-        promise: promise,
-    };
+    return {promise};
 }
 
 /* Disable the "unexpected this" error for these commands - all of the run
@@ -64,292 +66,423 @@ function success(promise) {
 
 /* eslint-disable babel/no-invalid-this */
 
-const commands = {
-    ddg: new Command("ddg", "<query>", function(roomId, args) {
-        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, {
-            title: _t('/ddg is not a command'),
-            description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
-        });
-        return success();
+export const CommandMap = {
+    ddg: new Command({
+        name: 'ddg',
+        args: '<query>',
+        description: _td('Searches DuckDuckGo for results'),
+        runFn: function(roomId, args) {
+            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, {
+                title: _t('/ddg is not a command'),
+                description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
+            });
+            return success();
+        },
+        hideCompletionAfterSpace: true,
     }),
 
-    // Change your nickname
-    nick: new Command("nick", "<display_name>", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setDisplayName(args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Changes the colorscheme of your current room
-    tint: new Command("tint", "<color1> [<color2>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))( +(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})))?$/);
-            if (matches) {
-                Tinter.tint(matches[1], matches[4]);
-                const colorScheme = {};
-                colorScheme.primary_color = matches[1];
-                if (matches[4]) {
-                    colorScheme.secondary_color = matches[4];
-                }
-                return success(
-                    MatrixClientPeg.get().setRoomAccountData(
-                        roomId, "org.matrix.room.color_scheme", colorScheme,
-                    ),
-                );
+    nick: new Command({
+        name: 'nick',
+        args: '<display_name>',
+        description: _td('Changes your display nickname'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setDisplayName(args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Change the room topic
-    topic: new Command("topic", "<topic>", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setRoomTopic(roomId, args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Invite a user
-    invite: new Command("invite", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().invite(roomId, matches[1]),
-                );
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Join a room
-    join: new Command("join", "#alias:domain", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                dis.dispatch({
-                    action: 'view_room',
-                    room_alias: roomAlias,
-                    auto_join: true,
-                });
-
-                return success();
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    part: new Command("part", "[#alias:domain]", function(roomId, args) {
-        let targetRoomId;
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                // Try to find a room with this alias
-                const rooms = MatrixClientPeg.get().getRooms();
-                for (let i = 0; i < rooms.length; i++) {
-                    const aliasEvents = rooms[i].currentState.getStateEvents(
-                        "m.room.aliases",
-                    );
-                    for (let j = 0; j < aliasEvents.length; j++) {
-                        const aliases = aliasEvents[j].getContent().aliases || [];
-                        for (let k = 0; k < aliases.length; k++) {
-                            if (aliases[k] === roomAlias) {
-                                targetRoomId = rooms[i].roomId;
-                                break;
-                            }
-                        }
-                        if (targetRoomId) { break; }
+    tint: new Command({
+        name: 'tint',
+        args: '<color1> [<color2>]',
+        description: _td('Changes colour scheme of current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(#([\da-fA-F]{3}|[\da-fA-F]{6}))( +(#([\da-fA-F]{3}|[\da-fA-F]{6})))?$/);
+                if (matches) {
+                    Tinter.tint(matches[1], matches[4]);
+                    const colorScheme = {};
+                    colorScheme.primary_color = matches[1];
+                    if (matches[4]) {
+                        colorScheme.secondary_color = matches[4];
+                    } else {
+                        colorScheme.secondary_color = colorScheme.primary_color;
                     }
-                    if (targetRoomId) { break; }
-                }
-                if (!targetRoomId) {
-                    return reject(_t("Unrecognised room alias:") + ' ' + roomAlias);
+                    return success(
+                        SettingsStore.setValue('roomColor', roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
+                    );
                 }
             }
-        }
-        if (!targetRoomId) targetRoomId = roomId;
-        return success(
-            MatrixClientPeg.get().leave(targetRoomId).then(
-                function() {
-                    dis.dispatch({action: 'view_next_room'});
-                },
-            ),
-        );
+            return reject(this.getUsage());
+        },
     }),
 
-    // Kick a user from the room with an optional reason
-    kick: new Command("kick", "<userId> [<reason>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().kick(roomId, matches[1], matches[3]),
-                );
+    topic: new Command({
+        name: 'topic',
+        args: '<topic>',
+        description: _td('Sets the room topic'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setRoomTopic(roomId, args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    invite: new Command({
+        name: 'invite',
+        args: '<user-id>',
+        description: _td('Invites user with given id to current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().invite(roomId, matches[1]));
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    join: new Command({
+        name: 'join',
+        args: '<room-alias>',
+        description: _td('Joins room with given alias'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + MatrixClientPeg.get().getDomain();
+                    }
+
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_alias: roomAlias,
+                        auto_join: true,
+                    });
+
+                    return success();
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    part: new Command({
+        name: 'part',
+        args: '[<room-alias>]',
+        description: _td('Leave room'),
+        runFn: function(roomId, args) {
+            const cli = MatrixClientPeg.get();
+
+            let targetRoomId;
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + cli.getDomain();
+                    }
+
+                    // Try to find a room with this alias
+                    const rooms = cli.getRooms();
+                    for (let i = 0; i < rooms.length; i++) {
+                        const aliasEvents = rooms[i].currentState.getStateEvents('m.room.aliases');
+                        for (let j = 0; j < aliasEvents.length; j++) {
+                            const aliases = aliasEvents[j].getContent().aliases || [];
+                            for (let k = 0; k < aliases.length; k++) {
+                                if (aliases[k] === roomAlias) {
+                                    targetRoomId = rooms[i].roomId;
+                                    break;
+                                }
+                            }
+                            if (targetRoomId) break;
+                        }
+                        if (targetRoomId) break;
+                    }
+                    if (!targetRoomId) return reject(_t('Unrecognised room alias:') + ' ' + roomAlias);
+                }
+            }
+
+            if (!targetRoomId) targetRoomId = roomId;
+            return success(
+                cli.leave(targetRoomId).then(function() {
+                    dis.dispatch({action: 'view_next_room'});
+                }),
+            );
+        },
+    }),
+
+    kick: new Command({
+        name: 'kick',
+        args: '<user-id> [reason]',
+        description: _td('Kicks user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().kick(roomId, matches[1], matches[3]));
+                }
+            }
+            return reject(this.getUsage());
+        },
     }),
 
     // Ban a user from the room with an optional reason
-    ban: new Command("ban", "<userId> [<reason>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().ban(roomId, matches[1], matches[3]),
-                );
+    ban: new Command({
+        name: 'ban',
+        args: '<user-id> [reason]',
+        description: _td('Bans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().ban(roomId, matches[1], matches[3]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Unban a user from the room
-    unban: new Command("unban", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                // Reset the user membership to "leave" to unban him
-                return success(
-                    MatrixClientPeg.get().unban(roomId, matches[1]),
-                );
+    // Unban a user from ythe room
+    unban: new Command({
+        name: 'unban',
+        args: '<user-id>',
+        description: _td('Unbans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    // Reset the user membership to "leave" to unban him
+                    return success(MatrixClientPeg.get().unban(roomId, matches[1]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    ignore: new Command({
+        name: 'ignore',
+        args: '<user-id>',
+        description: _td('Ignores a user, hiding their messages from you'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    ignoredUsers.push(userId); // de-duped internally in the js-sdk
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
+                                title: _t('Ignored user'),
+                                description: <div>
+                                    <p>{ _t('You are now ignoring %(userId)s', {userId}) }</p>
+                                </div>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    unignore: new Command({
+        name: 'unignore',
+        args: '<user-id>',
+        description: _td('Stops ignoring a user, showing their messages going forward'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    const index = ignoredUsers.indexOf(userId);
+                    if (index !== -1) ignoredUsers.splice(index, 1);
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
+                                title: _t('Unignored user'),
+                                description: <div>
+                                    <p>{ _t('You are no longer ignoring %(userId)s', {userId}) }</p>
+                                </div>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
+            }
+            return reject(this.getUsage());
+        },
     }),
 
     // Define the power level of a user
-    op: new Command("op", "<userId> [<power level>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(\d+))?$/);
-            let powerLevel = 50; // default power level for op
-            if (matches) {
-                const userId = matches[1];
-                if (matches.length === 4 && undefined !== matches[3]) {
-                    powerLevel = parseInt(matches[3]);
-                }
-                if (!isNaN(powerLevel)) {
-                    const room = MatrixClientPeg.get().getRoom(roomId);
-                    if (!room) {
-                        return reject("Bad room ID: " + roomId);
+    op: new Command({
+        name: 'op',
+        args: '<user-id> [<power-level>]',
+        description: _td('Define the power level of a user'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
+                let powerLevel = 50; // default power level for op
+                if (matches) {
+                    const userId = matches[1];
+                    if (matches.length === 4 && undefined !== matches[3]) {
+                        powerLevel = parseInt(matches[3]);
+                    }
+                    if (!isNaN(powerLevel)) {
+                        const cli = MatrixClientPeg.get();
+                        const room = cli.getRoom(roomId);
+                        if (!room) return reject('Bad room ID: ' + roomId);
+
+                        const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                        return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
                     }
-                    const powerLevelEvent = room.currentState.getStateEvents(
-                        "m.room.power_levels", "",
-                    );
-                    return success(
-                        MatrixClientPeg.get().setPowerLevel(
-                            roomId, userId, powerLevel, powerLevelEvent,
-                        ),
-                    );
                 }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
     // Reset the power level of a user
-    deop: new Command("deop", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const room = MatrixClientPeg.get().getRoom(roomId);
-                if (!room) {
-                    return reject("Bad room ID: " + roomId);
-                }
+    deop: new Command({
+        name: 'deop',
+        args: '<user-id>',
+        description: _td('Deops user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
+                    const room = cli.getRoom(roomId);
+                    if (!room) return reject('Bad room ID: ' + roomId);
 
-                const powerLevelEvent = room.currentState.getStateEvents(
-                    "m.room.power_levels", "",
-                );
-                return success(
-                    MatrixClientPeg.get().setPowerLevel(
-                        roomId, args, undefined, powerLevelEvent,
-                    ),
-                );
+                    const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                    return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    devtools: new Command({
+        name: 'devtools',
+        description: _td('Opens the Developer Tools dialog'),
+        runFn: function(roomId) {
+            const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
+            Modal.createDialog(DevtoolsDialog, {roomId});
+            return success();
+        },
     }),
 
     // Verify a user, device, and pubkey tuple
-    verify: new Command("verify", "<userId> <deviceId> <deviceSigningKey>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const deviceId = matches[2];
-                const fingerprint = matches[3];
+    verify: new Command({
+        name: 'verify',
+        args: '<user-id> <device-id> <device-signing-key>',
+        description: _td('Verifies a user, device, and pubkey tuple'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
 
-                return success(
-                    // Promise.resolve to handle transition from static result to promise; can be removed
-                    // in future
-                    Promise.resolve(MatrixClientPeg.get().getStoredDevice(userId, deviceId)).then((device) => {
-                        if (!device) {
-                            throw new Error(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`);
-                        }
+                    const userId = matches[1];
+                    const deviceId = matches[2];
+                    const fingerprint = matches[3];
 
-                        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!`));
+                    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})`);
                             }
-                        }
 
-                        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!',
-                                   {deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint}));
-                        }
+                            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!'));
+                                }
+                            }
 
-                        return MatrixClientPeg.get().setDeviceVerified(userId, deviceId, true);
-                    }).then(() => {
-                        // Tell the user we verified everything
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
-                            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: userId, deviceId: deviceId})
-                                    }
-                                  </p>
-                                </div>
-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+                            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,
+                                        }));
+                            }
+
+                            return cli.setDeviceVerified(userId, deviceId, true);
+                        }).then(() => {
+                            // Tell the user we verified everything
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
+                                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>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    // 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'),
+        hideCompletionAfterSpace: true,
+    }),
+
+    discardsession: new Command({
+        name: 'discardsession',
+        description: _td('Forces the current outbound group session in an encrypted room to be discarded'),
+        runFn: function(roomId) {
+            try {
+                MatrixClientPeg.get().forceDiscardSession(roomId);
+            } catch (e) {
+                return reject(e.message);
+            }
+            return success();
+        },
     }),
 };
 /* eslint-enable babel/no-invalid-this */
@@ -358,52 +491,43 @@ const commands = {
 // helpful aliases
 const aliases = {
     j: "join",
+    newballsplease: "discardsession",
 };
 
-module.exports = {
-    /**
-     * 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.
-     */
-    processInput: function(roomId, input) {
-        // trim any trailing whitespace, as it can confuse the parser for
-        // IRC-style commands
-        input = input.replace(/\s+$/, "");
-        if (input[0] === "/" && input[1] !== "/") {
-            const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
-            let cmd;
-            let args;
-            if (bits) {
-                cmd = bits[1].substring(1).toLowerCase();
-                args = bits[3];
-            } else {
-                cmd = input;
-            }
-            if (cmd === "me") return null;
-            if (aliases[cmd]) {
-                cmd = aliases[cmd];
-            }
-            if (commands[cmd]) {
-                return commands[cmd].run(roomId, args);
-            } else {
-                return reject(_t("Unrecognised command:") + ' ' + input);
-            }
-        }
-        return null; // not a command
-    },
 
-    getCommandList: function() {
-        // Return all the commands plus /me and /markdown which aren't handled like normal commands
-        const cmds = Object.keys(commands).sort().map(function(cmdKey) {
-            return commands[cmdKey];
-        });
-        cmds.push(new Command("me", "<action>", function() {}));
-        cmds.push(new Command("markdown", "<on|off>", function() {}));
+/**
+ * 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) {
+    // 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
 
-        return cmds;
-    },
-};
+    const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
+    let cmd;
+    let args;
+    if (bits) {
+        cmd = bits[1].substring(1).toLowerCase();
+        args = bits[3];
+    } 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 CommandMap[cmd].run(roomId, args);
+    } else {
+        return reject(_t('Unrecognised command:') + ' ' + input);
+    }
+}

src/TextForEvent.js

@@ -13,56 +13,66 @@ 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 CallHandler from "./CallHandler";
+import MatrixClientPeg from './MatrixClientPeg';
+import CallHandler from './CallHandler';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
 
 function textForMemberEvent(ev) {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
-    var senderName = ev.sender ? ev.sender.name : ev.getSender();
-    var targetName = ev.target ? ev.target.name : ev.getStateKey();
-    var ConferenceHandler = CallHandler.getConferenceHandler();
-    var reason = ev.getContent().reason ? (
-        _t('Reason') + ': ' + ev.getContent().reason
-    ) : "";
-    switch (ev.getContent().membership) {
-        case 'invite':
-            var threePidContent = ev.getContent().third_party_invite;
+    const senderName = ev.sender ? ev.sender.name : ev.getSender();
+    const targetName = ev.target ? ev.target.name : ev.getStateKey();
+    const prevContent = ev.getPrevContent();
+    const content = ev.getContent();
+
+    const ConferenceHandler = CallHandler.getConferenceHandler();
+    const reason = content.reason ? (_t('Reason') + ': ' + content.reason) : '';
+    switch (content.membership) {
+        case 'invite': {
+            const threePidContent = content.third_party_invite;
             if (threePidContent) {
                 if (threePidContent.display_name) {
-                    return _t('%(targetName)s accepted the invitation for %(displayName)s.', {targetName: targetName, displayName: threePidContent.display_name});
+                    return _t('%(targetName)s accepted the invitation for %(displayName)s.', {
+                        targetName,
+                        displayName: threePidContent.display_name,
+                    });
                 } else {
-                    return _t('%(targetName)s accepted an invitation.', {targetName: targetName});
+                    return _t('%(targetName)s accepted an invitation.', {targetName});
                 }
-            }
-            else {
+            } else {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
-                    return _t('%(senderName)s requested a VoIP conference.', {senderName: senderName});
-                }
-                else {
-                    return _t('%(senderName)s invited %(targetName)s.', {senderName: senderName, targetName: targetName});
+                    return _t('%(senderName)s requested a VoIP conference.', {senderName});
+                } else {
+                    return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
                 }
             }
+        }
         case 'ban':
-            return _t(
-                '%(senderName)s banned %(targetName)s.',
-                {senderName: senderName, targetName: targetName}
-            ) + ' ' + reason;
+            return _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + reason;
         case 'join':
-            if (ev.getPrevContent() && ev.getPrevContent().membership == 'join') {
-                if (ev.getPrevContent().displayname && ev.getContent().displayname && ev.getPrevContent().displayname != ev.getContent().displayname) {
-                    return _t('%(senderName)s changed their display name from %(oldDisplayName)s to %(displayName)s.', {senderName: ev.getSender(), oldDisplayName: ev.getPrevContent().displayname, displayName: ev.getContent().displayname});
-                } else if (!ev.getPrevContent().displayname && ev.getContent().displayname) {
-                    return _t('%(senderName)s set their display name to %(displayName)s.', {senderName: ev.getSender(), displayName: ev.getContent().displayname});
-                } else if (ev.getPrevContent().displayname && !ev.getContent().displayname) {
-                    return _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {senderName: ev.getSender(), oldDisplayName: ev.getPrevContent().displayname});
-                } else if (ev.getPrevContent().avatar_url && !ev.getContent().avatar_url) {
-                    return _t('%(senderName)s removed their profile picture.', {senderName: senderName});
-                } else if (ev.getPrevContent().avatar_url && ev.getContent().avatar_url && ev.getPrevContent().avatar_url != ev.getContent().avatar_url) {
-                    return _t('%(senderName)s changed their profile picture.', {senderName: senderName});
-                } else if (!ev.getPrevContent().avatar_url && ev.getContent().avatar_url) {
-                    return _t('%(senderName)s set a profile picture.', {senderName: senderName});
+            if (prevContent && prevContent.membership === 'join') {
+                if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) {
+                    return _t('%(oldDisplayName)s changed their display name to %(displayName)s.', {
+                        oldDisplayName: prevContent.displayname,
+                        displayName: content.displayname,
+                    });
+                } else if (!prevContent.displayname && content.displayname) {
+                    return _t('%(senderName)s set their display name to %(displayName)s.', {
+                        senderName: ev.getSender(),
+                        displayName: content.displayname,
+                    });
+                } else if (prevContent.displayname && !content.displayname) {
+                    return _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {
+                        senderName,
+                        oldDisplayName: prevContent.displayname,
+                    });
+                } else if (prevContent.avatar_url && !content.avatar_url) {
+                    return _t('%(senderName)s removed their profile picture.', {senderName});
+                } else if (prevContent.avatar_url && content.avatar_url &&
+                    prevContent.avatar_url !== content.avatar_url) {
+                    return _t('%(senderName)s changed their profile picture.', {senderName});
+                } else if (!prevContent.avatar_url && content.avatar_url) {
+                    return _t('%(senderName)s set a profile picture.', {senderName});
                 } else {
                     // suppress null rejoins
                     return '';
@@ -71,65 +81,119 @@ function textForMemberEvent(ev) {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
                     return _t('VoIP conference started.');
-                }
-                else {
-                    return _t('%(targetName)s joined the room.', {targetName: targetName});
+                } else {
+                    return _t('%(targetName)s joined the room.', {targetName});
                 }
             }
         case 'leave':
             if (ev.getSender() === ev.getStateKey()) {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
                     return _t('VoIP conference finished.');
+                } else if (prevContent.membership === "invite") {
+                    return _t('%(targetName)s rejected the invitation.', {targetName});
+                } else {
+                    return _t('%(targetName)s left the room.', {targetName});
                 }
-                else if (ev.getPrevContent().membership === "invite") {
-                    return _t('%(targetName)s rejected the invitation.', {targetName: targetName});
-                }
-                else {
-                    return _t('%(targetName)s left the room.', {targetName: targetName});
-                }
-            }
-            else if (ev.getPrevContent().membership === "ban") {
-                return _t('%(senderName)s unbanned %(targetName)s.', {senderName: senderName, targetName: targetName});
-            }
-            else if (ev.getPrevContent().membership === "join") {
-                return _t(
-                    '%(senderName)s kicked %(targetName)s.',
-                    {senderName: senderName, targetName: targetName}
-                ) + ' ' + reason;
-            }
-            else if (ev.getPrevContent().membership === "invite") {
-                return _t(
-                    '%(senderName)s withdrew %(targetName)s\'s invitation.',
-                    {senderName: senderName, targetName: targetName}
-                ) + ' ' + reason;
-            }
-            else {
-                return _t('%(targetName)s left the room.', {targetName: targetName});
+            } else if (prevContent.membership === "ban") {
+                return _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName});
+            } else if (prevContent.membership === "join") {
+                return _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + reason;
+            } else if (prevContent.membership === "invite") {
+                return _t('%(senderName)s withdrew %(targetName)s\'s invitation.', {
+                    senderName,
+                    targetName,
+                }) + ' ' + reason;
+            } else {
+                return _t('%(targetName)s left the room.', {targetName});
             }
     }
 }
 
 function textForTopicEvent(ev) {
-    var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    return _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {senderDisplayName: senderDisplayName, topic: ev.getContent().topic});
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    return _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
+        senderDisplayName,
+        topic: ev.getContent().topic,
+    });
 }
 
 function textForRoomNameEvent(ev) {
-    var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
-        return _t('%(senderDisplayName)s removed the room name.', {senderDisplayName: senderDisplayName});
+        return _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
     }
-    return _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {senderDisplayName: senderDisplayName, roomName: ev.getContent().name});
+    return _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {
+        senderDisplayName,
+        roomName: ev.getContent().name,
+    });
+}
+
+function textForServerACLEvent(ev) {
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const prevContent = ev.getPrevContent();
+    const changes = [];
+    const current = ev.getContent();
+    const prev = {
+        deny: Array.isArray(prevContent.deny) ? prevContent.deny : [],
+        allow: Array.isArray(prevContent.allow) ? prevContent.allow : [],
+        allow_ip_literals: !(prevContent.allow_ip_literals === false),
+    };
+    let text = "";
+    if (prev.deny.length === 0 && prev.allow.length === 0) {
+        text = `${senderDisplayName} set server ACLs for this room: `;
+    } else {
+        text = `${senderDisplayName} changed the server ACLs for this room: `;
+    }
+
+    if (!Array.isArray(current.allow)) {
+        current.allow = [];
+    }
+    /* If we know for sure everyone is banned, don't bother showing the diff view */
+    if (current.allow.length === 0) {
+        return text + "🎉 All servers are banned from participating! This room can no longer be used.";
+    }
+
+    if (!Array.isArray(current.deny)) {
+        current.deny = [];
+    }
+
+    const bannedServers = current.deny.filter((srv) => typeof(srv) === 'string' && !prev.deny.includes(srv));
+    const unbannedServers = prev.deny.filter((srv) => typeof(srv) === 'string' && !current.deny.includes(srv));
+    const allowedServers = current.allow.filter((srv) => typeof(srv) === 'string' && !prev.allow.includes(srv));
+    const unallowedServers = prev.allow.filter((srv) => typeof(srv) === 'string' && !current.allow.includes(srv));
+
+    if (bannedServers.length > 0) {
+        changes.push(`Servers matching ${bannedServers.join(", ")} are now banned.`);
+    }
+
+    if (unbannedServers.length > 0) {
+        changes.push(`Servers matching ${unbannedServers.join(", ")} were removed from the ban list.`);
+    }
+
+    if (allowedServers.length > 0) {
+        changes.push(`Servers matching ${allowedServers.join(", ")} are now allowed.`);
+    }
+
+    if (unallowedServers.length > 0) {
+        changes.push(`Servers matching ${unallowedServers.join(", ")} were removed from the allowed list.`);
+    }
+
+    if (prev.allow_ip_literals !== current.allow_ip_literals) {
+        const allowban = current.allow_ip_literals ? "allowed" : "banned";
+        changes.push(`Participating from a server using an IP literal hostname is now ${allowban}.`);
+    }
+
+    return text + changes.join(" ");
 }
 
 function textForMessageEvent(ev) {
-    var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    var message = senderDisplayName + ': ' + ev.getContent().body;
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    let message = senderDisplayName + ': ' + ev.getContent().body;
     if (ev.getContent().msgtype === "m.emote") {
         message = "* " + senderDisplayName + " " + message;
     } else if (ev.getContent().msgtype === "m.image") {
-        message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName: senderDisplayName});
+        message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
     }
     return message;
 }
@@ -179,18 +243,18 @@ function textForRoomAliasesEvent(ev) {
 }
 
 function textForCallAnswerEvent(event) {
-    var senderName = event.sender ? event.sender.name : _t('Someone');
-    var supported = MatrixClientPeg.get().supportsVoip() ? "" : _t('(not supported by this browser)');
-    return _t('%(senderName)s answered the call.', {senderName: senderName}) + ' ' + supported;
+    const senderName = event.sender ? event.sender.name : _t('Someone');
+    const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
+    return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
 }
 
 function textForCallHangupEvent(event) {
     const senderName = event.sender ? event.sender.name : _t('Someone');
     const eventContent = event.getContent();
     let reason = "";
-    if(!MatrixClientPeg.get().supportsVoip()) {
+    if (!MatrixClientPeg.get().supportsVoip()) {
         reason = _t('(not supported by this browser)');
-    } else if(eventContent.reason) {
+    } else if (eventContent.reason) {
         if (eventContent.reason === "ice_failed") {
             reason = _t('(could not connect media)');
         } else if (eventContent.reason === "invite_timeout") {
@@ -203,48 +267,52 @@ function textForCallHangupEvent(event) {
 }
 
 function textForCallInviteEvent(event) {
-    var senderName = event.sender ? event.sender.name : _t('Someone');
+    const senderName = event.sender ? event.sender.name : _t('Someone');
     // FIXME: Find a better way to determine this from the event?
-    var type = "voice";
+    let callType = "voice";
     if (event.getContent().offer && event.getContent().offer.sdp &&
             event.getContent().offer.sdp.indexOf('m=video') !== -1) {
-        type = "video";
+        callType = "video";
     }
-    var supported = MatrixClientPeg.get().supportsVoip() ? "" : _t('(not supported by this browser)');
-    return _t('%(senderName)s placed a %(callType)s call.', {senderName: senderName, callType: type}) + ' ' + supported;
+    const supported = MatrixClientPeg.get().supportsVoip() ? "" : _t('(not supported by this browser)');
+    return _t('%(senderName)s placed a %(callType)s call.', {senderName, callType}) + ' ' + supported;
 }
 
 function textForThreePidInviteEvent(event) {
-    var senderName = event.sender ? event.sender.name : event.getSender();
-    return _t('%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.', {senderName: senderName, targetDisplayName: event.getContent().display_name});
+    const senderName = event.sender ? event.sender.name : event.getSender();
+    return _t('%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.', {
+        senderName,
+        targetDisplayName: event.getContent().display_name,
+    });
 }
 
 function textForHistoryVisibilityEvent(event) {
-    var senderName = event.sender ? event.sender.name : event.getSender();
-    var vis = event.getContent().history_visibility;
-    // XXX: This i18n just isn't going to work for languages with different sentence structure.
-    var text = _t('%(senderName)s made future room history visible to', {senderName: senderName}) + ' ';
-    if (vis === "invited") {
-        text += _t('all room members, from the point they are invited') + '.';
+    const senderName = event.sender ? event.sender.name : event.getSender();
+    switch (event.getContent().history_visibility) {
+        case 'invited':
+            return _t('%(senderName)s made future room history visible to all room members, '
+                + 'from the point they are invited.', {senderName});
+        case 'joined':
+            return _t('%(senderName)s made future room history visible to all room members, '
+                + 'from the point they joined.', {senderName});
+        case 'shared':
+            return _t('%(senderName)s made future room history visible to all room members.', {senderName});
+        case 'world_readable':
+            return _t('%(senderName)s made future room history visible to anyone.', {senderName});
+        default:
+            return _t('%(senderName)s made future room history visible to unknown (%(visibility)s).', {
+                senderName,
+                visibility: event.getContent().history_visibility,
+            });
     }
-    else if (vis === "joined") {
-        text += _t('all room members, from the point they joined') + '.';
-    }
-    else if (vis === "shared") {
-        text += _t('all room members') + '.';
-    }
-    else if (vis === "world_readable") {
-        text += _t('anyone') + '.';
-    }
-    else {
-        text += ' ' + _t('unknown') + ' (' + vis + ').';
-    }
-    return text;
 }
 
 function textForEncryptionEvent(event) {
-    var senderName = event.sender ? event.sender.name : event.getSender();
-    return _t('%(senderName)s turned on end-to-end encryption (algorithm %(algorithm)s).', {senderName: senderName, algorithm: event.getContent().algorithm});
+    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
@@ -255,18 +323,18 @@ function textForPowerEvent(event) {
     }
     const userDefault = event.getContent().users_default || 0;
     // Construct set of userIds
-    let users = [];
+    const users = [];
     Object.keys(event.getContent().users).forEach(
         (userId) => {
             if (users.indexOf(userId) === -1) users.push(userId);
-        }
+        },
     );
     Object.keys(event.getPrevContent().users).forEach(
         (userId) => {
             if (users.indexOf(userId) === -1) users.push(userId);
-        }
+        },
     );
-    let diff = [];
+    const diff = [];
     // XXX: This is also surely broken for i18n
     users.forEach((userId) => {
         // Previous power level
@@ -275,11 +343,11 @@ function textForPowerEvent(event) {
         const to = event.getContent().users[userId];
         if (to !== from) {
             diff.push(
-            	_t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', {
-                    userId: userId,
+                _t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', {
+                    userId,
                     fromPowerLevel: Roles.textualPowerLevel(from, userDefault),
-                    toPowerLevel: Roles.textualPowerLevel(to, userDefault)
-                })
+                    toPowerLevel: Roles.textualPowerLevel(to, userDefault),
+                }),
             );
         }
     });
@@ -287,11 +355,16 @@ function textForPowerEvent(event) {
         return '';
     }
     return _t('%(senderName)s changed the power level of %(powerLevelDiffText)s.', {
-        senderName: senderName,
+        senderName,
         powerLevelDiffText: diff.join(", "),
     });
 }
 
+function textForPinnedEvent(event) {
+    const senderName = event.getSender();
+    return _t("%(senderName)s changed the pinned messages for the room.", {senderName});
+}
+
 function textForWidgetEvent(event) {
     const senderName = event.getSender();
     const {name: prevName, type: prevType, url: prevUrl} = event.getPrevContent();
@@ -322,27 +395,32 @@ function textForWidgetEvent(event) {
     }
 }
 
-var handlers = {
+const handlers = {
     'm.room.message': textForMessageEvent,
+    'm.call.invite': textForCallInviteEvent,
+    'm.call.answer': textForCallAnswerEvent,
+    'm.call.hangup': textForCallHangupEvent,
+};
+
+const stateHandlers = {
     'm.room.aliases': textForRoomAliasesEvent,
-    'm.room.name':    textForRoomNameEvent,
-    'm.room.topic':   textForTopicEvent,
-    'm.room.member':  textForMemberEvent,
-    'm.call.invite':  textForCallInviteEvent,
-    'm.call.answer':  textForCallAnswerEvent,
-    'm.call.hangup':  textForCallHangupEvent,
+    '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,
 
     'im.vector.modular.widgets': textForWidgetEvent,
 };
 
 module.exports = {
     textForEvent: function(ev) {
-        var hdlr = handlers[ev.getType()];
-        if (!hdlr) return "";
-        return hdlr(ev);
-    }
+        const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
+        if (handler) return handler(ev);
+        return '';
+    },
 };

src/Tinter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,148 +15,125 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// FIXME: these vars should be bundled up and attached to
-// module.exports otherwise this will break when included by both
-// react-sdk and apps layered on top.
+const DEBUG = 0;
 
-var DEBUG = 0;
+// utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue]
+function colorToRgb(color) {
+    if (!color) {
+        return [0, 0, 0];
+    }
 
-// The colour keys to be replaced as referred to in CSS
-var keyRgb = [
-    "rgb(118, 207, 166)", // Vector Green
-    "rgb(234, 245, 240)", // Vector Light Green
-    "rgb(211, 239, 225)", // BottomLeftMenu overlay (20% Vector Green)
-];
-
-// Some algebra workings for calculating the tint % of Vector Green & Light Green
-// x * 118 + (1 - x) * 255 = 234
-// x * 118 + 255 - 255 * x = 234
-// x * 118 - x * 255 = 234 - 255
-// (255 - 118) x = 255 - 234
-// x = (255 - 234) / (255 - 118) = 0.16
-
-// The colour keys to be replaced as referred to in SVGs
-var keyHex = [
-    "#76CFA6", // Vector Green
-    "#EAF5F0", // Vector Light Green
-    "#D3EFE1", // BottomLeftMenu overlay (20% Vector Green overlaid on Vector Light Green)
-    "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
-];
-
-// cache of our replacement colours
-// defaults to our keys.
-var colors = [
-    keyHex[0],
-    keyHex[1],
-    keyHex[2],
-    keyHex[3],
-];
-
-var cssFixups = [
-    // {
-    //     style: a style object that should be fixed up taken from a stylesheet
-    //     attr: name of the attribute to be clobbered, e.g. 'color'
-    //     index: ordinal of primary, secondary or tertiary
-    // }
-];
-
-// CSS attributes to be fixed up
-var cssAttrs = [
-    "color",
-    "backgroundColor",
-    "borderColor",
-    "borderTopColor",
-    "borderBottomColor",
-    "borderLeftColor",
-];
-
-var svgAttrs = [
-    "fill",
-    "stroke",
-];
-
-var cached = false;
-
-function calcCssFixups() {
-    if (DEBUG) console.log("calcSvgFixups start");
-    for (var i = 0; i < document.styleSheets.length; i++) {
-        var ss = document.styleSheets[i];
-        if (!ss) continue; // well done safari >:(
-        // Chromium apparently sometimes returns null here; unsure why.
-        // see $14534907369972FRXBx:matrix.org in HQ
-        // ...ah, it's because there's a third party extension like
-        // privacybadger inserting its own stylesheet in there with a
-        // resource:// URI or something which results in a XSS error.
-        // See also #vector:matrix.org/$145357669685386ebCfr:matrix.org
-        // ...except some browsers apparently return stylesheets without
-        // hrefs, which we have no choice but ignore right now
-
-        // XXX seriously? we are hardcoding the name of vector's CSS file in
-        // here?
-        //
-        // Why do we need to limit it to vector's CSS file anyway - if there
-        // are other CSS files affecting the doc don't we want to apply the
-        // same transformations to them?
-        //
-        // Iterating through the CSS looking for matches to hack on feels
-        // pretty horrible anyway. And what if the application skin doesn't use
-        // Vector Green as its primary color?
-
-        if (ss.href && !ss.href.match(/\/bundle.*\.css$/)) continue;
-
-        if (!ss.cssRules) continue;
-        for (var j = 0; j < ss.cssRules.length; j++) {
-            var rule = ss.cssRules[j];
-            if (!rule.style) continue;
-            for (var k = 0; k < cssAttrs.length; k++) {
-                var attr = cssAttrs[k];
-                for (var l = 0; l < keyRgb.length; l++) {
-                    if (rule.style[attr] === keyRgb[l]) {
-                        cssFixups.push({
-                            style: rule.style,
-                            attr: attr,
-                            index: l,
-                        });
-                    }
-                }
-            }
+    if (color[0] === '#') {
+        color = color.slice(1);
+        if (color.length === 3) {
+            color = color[0] + color[0] +
+                    color[1] + color[1] +
+                    color[2] + color[2];
+        }
+        const val = parseInt(color, 16);
+        const r = (val >> 16) & 255;
+        const g = (val >> 8) & 255;
+        const b = val & 255;
+        return [r, g, b];
+    } else {
+        const match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
+        if (match) {
+            return [
+                parseInt(match[1]),
+                parseInt(match[2]),
+                parseInt(match[3]),
+            ];
         }
     }
-    if (DEBUG) console.log("calcSvgFixups end");
+    return [0, 0, 0];
 }
 
-function applyCssFixups() {
-    if (DEBUG) console.log("applyCssFixups start");
-    for (var i = 0; i < cssFixups.length; i++) {
-        var cssFixup = cssFixups[i];
-        cssFixup.style[cssFixup.attr] = colors[cssFixup.index];
-    }
-    if (DEBUG) console.log("applyCssFixups end");
-}
-
-function hexToRgb(color) {
-    if (color[0] === '#') color = color.slice(1);
-    if (color.length === 3) {
-        color = color[0] + color[0] +
-                color[1] + color[1] +
-                color[2] + color[2];
-    }
-    var val = parseInt(color, 16);
-    var r = (val >> 16) & 255;
-    var g = (val >> 8) & 255;
-    var b = val & 255;
-    return [r, g, b];
-}
-
-function rgbToHex(rgb) {
-    var val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
+// utility to turn [red,green,blue] into #rrggbb
+function rgbToColor(rgb) {
+    const val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
     return '#' + (0x1000000 + val).toString(16).slice(1);
 }
 
-// List of functions to call when the tint changes.
-const tintables = [];
+class Tinter {
+    constructor() {
+        // The default colour keys to be replaced as referred to in CSS
+        // (should be overridden by .mx_theme_accentColor and .mx_theme_secondaryAccentColor)
+        this.keyRgb = [
+            "rgb(118, 207, 166)", // Vector Green
+            "rgb(234, 245, 240)", // Vector Light Green
+            "rgb(211, 239, 225)", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
+        ];
+
+        // Some algebra workings for calculating the tint % of Vector Green & Light Green
+        // x * 118 + (1 - x) * 255 = 234
+        // x * 118 + 255 - 255 * x = 234
+        // x * 118 - x * 255 = 234 - 255
+        // (255 - 118) x = 255 - 234
+        // x = (255 - 234) / (255 - 118) = 0.16
+
+        // The colour keys to be replaced as referred to in SVGs
+        this.keyHex = [
+            "#76CFA6", // Vector Green
+            "#EAF5F0", // Vector Light Green
+            "#D3EFE1", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
+            "#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
+            "#000000", // black lowlights of the SVGs (for switching to dark theme)
+        ];
+
+        // track the replacement colours actually being used
+        // defaults to our keys.
+        this.colors = [
+            this.keyHex[0],
+            this.keyHex[1],
+            this.keyHex[2],
+            this.keyHex[3],
+            this.keyHex[4],
+        ];
+
+        // track the most current tint request inputs (which may differ from the
+        // end result stored in this.colors
+        this.currentTint = [
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+        ];
+
+        this.cssFixups = [
+            // { theme: {
+            //      style: a style object that should be fixed up taken from a stylesheet
+            //      attr: name of the attribute to be clobbered, e.g. 'color'
+            //      index: ordinal of primary, secondary or tertiary
+            //   },
+            // }
+        ];
+
+        // CSS attributes to be fixed up
+        this.cssAttrs = [
+            "color",
+            "backgroundColor",
+            "borderColor",
+            "borderTopColor",
+            "borderBottomColor",
+            "borderLeftColor",
+        ];
+
+        this.svgAttrs = [
+            "fill",
+            "stroke",
+        ];
+
+        // List of functions to call when the tint changes.
+        this.tintables = [];
+
+        // the currently loaded theme (if any)
+        this.theme = undefined;
+
+        // whether to force a tint (e.g. after changing theme)
+        this.forceTint = false;
+    }
 
-module.exports = {
     /**
      * Register a callback to fire when the tint changes.
      * This is used to rewrite the tintable SVGs with the new tint.
@@ -167,111 +145,282 @@ module.exports = {
      *
      * @param {Function} tintable Function to call when the tint changes.
      */
-    registerTintable : function(tintable) {
-        tintables.push(tintable);
-    },
+    registerTintable(tintable) {
+        this.tintables.push(tintable);
+    }
 
-    tint: function(primaryColor, secondaryColor, tertiaryColor) {
+    getKeyRgb() {
+        return this.keyRgb;
+    }
 
-        if (!cached) {
-            calcCssFixups();
-            cached = true;
+    tint(primaryColor, secondaryColor, tertiaryColor) {
+        this.currentTint[0] = primaryColor;
+        this.currentTint[1] = secondaryColor;
+        this.currentTint[2] = tertiaryColor;
+
+        this.calcCssFixups();
+
+        if (DEBUG) {
+            console.log("Tinter.tint(" + primaryColor + ", " +
+                secondaryColor + ", " +
+                tertiaryColor + ")");
         }
 
         if (!primaryColor) {
-            primaryColor = "#76CFA6"; // Vector green
-            secondaryColor = "#EAF5F0"; // Vector light green
+            primaryColor = this.keyRgb[0];
+            secondaryColor = this.keyRgb[1];
+            tertiaryColor = this.keyRgb[2];
         }
 
         if (!secondaryColor) {
             const x = 0.16; // average weighting factor calculated from vector green & light green
-            var rgb = hexToRgb(primaryColor);
+            const rgb = colorToRgb(primaryColor);
             rgb[0] = x * rgb[0] + (1 - x) * 255;
             rgb[1] = x * rgb[1] + (1 - x) * 255;
             rgb[2] = x * rgb[2] + (1 - x) * 255;
-            secondaryColor = rgbToHex(rgb);
+            secondaryColor = rgbToColor(rgb);
         }
 
         if (!tertiaryColor) {
             const x = 0.19;
-            var rgb1 = hexToRgb(primaryColor);
-            var rgb2 = hexToRgb(secondaryColor);
+            const rgb1 = colorToRgb(primaryColor);
+            const rgb2 = colorToRgb(secondaryColor);
             rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
             rgb1[1] = x * rgb1[1] + (1 - x) * rgb2[1];
             rgb1[2] = x * rgb1[2] + (1 - x) * rgb2[2];
-            tertiaryColor = rgbToHex(rgb1);
+            tertiaryColor = rgbToColor(rgb1);
         }
 
-        if (colors[0] === primaryColor &&
-            colors[1] === secondaryColor &&
-            colors[2] === tertiaryColor)
-        {
+        if (this.forceTint == false &&
+            this.colors[0] === primaryColor &&
+            this.colors[1] === secondaryColor &&
+            this.colors[2] === tertiaryColor) {
             return;
         }
 
-        colors[0] = primaryColor;
-        colors[1] = secondaryColor;
-        colors[2] = tertiaryColor;
+        this.forceTint = false;
 
-        if (DEBUG) console.log("Tinter.tint");
+        this.colors[0] = primaryColor;
+        this.colors[1] = secondaryColor;
+        this.colors[2] = tertiaryColor;
+
+        if (DEBUG) {
+            console.log("Tinter.tint final: (" + primaryColor + ", " +
+                secondaryColor + ", " +
+                tertiaryColor + ")");
+        }
 
         // go through manually fixing up the stylesheets.
-        applyCssFixups();
+        this.applyCssFixups();
 
         // tell all the SVGs to go fix themselves up
         // we don't do this as a dispatch otherwise it will visually lag
-        tintables.forEach(function(tintable) {
+        this.tintables.forEach(function(tintable) {
             tintable();
         });
-    },
+    }
+
+    tintSvgWhite(whiteColor) {
+        this.currentTint[3] = whiteColor;
 
-    tintSvgWhite: function(whiteColor) {
         if (!whiteColor) {
-            whiteColor = colors[3];
+            whiteColor = this.colors[3];
         }
-        if (colors[3] === whiteColor) {
+        if (this.colors[3] === whiteColor) {
             return;
         }
-        colors[3] = whiteColor;
-        tintables.forEach(function(tintable) {
+        this.colors[3] = whiteColor;
+        this.tintables.forEach(function(tintable) {
             tintable();
         });
-    },
+    }
+
+    tintSvgBlack(blackColor) {
+        this.currentTint[4] = blackColor;
+
+        if (!blackColor) {
+            blackColor = this.colors[4];
+        }
+        if (this.colors[4] === blackColor) {
+            return;
+        }
+        this.colors[4] = blackColor;
+        this.tintables.forEach(function(tintable) {
+            tintable();
+        });
+    }
+
+
+    setTheme(theme) {
+        this.theme = theme;
+
+        // update keyRgb from the current theme CSS itself, if it defines it
+        if (document.getElementById('mx_theme_accentColor')) {
+            this.keyRgb[0] = window.getComputedStyle(
+                document.getElementById('mx_theme_accentColor')).color;
+        }
+        if (document.getElementById('mx_theme_secondaryAccentColor')) {
+            this.keyRgb[1] = window.getComputedStyle(
+                document.getElementById('mx_theme_secondaryAccentColor')).color;
+        }
+        if (document.getElementById('mx_theme_tertiaryAccentColor')) {
+            this.keyRgb[2] = window.getComputedStyle(
+                document.getElementById('mx_theme_tertiaryAccentColor')).color;
+        }
+
+        this.calcCssFixups();
+        this.forceTint = true;
+
+        this.tint(this.currentTint[0], this.currentTint[1], this.currentTint[2]);
+
+        if (theme === 'dark') {
+            // abuse the tinter to change all the SVG's #fff to #2d2d2d
+            // XXX: obviously this shouldn't be hardcoded here.
+            this.tintSvgWhite('#2d2d2d');
+            this.tintSvgBlack('#dddddd');
+        } else {
+            this.tintSvgWhite('#ffffff');
+            this.tintSvgBlack('#000000');
+        }
+    }
+
+    calcCssFixups() {
+        // cache our fixups
+        if (this.cssFixups[this.theme]) return;
+
+        if (DEBUG) {
+            console.debug("calcCssFixups start for " + this.theme + " (checking " +
+                document.styleSheets.length +
+                " stylesheets)");
+        }
+
+        this.cssFixups[this.theme] = [];
+
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            const ss = document.styleSheets[i];
+            try {
+                if (!ss) continue; // well done safari >:(
+                // Chromium apparently sometimes returns null here; unsure why.
+                // see $14534907369972FRXBx:matrix.org in HQ
+                // ...ah, it's because there's a third party extension like
+                // privacybadger inserting its own stylesheet in there with a
+                // resource:// URI or something which results in a XSS error.
+                // See also #vector:matrix.org/$145357669685386ebCfr:matrix.org
+                // ...except some browsers apparently return stylesheets without
+                // hrefs, which we have no choice but ignore right now
+
+                // XXX seriously? we are hardcoding the name of vector's CSS file in
+                // here?
+                //
+                // Why do we need to limit it to vector's CSS file anyway - if there
+                // are other CSS files affecting the doc don't we want to apply the
+                // same transformations to them?
+                //
+                // Iterating through the CSS looking for matches to hack on feels
+                // pretty horrible anyway. And what if the application skin doesn't use
+                // Vector Green as its primary color?
+                // --richvdh
+
+                // Yes, tinting assumes that you are using the Riot skin for now.
+                // The right solution will be to move the CSS over to react-sdk.
+                // And yes, the default assets for the base skin might as well use
+                // Vector Green as any other colour.
+                // --matthew
+
+                // stylesheets we don't have permission to access (eg. ones from extensions) have a null
+                // href and will throw exceptions if we try to access their rules.
+                if (!ss.href || !ss.href.match(new RegExp('/theme-' + this.theme + '.css$'))) continue;
+                if (ss.disabled) continue;
+                if (!ss.cssRules) continue;
+
+                if (DEBUG) console.debug("calcCssFixups checking " + ss.cssRules.length + " rules for " + ss.href);
+
+                for (let j = 0; j < ss.cssRules.length; j++) {
+                    const rule = ss.cssRules[j];
+                    if (!rule.style) continue;
+                    if (rule.selectorText && rule.selectorText.match(/#mx_theme/)) continue;
+                    for (let k = 0; k < this.cssAttrs.length; k++) {
+                        const attr = this.cssAttrs[k];
+                        for (let l = 0; l < this.keyRgb.length; l++) {
+                            if (rule.style[attr] === this.keyRgb[l]) {
+                                this.cssFixups[this.theme].push({
+                                    style: rule.style,
+                                    attr: attr,
+                                    index: l,
+                                });
+                            }
+                        }
+                    }
+                }
+            } catch (e) {
+                // Catch any random exceptions that happen here: all sorts of things can go
+                // wrong with this (nulls, SecurityErrors) and mostly it's for other
+                // stylesheets that we don't want to proces anyway. We should not propagate an
+                // exception out since this will cause the app to fail to start.
+                console.log("Failed to calculate CSS fixups for a stylesheet: " + ss.href, e);
+            }
+        }
+        if (DEBUG) {
+            console.log("calcCssFixups end (" +
+                this.cssFixups[this.theme].length +
+                " fixups)");
+        }
+    }
+
+    applyCssFixups() {
+        if (DEBUG) {
+            console.log("applyCssFixups start (" +
+                this.cssFixups[this.theme].length +
+                " fixups)");
+        }
+        for (let i = 0; i < this.cssFixups[this.theme].length; i++) {
+            const cssFixup = this.cssFixups[this.theme][i];
+            try {
+                cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index];
+            } catch (e) {
+                // Firefox Quantum explodes if you manually edit the CSS in the
+                // inspector and then try to do a tint, as apparently all the
+                // fixups are then stale.
+                console.error("Failed to apply cssFixup in Tinter! ", e.name);
+            }
+        }
+        if (DEBUG) console.log("applyCssFixups end");
+    }
 
     // XXX: we could just move this all into TintableSvg, but as it's so similar
     // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
     // keeping it here for now.
-    calcSvgFixups: function(svgs) {
+    calcSvgFixups(svgs) {
         // go through manually fixing up SVG colours.
         // we could do this by stylesheets, but keeping the stylesheets
         // updated would be a PITA, so just brute-force search for the
         // key colour; cache the element and apply.
 
         if (DEBUG) console.log("calcSvgFixups start for " + svgs);
-        var fixups = [];
-        for (var i = 0; i < svgs.length; i++) {
-            var svgDoc;
+        const fixups = [];
+        for (let i = 0; i < svgs.length; i++) {
+            let svgDoc;
             try {
                 svgDoc = svgs[i].contentDocument;
-            }
-            catch(e) {
-                var msg = 'Failed to get svg.contentDocument of ' + svgs[i].toString();
+            } catch (e) {
+                let msg = 'Failed to get svg.contentDocument of ' + svgs[i].toString();
                 if (e.message) {
                     msg += e.message;
                 }
                 if (e.stack) {
                     msg += ' | stack: ' + e.stack;
                 }
-                console.error(e);
+                console.error(msg);
             }
             if (!svgDoc) continue;
-            var tags = svgDoc.getElementsByTagName("*");
-            for (var j = 0; j < tags.length; j++) {
-                var tag = tags[j];
-                for (var k = 0; k < svgAttrs.length; k++) {
-                    var attr = svgAttrs[k];
-                    for (var l = 0; l < keyHex.length; l++) {
-                        if (tag.getAttribute(attr) && tag.getAttribute(attr).toUpperCase() === keyHex[l]) {
+            const tags = svgDoc.getElementsByTagName("*");
+            for (let j = 0; j < tags.length; j++) {
+                const tag = tags[j];
+                for (let k = 0; k < this.svgAttrs.length; k++) {
+                    const attr = this.svgAttrs[k];
+                    for (let l = 0; l < this.keyHex.length; l++) {
+                        if (tag.getAttribute(attr) &&
+                            tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
                             fixups.push({
                                 node: tag,
                                 attr: attr,
@@ -285,14 +434,19 @@ module.exports = {
         if (DEBUG) console.log("calcSvgFixups end");
 
         return fixups;
-    },
+    }
 
-    applySvgFixups: function(fixups) {
+    applySvgFixups(fixups) {
         if (DEBUG) console.log("applySvgFixups start for " + fixups);
-        for (var i = 0; i < fixups.length; i++) {
-            var svgFixup = fixups[i];
-            svgFixup.node.setAttribute(svgFixup.attr, colors[svgFixup.index]);
+        for (let i = 0; i < fixups.length; i++) {
+            const svgFixup = fixups[i];
+            svgFixup.node.setAttribute(svgFixup.attr, this.colors[svgFixup.index]);
         }
         if (DEBUG) console.log("applySvgFixups end");
     }
-};
+}
+
+if (global.singletonTinter === undefined) {
+    global.singletonTinter = new Tinter();
+}
+export default global.singletonTinter;

src/ToWidgetPostMessageApi.js

@@ -0,0 +1,86 @@
+/*
+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 Promise from "bluebird";
+
+// const OUTBOUND_API_NAME = 'toWidget';
+
+// Initiate requests using the "toWidget" postMessage API and handle responses
+// NOTE: ToWidgetPostMessageApi only handles message events with a data payload with a
+// response field
+export default class ToWidgetPostMessageApi {
+    constructor(timeoutMs) {
+        this._timeoutMs = timeoutMs || 5000; // default to 5s timer
+        this._counter = 0;
+        this._requestMap = {
+            // $ID: {resolve, reject}
+        };
+        this.start = this.start.bind(this);
+        this.stop = this.stop.bind(this);
+        this.onPostMessage = this.onPostMessage.bind(this);
+    }
+
+    start() {
+        window.addEventListener('message', this.onPostMessage);
+    }
+
+    stop() {
+        window.removeEventListener('message', this.onPostMessage);
+    }
+
+    onPostMessage(ev) {
+        // THIS IS ALL UNSAFE EXECUTION.
+        // We do not verify who the sender of `ev` is!
+        const payload = ev.data;
+        // NOTE: Workaround for running in a mobile WebView where a
+        // postMessage immediately triggers this callback even though it is
+        // not the response.
+        if (payload.response === undefined) {
+            return;
+        }
+        const promise = this._requestMap[payload.requestId];
+        if (!promise) {
+            return;
+        }
+        delete this._requestMap[payload.requestId];
+        promise.resolve(payload);
+    }
+
+    // Initiate outbound requests (toWidget)
+    exec(action, targetWindow, targetOrigin) {
+        targetWindow = targetWindow || window.parent; // default to parent window
+        targetOrigin = targetOrigin || "*";
+        this._counter += 1;
+        action.requestId = Date.now() + "-" + Math.random().toString(36) + "-" + this._counter;
+
+        return new Promise((resolve, reject) => {
+            this._requestMap[action.requestId] = {resolve, reject};
+            targetWindow.postMessage(action, targetOrigin);
+
+            if (this._timeoutMs > 0) {
+                setTimeout(() => {
+                    if (!this._requestMap[action.requestId]) {
+                        return;
+                    }
+                    console.error("postMessage request timed out. Sent object: " + JSON.stringify(action),
+                        this._requestMap);
+                    this._requestMap[action.requestId].reject(new Error("Timed out"));
+                    delete this._requestMap[action.requestId];
+                }, this._timeoutMs);
+            }
+        });
+    }
+}

src/UnknownDeviceErrorHandler.js

@@ -1,51 +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 dis from './dispatcher';
-import sdk from './index';
-import Modal from './Modal';
-
-let isDialogOpen = false;
-
-const onAction = function(payload) {
-    if (payload.action === 'unknown_device_error' && !isDialogOpen) {
-        const UnknownDeviceDialog = sdk.getComponent('dialogs.UnknownDeviceDialog');
-        isDialogOpen = true;
-        Modal.createTrackedDialog('Unknown Device Error', '', UnknownDeviceDialog, {
-            devices: payload.err.devices,
-            room: payload.room,
-            onFinished: (r) => {
-                isDialogOpen = false;
-                // XXX: temporary logging to try to diagnose
-                // https://github.com/vector-im/riot-web/issues/3148
-                console.log('UnknownDeviceDialog closed with '+r);
-            },
-        }, 'mx_Dialog_unknownDevice');
-    }
-};
-
-let ref = null;
-
-export function startListening() {
-    ref = dis.register(onAction);
-}
-
-export function stopListening() {
-    if (ref) {
-        dis.unregister(ref);
-        ref = null;
-    }
-}

src/Unread.js

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var MatrixClientPeg = require('./MatrixClientPeg');
-import UserSettingsStore from './UserSettingsStore';
+const MatrixClientPeg = require('./MatrixClientPeg');
 import shouldHideEvent from './shouldHideEvent';
-var sdk = require('./index');
+const sdk = require('./index');
 
 module.exports = {
     /**
@@ -29,22 +28,24 @@ module.exports = {
             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;
         }
-        var EventTile = sdk.getComponent('rooms.EventTile');
+        const EventTile = sdk.getComponent('rooms.EventTile');
         return EventTile.haveTileForEvent(ev);
     },
 
     doesRoomHaveUnreadMessages: function(room) {
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        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 :((
-        var readUpToId = room.getEventReadUpTo(myUserId);
+        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!
@@ -54,8 +55,7 @@ module.exports = {
         //             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)
-        {
+            room.timeline[room.timeline.length - 1].sender.userId === myUserId) {
             return false;
         }
 
@@ -65,17 +65,16 @@ module.exports = {
         // we have and the read receipt. We could fetch more history to try & find out,
         // but currently we just guess.
 
-        const syncedSettings = UserSettingsStore.getSyncedSettings();
         // Loop through messages, starting with the most recent...
-        for (var i = room.timeline.length - 1; i >= 0; --i) {
-            var ev = room.timeline[i];
+        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 recents
                 // that counts and we can stop looking because the user's read
                 // this and everything before.
                 return false;
-            } else if (!shouldHideEvent(ev, syncedSettings) && this.eventTriggersUnreadCount(ev)) {
+            } else if (!shouldHideEvent(ev) && this.eventTriggersUnreadCount(ev)) {
                 // We've found a message that counts before we hit
                 // the read marker, so this room is definitely unread.
                 return true;
@@ -86,5 +85,5 @@ module.exports = {
         // is unread on the theory that false positives are better than
         // false negatives here.
         return true;
-    }
+    },
 };

src/UserAddress.js

@@ -16,11 +16,12 @@ limitations under the License.
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 
-const mxidRegex = /^@\S+:\S+$/;
+const mxUserIdRegex = /^@\S+:\S+$/;
+const mxRoomIdRegex = /^!\S+:\S+$/;
 
 import PropTypes from 'prop-types';
 export const addressTypes = [
-    'mx', 'email',
+    'mx-user-id', 'mx-room-id', 'email',
 ];
 
 // PropType definition for an object describing
@@ -41,13 +42,16 @@ export const UserAddressType = PropTypes.shape({
 
 export function getAddressType(inputText) {
     const isEmailAddress = emailRegex.test(inputText);
-    const isMatrixId = mxidRegex.test(inputText);
+    const isUserId = mxUserIdRegex.test(inputText);
+    const isRoomId = mxRoomIdRegex.test(inputText);
 
     // sanity check the input for user IDs
     if (isEmailAddress) {
         return 'email';
-    } else if (isMatrixId) {
-        return 'mx';
+    } else if (isUserId) {
+        return 'mx-user-id';
+    } else if (isRoomId) {
+        return 'mx-room-id';
     } else {
         return null;
     }

src/UserSettingsStore.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,30 +17,11 @@ limitations under the License.
 
 import Promise from 'bluebird';
 import MatrixClientPeg from './MatrixClientPeg';
-import Notifier from './Notifier';
-import { _t } from './languageHandler';
 
 /*
  * TODO: Make things use this. This is all WIP - see UserSettings.js for usage.
  */
-
 export default {
-    LABS_FEATURES: [
-        {
-            name: "-",
-            id: 'matrix_apps',
-            default: true,
-
-            // XXX: Always use default, ignore localStorage and remove from labs
-            override: true,
-        },
-    ],
-
-    // horrible but it works. The locality makes this somewhat more palatable.
-    doTranslations: function() {
-        this.LABS_FEATURES[0].name = _t("Matrix Apps");
-    },
-
     loadProfileInfo: function() {
         const cli = MatrixClientPeg.get();
         return cli.getProfileInfo(cli.credentials.userId);
@@ -62,25 +44,6 @@ export default {
         // TODO
     },
 
-    getEnableNotifications: function() {
-        return Notifier.isEnabled();
-    },
-
-    setEnableNotifications: function(enable) {
-        if (!Notifier.supportsDesktopNotifications()) {
-            return;
-        }
-        Notifier.setEnabled(enable);
-    },
-
-    getEnableAudioNotifications: function() {
-        return Notifier.isAudioEnabled();
-    },
-
-    setEnableAudioNotifications: function(enable) {
-        Notifier.setAudioEnabled(enable);
-    },
-
     changePassword: function(oldPassword, newPassword) {
         const cli = MatrixClientPeg.get();
 
@@ -127,83 +90,4 @@ export default {
             append: true,  // We always append for email pushers since we don't want to stop other accounts notifying to the same email address
         });
     },
-
-    getUrlPreviewsDisabled: function() {
-        const event = MatrixClientPeg.get().getAccountData('org.matrix.preview_urls');
-        return (event && event.getContent().disable);
-    },
-
-    setUrlPreviewsDisabled: function(disabled) {
-        // FIXME: handle errors
-        return MatrixClientPeg.get().setAccountData('org.matrix.preview_urls', {
-            disable: disabled,
-        });
-    },
-
-    getSyncedSettings: function() {
-        const event = MatrixClientPeg.get().getAccountData('im.vector.web.settings');
-        return event ? event.getContent() : {};
-    },
-
-    getSyncedSetting: function(type, defaultValue = null) {
-        const settings = this.getSyncedSettings();
-        return settings.hasOwnProperty(type) ? settings[type] : defaultValue;
-    },
-
-    setSyncedSetting: function(type, value) {
-        const settings = this.getSyncedSettings();
-        settings[type] = value;
-        // FIXME: handle errors
-        return MatrixClientPeg.get().setAccountData('im.vector.web.settings', settings);
-    },
-
-    getLocalSettings: function() {
-        const localSettingsString = localStorage.getItem('mx_local_settings') || '{}';
-        return JSON.parse(localSettingsString);
-    },
-
-    getLocalSetting: function(type, defaultValue = null) {
-        const settings = this.getLocalSettings();
-        return settings.hasOwnProperty(type) ? settings[type] : defaultValue;
-    },
-
-    setLocalSetting: function(type, value) {
-        const settings = this.getLocalSettings();
-        settings[type] = value;
-        // FIXME: handle errors
-        localStorage.setItem('mx_local_settings', JSON.stringify(settings));
-    },
-
-    getFeatureById(feature: string) {
-        for (let i = 0; i < this.LABS_FEATURES.length; i++) {
-            const f = this.LABS_FEATURES[i];
-            if (f.id === feature) {
-                return f;
-            }
-        }
-        return null;
-    },
-
-    isFeatureEnabled: function(featureId: string): boolean {
-        // Disable labs for guests.
-        if (MatrixClientPeg.get().isGuest()) return false;
-
-        const feature = this.getFeatureById(featureId);
-        if (!feature) {
-            console.warn(`Unknown feature "${featureId}"`);
-            return false;
-        }
-        // Return the default if this feature has an override to be the default value or
-        // if the feature has never been toggled and is therefore not in localStorage
-        if (Object.keys(feature).includes('override') ||
-            localStorage.getItem(`mx_labs_feature_${featureId}`) === null
-        ) {
-            return feature.default;
-        }
-        return localStorage.getItem(`mx_labs_feature_${featureId}`) === 'true';
-    },
-
-    setFeatureEnabled: function(featureId: string, enabled: boolean) {
-        localStorage.setItem(`mx_labs_feature_${featureId}`, enabled);
-    },
 };

src/VectorConferenceHandler.js

@@ -0,0 +1,138 @@
+/*
+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.
+*/
+
+"use strict";
+
+import Promise from 'bluebird';
+var Matrix = require("matrix-js-sdk");
+var Room = Matrix.Room;
+var CallHandler = require('./CallHandler');
+
+// FIXME: this is Riot (Vector) specific code, but will be removed shortly when
+// we switch over to jitsi entirely for video conferencing.
+
+// FIXME: This currently forces Vector to try to hit the matrix.org AS for conferencing.
+// This is bad because it prevents people running their own ASes from being used.
+// This isn't permanent and will be customisable in the future: see the proposal
+// at docs/conferencing.md for more info.
+var USER_PREFIX = "fs_";
+var DOMAIN = "matrix.org";
+
+function ConferenceCall(matrixClient, groupChatRoomId) {
+    this.client = matrixClient;
+    this.groupRoomId = groupChatRoomId;
+    this.confUserId = module.exports.getConferenceUserIdForRoom(this.groupRoomId);
+}
+
+ConferenceCall.prototype.setup = function() {
+    var self = this;
+    return this._joinConferenceUser().then(function() {
+        return self._getConferenceUserRoom();
+    }).then(function(room) {
+        // 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!)
+        var call = Matrix.createNewMatrixCall(self.client, room.roomId);
+        call.confUserId = self.confUserId;
+        call.groupRoomId = self.groupRoomId;
+        return call;
+    });
+};
+
+ConferenceCall.prototype._joinConferenceUser = function() {
+    // Make sure the conference user is in the group chat room
+    var groupRoom = this.client.getRoom(this.groupRoomId);
+    if (!groupRoom) {
+        return Promise.reject("Bad group room ID");
+    }
+    var member = groupRoom.getMember(this.confUserId);
+    if (member && member.membership === "join") {
+        return Promise.resolve();
+    }
+    return this.client.invite(this.groupRoomId, this.confUserId);
+};
+
+ConferenceCall.prototype._getConferenceUserRoom = function() {
+    // Use an existing 1:1 with the conference user; else make one
+    var rooms = this.client.getRooms();
+    var confRoom = null;
+    for (var i = 0; i < rooms.length; i++) {
+        var confUser = rooms[i].getMember(this.confUserId);
+        if (confUser && confUser.membership === "join" &&
+                rooms[i].getJoinedMemberCount() === 2) {
+            confRoom = rooms[i];
+            break;
+        }
+    }
+    if (confRoom) {
+        return Promise.resolve(confRoom);
+    }
+    return this.client.createRoom({
+        preset: "private_chat",
+        invite: [this.confUserId]
+    }).then(function(res) {
+        return new Room(res.room_id, null, client.getUserId());
+    });
+};
+
+/**
+ * Check if this user ID is in fact a conference bot.
+ * @param {string} userId The user ID to check.
+ * @return {boolean} True if it is a conference bot.
+ */
+module.exports.isConferenceUser = function(userId) {
+    if (userId.indexOf("@" + USER_PREFIX) !== 0) {
+        return false;
+    }
+    var base64part = userId.split(":")[0].substring(1 + USER_PREFIX.length);
+    if (base64part) {
+        var decoded = new Buffer(base64part, "base64").toString();
+        // ! $STUFF : $STUFF
+        return /^!.+:.+/.test(decoded);
+    }
+    return false;
+};
+
+module.exports.getConferenceUserIdForRoom = function(roomId) {
+    // abuse browserify's core node Buffer support (strip padding ='s)
+    var base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, "");
+    return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN;
+};
+
+module.exports.createNewMatrixCall = function(client, roomId) {
+    var confCall = new ConferenceCall(
+        client, roomId
+    );
+    return confCall.setup();
+};
+
+module.exports.getConferenceCallForRoom = function(roomId) {
+    // search for a conference 1:1 call for this group chat room ID
+    var activeCall = CallHandler.getAnyActiveCall();
+    if (activeCall && activeCall.confUserId) {
+        var thisRoomConfUserId = module.exports.getConferenceUserIdForRoom(
+            roomId
+        );
+        if (thisRoomConfUserId === activeCall.confUserId) {
+            return activeCall;
+        }
+    }
+    return null;
+};
+
+module.exports.ConferenceCall = ConferenceCall;
+
+module.exports.slot = 'conference';

src/Velociraptor.js

@@ -1,6 +1,7 @@
-var React = require('react');
-var ReactDom = require('react-dom');
-var Velocity = require('velocity-vector');
+const React = require('react');
+const ReactDom = require('react-dom');
+import PropTypes from 'prop-types';
+const Velocity = require('velocity-vector');
 
 /**
  * The Velociraptor contains components and animates transitions with velocity.
@@ -14,16 +15,16 @@ module.exports = React.createClass({
 
     propTypes: {
         // either a list of child nodes, or a single child.
-        children: React.PropTypes.any,
+        children: PropTypes.any,
 
         // optional transition information for changing existing children
-        transition: React.PropTypes.object,
+        transition: PropTypes.object,
 
         // a list of state objects to apply to each child node in turn
-        startStyles: React.PropTypes.array,
+        startStyles: PropTypes.array,
 
         // a list of transition options from the corresponding startStyle
-        enterTransitionOpts: React.PropTypes.array,
+        enterTransitionOpts: PropTypes.array,
     },
 
     getDefaultProps: function() {
@@ -46,13 +47,13 @@ module.exports = React.createClass({
      * update `this.children` according to the new list of children given
      */
     _updateChildren: function(newChildren) {
-        var self = this;
-        var oldChildren = this.children || {};
+        const self = this;
+        const oldChildren = this.children || {};
         this.children = {};
         React.Children.toArray(newChildren).forEach(function(c) {
             if (oldChildren[c.key]) {
-                var old = oldChildren[c.key];
-                var oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
+                const old = oldChildren[c.key];
+                const oldNode = ReactDom.findDOMNode(self.nodes[old.key]);
 
                 if (oldNode && oldNode.style.left != c.props.style.left) {
                     Velocity(oldNode, { left: c.props.style.left }, self.props.transition).then(function() {
@@ -71,18 +72,18 @@ module.exports = React.createClass({
             } else {
                 // new element. If we have a startStyle, use that as the style and go through
                 // the enter animations
-                var newProps = {};
-                var restingStyle = c.props.style;
+                const newProps = {};
+                const restingStyle = c.props.style;
 
-                var startStyles = self.props.startStyles;
+                const startStyles = self.props.startStyles;
                 if (startStyles.length > 0) {
-                    var startStyle = startStyles[0];
+                    const startStyle = startStyles[0];
                     newProps.style = startStyle;
                     // console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
                 }
 
-                newProps.ref = (n => self._collectNode(
-                    c.key, n, restingStyle
+                newProps.ref = ((n) => self._collectNode(
+                    c.key, n, restingStyle,
                 ));
 
                 self.children[c.key] = React.cloneElement(c, newProps);
@@ -103,8 +104,8 @@ module.exports = React.createClass({
             this.nodes[k] === undefined &&
             this.props.startStyles.length > 0
         ) {
-            var startStyles = this.props.startStyles;
-            var transitionOpts = this.props.enterTransitionOpts;
+            const startStyles = this.props.startStyles;
+            const transitionOpts = this.props.enterTransitionOpts;
             const domNode = ReactDom.findDOMNode(node);
             // start from startStyle 1: 0 is the one we gave it
             // to start with, so now we animate 1 etc.
@@ -146,7 +147,7 @@ module.exports = React.createClass({
             // creating/destroying large numbers of elements"
             // (https://github.com/julianshapiro/velocity/issues/47)
             const domNode = ReactDom.findDOMNode(this.nodes[k]);
-            Velocity.Utilities.removeData(domNode);
+            if (domNode) Velocity.Utilities.removeData(domNode);
         }
         this.nodes[k] = node;
     },
@@ -154,7 +155,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <span>
-                {Object.values(this.children)}
+                { Object.values(this.children) }
             </span>
         );
     },

src/VelocityBounce.js

@@ -1,9 +1,9 @@
-var Velocity = require('velocity-vector');
+const Velocity = require('velocity-vector');
 
 // courtesy of https://github.com/julianshapiro/velocity/issues/283
 // We only use easeOutBounce (easeInBounce is just sort of nonsensical)
 function bounce( p ) {
-    var pow2,
+    let pow2,
         bounce = 4;
 
     while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {

src/WhoIsTyping.js

@@ -14,13 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var MatrixClientPeg = require("./MatrixClientPeg");
+const MatrixClientPeg = require("./MatrixClientPeg");
 import { _t } from './languageHandler';
 
 module.exports = {
+    usersTypingApartFromMeAndIgnored: function(room) {
+        return this.usersTyping(
+            room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
+        );
+    },
+
     usersTypingApartFromMe: function(room) {
         return this.usersTyping(
-            room, [MatrixClientPeg.get().credentials.userId]
+            room, [MatrixClientPeg.get().credentials.userId],
         );
     },
 
@@ -29,15 +35,15 @@ module.exports = {
      * to exclude, return a list of user objects who are typing.
      */
     usersTyping: function(room, exclude) {
-        var whoIsTyping = [];
+        const whoIsTyping = [];
 
         if (exclude === undefined) {
             exclude = [];
         }
 
-        var memberKeys = Object.keys(room.currentState.members);
-        for (var i = 0; i < memberKeys.length; ++i) {
-            var 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) {
@@ -62,13 +68,11 @@ module.exports = {
         const names = whoIsTyping.map(function(m) {
             return m.name;
         });
-        if (othersCount==1) {
-            return _t('%(names)s and one other are typing', {names: names.slice(0, limit - 1).join(', ')});
-        } else 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});
         }
-    }
+    },
 };

src/WidgetMessaging.js

@@ -0,0 +1,117 @@
+/*
+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.
+*/
+
+/*
+* See - https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing for
+* spec. details / documentation.
+*/
+
+import FromWidgetPostMessageApi from './FromWidgetPostMessageApi';
+import ToWidgetPostMessageApi from './ToWidgetPostMessageApi';
+
+if (!global.mxFromWidgetMessaging) {
+    global.mxFromWidgetMessaging = new FromWidgetPostMessageApi();
+    global.mxFromWidgetMessaging.start();
+}
+if (!global.mxToWidgetMessaging) {
+    global.mxToWidgetMessaging = new ToWidgetPostMessageApi();
+    global.mxToWidgetMessaging.start();
+}
+
+const OUTBOUND_API_NAME = 'toWidget';
+
+export default class WidgetMessaging {
+    constructor(widgetId, widgetUrl, target) {
+        this.widgetId = widgetId;
+        this.widgetUrl = widgetUrl;
+        this.target = target;
+        this.fromWidget = global.mxFromWidgetMessaging;
+        this.toWidget = global.mxToWidgetMessaging;
+        this.start();
+    }
+
+    messageToWidget(action) {
+        action.widgetId = this.widgetId; // Required to be sent for all outbound requests
+
+        return this.toWidget.exec(action, this.target).then((data) => {
+            // Check for errors and reject if found
+            if (data.response === undefined) { // null is valid
+                throw new Error("Missing 'response' field");
+            }
+            if (data.response && data.response.error) {
+                const err = data.response.error;
+                const msg = String(err.message ? err.message : "An error was returned");
+                if (err._error) {
+                    console.error(err._error);
+                }
+                // Potential XSS attack if 'msg' is not appropriately sanitized,
+                // as it is untrusted input by our parent window (which we assume is Riot).
+                // We can't aggressively sanitize [A-z0-9] since it might be a translation.
+                throw new Error(msg);
+            }
+            // Return the response field for the request
+            return data.response;
+        });
+    }
+
+    /**
+     * 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);
+        return this.messageToWidget({
+                api: OUTBOUND_API_NAME,
+                action: "screenshot",
+            })
+            .catch((error) => new Error("Failed to get screenshot: " + error.message))
+            .then((response) => response.screenshot);
+    }
+
+    /**
+     * Request capabilities required by the widget
+     * @return {Promise} To be resolved with an array of requested widget capabilities
+     */
+    getCapabilities() {
+        console.warn('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);
+                return response.capabilities;
+            });
+    }
+
+    sendVisibility(visible) {
+        return this.messageToWidget({
+            api: OUTBOUND_API_NAME,
+            action: "visibility",
+            visible,
+        })
+        .catch((error) => {
+            console.error("Failed to send visibility: ", error);
+        });
+    }
+
+    start() {
+        this.fromWidget.addEndpoint(this.widgetId, this.widgetUrl);
+    }
+
+    stop() {
+        this.fromWidget.removeEndpoint(this.widgetId, this.widgetUrl);
+    }
+}

src/WidgetMessagingEndpoint.js

@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+
+/**
+ * Represents mapping of widget instance to URLs for trusted postMessage communication.
+ */
+export default class WidgetMessageEndpoint {
+    /**
+     * Mapping of widget instance to URL for trusted postMessage communication.
+     * @param  {string} widgetId    Unique widget identifier
+     * @param  {string} endpointUrl Widget wurl origin.
+     */
+    constructor(widgetId, endpointUrl) {
+        if (!widgetId) {
+            throw new Error("No widgetId specified in widgetMessageEndpoint constructor");
+        }
+        if (!endpointUrl) {
+            throw new Error("No endpoint specified in widgetMessageEndpoint constructor");
+        }
+        this.widgetId = widgetId;
+        this.endpointUrl = endpointUrl;
+    }
+}

src/WidgetUtils.js

@@ -1,58 +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 MatrixClientPeg from './MatrixClientPeg';
-
-export default class WidgetUtils {
-
-    /* Returns true if user is able to send state events to modify widgets in this room
-     * @param roomId -- The ID of the room to check
-     * @return Boolean -- true if the user can modify widgets in this room
-     * @throws Error -- specifies the error reason
-     */
-    static canUserModifyWidgets(roomId) {
-        if (!roomId) {
-            console.warn('No room ID specified');
-            return false;
-        }
-
-        const client = MatrixClientPeg.get();
-        if (!client) {
-            console.warn('User must be be logged in');
-            return false;
-        }
-
-        const room = client.getRoom(roomId);
-        if (!room) {
-            console.warn(`Room ID ${roomId} is not recognised`);
-            return false;
-        }
-
-        const me = client.credentials.userId;
-        if (!me) {
-            console.warn('Failed to get user ID');
-            return false;
-        }
-
-        const member = room.getMember(me);
-        if (!member || member.membership !== "join") {
-            console.warn(`User ${me} is not in room ${roomId}`);
-            return false;
-        }
-
-        return room.currentState.maySendStateEvent('im.vector.modular.widgets', me);
-    }
-}

src/actions/GroupActions.js

@@ -0,0 +1,34 @@
+/*
+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/MatrixActionCreators.js

@@ -0,0 +1,240 @@
+/*
+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 dis from '../dispatcher';
+
+// TODO: migrate from sync_state to MatrixActions.sync so that more js-sdk events
+//       become dispatches in the same place.
+/**
+ * Create a MatrixActions.sync action that represents a MatrixClient `sync` event,
+ * each parameter mapping to a key-value in the action.
+ *
+ * @param {MatrixClient} matrixClient the matrix client
+ * @param {string} state the current sync state.
+ * @param {string} prevState the previous sync state.
+ * @returns {Object} an action of type MatrixActions.sync.
+ */
+function createSyncAction(matrixClient, state, prevState) {
+    return {
+        action: 'MatrixActions.sync',
+        state,
+        prevState,
+        matrixClient,
+    };
+}
+
+/**
+ * @typedef AccountDataAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.accountData'.
+ * @property {MatrixEvent} event the MatrixEvent that triggered the dispatch.
+ * @property {string} event_type the type of the MatrixEvent, e.g. "m.direct".
+ * @property {Object} event_content the content of the MatrixEvent.
+ */
+
+/**
+ * Create a MatrixActions.accountData action that represents a MatrixClient `accountData`
+ * matrix event.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} accountDataEvent the account data event.
+ * @returns {AccountDataAction} an action of type MatrixActions.accountData.
+ */
+function createAccountDataAction(matrixClient, accountDataEvent) {
+    return {
+        action: 'MatrixActions.accountData',
+        event: accountDataEvent,
+        event_type: accountDataEvent.getType(),
+        event_content: accountDataEvent.getContent(),
+    };
+}
+
+/**
+ * @typedef RoomAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.Room'.
+ * @property {Room} room the Room that was stored.
+ */
+
+/**
+ * Create a MatrixActions.Room action that represents a MatrixClient `Room`
+ * matrix event, emitted when a Room is stored in the client.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {Room} room the Room that was stored.
+ * @returns {RoomAction} an action of type `MatrixActions.Room`.
+ */
+function createRoomAction(matrixClient, room) {
+    return { action: 'MatrixActions.Room', room };
+}
+
+/**
+ * @typedef RoomTagsAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.Room.tags'.
+ * @property {Room} room the Room whose tags changed.
+ */
+
+/**
+ * Create a MatrixActions.Room.tags action that represents a MatrixClient
+ * `Room.tags` matrix event, emitted when the m.tag room account data
+ * event is updated.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} roomTagsEvent the m.tag event.
+ * @param {Room} room the Room whose tags were changed.
+ * @returns {RoomTagsAction} an action of type `MatrixActions.Room.tags`.
+ */
+function createRoomTagsAction(matrixClient, roomTagsEvent, room) {
+    return { action: 'MatrixActions.Room.tags', room };
+}
+
+/**
+ * @typedef RoomTimelineAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.Room.timeline'.
+ * @property {boolean} isLiveEvent whether the event was attached to a
+ * live timeline.
+ * @property {boolean} isLiveUnfilteredRoomTimelineEvent whether the
+ * event was attached to a timeline in the set of unfiltered timelines.
+ * @property {Room} room the Room whose tags changed.
+ */
+
+/**
+ * Create a MatrixActions.Room.timeline action that represents a
+ * MatrixClient `Room.timeline` matrix event, emitted when an event
+ * is added to or removed from a timeline of a room.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} timelineEvent the event that was added/removed.
+ * @param {Room} room the Room that was stored.
+ * @param {boolean} toStartOfTimeline whether the event is being added
+ * to the start (and not the end) of the timeline.
+ * @param {boolean} removed whether the event was removed from the
+ * timeline.
+ * @param {Object} data
+ * @param {boolean} data.liveEvent whether the event is a live event,
+ * belonging to a live timeline.
+ * @param {EventTimeline} data.timeline the timeline being altered.
+ * @returns {RoomTimelineAction} an action of type `MatrixActions.Room.timeline`.
+ */
+function createRoomTimelineAction(matrixClient, timelineEvent, room, toStartOfTimeline, removed, data) {
+    return {
+        action: 'MatrixActions.Room.timeline',
+        event: timelineEvent,
+        isLiveEvent: data.liveEvent,
+        isLiveUnfilteredRoomTimelineEvent:
+            room && data.timeline.getTimelineSet() === room.getUnfilteredTimelineSet(),
+    };
+}
+
+/**
+ * @typedef RoomMembershipAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.RoomMember.membership'.
+ * @property {RoomMember} member the member whose membership was updated.
+ */
+
+/**
+ * Create a MatrixActions.Room.selfMembership action that represents
+ * a MatrixClient `RoomMember.membership` matrix event for the syncing user,
+ * emitted when the member's membership is updated.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} membershipEvent the m.room.member event.
+ * @param {RoomMember} member the member whose membership was updated.
+ * @param {string} oldMembership the member's previous membership.
+ * @returns {RoomMembershipAction} an action of type `MatrixActions.RoomMember.membership`.
+ */
+function createSelfRoomMembershipAction(matrixClient, membershipEvent, member, oldMembership) {
+    if (member.userId === matrixClient.getUserId()) {
+        return { action: 'MatrixActions.Room.selfMembership', member };
+    }
+    return null;
+}
+
+/**
+ * @typedef EventDecryptedAction
+ * @type {Object}
+ * @property {string} action 'MatrixActions.Event.decrypted'.
+ * @property {MatrixEvent} event the matrix event that was decrypted.
+ */
+
+/**
+ * Create a MatrixActions.Event.decrypted action that represents
+ * a MatrixClient `Event.decrypted` matrix event, emitted when a
+ * matrix event is decrypted.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} event the matrix event that was decrypted.
+ * @returns {EventDecryptedAction} an action of type `MatrixActions.Event.decrypted`.
+ */
+function createEventDecryptedAction(matrixClient, event) {
+    return { action: 'MatrixActions.Event.decrypted', event };
+}
+
+/**
+ * This object is responsible for dispatching actions when certain events are emitted by
+ * the given MatrixClient.
+ */
+export default {
+    // A list of callbacks to call to unregister all listeners added
+    _matrixClientListenersStop: [],
+
+    /**
+     * Start listening to certain events from the MatrixClient and dispatch actions when
+     * they are emitted.
+     * @param {MatrixClient} matrixClient the MatrixClient to listen to events from
+     */
+    start(matrixClient) {
+        this._addMatrixClientListener(matrixClient, 'sync', createSyncAction);
+        this._addMatrixClientListener(matrixClient, 'accountData', createAccountDataAction);
+        this._addMatrixClientListener(matrixClient, 'Room', createRoomAction);
+        this._addMatrixClientListener(matrixClient, 'Room.tags', createRoomTagsAction);
+        this._addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
+        this._addMatrixClientListener(matrixClient, 'RoomMember.membership', createSelfRoomMembershipAction);
+        this._addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
+    },
+
+    /**
+     * Start listening to events of type eventName on matrixClient and when they are emitted,
+     * dispatch an action created by the actionCreator function.
+     * @param {MatrixClient} matrixClient a MatrixClient to register a listener with.
+     * @param {string} eventName the event to listen to on MatrixClient.
+     * @param {function} actionCreator a function that should return an action to dispatch
+     *                                 when given the MatrixClient as an argument as well as
+     *                                 arguments emitted in the MatrixClient event.
+     */
+    _addMatrixClientListener(matrixClient, eventName, actionCreator) {
+        const listener = (...args) => {
+            const payload = actionCreator(matrixClient, ...args);
+            if (payload) {
+                dis.dispatch(payload, true);
+            }
+        };
+        matrixClient.on(eventName, listener);
+        this._matrixClientListenersStop.push(() => {
+            matrixClient.removeListener(eventName, listener);
+        });
+    },
+
+    /**
+     * Stop listening to events.
+     */
+    stop() {
+        this._matrixClientListenersStop.forEach((stopListener) => stopListener());
+    },
+};

src/actions/RoomListActions.js

@@ -0,0 +1,146 @@
+/*
+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/TagOrderActions.js

@@ -0,0 +1,109 @@
+/*
+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/actionCreators.js

@@ -0,0 +1,57 @@
+/*
+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.
+*/
+
+/**
+ * Create an action thunk that will dispatch actions indicating the current
+ * status of the Promise returned by fn.
+ *
+ * @param {string} id the id to give the dispatched actions. This is given a
+ *                    suffix determining whether it is pending, successful or
+ *                    a failure.
+ * @param {function} fn a function that returns a Promise.
+ * @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:
+ *                         `${id}.pending` and either
+ *                         `${id}.success` or
+ *                         `${id}.failure`.
+ *
+ *                     The shape of each are:
+ *                     { action: '${id}.pending', request }
+ *                     { action: '${id}.success', result }
+ *                     { action: '${id}.failure', err }
+ *
+ *                     where `request` is returned by `pendingFn` and
+ *                     result is the result of the promise returned by
+ *                     `fn`.
+ */
+export function asyncAction(id, fn, pendingFn) {
+    return (dispatch) => {
+        dispatch({
+            action: id + '.pending',
+            request:
+                typeof pendingFn === 'function' ? pendingFn() : undefined,
+        });
+        fn().then((result) => {
+            dispatch({action: id + '.success', result});
+        }).catch((err) => {
+            dispatch({action: id + '.failure', err});
+        });
+    };
+}

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

@@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
+const React = require("react");
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-var sdk = require('../../../index');
-var MatrixClientPeg = require("../../../MatrixClientPeg");
+const sdk = require('../../../index');
+const MatrixClientPeg = require("../../../MatrixClientPeg");
 
 module.exports = React.createClass({
     displayName: 'EncryptedEventDialog',
 
     propTypes: {
-        event: React.PropTypes.object.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        event: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -33,7 +34,7 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         this._unmounted = false;
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
 
         // first try to load the device from our store.
         //
@@ -60,7 +61,7 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         this._unmounted = true;
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         }
@@ -89,12 +90,12 @@ module.exports = React.createClass({
     },
 
     _renderDeviceInfo: function() {
-        var device = this.state.device;
+        const device = this.state.device;
         if (!device) {
             return (<i>{ _t('unknown device') }</i>);
         }
 
-        var verificationStatus = (<b>{ _t('NOT verified') }</b>);
+        let verificationStatus = (<b>{ _t('NOT verified') }</b>);
         if (device.isBlocked()) {
             verificationStatus = (<b>{ _t('Blacklisted') }</b>);
         } else if (device.isVerified()) {
@@ -118,7 +119,7 @@ module.exports = React.createClass({
                     </tr>
                     <tr>
                         <td>{ _t('Ed25519 fingerprint') }</td>
-                        <td><code>{device.getFingerprint()}</code></td>
+                        <td><code>{ device.getFingerprint() }</code></td>
                     </tr>
                 </tbody>
             </table>
@@ -126,7 +127,7 @@ module.exports = React.createClass({
     },
 
     _renderEventInfo: function() {
-        var event = this.props.event;
+        const event = this.props.event;
 
         return (
             <table>
@@ -165,36 +166,36 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
+        const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
 
-        var buttons = null;
+        let buttons = null;
         if (this.state.device) {
             buttons = (
-                <DeviceVerifyButtons device={ this.state.device }
-                    userId={ this.props.event.getSender() }
+                <DeviceVerifyButtons device={this.state.device}
+                    userId={this.props.event.getSender()}
                 />
             );
         }
 
         return (
-            <div className="mx_EncryptedEventDialog" onKeyDown={ this.onKeyDown }>
+            <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()}
+                    { this._renderEventInfo() }
 
                     <h4>{ _t('Sender device information') }</h4>
-                    {this._renderDeviceInfo()}
+                    { this._renderDeviceInfo() }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>
+                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={true}>
                         { _t('OK') }
                     </button>
-                    {buttons}
+                    { buttons }
                 </div>
             </div>
         );
-    }
+    },
 });

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

@@ -16,6 +16,7 @@ limitations under the License.
 
 import FileSaver from 'file-saver';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 import * as Matrix from 'matrix-js-sdk';
@@ -29,8 +30,8 @@ export default React.createClass({
     displayName: 'ExportE2eKeysDialog',
 
     propTypes: {
-        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        matrixClient: PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -136,13 +137,13 @@ export default React.createClass({
                             ) }
                         </p>
                         <div className='error'>
-                            {this.state.errStr}
+                            { this.state.errStr }
                         </div>
                         <div className='mx_E2eKeysDialog_inputTable'>
                             <div className='mx_E2eKeysDialog_inputRow'>
                                 <div className='mx_E2eKeysDialog_inputLabel'>
                                     <label htmlFor='passphrase1'>
-                                        {_t("Enter passphrase")}
+                                        { _t("Enter passphrase") }
                                     </label>
                                 </div>
                                 <div className='mx_E2eKeysDialog_inputCell'>
@@ -155,7 +156,7 @@ export default React.createClass({
                             <div className='mx_E2eKeysDialog_inputRow'>
                                 <div className='mx_E2eKeysDialog_inputLabel'>
                                     <label htmlFor='passphrase2'>
-                                        {_t("Confirm passphrase")}
+                                        { _t("Confirm passphrase") }
                                     </label>
                                 </div>
                                 <div className='mx_E2eKeysDialog_inputCell'>
@@ -172,7 +173,7 @@ export default React.createClass({
                              disabled={disableForm}
                         />
                         <button onClick={this._onCancelClick} disabled={disableForm}>
-                            {_t("Cancel")}
+                            { _t("Cancel") }
                         </button>
                     </div>
                 </form>

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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import * as Matrix from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
@@ -40,8 +41,8 @@ export default React.createClass({
     displayName: 'ImportE2eKeysDialog',
 
     propTypes: {
-        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        matrixClient: PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -134,13 +135,13 @@ export default React.createClass({
                             ) }
                         </p>
                         <div className='error'>
-                            {this.state.errStr}
+                            { this.state.errStr }
                         </div>
                         <div className='mx_E2eKeysDialog_inputTable'>
                             <div className='mx_E2eKeysDialog_inputRow'>
                                <div className='mx_E2eKeysDialog_inputLabel'>
                                    <label htmlFor='importFile'>
-                                       {_t("File to import")}
+                                       { _t("File to import") }
                                    </label>
                                </div>
                                <div className='mx_E2eKeysDialog_inputCell'>
@@ -153,14 +154,14 @@ export default React.createClass({
                             <div className='mx_E2eKeysDialog_inputRow'>
                                <div className='mx_E2eKeysDialog_inputLabel'>
                                    <label htmlFor='passphrase'>
-                                       {_t("Enter passphrase")}
+                                       { _t("Enter passphrase") }
                                    </label>
                                </div>
                                <div className='mx_E2eKeysDialog_inputCell'>
                                    <input ref='passphrase' id='passphrase'
                                        size='64' type='password'
                                        onChange={this._onFormChange}
-                                       disabled={disableForm}/>
+                                       disabled={disableForm} />
                                </div>
                             </div>
                         </div>
@@ -170,7 +171,7 @@ export default React.createClass({
                             disabled={!this.state.enableSubmit || disableForm}
                         />
                         <button onClick={this._onCancelClick} disabled={disableForm}>
-                            {_t("Cancel")}
+                            { _t("Cancel") }
                         </button>
                     </div>
                 </form>

src/autocomplete/AutocompleteProvider.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 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.
@@ -19,23 +20,33 @@ import React from 'react';
 import type {Completion, SelectionRange} from './Autocompleter';
 
 export default class AutocompleteProvider {
-    constructor(commandRegex?: RegExp) {
+    constructor(commandRegex?: RegExp, forcedCommandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
                 throw new Error('commandRegex must have global flag set');
             }
             this.commandRegex = commandRegex;
         }
+        if (forcedCommandRegex) {
+            if (!forcedCommandRegex.global) {
+                throw new Error('forcedCommandRegex must have global flag set');
+            }
+            this.forcedCommandRegex = forcedCommandRegex;
+        }
+    }
+
+    destroy() {
+        // stub
     }
 
     /**
      * Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
      */
-    getCurrentCommand(query: string, selection: {start: number, end: number}, force: boolean = false): ?string {
+    getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false): ?string {
         let commandRegex = this.commandRegex;
 
         if (force && this.shouldForceComplete()) {
-            commandRegex = /\S+/g;
+            commandRegex = this.forcedCommandRegex || /\S+/g;
         }
 
         if (commandRegex == null) {
@@ -46,14 +57,14 @@ export default class AutocompleteProvider {
 
         let match;
         while ((match = commandRegex.exec(query)) != null) {
-            let matchStart = match.index,
-                matchEnd = matchStart + match[0].length;
-            if (selection.start <= matchEnd && selection.end >= matchStart) {
+            const start = match.index;
+            const end = start + match[0].length;
+            if (selection.start <= end && selection.end >= start) {
                 return {
                     command: match,
                     range: {
-                        start: matchStart,
-                        end: matchEnd,
+                        start,
+                        end,
                     },
                 };
             }

src/autocomplete/Autocompleter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 Aviral Dasgupta
+Copyright 2017, 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.
@@ -17,16 +18,20 @@ limitations under the License.
 // @flow
 
 import type {Component} from 'react';
+import {Room} from 'matrix-js-sdk';
 import CommandProvider from './CommandProvider';
+import CommunityProvider from './CommunityProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
 import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
 import EmojiProvider from './EmojiProvider';
+import NotifProvider from './NotifProvider';
 import Promise from 'bluebird';
 
 export type SelectionRange = {
-    start: number,
-    end: number
+    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 = {
@@ -43,43 +48,60 @@ const PROVIDERS = [
     UserProvider,
     RoomProvider,
     EmojiProvider,
+    NotifProvider,
     CommandProvider,
+    CommunityProvider,
     DuckDuckGoProvider,
-].map(completer => completer.getInstance());
+];
 
 // Providers will get rejected if they take longer than this.
 const PROVIDER_COMPLETION_TIMEOUT = 3000;
 
-export async function getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
-    /* Note: That this waits for all providers to return is *intentional*
-     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(
-        // Array of inspections of promises that might timeout. Instead of allowing a
-        // single timeout to reject the Promise.all, reflect each one and once they've all
-        // settled, filter for the fulfilled ones
-        PROVIDERS.map((provider) => {
-            return provider
-                .getCompletions(query, selection, force)
-                .timeout(PROVIDER_COMPLETION_TIMEOUT)
-                .reflect();
-        }),
-    );
+export default class Autocompleter {
+    constructor(room: Room) {
+        this.room = room;
+        this.providers = PROVIDERS.map((p) => {
+            return new p(room);
+        });
+    }
 
-    return completionsList.filter(
-        (inspection) => inspection.isFulfilled(),
-    ).map((completionsState, i) => {
-        return {
-            completions: completionsState.value(),
-            provider: PROVIDERS[i],
+    destroy() {
+        this.providers.forEach((p) => {
+            p.destroy();
+        });
+    }
 
-            /* the currently matched "command" the completer tried to complete
-             * we pass this through so that Autocomplete can figure out when to
-             * re-show itself once hidden.
-             */
-            command: PROVIDERS[i].getCurrentCommand(query, selection, force),
-        };
-    });
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
+        /* 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(
+            // Array of inspections of promises that might timeout. Instead of allowing a
+            // single timeout to reject the Promise.all, reflect each one and once they've all
+            // settled, filter for the fulfilled ones
+            this.providers.map(provider =>
+                provider
+                    .getCompletions(query, selection, force)
+                    .timeout(PROVIDER_COMPLETION_TIMEOUT)
+                    .reflect()
+            ),
+        );
+
+        return completionsList.filter(
+            (inspection) => inspection.isFulfilled(),
+        ).map((completionsState, i) => {
+            return {
+                completions: completionsState.value(),
+                provider: this.providers[i],
+
+                /* the currently matched "command" the completer tried to complete
+                 * we pass this through so that Autocomplete can figure out when to
+                 * re-show itself once hidden.
+                 */
+                command: this.providers[i].getCurrentCommand(query, selection, force),
+            };
+        });
+    }
 }

src/autocomplete/CommandProvider.js

@@ -1,6 +1,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,90 +18,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../languageHandler';
+import {_t} from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
+import type {Completion, SelectionRange} from "./Autocompleter";
+import {CommandMap} from '../SlashCommands';
 
-// TODO merge this with the factory mechanics of SlashCommands?
-// Warning: Since the description string will be translated in _t(result.description), all these strings below must be in i18n/strings/en_EN.json file
-const COMMANDS = [
-    {
-        command: '/me',
-        args: '<message>',
-        description: 'Displays action',
-    },
-    {
-        command: '/ban',
-        args: '<user-id> [reason]',
-        description: 'Bans user with given id',
-    },
-    {
-        command: '/unban',
-        args: '<user-id>',
-        description: 'Unbans user with given id',
-    },
-    {
-        command: '/op',
-        args: '<user-id> [<power-level>]',
-        description: 'Define the power level of a user',
-    },
-    {
-        command: '/deop',
-        args: '<user-id>',
-        description: 'Deops user with given id',
-    },
-    {
-        command: '/invite',
-        args: '<user-id>',
-        description: 'Invites user with given id to current room',
-    },
-    {
-        command: '/join',
-        args: '<room-alias>',
-        description: 'Joins room with given alias',
-    },
-    {
-        command: '/part',
-        args: '[<room-alias>]',
-        description: 'Leave room',
-    },
-    {
-        command: '/topic',
-        args: '<topic>',
-        description: 'Sets the room topic',
-    },
-    {
-        command: '/kick',
-        args: '<user-id> [reason]',
-        description: 'Kicks user with given id',
-    },
-    {
-        command: '/nick',
-        args: '<display-name>',
-        description: 'Changes your display nickname',
-    },
-    {
-        command: '/ddg',
-        args: '<query>',
-        description: 'Searches DuckDuckGo for results',
-    },
-    {
-        command: '/tint',
-        args: '<color1> [<color2>]',
-        description: 'Changes colour scheme of current room',
-    },
-    {
-        command: '/verify',
-        args: '<user-id> <device-id> <device-signing-key>',
-        description: 'Verifies a user, device, and pubkey tuple',
-    },
-    // Omitting `/markdown` as it only seems to apply to OldComposer
-];
+const COMMANDS = Object.values(CommandMap);
 
-const COMMAND_RE = /(^\/\w*)/g;
-
-let instance = null;
+const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
 
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
@@ -109,38 +37,48 @@ export default class CommandProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}) {
-        let completions = [];
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
         const {command, range} = this.getCurrentCommand(query, selection);
-        if (command) {
-            completions = this.matcher.match(command[0]).map((result) => {
-                return {
-                    completion: result.command + ' ',
-                    component: (<TextualCompletion
-                        title={result.command}
-                        subtitle={result.args}
-                        description={ _t(result.description) }
-                        />),
-                    range,
-                };
-            });
+        if (!command) return [];
+
+        let matches = [];
+        // check if the full match differs from the first word (i.e. returns false if the command has args)
+        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]) {
+                // 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]];
+            }
+        } else {
+            if (query === '/') {
+                // If they have just entered `/` show everything
+                matches = COMMANDS;
+            } else {
+                // otherwise fuzzy match against all of the fields
+                matches = this.matcher.match(command[1]);
+            }
         }
-        return completions;
+
+        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 + ' '),
+            component: <TextualCompletion
+                title={result.command}
+                subtitle={result.args}
+                description={_t(result.description)} />,
+            range,
+        }));
     }
 
     getName() {
         return '*️⃣ ' + _t('Commands');
     }
 
-    static getInstance(): CommandProvider {
-        if (instance === null) instance = new CommandProvider();
-
-        return instance;
-    }
-
     renderCompletions(completions: [React.Component]): ?React.Component {
         return <div className="mx_Autocomplete_Completion_container_block">
-            {completions}
+            { completions }
         </div>;
     }
 }

src/autocomplete/CommunityProvider.js

@@ -0,0 +1,111 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { _t } from '../languageHandler';
+import AutocompleteProvider from './AutocompleteProvider';
+import MatrixClientPeg from '../MatrixClientPeg';
+import FuzzyMatcher from './FuzzyMatcher';
+import {PillCompletion} from './Components';
+import sdk from '../index';
+import _sortBy from 'lodash/sortBy';
+import {makeGroupPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
+import FlairStore from "../stores/FlairStore";
+
+const COMMUNITY_REGEX = /\B\+\S*/g;
+
+function score(query, space) {
+    const index = space.indexOf(query);
+    if (index === -1) {
+        return Infinity;
+    } else {
+        return index;
+    }
+}
+
+export default class CommunityProvider extends AutocompleteProvider {
+    constructor() {
+        super(COMMUNITY_REGEX);
+        this.matcher = new FuzzyMatcher([], {
+            keys: ['groupId', 'name', 'shortDescription'],
+        });
+    }
+
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
+
+        // Disable autocompletions when composing commands because of various issues
+        // (see https://github.com/vector-im/riot-web/issues/4762)
+        if (/^(\/join|\/leave)/.test(query)) {
+            return [];
+        }
+
+        const cli = MatrixClientPeg.get();
+        let completions = [];
+        const {command, range} = this.getCurrentCommand(query, selection, force);
+        if (command) {
+            const joinedGroups = cli.getGroups().filter(({myMembership}) => myMembership === 'join');
+
+            const groups = (await Promise.all(joinedGroups.map(async ({groupId}) => {
+                try {
+                    return FlairStore.getGroupProfileCached(cli, groupId);
+                } catch (e) { // if FlairStore failed, fall back to just groupId
+                    return Promise.resolve({
+                        name: '',
+                        groupId,
+                        avatarUrl: '',
+                        shortDescription: '',
+                    });
+                }
+            })));
+
+            this.matcher.setObjects(groups);
+
+            const matchedString = command[0];
+            completions = this.matcher.match(matchedString);
+            completions = _sortBy(completions, [
+                (c) => score(matchedString, c.groupId),
+                (c) => c.groupId.length,
+            ]).map(({avatarUrl, groupId, name}) => ({
+                completion: groupId,
+                suffix: ' ',
+                href: makeGroupPermalink(groupId),
+                component: (
+                    <PillCompletion initialComponent={
+                        <BaseAvatar name={name || groupId}
+                                    width={24} height={24}
+                                    url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 24, 24) : null} />
+                    } title={name} description={groupId} />
+                ),
+                range,
+            }))
+            .slice(0, 4);
+        }
+        return completions;
+    }
+
+    getName() {
+        return '💬 ' + _t('Communities');
+    }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
+            { completions }
+        </div>;
+    }
+}

src/autocomplete/Components.js

@@ -15,6 +15,7 @@ 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
@@ -30,22 +31,22 @@ export class TextualCompletion extends React.Component {
             subtitle,
             description,
             className,
-            ...restProps,
+            ...restProps
         } = this.props;
         return (
             <div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
-                <span className="mx_Autocomplete_Completion_title">{title}</span>
-                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
-                <span className="mx_Autocomplete_Completion_description">{description}</span>
+                <span className="mx_Autocomplete_Completion_title">{ title }</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
+                <span className="mx_Autocomplete_Completion_description">{ description }</span>
             </div>
         );
     }
 }
 TextualCompletion.propTypes = {
-    title: React.PropTypes.string,
-    subtitle: React.PropTypes.string,
-    description: React.PropTypes.string,
-    className: React.PropTypes.string,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    description: PropTypes.string,
+    className: PropTypes.string,
 };
 
 export class PillCompletion extends React.Component {
@@ -56,22 +57,22 @@ export class PillCompletion extends React.Component {
             description,
             initialComponent,
             className,
-            ...restProps,
+            ...restProps
         } = this.props;
         return (
             <div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
-                {initialComponent}
-                <span className="mx_Autocomplete_Completion_title">{title}</span>
-                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
-                <span className="mx_Autocomplete_Completion_description">{description}</span>
+                { initialComponent }
+                <span className="mx_Autocomplete_Completion_title">{ title }</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
+                <span className="mx_Autocomplete_Completion_description">{ description }</span>
             </div>
         );
     }
 }
 PillCompletion.propTypes = {
-    title: React.PropTypes.string,
-    subtitle: React.PropTypes.string,
-    description: React.PropTypes.string,
-    initialComponent: React.PropTypes.element,
-    className: React.PropTypes.string,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    description: PropTypes.string,
+    initialComponent: PropTypes.element,
+    className: PropTypes.string,
 };

src/autocomplete/DuckDuckGoProvider.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 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.
@@ -21,12 +22,11 @@ import AutocompleteProvider from './AutocompleteProvider';
 import 'whatwg-fetch';
 
 import {TextualCompletion} from './Components';
+import type {SelectionRange} from "./Autocompleter";
 
 const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERRER = 'vector';
 
-let instance = null;
-
 export default class DuckDuckGoProvider extends AutocompleteProvider {
     constructor() {
         super(DDG_REGEX);
@@ -37,8 +37,8 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}) {
-        let {command, range} = this.getCurrentCommand(query, selection);
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
+        const {command, range} = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];
         }
@@ -47,7 +47,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
             method: 'GET',
         });
         const json = await response.json();
-        let results = json.Results.map(result => {
+        const results = json.Results.map((result) => {
             return {
                 completion: result.Text,
                 component: (
@@ -96,16 +96,9 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         return '🔍 ' + _t('Results from DuckDuckGo');
     }
 
-    static getInstance(): DuckDuckGoProvider {
-        if (instance == null) {
-            instance = new DuckDuckGoProvider();
-        }
-        return instance;
-    }
-
     renderCompletions(completions: [React.Component]): ?React.Component {
         return <div className="mx_Autocomplete_Completion_container_block">
-            {completions}
+            { completions }
         </div>;
     }
 }

src/autocomplete/EmojiProvider.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 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.
@@ -18,13 +19,14 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {emojioneList, shortnameToImage, shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
+import {shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
 import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
-import type {SelectionRange, Completion} from './Autocompleter';
+import type {Completion, SelectionRange} from './Autocompleter';
 import _uniq from 'lodash/uniq';
 import _sortBy from 'lodash/sortBy';
+import SettingsStore from "../settings/SettingsStore";
 
 import EmojiData from '../stripped-emoji.json';
 
@@ -46,7 +48,7 @@ const CATEGORY_ORDER = [
 // (^|\s|(emojiUnicode)) to make sure we're either at the start of the string or there's a
 // whitespace character or an emoji before the emoji. The reason for unicodeRegexp is
 // that we need to support inputting multiple emoji with no space between them.
-const EMOJI_REGEX = new RegExp('(?:^|\\s|' + unicodeRegexp + ')(' + asciiRegexp + '|:\\w*:?)$', 'g');
+const EMOJI_REGEX = new RegExp('(?:^|\\s|' + unicodeRegexp + ')(' + asciiRegexp + '|:[+-\\w]*:?)$', 'g');
 
 // We also need to match the non-zero-length prefixes to remove them from the final match,
 // and update the range so that we don't replace the whitespace or the previous emoji.
@@ -63,14 +65,13 @@ const EMOJI_SHORTNAMES = Object.keys(EmojiData).map((key) => EmojiData[key]).sor
     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,
     };
 });
 
-let instance = null;
-
 function score(query, space) {
     const index = space.indexOf(query);
     if (index === -1) {
@@ -84,7 +85,7 @@ export default class EmojiProvider extends AutocompleteProvider {
     constructor() {
         super(EMOJI_REGEX);
         this.matcher = new FuzzyMatcher(EMOJI_SHORTNAMES, {
-            keys: ['aliases_ascii', 'shortname'],
+            keys: ['aliases_ascii', 'shortname', 'aliases'],
             // For matching against ascii equivalents
             shouldMatchWordsOnly: false,
         });
@@ -95,7 +96,11 @@ export default class EmojiProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
+        if (SettingsStore.getValue("MessageComposerInput.dontSuggestEmoji")) {
+            return []; // don't give any suggestions if the user doesn't want them
+        }
+
         const EmojiText = sdk.getComponent('views.elements.EmojiText');
 
         let completions = [];
@@ -133,7 +138,7 @@ export default class EmojiProvider extends AutocompleteProvider {
                 return {
                     completion: unicode,
                     component: (
-                        <PillCompletion title={shortname} initialComponent={<EmojiText style={{maxWidth: '1em'}}>{unicode}</EmojiText>} />
+                        <PillCompletion title={shortname} initialComponent={<EmojiText style={{maxWidth: '1em'}}>{ unicode }</EmojiText>} />
                     ),
                     range,
                 };
@@ -146,15 +151,9 @@ export default class EmojiProvider extends AutocompleteProvider {
         return '😃 ' + _t('Emoji');
     }
 
-    static getInstance() {
-        if (instance == null)
-            {instance = new EmojiProvider();}
-        return instance;
-    }
-
     renderCompletions(completions: [React.Component]): ?React.Component {
         return <div className="mx_Autocomplete_Completion_container_pill">
-            {completions}
+            { completions }
         </div>;
     }
 }

src/autocomplete/NotifProvider.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import AutocompleteProvider from './AutocompleteProvider';
+import { _t } from '../languageHandler';
+import MatrixClientPeg from '../MatrixClientPeg';
+import {PillCompletion} from './Components';
+import sdk from '../index';
+import type {Completion, SelectionRange} from "./Autocompleter";
+
+const AT_ROOM_REGEX = /@\S*/g;
+
+export default class NotifProvider extends AutocompleteProvider {
+    constructor(room) {
+        super(AT_ROOM_REGEX);
+        this.room = room;
+    }
+
+    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array<Completion> {
+        const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
+
+        const client = MatrixClientPeg.get();
+
+        if (!this.room.currentState.mayTriggerNotifOfType('room', client.credentials.userId)) return [];
+
+        const {command, range} = this.getCurrentCommand(query, selection, force);
+        if (command && command[0] && '@room'.startsWith(command[0]) && command[0].length > 1) {
+            return [{
+                completion: '@room',
+                completionId: '@room',
+                suffix: ' ',
+                component: (
+                    <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={this.room} />} title="@room" description={_t("Notify the whole room")} />
+                ),
+                range,
+            }];
+        }
+        return [];
+    }
+
+    getName() {
+        return '❗️ ' + _t('Room Notification');
+    }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
+            { completions }
+        </div>;
+    }
+}

src/autocomplete/PlainWithPillsSerializer.js

@@ -0,0 +1,93 @@
+/*
+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.js

@@ -1,6 +1,7 @@
 //@flow
 /*
 Copyright 2017 Aviral Dasgupta
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,6 +28,10 @@ class KeyMap {
     priorityMap = new Map();
 }
 
+function stripDiacritics(str: string): string {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
 export default class QueryMatcher {
     /**
      * @param {object[]} objects the objects to perform a match on
@@ -46,10 +51,11 @@ export default class QueryMatcher {
         objects.forEach((object, i) => {
             const keyValues = _at(object, keys);
             for (const keyValue of keyValues) {
-                if (!map.hasOwnProperty(keyValue)) {
-                    map[keyValue] = [];
+                const key = stripDiacritics(keyValue).toLowerCase();
+                if (!map.hasOwnProperty(key)) {
+                    map[key] = [];
                 }
-                map[keyValue].push(object);
+                map[key].push(object);
             }
             keyMap.priorityMap.set(object, i);
         });
@@ -82,7 +88,7 @@ export default class QueryMatcher {
     }
 
     match(query: String): Array<Object> {
-        query = query.toLowerCase();
+        query = stripDiacritics(query).toLowerCase();
         if (this.options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');
         }
@@ -91,7 +97,7 @@ export default class QueryMatcher {
         }
         const results = [];
         this.keyMap.keys.forEach((key) => {
-            let resultKey = key.toLowerCase();
+            let resultKey = key;
             if (this.options.shouldMatchWordsOnly) {
                 resultKey = resultKey.replace(/[^\w]/g, '');
             }

src/autocomplete/RoomProvider.js

@@ -1,6 +1,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,10 +26,10 @@ import {PillCompletion} from './Components';
 import {getDisplayAliasForRoom} from '../Rooms';
 import sdk from '../index';
 import _sortBy from 'lodash/sortBy';
+import {makeRoomPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const ROOM_REGEX = /(?=#)(\S*)/g;
-
-let instance = null;
+const ROOM_REGEX = /\B#\S*/g;
 
 function score(query, space) {
     const index = space.indexOf(query);
@@ -46,15 +48,9 @@ export default class RoomProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
-        // Disable autocompletions when composing commands because of various issues
-        // (see https://github.com/vector-im/riot-web/issues/4762)
-        if (/^(\/join|\/leave)/.test(query)) {
-            return [];
-        }
-
         const client = MatrixClientPeg.get();
         let completions = [];
         const {command, range} = this.getCurrentCommand(query, selection, force);
@@ -78,8 +74,9 @@ export default class RoomProvider extends AutocompleteProvider {
                 const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
                     completion: displayAlias,
+                    completionId: displayAlias,
                     suffix: ' ',
-                    href: 'https://matrix.to/#/' + displayAlias,
+                    href: makeRoomPermalink(displayAlias),
                     component: (
                         <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
                     ),
@@ -96,17 +93,9 @@ export default class RoomProvider extends AutocompleteProvider {
         return '💬 ' + _t('Rooms');
     }
 
-    static getInstance() {
-        if (instance == null) {
-            instance = new RoomProvider();
-        }
-
-        return instance;
-    }
-
     renderCompletions(completions: [React.Component]): ?React.Component {
         return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
-            {completions}
+            { completions }
         </div>;
     }
 }

src/autocomplete/UserProvider.js

@@ -2,6 +2,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,52 +24,98 @@ import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
 import sdk from '../index';
 import FuzzyMatcher from './FuzzyMatcher';
-import _pull from 'lodash/pull';
 import _sortBy from 'lodash/sortBy';
 import MatrixClientPeg from '../MatrixClientPeg';
 
-import type {Room, RoomMember} from 'matrix-js-sdk';
+import type {MatrixEvent, Room, RoomMember, RoomState} from 'matrix-js-sdk';
+import {makeUserPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const USER_REGEX = /@\S*/g;
+const USER_REGEX = /\B@\S*/g;
 
-let instance = null;
+// used when you hit 'tab' - we allow some separator chars at the beginning
+// to allow you to tab-complete /mat into /(matthew)
+const FORCED_USER_REGEX = /[^/,:; \t\n]\S*/g;
 
 export default class UserProvider extends AutocompleteProvider {
-    users: Array<RoomMember> = [];
+    users: Array<RoomMember> = null;
+    room: Room = null;
 
-    constructor() {
-        super(USER_REGEX, {
-            keys: ['name'],
-        });
+    constructor(room) {
+        super(USER_REGEX, FORCED_USER_REGEX);
+        this.room = room;
         this.matcher = new FuzzyMatcher([], {
             keys: ['name', 'userId'],
             shouldMatchPrefix: true,
+            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);
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
-        const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
+    destroy() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room.timeline", this._onRoomTimelineBound);
+            MatrixClientPeg.get().removeListener("RoomState.members", this._onRoomStateMemberBound);
+        }
+    }
 
-        // Disable autocompletions when composing commands because of various issues
-        // (see https://github.com/vector-im/riot-web/issues/4762)
-        if (/^(\/ban|\/unban|\/op|\/deop|\/invite|\/kick|\/verify)/.test(query)) {
-            return [];
+    _onRoomTimeline(ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean, data: Object) {
+        if (!room) return;
+        if (removed) return;
+        if (room.roomId !== this.room.roomId) return;
+
+        // ignore events from filtered timelines
+        if (data.timeline.getTimelineSet() !== room.getUnfilteredTimelineSet()) return;
+
+        // ignore anything but real-time updates at the end of the room:
+        // updates from pagination will happen when the paginate completes.
+        if (toStartOfTimeline || !data || !data.liveEvent) return;
+
+        // TODO: lazyload if we have no ev.sender room member?
+        this.onUserSpoke(ev.sender);
+    }
+
+    _onRoomStateMember(ev: MatrixEvent, state: RoomState, member: RoomMember) {
+        // ignore members in other rooms
+        if (member.roomId !== this.room.roomId) {
+            return;
         }
 
+        // blow away the users cache
+        this.users = null;
+    }
+
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+        const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
+
+        // lazy-load user list into matcher
+        if (this.users === null) this._makeUsers();
+
         let completions = [];
-        let {command, range} = this.getCurrentCommand(query, selection, force);
-        if (command) {
-            completions = this.matcher.match(command[0]).map((user) => {
+        const {command, range} = this.getCurrentCommand(query, selection, force);
+
+        if (!command) return completions;
+
+        const fullMatch = command[0];
+        // Don't search if the query is a single "@"
+        if (fullMatch && fullMatch !== '@') {
+            completions = this.matcher.match(fullMatch).map((user) => {
                 const displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done
                 return {
                     // Length of completion should equal length of text in decorator. draft-js
                     // relies on the length of the entity === length of the text in the decoration.
                     completion: user.rawDisplayName.replace(' (IRC)', ''),
-                    suffix: range.start === 0 ? ': ' : ' ',
-                    href: 'https://matrix.to/#/' + user.userId,
+                    completionId: user.userId,
+                    suffix: (selection.beginning && range.start === 0) ? ': ' : ' ',
+                    href: makeUserPermalink(user.userId),
                     component: (
                         <PillCompletion
-                            initialComponent={<MemberAvatar member={user} width={24} height={24}/>}
+                            initialComponent={<MemberAvatar member={user} width={24} height={24} />}
                             title={displayName}
                             description={user.userId} />
                     ),
@@ -78,32 +126,30 @@ export default class UserProvider extends AutocompleteProvider {
         return completions;
     }
 
-    getName() {
+    getName(): string {
         return '👥 ' + _t('Users');
     }
 
-    setUserListFromRoom(room: Room) {
-        const events = room.getLiveTimeline().getEvents();
+    _makeUsers() {
+        const events = this.room.getLiveTimeline().getEvents();
         const lastSpoken = {};
 
-        for(const event of events) {
+        for (const event of events) {
             lastSpoken[event.getSender()] = event.getTs();
         }
 
         const currentUserId = MatrixClientPeg.get().credentials.userId;
-        this.users = room.getJoinedMembers().filter((member) => {
-            if (member.userId !== currentUserId) return true;
-        });
+        this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
 
-        this.users = _sortBy(this.users, (member) =>
-            1E20 - lastSpoken[member.userId] || 1E20,
-        );
+        this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
 
         this.matcher.setObjects(this.users);
     }
 
     onUserSpoke(user: RoomMember) {
-        if(user.userId === MatrixClientPeg.get().credentials.userId) return;
+        if (this.users === null) return;
+        if (!user) return;
+        if (user.userId === MatrixClientPeg.get().credentials.userId) return;
 
         // Move the user that spoke to the front of the array
         this.users.splice(
@@ -113,16 +159,9 @@ export default class UserProvider extends AutocompleteProvider {
         this.matcher.setObjects(this.users);
     }
 
-    static getInstance(): UserProvider {
-        if (instance == null) {
-            instance = new UserProvider();
-        }
-        return instance;
-    }
-
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
-            {completions}
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            { completions }
         </div>;
     }
 

src/components/structures/BottomLeftMenu.js

@@ -0,0 +1,197 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+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 React from 'react';
+import ReactDOM from 'react-dom';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import Velocity from 'velocity-vector';
+import 'velocity-vector/velocity.ui';
+import SettingsStore from '../../settings/SettingsStore';
+
+const CALLOUT_ANIM_DURATION = 1000;
+
+module.exports = React.createClass({
+    displayName: 'BottomLeftMenu',
+
+    propTypes: {
+        collapsed: React.PropTypes.bool.isRequired,
+    },
+
+    getInitialState: function() {
+        return({
+            directoryHover : false,
+            roomsHover : false,
+            homeHover: false,
+            peopleHover : false,
+            settingsHover : false,
+        });
+    },
+
+    componentWillMount: function() {
+        this._dispatcherRef = dis.register(this.onAction);
+        this._peopleButton = null;
+        this._directoryButton = null;
+        this._createRoomButton = null;
+        this._lastCallouts = {};
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this._dispatcherRef);
+    },
+
+    // Room events
+    onDirectoryClick: function() {
+        dis.dispatch({ action: 'view_room_directory' });
+    },
+
+    onDirectoryMouseEnter: function() {
+        this.setState({ directoryHover: true });
+    },
+
+    onDirectoryMouseLeave: function() {
+        this.setState({ directoryHover: false });
+    },
+
+    onRoomsClick: function() {
+        dis.dispatch({ action: 'view_create_room' });
+    },
+
+    onRoomsMouseEnter: function() {
+        this.setState({ roomsHover: true });
+    },
+
+    onRoomsMouseLeave: function() {
+        this.setState({ roomsHover: false });
+    },
+
+    // Home button events
+    onHomeClick: function() {
+        dis.dispatch({ action: 'view_home_page' });
+    },
+
+    onHomeMouseEnter: function() {
+        this.setState({ homeHover: true });
+    },
+
+    onHomeMouseLeave: function() {
+        this.setState({ homeHover: false });
+    },
+
+    // People events
+    onPeopleClick: function() {
+        dis.dispatch({ action: 'view_create_chat' });
+    },
+
+    onPeopleMouseEnter: function() {
+        this.setState({ peopleHover: true });
+    },
+
+    onPeopleMouseLeave: function() {
+        this.setState({ peopleHover: false });
+    },
+
+    // Settings events
+    onSettingsClick: function() {
+        dis.dispatch({ action: 'view_user_settings' });
+    },
+
+    onSettingsMouseEnter: function() {
+        this.setState({ settingsHover: true });
+    },
+
+    onSettingsMouseLeave: function() {
+        this.setState({ settingsHover: false });
+    },
+
+    onAction: function(payload) {
+        let calloutElement;
+        switch (payload.action) {
+            // Incoming instruction: dance!
+            case 'callout_start_chat':
+                calloutElement = this._peopleButton;
+                break;
+            case 'callout_room_directory':
+                calloutElement = this._directoryButton;
+                break;
+            case 'callout_create_room':
+                calloutElement = this._createRoomButton;
+                break;
+        }
+        if (calloutElement) {
+            const lastCallout = this._lastCallouts[payload.action];
+            const now = Date.now();
+            if (lastCallout == undefined || lastCallout < now - CALLOUT_ANIM_DURATION) {
+                this._lastCallouts[payload.action] = now;
+                Velocity(ReactDOM.findDOMNode(calloutElement), "callout.bounce", CALLOUT_ANIM_DURATION);
+            }
+        }
+    },
+
+    // Get the label/tooltip to show
+    getLabel: function(label, show) {
+        if (show) {
+            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
+        }
+    },
+
+    _collectPeopleButton: function(e) {
+        this._peopleButton = e;
+    },
+
+    _collectDirectoryButton: function(e) {
+        this._directoryButton = e;
+    },
+
+    _collectCreateRoomButton: function(e) {
+        this._createRoomButton = e;
+    },
+
+    render: function() {
+        const HomeButton = sdk.getComponent('elements.HomeButton');
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+        const SettingsButton = sdk.getComponent('elements.SettingsButton');
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+
+        const groupsButton = SettingsStore.getValue("TagPanel.disableTagPanel") ?
+            <GroupsButton tooltip={true} /> : null;
+
+        return (
+            <div className="mx_BottomLeftMenu">
+                <div className="mx_BottomLeftMenu_options">
+                    <HomeButton tooltip={true} />
+                    <div ref={this._collectPeopleButton}>
+                        <StartChatButton tooltip={true} />
+                    </div>
+                    <div ref={this._collectDirectoryButton}>
+                        <RoomDirectoryButton tooltip={true} />
+                    </div>
+                    <div ref={this._collectCreateRoomButton}>
+                        <CreateRoomButton tooltip={true} />
+                    </div>
+                    { groupsButton }
+                    <span className="mx_BottomLeftMenu_settings">
+                        <SettingsButton tooltip={true} />
+                    </span>
+                </div>
+            </div>
+        );
+    },
+});

src/components/structures/CompatibilityPage.js

@@ -0,0 +1,73 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+import { _t } from '../../languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'CompatibilityPage',
+    propTypes: {
+        onAccept: React.PropTypes.func
+    },
+
+    getDefaultProps: function() {
+        return {
+            onAccept: function() {} // NOP
+        };
+    },
+
+    onAccept: function() {
+        this.props.onAccept();
+    },
+
+    render: function() {
+
+        return (
+        <div className="mx_CompatibilityPage">
+            <div className="mx_CompatibilityPage_box">
+                <p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
+                <p>
+                { _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
+                </p>
+                <p>
+                { _t('Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.',
+                    {},
+                    {
+                        'chromeLink': (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
+                        'firefoxLink': (sub) => <a href="https://getfirefox.com">{sub}</a>,
+                    },
+                )}
+                { _t('<safariLink>Safari</safariLink> and <operaLink>Opera</operaLink> work too.',
+                    {},
+                    {
+                        'safariLink': (sub) => <a href="http://apple.com/safari">{sub}</a>,
+                        'operaLink': (sub) => <a href="http://opera.com">{sub}</a>,
+                    },
+                )}
+                </p>
+                <p>
+                { _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
+                </p>
+                <button onClick={this.onAccept}>
+                    { _t("I understand the risks and wish to continue") }
+                </button>
+            </div>
+        </div>
+        );
+    }
+});

src/components/structures/ContextualMenu.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -15,90 +16,176 @@ limitations under the License.
 */
 
 
-'use strict';
-
-var classNames = require('classnames');
-var React = require('react');
-var ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
-module.exports = {
-    ContextualMenuContainerId: "mx_ContextualMenu_Container",
+const ContextualMenuContainerId = "mx_ContextualMenu_Container";
 
+function getOrCreateContainer() {
+    let container = document.getElementById(ContextualMenuContainerId);
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = ContextualMenuContainerId;
+        document.body.appendChild(container);
+    }
+
+    return container;
+}
+
+export default class ContextualMenu extends React.Component {
     propTypes: {
-        menuWidth: React.PropTypes.number,
-        menuHeight: React.PropTypes.number,
-        chevronOffset: React.PropTypes.number,
-        menuColour: React.PropTypes.string,
-    },
+        top: PropTypes.number,
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+        right: PropTypes.number,
+        menuWidth: PropTypes.number,
+        menuHeight: PropTypes.number,
+        chevronOffset: PropTypes.number,
+        menuColour: PropTypes.string,
+        chevronFace: PropTypes.string, // top, bottom, left, right
+        // Function to be called on menu close
+        onFinished: PropTypes.func,
+        menuPaddingTop: PropTypes.number,
+        menuPaddingRight: PropTypes.number,
+        menuPaddingBottom: PropTypes.number,
+        menuPaddingLeft: PropTypes.number,
 
-    getOrCreateContainer: function() {
-        var container = document.getElementById(this.ContextualMenuContainerId);
+        // If true, insert an invisible screen-sized element behind the
+        // menu that when clicked will close it.
+        hasBackground: PropTypes.bool,
 
-        if (!container) {
-            container = document.createElement("div");
-            container.id = this.ContextualMenuContainerId;
-            document.body.appendChild(container);
+        // The component to render as the context menu
+        elementClass: PropTypes.element.isRequired,
+        // on resize callback
+        windowResize: PropTypes.func,
+        // method to close menu
+        closeMenu: PropTypes.func,
+    };
+
+    constructor() {
+        super();
+        this.state = {
+            contextMenuRect: null,
+        };
+
+        this.onContextMenu = this.onContextMenu.bind(this);
+        this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
+    }
+
+    collectContextMenuRect(element) {
+        // We don't need to clean up when unmounting, so ignore
+        if (!element) return;
+
+        this.setState({
+            contextMenuRect: element.getBoundingClientRect(),
+        });
+    }
+
+    onContextMenu(e) {
+        if (this.props.closeMenu) {
+            this.props.closeMenu();
+
+            e.preventDefault();
+            const x = e.clientX;
+            const y = e.clientY;
+
+            // XXX: This isn't pretty but the only way to allow opening a different context menu on right click whilst
+            // a context menu and its click-guard are up without completely rewriting how the context menus work.
+            setImmediate(() => {
+                const clickEvent = document.createEvent('MouseEvents');
+                clickEvent.initMouseEvent(
+                    'contextmenu', true, true, window, 0,
+                    0, 0, x, y, false, false,
+                    false, false, 0, null,
+                );
+                document.elementFromPoint(x, y).dispatchEvent(clickEvent);
+            });
+        }
+    }
+
+    render() {
+        const position = {};
+        let chevronFace = null;
+
+        const props = this.props;
+
+        if (props.top) {
+            position.top = props.top;
+        } else {
+            position.bottom = props.bottom;
         }
 
-        return container;
-    },
+        if (props.left) {
+            position.left = props.left;
+            chevronFace = 'left';
+        } else {
+            position.right = props.right;
+            chevronFace = 'right';
+        }
 
-    createMenu: function(Element, props) {
-        var self = this;
+        const contextMenuRect = this.state.contextMenuRect || null;
+        const padding = 10;
 
-        var closeMenu = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
+        const chevronOffset = {};
+        if (props.chevronFace) {
+            chevronFace = props.chevronFace;
+        }
+        if (chevronFace === 'top' || chevronFace === 'bottom') {
+            chevronOffset.left = props.chevronOffset;
+        } else {
+            const target = position.top;
 
-            if (props && props.onFinished) {
-                props.onFinished.apply(null, arguments);
+            // By default, no adjustment is made
+            let adjusted = target;
+
+            // 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);
             }
-        };
 
-        var position = {
-            top: props.top,
-        };
-
-        var chevronOffset = {};
-        if (props.chevronOffset) {
-            chevronOffset.top = props.chevronOffset;
+            position.top = adjusted;
+            chevronOffset.top = Math.max(props.chevronOffset, props.chevronOffset + target - adjusted);
         }
 
         // To override the default chevron colour, if it's been set
-        var chevronCSS = "";
+        let chevronCSS = "";
         if (props.menuColour) {
             chevronCSS = `
                 .mx_ContextualMenu_chevron_left:after {
                     border-right-color: ${props.menuColour};
                 }
-
                 .mx_ContextualMenu_chevron_right:after {
                     border-left-color: ${props.menuColour};
                 }
+                .mx_ContextualMenu_chevron_top:after {
+                    border-left-color: ${props.menuColour};
+                }
+                .mx_ContextualMenu_chevron_bottom:after {
+                    border-left-color: ${props.menuColour};
+                }
             `;
         }
 
-        var chevron = null;
-        if (props.left) {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>;
-            position.left = props.left;
-        } else {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>;
-            position.right = props.right;
-        }
+        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />;
+        const className = 'mx_ContextualMenu_wrapper';
 
-        var className = 'mx_ContextualMenu_wrapper';
-
-        var menuClasses = classNames({
+        const menuClasses = classNames({
             'mx_ContextualMenu': true,
-            'mx_ContextualMenu_left': props.left,
-            'mx_ContextualMenu_right': !props.left,
+            'mx_ContextualMenu_left': chevronFace === 'left',
+            'mx_ContextualMenu_right': chevronFace === 'right',
+            'mx_ContextualMenu_top': chevronFace === 'top',
+            'mx_ContextualMenu_bottom': chevronFace === 'bottom',
         });
 
-        var menuStyle = {};
+        const menuStyle = {};
         if (props.menuWidth) {
             menuStyle.width = props.menuWidth;
         }
@@ -111,21 +198,54 @@ module.exports = {
             menuStyle["backgroundColor"] = props.menuColour;
         }
 
+        if (!isNaN(Number(props.menuPaddingTop))) {
+            menuStyle["paddingTop"] = props.menuPaddingTop;
+        }
+        if (!isNaN(Number(props.menuPaddingLeft))) {
+            menuStyle["paddingLeft"] = props.menuPaddingLeft;
+        }
+        if (!isNaN(Number(props.menuPaddingBottom))) {
+            menuStyle["paddingBottom"] = props.menuPaddingBottom;
+        }
+        if (!isNaN(Number(props.menuPaddingRight))) {
+            menuStyle["paddingRight"] = props.menuPaddingRight;
+        }
+
+        const ElementClass = props.elementClass;
+
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
-        var menu = (
-            <div className={className} style={position}>
-                <div className={menuClasses} style={menuStyle}>
-                    {chevron}
-                    <Element {...props} onFinished={closeMenu}/>
-                </div>
-                <div className="mx_ContextualMenu_background" onClick={closeMenu}></div>
-                <style>{chevronCSS}</style>
+        return <div className={className} style={position}>
+            <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
+                { chevron }
+                <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>
-        );
+            { props.hasBackground && <div className="mx_ContextualMenu_background"
+                                          onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
+            <style>{ chevronCSS }</style>
+        </div>;
+    }
+}
 
-        ReactDOM.render(menu, this.getOrCreateContainer());
+export function createMenu(ElementClass, props, hasBackground=true) {
+    const closeMenu = function(...args) {
+        ReactDOM.unmountComponentAtNode(getOrCreateContainer());
 
-        return {close: closeMenu};
-    },
-};
+        if (props && props.onFinished) {
+            props.onFinished.apply(null, args);
+        }
+    };
+
+    // We only reference closeMenu once per call to createMenu
+    const menu = <ContextualMenu
+        hasBackground={hasBackground}
+        {...props}
+        elementClass={ElementClass}
+        closeMenu={closeMenu} // eslint-disable-line react/jsx-no-bind
+        windowResize={closeMenu} // eslint-disable-line react/jsx-no-bind
+    />;
+
+    ReactDOM.render(menu, getOrCreateContainer());
+
+    return {close: closeMenu};
+}

src/components/structures/CreateRoom.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
 import sdk from '../../index';
 import MatrixClientPeg from '../../MatrixClientPeg';
@@ -30,8 +31,8 @@ module.exports = React.createClass({
     displayName: 'CreateRoom',
 
     propTypes: {
-        onRoomCreated: React.PropTypes.func,
-        collapsedRhs: React.PropTypes.bool,
+        onRoomCreated: PropTypes.func,
+        collapsedRhs: PropTypes.bool,
     },
 
     phases: {
@@ -61,7 +62,7 @@ module.exports = React.createClass({
     },
 
     onCreateRoom: function() {
-        var options = {};
+        const options = {};
 
         if (this.state.room_name) {
             options.name = this.state.room_name;
@@ -79,14 +80,14 @@ module.exports = React.createClass({
                     {
                         type: "m.room.join_rules",
                         content: {
-                            "join_rule": this.state.is_private ? "invite" : "public"
-                        }
+                            "join_rule": this.state.is_private ? "invite" : "public",
+                        },
                     },
                     {
                         type: "m.room.history_visibility",
                         content: {
-                            "history_visibility": this.state.share_history ? "shared" : "invited"
-                        }
+                            "history_visibility": this.state.share_history ? "shared" : "invited",
+                        },
                     },
                 ];
             }
@@ -94,19 +95,19 @@ module.exports = React.createClass({
 
         options.invite = this.state.invited_users;
 
-        var alias = this.getAliasLocalpart();
+        const alias = this.getAliasLocalpart();
         if (alias) {
             options.room_alias_name = alias;
         }
 
-        var cli = MatrixClientPeg.get();
+        const cli = MatrixClientPeg.get();
         if (!cli) {
             // TODO: Error.
             console.error("Cannot create room: No matrix client.");
             return;
         }
 
-        var deferred = cli.createRoom(options);
+        const deferred = cli.createRoom(options);
 
         if (this.state.encrypt) {
             // TODO
@@ -116,7 +117,7 @@ module.exports = React.createClass({
             phase: this.phases.CREATING,
         });
 
-        var self = this;
+        const self = this;
 
         deferred.then(function(resp) {
             self.setState({
@@ -209,7 +210,7 @@ module.exports = React.createClass({
 
     onAliasChanged: function(alias) {
         this.setState({
-            alias: alias
+            alias: alias,
         });
     },
 
@@ -220,64 +221,64 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var curr_phase = this.state.phase;
+        const curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
-            var Loader = sdk.getComponent("elements.Spinner");
+            const Loader = sdk.getComponent("elements.Spinner");
             return (
-                <Loader/>
+                <Loader />
             );
         } else {
-            var error_box = "";
+            let error_box = "";
             if (curr_phase == this.phases.ERROR) {
                 error_box = (
                     <div className="mx_Error">
-                        {_t('An error occurred: %(error_string)s', {error_string: this.state.error_string})}
+                        { _t('An error occurred: %(error_string)s', {error_string: this.state.error_string}) }
                     </div>
                 );
             }
 
-            var CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
-            var RoomAlias = sdk.getComponent("create_room.RoomAlias");
-            var Presets = sdk.getComponent("create_room.Presets");
-            var UserSelector = sdk.getComponent("elements.UserSelector");
-            var SimpleRoomHeader = sdk.getComponent("rooms.SimpleRoomHeader");
+            const CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
+            const RoomAlias = sdk.getComponent("create_room.RoomAlias");
+            const Presets = sdk.getComponent("create_room.Presets");
+            const UserSelector = sdk.getComponent("elements.UserSelector");
+            const SimpleRoomHeader = sdk.getComponent("rooms.SimpleRoomHeader");
 
-            var domain = MatrixClientPeg.get().getDomain();
+            const domain = MatrixClientPeg.get().getDomain();
 
             return (
             <div className="mx_CreateRoom">
-                <SimpleRoomHeader title={_t("Create Room")} collapsedRhs={ this.props.collapsedRhs }/>
+                <SimpleRoomHeader title={_t("Create Room")} collapsedRhs={this.props.collapsedRhs} />
                 <div className="mx_CreateRoom_body">
-                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder={_t('Name')}/> <br />
-                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder={_t('Topic')}/> <br />
-                    <RoomAlias ref="alias" alias={this.state.alias} homeserver={ domain } onChange={this.onAliasChanged}/> <br />
-                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
-                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
+                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder={_t('Name')} /> <br />
+                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder={_t('Topic')} /> <br />
+                    <RoomAlias ref="alias" alias={this.state.alias} homeserver={domain} onChange={this.onAliasChanged} /> <br />
+                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged} /> <br />
+                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset} /> <br />
                     <div>
                         <label>
-                            <input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/>
-                            {_t('Make this room private')}
+                            <input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged} />
+                            { _t('Make this room private') }
                         </label>
                     </div>
                     <div>
                         <label>
-                            <input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/>
-                            {_t('Share message history with new users')}
+                            <input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged} />
+                            { _t('Share message history with new users') }
                         </label>
                     </div>
                     <div className="mx_CreateRoom_encrypt">
                         <label>
-                            <input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/>
-                            {_t('Encrypt room')}
+                            <input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged} />
+                            { _t('Encrypt room') }
                         </label>
                     </div>
                     <div>
                         <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
                     </div>
-                    {error_box}
+                    { error_box }
                 </div>
             </div>
             );
         }
-    }
+    },
 });

src/components/structures/FilePanel.js

@@ -15,20 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Matrix from 'matrix-js-sdk';
 import sdk from '../../index';
 import MatrixClientPeg from '../../MatrixClientPeg';
-import { _t, _tJsx } from '../../languageHandler';
+import { _t } from '../../languageHandler';
 
 /*
  * Component which shows the filtered file using a TimelinePanel
  */
-var FilePanel = React.createClass({
+const FilePanel = React.createClass({
     displayName: 'FilePanel',
 
     propTypes: {
-        roomId: React.PropTypes.string.isRequired,
+        roomId: PropTypes.string.isRequired,
     },
 
     getInitialState: function() {
@@ -55,33 +56,36 @@ var FilePanel = React.createClass({
     },
 
     updateTimelineSet: function(roomId) {
-        var client = MatrixClientPeg.get();
-        var room = client.getRoom(roomId);
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(roomId);
 
         this.noRoom = !room;
 
         if (room) {
-            var filter = new Matrix.Filter(client.credentials.userId);
+            const filter = new Matrix.Filter(client.credentials.userId);
             filter.setDefinition(
                 {
                     "room": {
                         "timeline": {
-                            "contains_url": true
+                            "contains_url": true,
+                            "types": [
+                                "m.room.message",
+                            ],
                         },
-                    }
-                }
+                    },
+                },
             );
 
             // 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;
-                    var timelineSet = room.getOrCreateFilteredTimelineSet(filter);
+                    const timelineSet = room.getOrCreateFilteredTimelineSet(filter);
                     this.setState({ timelineSet: timelineSet });
                 },
                 (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!");
@@ -92,18 +96,21 @@ var FilePanel = React.createClass({
         if (MatrixClientPeg.get().isGuest()) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
                 <div className="mx_RoomView_empty">
-                {_tJsx("You must <a>register</a> to use this functionality", /<a>(.*?)<\/a>/, (sub) => <a href="#/register" key="sub">{sub}</a>)}
+                { _t("You must <a>register</a> to use this functionality",
+                    {},
+                    { 'a': (sub) => <a href="#/register" key="sub">{ sub }</a> })
+                }
                 </div>
             </div>;
         } else if (this.noRoom) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
-                <div className="mx_RoomView_empty">{_t("You must join the room to see its files")}</div>
+                <div className="mx_RoomView_empty">{ _t("You must join the room to see its files") }</div>
             </div>;
         }
 
         // wrap a TimelinePanel with the jump-to-event bits turned off.
-        var TimelinePanel = sdk.getComponent("structures.TimelinePanel");
-        var Loader = sdk.getComponent("elements.Spinner");
+        const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
+        const Loader = sdk.getComponent("elements.Spinner");
 
         if (this.state.timelineSet) {
             // console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
@@ -114,17 +121,15 @@ var FilePanel = React.createClass({
                     manageReadReceipts={false}
                     manageReadMarkers={false}
                     timelineSet={this.state.timelineSet}
-                    showUrlPreview = { false }
+                    showUrlPreview = {false}
                     tileShape="file_grid"
-                    opacity={ this.props.opacity }
                     empty={_t('There are no visible files in this room')}
                 />
             );
-        }
-        else {
+        } else {
             return (
                 <div className="mx_FilePanel">
-                    <Loader/>
+                    <Loader />
                 </div>
             );
         }

src/components/structures/HomePage.js

@@ -0,0 +1,109 @@
+/*
+Copyright 2016 OpenMarket Ltd
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import request from 'browser-request';
+import { _t } from '../../languageHandler';
+import sanitizeHtml from 'sanitize-html';
+import sdk from '../../index';
+
+class HomePage extends React.Component {
+    static displayName = 'HomePage';
+
+    static propTypes = {
+        // URL base of the team server. Optional.
+        teamServerUrl: PropTypes.string,
+        // Team token. Optional. If set, used to get the static homepage of the team
+        //      associated. If unset, homePageUrl will be used.
+        teamToken: PropTypes.string,
+        // URL to use as the iFrame src. Defaults to /home.html.
+        homePageUrl: PropTypes.string,
+    };
+
+    state = {
+            iframeSrc: '',
+            page: '',
+    };
+
+    translate(s) {
+        // default implementation - skins may wish to extend this
+        return sanitizeHtml(_t(s));
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+
+        if (this.props.teamToken && this.props.teamServerUrl) {
+            this.setState({
+                iframeSrc: `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`
+            });
+        }
+        else {
+            // we use request() to inline the homepage into the react component
+            // so that it can inherit CSS and theming easily rather than mess around
+            // with iframes and trying to synchronise document.stylesheets.
+
+            let src = this.props.homePageUrl || 'home.html';
+
+            request(
+                { method: "GET", url: src },
+                (err, response, body) => {
+                    if (this._unmounted) {
+                        return;
+                    }
+
+                    if (err || response.status < 200 || response.status >= 300) {
+                        console.warn(`Error loading home page: ${err}`);
+                        this.setState({ page: _t("Couldn't load home page") });
+                        return;
+                    }
+
+                    body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
+                    this.setState({ page: body });
+                }
+            );
+        }
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    render() {
+        if (this.state.iframeSrc) {
+            return (
+                <div className="mx_HomePage">
+                    <iframe src={ this.state.iframeSrc } />
+                </div>
+            );
+        }
+        else {
+            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+            return (
+                <GeminiScrollbarWrapper autoshow={true} className="mx_HomePage">
+                    <div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
+                    </div>
+                </GeminiScrollbarWrapper>
+            );
+        }
+    }
+}
+
+module.exports = HomePage;

src/components/structures/InteractiveAuth.js

@@ -18,6 +18,7 @@ import Matrix from 'matrix-js-sdk';
 const InteractiveAuth = Matrix.InteractiveAuth;
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
 
@@ -26,18 +27,18 @@ export default React.createClass({
 
     propTypes: {
         // matrix client to use for UI auth requests
-        matrixClient: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
 
         // response from initial request. If not supplied, will do a request on
         // mount.
-        authData: React.PropTypes.shape({
-            flows: React.PropTypes.array,
-            params: React.PropTypes.object,
-            session: React.PropTypes.string,
+        authData: PropTypes.shape({
+            flows: PropTypes.array,
+            params: PropTypes.object,
+            session: PropTypes.string,
         }),
 
         // callback
-        makeRequest: React.PropTypes.func.isRequired,
+        makeRequest: PropTypes.func.isRequired,
 
         // callback called when the auth process has finished,
         // successfully or unsuccessfully.
@@ -51,22 +52,22 @@ export default React.createClass({
         //            the auth session.
         //      * clientSecret {string} The client secret used in auth
         //            sessions with the ID server.
-        onAuthFinished: React.PropTypes.func.isRequired,
+        onAuthFinished: PropTypes.func.isRequired,
 
         // Inputs provided by the user to the auth process
         // and used by various stages. As passed to js-sdk
         // interactive-auth
-        inputs: React.PropTypes.object,
+        inputs: PropTypes.object,
 
         // As js-sdk interactive-auth
-        makeRegistrationUrl: React.PropTypes.func,
-        sessionId: React.PropTypes.string,
-        clientSecret: React.PropTypes.string,
-        emailSid: React.PropTypes.string,
+        makeRegistrationUrl: PropTypes.func,
+        sessionId: PropTypes.string,
+        clientSecret: PropTypes.string,
+        emailSid: PropTypes.string,
 
         // If true, poll to see if the auth flow has been completed
         // out-of-band
-        poll: React.PropTypes.bool,
+        poll: PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -107,7 +108,7 @@ export default React.createClass({
 
             const msg = error.message || error.toString();
             this.setState({
-                errorText: msg
+                errorText: msg,
             });
         }).done();
 
@@ -207,7 +208,7 @@ export default React.createClass({
         if (this.state.errorText) {
             error = (
                 <div className="error">
-                    {this.state.errorText}
+                    { this.state.errorText }
                 </div>
             );
         }
@@ -215,8 +216,8 @@ export default React.createClass({
         return (
             <div>
                 <div>
-                    {this._renderCurrentStage()}
-                    {error}
+                    { this._renderCurrentStage() }
+                    { error }
                 </div>
             </div>
         );

src/components/structures/LeftPanel.js

@@ -0,0 +1,230 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { MatrixClient } from 'matrix-js-sdk';
+import { KeyCode } from '../../Keyboard';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import VectorConferenceHandler from '../../VectorConferenceHandler';
+
+import SettingsStore from '../../settings/SettingsStore';
+
+
+var LeftPanel = React.createClass({
+    displayName: 'LeftPanel',
+
+    // NB. If you add props, don't forget to update
+    // shouldComponentUpdate!
+    propTypes: {
+        collapsed: PropTypes.bool.isRequired,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getInitialState: function() {
+        return {
+            searchFilter: '',
+        };
+    },
+
+    componentWillMount: function() {
+        this.focusedElement = null;
+    },
+
+    shouldComponentUpdate: function(nextProps, nextState) {
+        // MatrixChat will update whenever the user switches
+        // rooms, but propagating this change all the way down
+        // the react tree is quite slow, so we cut this off
+        // here. The RoomTiles listen for the room change
+        // events themselves to know when to update.
+        // We just need to update if any of these things change.
+        if (
+            this.props.collapsed !== nextProps.collapsed ||
+            this.props.disabled !== nextProps.disabled
+        ) {
+            return true;
+        }
+
+        if (this.state.searchFilter !== nextState.searchFilter) {
+            return true;
+        }
+
+        return false;
+    },
+
+    _onFocus: function(ev) {
+        this.focusedElement = ev.target;
+    },
+
+    _onBlur: function(ev) {
+        this.focusedElement = null;
+    },
+
+    _onKeyDown: function(ev) {
+        if (!this.focusedElement) return;
+        let handled = true;
+
+        switch (ev.keyCode) {
+            case KeyCode.TAB:
+                this._onMoveFocus(ev.shiftKey);
+                break;
+            case KeyCode.UP:
+                this._onMoveFocus(true);
+                break;
+            case KeyCode.DOWN:
+                this._onMoveFocus(false);
+                break;
+            case KeyCode.ENTER:
+                this._onMoveFocus(false);
+                if (this.focusedElement) {
+                    this.focusedElement.click();
+                }
+                break;
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
+    _onMoveFocus: function(up) {
+        let element = this.focusedElement;
+
+        // unclear why this isn't needed
+        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
+        // this.focusDirection = up;
+
+        let descending = false; // are we currently descending or ascending through the DOM tree?
+        let classes;
+
+        do {
+            const child = up ? element.lastElementChild : element.firstElementChild;
+            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                } else if (sibling) {
+                    element = sibling;
+                } else {
+                    descending = false;
+                    element = element.parentElement;
+                }
+            } else {
+                if (sibling) {
+                    element = sibling;
+                    descending = true;
+                } else {
+                    element = element.parentElement;
+                }
+            }
+
+            if (element) {
+                classes = element.classList;
+                if (classes.contains("mx_LeftPanel")) { // we hit the top
+                    element = up ? element.lastElementChild : element.firstElementChild;
+                    descending = true;
+                }
+            }
+        } while (element && !(
+            classes.contains("mx_RoomTile") ||
+            classes.contains("mx_SearchBox_search") ||
+            classes.contains("mx_RoomSubList_ellipsis")));
+
+        if (element) {
+            element.focus();
+            this.focusedElement = element;
+            this.focusedDescending = descending;
+        }
+    },
+
+    onHideClick: function() {
+        dis.dispatch({
+            action: 'hide_left_panel',
+        });
+    },
+
+    onSearch: function(term) {
+        this.setState({ searchFilter: term });
+    },
+
+    collectRoomList: function(ref) {
+        this._roomList = ref;
+    },
+
+    render: function() {
+        const RoomList = sdk.getComponent('rooms.RoomList');
+        const TagPanel = sdk.getComponent('structures.TagPanel');
+        const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
+        const CallPreview = sdk.getComponent('voip.CallPreview');
+
+        let topBox;
+        if (this.context.matrixClient.isGuest()) {
+            const LoginBox = sdk.getComponent('structures.LoginBox');
+            topBox = <LoginBox collapsed={ this.props.collapsed }/>;
+        } else {
+            const SearchBox = sdk.getComponent('structures.SearchBox');
+            topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
+        }
+
+        const classes = classNames(
+            "mx_LeftPanel",
+            {
+                "collapsed": this.props.collapsed,
+            },
+        );
+
+        const tagPanelEnabled = !SettingsStore.getValue("TagPanel.disableTagPanel");
+        const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
+
+        const containerClasses = classNames(
+            "mx_LeftPanel_container", "mx_fadable",
+            {
+                "mx_LeftPanel_container_collapsed": this.props.collapsed,
+                "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
+                "mx_fadable_faded": this.props.disabled,
+            },
+        );
+
+        return (
+            <div className={containerClasses}>
+                { tagPanel }
+                <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                    { topBox }
+                    <CallPreview ConferenceHandler={VectorConferenceHandler} />
+                    <RoomList
+                        ref={this.collectRoomList}
+                        collapsed={this.props.collapsed}
+                        searchFilter={this.state.searchFilter}
+                        ConferenceHandler={VectorConferenceHandler} />
+                    <BottomLeftMenu collapsed={this.props.collapsed}/>
+                </aside>
+            </div>
+        );
+    }
+});
+
+module.exports = LeftPanel;

src/components/structures/LoggedInView.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 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.
@@ -17,9 +18,10 @@ limitations under the License.
 
 import * as Matrix from 'matrix-js-sdk';
 import React from 'react';
+import PropTypes from 'prop-types';
+import { DragDropContext } from 'react-beautiful-dnd';
 
-import UserSettingsStore from '../../UserSettingsStore';
-import KeyCode from '../../KeyCode';
+import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import Notifier from '../../Notifier';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
@@ -27,6 +29,16 @@ import sdk from '../../index';
 import dis from '../../dispatcher';
 import sessionStore from '../../stores/SessionStore';
 import MatrixClientPeg from '../../MatrixClientPeg';
+import SettingsStore from "../../settings/SettingsStore";
+import RoomListStore from "../../stores/RoomListStore";
+
+import TagOrderActions from '../../actions/TagOrderActions';
+import RoomListActions from '../../actions/RoomListActions';
+
+// 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.
+const MAX_PINNED_NOTICES_PER_ROOM = 2;
 
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
@@ -37,27 +49,27 @@ import MatrixClientPeg from '../../MatrixClientPeg';
  *
  * Components mounted below us can access the matrix client via the react context.
  */
-export default React.createClass({
+const LoggedInView = React.createClass({
     displayName: 'LoggedInView',
 
     propTypes: {
-        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
-        page_type: React.PropTypes.string.isRequired,
-        onRoomCreated: React.PropTypes.func,
-        onUserSettingsClose: React.PropTypes.func,
+        matrixClient: PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        page_type: PropTypes.string.isRequired,
+        onRoomCreated: PropTypes.func,
+        onUserSettingsClose: PropTypes.func,
 
         // Called with the credentials of a registered user (if they were a ROU that
         // transitioned to PWLU)
-        onRegistered: React.PropTypes.func,
+        onRegistered: PropTypes.func,
 
-        teamToken: React.PropTypes.string,
+        teamToken: PropTypes.string,
 
         // and lots and lots of other stuff.
     },
 
     childContextTypes: {
-        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient),
-        authCache: React.PropTypes.object,
+        matrixClient: PropTypes.instanceOf(Matrix.MatrixClient),
+        authCache: PropTypes.object,
     },
 
     getChildContext: function() {
@@ -73,7 +85,9 @@ export default React.createClass({
     getInitialState: function() {
         return {
             // use compact timeline view
-            useCompactLayout: UserSettingsStore.getSyncedSetting('useCompactLayout'),
+            useCompactLayout: SettingsStore.getValue('useCompactLayout'),
+            // any currently active server notice events
+            serverNoticeEvents: [],
         };
     },
 
@@ -91,12 +105,18 @@ export default React.createClass({
         );
         this._setStateFromSessionStore();
 
+        this._updateServerNoticeEvents();
+
         this._matrixClient.on("accountData", this.onAccountData);
+        this._matrixClient.on("sync", this.onSync);
+        this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
     },
 
     componentWillUnmount: function() {
         document.removeEventListener('keydown', this._onKeyDown);
         this._matrixClient.removeListener("accountData", this.onAccountData);
+        this._matrixClient.removeListener("sync", this.onSync);
+        this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
         if (this._sessionStoreToken) {
             this._sessionStoreToken.remove();
         }
@@ -131,8 +151,61 @@ export default React.createClass({
                 useCompactLayout: event.getContent().useCompactLayout,
             });
         }
+        if (event.getType() === "m.ignored_user_list") {
+            dis.dispatch({action: "ignore_state_changed"});
+        }
     },
 
+    onSync: function(syncState, oldSyncState, data) {
+        const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
+        const newErrCode = data && data.error && data.error.errcode;
+        if (syncState === oldSyncState && oldErrCode === newErrCode) return;
+
+        if (syncState === 'ERROR') {
+            this.setState({
+                syncErrorData: data,
+            });
+        } else {
+            this.setState({
+                syncErrorData: null,
+            });
+        }
+
+        if (oldSyncState === 'PREPARED' && syncState === 'SYNCING') {
+            this._updateServerNoticeEvents();
+        }
+    },
+
+    onRoomStateEvents: function(ev, state) {
+        const roomLists = RoomListStore.getRoomLists();
+        if (roomLists['m.server_notice'] && roomLists['m.server_notice'].some(r => r.roomId === ev.getRoomId())) {
+            this._updateServerNoticeEvents();
+        }
+    },
+
+    _updateServerNoticeEvents: async function() {
+        const roomLists = RoomListStore.getRoomLists();
+        if (!roomLists['m.server_notice']) return [];
+        
+        const pinnedEvents = [];
+        for (const room of roomLists['m.server_notice']) {
+            const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
+
+            if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
+            
+            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);
+            }
+        }
+        this.setState({
+            serverNoticeEvents: pinnedEvents,
+        });
+    },
+    
+
     _onKeyDown: function(ev) {
             /*
             // Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
@@ -149,19 +222,13 @@ export default React.createClass({
             */
 
         let handled = false;
-        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-        let ctrlCmdOnly;
-        if (isMac) {
-            ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
-        } else {
-            ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
-        }
+        const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
 
         switch (ev.keyCode) {
             case KeyCode.UP:
             case KeyCode.DOWN:
                 if (ev.altKey && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
-                    let action = ev.keyCode == KeyCode.UP ?
+                    const action = ev.keyCode == KeyCode.UP ?
                         'view_prev_room' : 'view_next_room';
                     dis.dispatch({action: action});
                     handled = true;
@@ -203,12 +270,71 @@ export default React.createClass({
     _onScrollKeyPressed: function(ev) {
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
-        }
-        else if (this.refs.roomDirectory) {
+        } else if (this.refs.roomDirectory) {
             this.refs.roomDirectory.handleScrollKey(ev);
         }
     },
 
+    _onDragEnd: function(result) {
+        // Dragged to an invalid destination, not onto a droppable
+        if (!result.destination) {
+            return;
+        }
+
+        const dest = result.destination.droppableId;
+
+        if (dest === 'tag-panel-droppable') {
+            // Could be "GroupTile +groupId:domain"
+            const draggableId = result.draggableId.split(' ').pop();
+
+            // Dispatch synchronously so that the TagPanel receives an
+            // optimistic update from TagOrderStore before the previous
+            // state is shown.
+            dis.dispatch(TagOrderActions.moveTag(
+                this._matrixClient,
+                draggableId,
+                result.destination.index,
+            ), true);
+        } else if (dest.startsWith('room-sub-list-droppable_')) {
+            this._onRoomTileEndDrag(result);
+        }
+    },
+
+    _onRoomTileEndDrag: function(result) {
+        let newTag = result.destination.droppableId.split('_')[1];
+        let prevTag = result.source.droppableId.split('_')[1];
+        if (newTag === 'undefined') newTag = undefined;
+        if (prevTag === 'undefined') prevTag = undefined;
+
+        const roomId = result.draggableId.split('_')[1];
+
+        const oldIndex = result.source.index;
+        const newIndex = result.destination.index;
+
+        dis.dispatch(RoomListActions.tagRoom(
+            this._matrixClient,
+            this._matrixClient.getRoom(roomId),
+            prevTag, newTag,
+            oldIndex, newIndex,
+        ), true);
+    },
+
+    _onClick: function(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).
+        if (this.props.leftDisabled && this.props.rightDisabled) {
+            const targetClasses = new Set(ev.target.className.split(' '));
+            if (
+                targetClasses.has('mx_MatrixChat') ||
+                targetClasses.has('mx_MatrixChat_middlePanel') ||
+                targetClasses.has('mx_RoomView')
+            ) {
+                dis.dispatch({ action: 'close_settings' });
+            }
+        }
+    },
+
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RightPanel = sdk.getComponent('structures.RightPanel');
@@ -220,9 +346,11 @@ export default React.createClass({
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
         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 page_element;
         let right_panel = '';
@@ -237,22 +365,23 @@ export default React.createClass({
                         oobData={this.props.roomOobData}
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
-                        opacity={this.props.middleOpacity}
-                        collapsedRhs={this.props.collapse_rhs}
+                        disabled={this.props.middleDisabled}
+                        collapsedRhs={this.props.collapseRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) {
+                    right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
+                }
                 break;
 
             case PageTypes.UserSettings:
                 page_element = <UserSettings
-                    onClose={this.props.onUserSettingsClose}
+                    onClose={this.props.onCloseAllSettings}
                     brand={this.props.config.brand}
-                    enableLabs={this.props.config.enableLabs}
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
+                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.MyGroups:
@@ -262,9 +391,9 @@ export default React.createClass({
             case PageTypes.CreateRoom:
                 page_element = <CreateRoom
                     onRoomCreated={this.props.onRoomCreated}
-                    collapsedRhs={this.props.collapse_rhs}
+                    collapsedRhs={this.props.collapseRhs}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
+                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.RoomDirectory:
@@ -292,19 +421,43 @@ export default React.createClass({
 
             case PageTypes.UserView:
                 page_element = null; // deliberately null for now
-                right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+                right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
+                    isNew={this.props.currentGroupIsNew}
+                    collapsedRhs={this.props.collapseRhs}
                 />;
-                //right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+                if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
                 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;
         const isGuest = this.props.matrixClient.isGuest();
-        if (this.props.hasNewVersion) {
+        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}
             />;
@@ -316,7 +469,7 @@ export default React.createClass({
             topBar = <MatrixToolbar />;
         }
 
-        var bodyClasses = 'mx_MatrixChat';
+        let bodyClasses = 'mx_MatrixChat';
         if (topBar) {
             bodyClasses += ' mx_MatrixChat_toolbarShowing';
         }
@@ -325,20 +478,23 @@ export default React.createClass({
         }
 
         return (
-            <div className='mx_MatrixChat_wrapper'>
-                {topBar}
-                <div className={bodyClasses}>
-                    <LeftPanel
-                        selectedRoom={this.props.currentRoomId}
-                        collapsed={this.props.collapse_lhs || false}
-                        opacity={this.props.leftOpacity}
-                    />
-                    <main className='mx_MatrixChat_middlePanel'>
-                        {page_element}
-                    </main>
-                    {right_panel}
-                </div>
+            <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onClick={this._onClick}>
+                { topBar }
+                <DragDropContext onDragEnd={this._onDragEnd}>
+                    <div className={bodyClasses}>
+                        <LeftPanel
+                            collapsed={this.props.collapseLhs || false}
+                            disabled={this.props.leftDisabled}
+                        />
+                        <main className='mx_MatrixChat_middlePanel'>
+                            { page_element }
+                        </main>
+                        { right_panel }
+                    </div>
+                </DragDropContext>
             </div>
         );
     },
 });
+
+export default LoggedInView;

src/components/structures/LoginBox.js

@@ -0,0 +1,93 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+import { _t } from '../../languageHandler';
+var sdk = require('../../index')
+var dis = require('../../dispatcher');
+var rate_limited_func = require('../../ratelimitedfunc');
+var AccessibleButton = require('../../components/views/elements/AccessibleButton');
+
+module.exports = React.createClass({
+    displayName: 'LoginBox',
+
+    propTypes: {
+        collapsed: React.PropTypes.bool,
+    },
+
+    onToggleCollapse: function(show) {
+        if (show) {
+            dis.dispatch({
+                action: 'show_left_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_left_panel',
+            });
+        }
+    },
+
+    onLoginClick: function() {
+        dis.dispatch({ action: 'start_login' });
+    },
+
+    onRegisterClick: function() {
+        dis.dispatch({ action: 'start_registration' });
+    },
+
+    render: function() {
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+
+        var toggleCollapse;
+        if (this.props.collapsed) {
+            toggleCollapse =
+                <AccessibleButton className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
+                </AccessibleButton>
+        }
+        else {
+            toggleCollapse =
+                <AccessibleButton className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
+                </AccessibleButton>
+        }
+
+        var loginButton;
+        if (!this.props.collapsed) {
+            loginButton = (
+                <div className="mx_LoginBox_loginButton_wrapper">
+                    <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
+                        { _t("Login") }
+                    </AccessibleButton>
+                    <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                        { _t("Register") }
+                    </AccessibleButton>
+                </div>
+            );
+        }
+
+        var self = this;
+        return (
+            <div className="mx_SearchBox mx_LoginBox">
+                { loginButton }
+                { toggleCollapse }
+            </div>
+        );
+    }
+});

src/components/structures/MessagePanel.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -16,14 +17,17 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import UserSettingsStore from '../../UserSettingsStore';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
+import {wantsDateSeparator} from '../../DateUtils';
 import dis from "../../dispatcher";
 import sdk from '../../index';
 
 import MatrixClientPeg from '../../MatrixClientPeg';
 
-const MILLIS_IN_DAY = 86400000;
+const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
+const continuedTypes = ['m.sticker', 'm.room.message'];
 
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
@@ -32,66 +36,63 @@ module.exports = React.createClass({
 
     propTypes: {
         // true to give the component a 'display: none' style.
-        hidden: React.PropTypes.bool,
+        hidden: PropTypes.bool,
 
         // true to show a spinner at the top of the timeline to indicate
         // back-pagination in progress
-        backPaginating: React.PropTypes.bool,
+        backPaginating: PropTypes.bool,
 
         // true to show a spinner at the end of the timeline to indicate
         // forward-pagination in progress
-        forwardPaginating: React.PropTypes.bool,
+        forwardPaginating: PropTypes.bool,
 
         // the list of MatrixEvents to display
-        events: React.PropTypes.array.isRequired,
+        events: PropTypes.array.isRequired,
 
         // ID of an event to highlight. If undefined, no event will be highlighted.
-        highlightedEventId: React.PropTypes.string,
+        highlightedEventId: PropTypes.string,
 
         // Should we show URL Previews
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         // event after which we should show a read marker
-        readMarkerEventId: React.PropTypes.string,
+        readMarkerEventId: PropTypes.string,
 
         // whether the read marker should be visible
-        readMarkerVisible: React.PropTypes.bool,
+        readMarkerVisible: PropTypes.bool,
 
         // the userid of our user. This is used to suppress the read marker
         // for pending messages.
-        ourUserId: React.PropTypes.string,
+        ourUserId: PropTypes.string,
 
         // true to suppress the date at the start of the timeline
-        suppressFirstDateSeparator: React.PropTypes.bool,
+        suppressFirstDateSeparator: PropTypes.bool,
 
         // whether to show read receipts
-        showReadReceipts: React.PropTypes.bool,
+        showReadReceipts: PropTypes.bool,
 
         // true if updates to the event list should cause the scroll panel to
         // scroll down when we are at the bottom of the window. See ScrollPanel
         // for more details.
-        stickyBottom: React.PropTypes.bool,
+        stickyBottom: PropTypes.bool,
 
         // callback which is called when the panel is scrolled.
-        onScroll: React.PropTypes.func,
+        onScroll: PropTypes.func,
 
         // callback which is called when more content is needed.
-        onFillRequest: React.PropTypes.func,
-
-        // opacity for dynamic UI fading effects
-        opacity: React.PropTypes.number,
+        onFillRequest: PropTypes.func,
 
         // className for the panel
-        className: React.PropTypes.string.isRequired,
+        className: PropTypes.string.isRequired,
 
         // shape parameter to be passed to EventTiles
-        tileShape: React.PropTypes.string,
+        tileShape: PropTypes.string,
 
         // show twelve hour timestamps
-        isTwelveHour: React.PropTypes.bool,
+        isTwelveHour: PropTypes.bool,
 
         // show timestamps always
-        alwaysShowTimestamps: React.PropTypes.bool,
+        alwaysShowTimestamps: PropTypes.bool,
     },
 
     componentWillMount: function() {
@@ -112,8 +113,6 @@ module.exports = React.createClass({
         // Velocity requires
         this._readMarkerGhostNode = null;
 
-        this._syncedSettings = UserSettingsStore.getSyncedSettings();
-
         this._isMounted = true;
     },
 
@@ -154,15 +153,15 @@ module.exports = React.createClass({
     //   0: read marker is within the window
     //  +1: read marker is below the window
     getReadMarkerPosition: function() {
-        var readMarker = this.refs.readMarkerNode;
-        var messageWrapper = this.refs.scrollPanel;
+        const readMarker = this.refs.readMarkerNode;
+        const messageWrapper = this.refs.scrollPanel;
 
         if (!readMarker || !messageWrapper) {
             return null;
         }
 
-        var wrapperRect = ReactDOM.findDOMNode(messageWrapper).getBoundingClientRect();
-        var readMarkerRect = readMarker.getBoundingClientRect();
+        const wrapperRect = ReactDOM.findDOMNode(messageWrapper).getBoundingClientRect();
+        const readMarkerRect = readMarker.getBoundingClientRect();
 
         // the read-marker pretends to have zero height when it is actually
         // two pixels high; +2 here to account for that.
@@ -194,7 +193,7 @@ module.exports = React.createClass({
     /**
      * Page up/down.
      *
-     * mult: -1 to page up, +1 to page down
+     * @param {number} mult: -1 to page up, +1 to page down
      */
     scrollRelative: function(mult) {
         if (this.refs.scrollPanel) {
@@ -204,6 +203,8 @@ module.exports = React.createClass({
 
     /**
      * Scroll up/down in response to a scroll key
+     *
+     * @param {KeyboardEvent} ev: the keyboard event to handle
      */
     handleScrollKey: function(ev) {
         if (this.refs.scrollPanel) {
@@ -241,6 +242,10 @@ module.exports = React.createClass({
 
     // TODO: Implement granular (per-room) hide options
     _shouldShowEvent: function(mxEv) {
+        if (mxEv.sender && MatrixClientPeg.get().isUserIgnored(mxEv.sender.userId)) {
+            return false; // ignored = no show (only happens if the ignore happens after an event was received)
+        }
+
         const EventTile = sdk.getComponent('rooms.EventTile');
         if (!EventTile.haveTileForEvent(mxEv)) {
             return false; // no tile = no show
@@ -249,7 +254,7 @@ module.exports = React.createClass({
         // Always show highlighted event
         if (this.props.highlightedEventId === mxEv.getId()) return true;
 
-        return !shouldHideEvent(mxEv, this._syncedSettings);
+        return !shouldHideEvent(mxEv);
     },
 
     _getEventTiles: function() {
@@ -258,7 +263,8 @@ module.exports = React.createClass({
 
         this.eventNodes = {};
 
-        var i;
+        let visible = false;
+        let i;
 
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
@@ -268,9 +274,9 @@ module.exports = React.createClass({
         // a local echo, to manage the read-marker.
         let lastShownEvent;
 
-        var lastShownNonLocalEchoIndex = -1;
+        let lastShownNonLocalEchoIndex = -1;
         for (i = this.props.events.length-1; i >= 0; i--) {
-            var mxEv = this.props.events[i];
+            const mxEv = this.props.events[i];
             if (!this._shouldShowEvent(mxEv)) {
                 continue;
             }
@@ -288,33 +294,33 @@ module.exports = React.createClass({
             break;
         }
 
-        var ret = [];
+        const ret = [];
 
-        var prevEvent = null; // the last event we showed
+        let prevEvent = null; // the last event we showed
 
         // assume there is no read marker until proven otherwise
-        var readMarkerVisible = false;
+        let readMarkerVisible = false;
 
         // if the readmarker has moved, cancel any active ghost.
         if (this.currentReadMarkerEventId && this.props.readMarkerEventId &&
                 this.props.readMarkerVisible &&
-                this.currentReadMarkerEventId != this.props.readMarkerEventId) {
+                this.currentReadMarkerEventId !== this.props.readMarkerEventId) {
             this.currentGhostEventId = null;
         }
 
         const isMembershipChange = (e) => e.getType() === 'm.room.member';
 
         for (i = 0; i < this.props.events.length; i++) {
-            let mxEv = this.props.events[i];
-            let eventId = mxEv.getId();
-            let last = (mxEv === lastShownEvent);
+            const mxEv = this.props.events[i];
+            const eventId = mxEv.getId();
+            const last = (mxEv === lastShownEvent);
 
             const wantTile = this._shouldShowEvent(mxEv);
 
             // Wrap consecutive member events in a ListSummary, ignore if redacted
             if (isMembershipChange(mxEv) && wantTile) {
                 let readMarkerInMels = false;
-                let ts1 = mxEv.getTs();
+                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
@@ -326,7 +332,7 @@ module.exports = React.createClass({
                 const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
                 if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} showTwelveHour={this.props.isTwelveHour}/></li>;
+                    const dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} /></li>;
                     ret.push(dateSeparator);
                 }
 
@@ -335,7 +341,7 @@ module.exports = React.createClass({
                     readMarkerInMels = true;
                 }
 
-                let summarisedEvents = [mxEv];
+                const summarisedEvents = [mxEv];
                 for (;i + 1 < this.props.events.length; i++) {
                     const collapsedMxEv = this.props.events[i + 1];
 
@@ -349,7 +355,7 @@ module.exports = React.createClass({
                     }
 
                     if (!isMembershipChange(collapsedMxEv) ||
-                        this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getDate())) {
+                        this._wantsDateSeparator(mxEv, collapsedMxEv.getDate())) {
                         break;
                     }
 
@@ -361,35 +367,37 @@ module.exports = React.createClass({
                     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 DateSeperator is inserted.
-                    const ret = this._getTilesForEvent(e, e, e === lastShownEvent);
-                    prevEvent = e;
-                    return ret;
+                    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._onWidgetLoad} // Update scroll state
-                    >
-                            {eventTiles}
-                    </MemberEventListSummary>
-                );
+                ret.push(<MemberEventListSummary key={key}
+                    events={summarisedEvents}
+                    onToggle={this._onWidgetLoad} // Update scroll state
+                    startExpanded={highlightInMels}
+                >
+                        { eventTiles }
+                </MemberEventListSummary>);
 
                 if (readMarkerInMels) {
                     ret.push(this._getReadMarkerTile(visible));
                 }
 
+                prevEvent = mxEv;
                 continue;
             }
 
@@ -401,10 +409,10 @@ module.exports = React.createClass({
                 prevEvent = mxEv;
             }
 
-            var isVisibleReadMarker = false;
+            let isVisibleReadMarker = false;
 
-            if (eventId == this.props.readMarkerEventId) {
-                var visible = this.props.readMarkerVisible;
+            if (eventId === this.props.readMarkerEventId) {
+                visible = this.props.readMarkerVisible;
 
                 // if the read marker comes at the end of the timeline (except
                 // for local echoes, which are excluded from RMs, because they
@@ -422,11 +430,11 @@ module.exports = React.createClass({
 
             // XXX: there should be no need for a ghost tile - we should just use a
             // a dispatch (user_activity_end) to start the RM animation.
-            if (eventId == this.currentGhostEventId) {
+            if (eventId === this.currentGhostEventId) {
                 // if we're showing an animation, continue to show it.
                 ret.push(this._getReadMarkerGhostTile());
             } else if (!isVisibleReadMarker &&
-                       eventId == this.currentReadMarkerEventId) {
+                       eventId === this.currentReadMarkerEventId) {
                 // there is currently a read-up-to marker at this point, but no
                 // more. Show an animation of it disappearing.
                 ret.push(this._getReadMarkerGhostTile());
@@ -441,15 +449,24 @@ module.exports = React.createClass({
     _getTilesForEvent: function(prevEvent, mxEv, last) {
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
-        var ret = [];
+        const ret = [];
 
         // is this a continuation of the previous message?
-        var continuation = false;
+        let continuation = false;
 
-        if (prevEvent !== null
-                && prevEvent.sender && mxEv.sender
-                && mxEv.sender.userId === prevEvent.sender.userId
-                && mxEv.getType() == prevEvent.getType()) {
+        // Some events should appear as continuations from previous events of
+        // different types.
+
+        const eventTypeContinues =
+            prevEvent !== null &&
+            continuedTypes.includes(mxEv.getType()) &&
+            continuedTypes.includes(prevEvent.getType());
+
+        // if there is a previous event and it has the same sender as this event
+        // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
+        if (prevEvent !== null && prevEvent.sender && mxEv.sender && mxEv.sender.userId === prevEvent.sender.userId &&
+            (mxEv.getType() === prevEvent.getType() || eventTypeContinues) &&
+            (mxEv.getTs() - prevEvent.getTs() <= CONTINUATION_MAX_INTERVAL)) {
             continuation = true;
         }
 
@@ -469,8 +486,8 @@ module.exports = React.createClass({
 
         // local echoes have a fake date, which could even be yesterday. Treat them
         // as 'today' for the date separators.
-        var ts1 = mxEv.getTs();
-        var eventDate = mxEv.getDate();
+        let ts1 = mxEv.getTs();
+        let eventDate = mxEv.getDate();
         if (mxEv.status) {
             eventDate = new Date();
             ts1 = eventDate.getTime();
@@ -478,19 +495,19 @@ module.exports = React.createClass({
 
         // do we need a date separator since the last event?
         if (this._wantsDateSeparator(prevEvent, eventDate)) {
-            var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} showTwelveHour={this.props.isTwelveHour}/></li>;
+            const dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} /></li>;
             ret.push(dateSeparator);
             continuation = false;
         }
 
-        var eventId = mxEv.getId();
-        var highlight = (eventId == this.props.highlightedEventId);
+        const eventId = mxEv.getId();
+        const highlight = (eventId === this.props.highlightedEventId);
 
         // we can't use local echoes as scroll tokens, because their event IDs change.
         // Local echos have a send "status".
-        var scrollToken = mxEv.status ? undefined : eventId;
+        const scrollToken = mxEv.status ? undefined : eventId;
 
-        var readReceipts;
+        let readReceipts;
         if (this.props.showReadReceipts) {
             readReceipts = this._getReadReceiptsForEvent(mxEv);
         }
@@ -508,8 +525,8 @@ module.exports = React.createClass({
                         eventSendStatus={mxEv.status}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}
-                        last={last} isSelectedEvent={highlight}/>
-                </li>
+                        last={last} isSelectedEvent={highlight} />
+                </li>,
         );
 
         return ret;
@@ -521,17 +538,7 @@ module.exports = React.createClass({
             // here.
             return !this.props.suppressFirstDateSeparator;
         }
-        const prevEventDate = prevEvent.getDate();
-        if (!nextEventDate || !prevEventDate) {
-            return false;
-        }
-        // Return early for events that are > 24h apart
-        if (Math.abs(prevEvent.getTs() - nextEventDate.getTime()) > MILLIS_IN_DAY) {
-            return true;
-        }
-
-        // Compare weekdays
-        return prevEventDate.getDay() !== nextEventDate.getDay();
+        return wantsDateSeparator(prevEvent.getDate(), nextEventDate);
     },
 
     // get a list of read receipts that should be shown next to this event
@@ -544,12 +551,15 @@ module.exports = React.createClass({
         if (!room) {
             return null;
         }
-        let receipts = [];
+        const receipts = [];
         room.getReceiptsForEvent(event).forEach((r) => {
             if (!r.userId || r.type !== "m.read" || r.userId === myUserId) {
                 return; // ignore non-read receipts and receipts from self.
             }
-            let member = room.getMember(r.userId);
+            if (MatrixClientPeg.get().isUserIgnored(r.userId)) {
+                return; // ignore ignored users
+            }
+            const member = room.getMember(r.userId);
             if (!member) {
                 return; // ignore unknown user IDs
             }
@@ -565,7 +575,7 @@ module.exports = React.createClass({
     },
 
     _getReadMarkerTile: function(visible) {
-        var hr;
+        let hr;
         if (visible) {
             hr = <hr className="mx_RoomView_myReadMarker"
                     style={{opacity: 1, width: '99%'}}
@@ -575,7 +585,7 @@ module.exports = React.createClass({
         return (
             <li key="_readupto" ref="readMarkerNode"
                   className="mx_RoomView_myReadMarker_container">
-                {hr}
+                { hr }
             </li>
         );
     },
@@ -594,7 +604,7 @@ module.exports = React.createClass({
     },
 
     _getReadMarkerGhostTile: function() {
-        var hr = <hr className="mx_RoomView_myReadMarker"
+        const hr = <hr className="mx_RoomView_myReadMarker"
                   style={{opacity: 1, width: '99%'}}
                   ref={this._startAnimation}
             />;
@@ -605,7 +615,7 @@ module.exports = React.createClass({
         return (
             <li key={"_readuptoghost_"+this.currentGhostEventId}
                   className="mx_RoomView_myReadMarker_container">
-                {hr}
+                { hr }
             </li>
         );
     },
@@ -617,7 +627,7 @@ module.exports = React.createClass({
     // once dynamic content in the events load, make the scrollPanel check the
     // scroll offsets.
     _onWidgetLoad: function() {
-        var scrollPanel = this.refs.scrollPanel;
+        const scrollPanel = this.refs.scrollPanel;
         if (scrollPanel) {
             scrollPanel.forceUpdate();
         }
@@ -628,9 +638,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-        var Spinner = sdk.getComponent("elements.Spinner");
-        var topSpinner, bottomSpinner;
+        const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        const Spinner = sdk.getComponent("elements.Spinner");
+        let topSpinner;
+        let bottomSpinner;
         if (this.props.backPaginating) {
             topSpinner = <li key="_topSpinner"><Spinner /></li>;
         }
@@ -638,25 +649,26 @@ module.exports = React.createClass({
             bottomSpinner = <li key="_bottomSpinner"><Spinner /></li>;
         }
 
-        var style = this.props.hidden ? { display: 'none' } : {};
-        style.opacity = this.props.opacity;
+        const style = this.props.hidden ? { display: 'none' } : {};
 
-        var className = this.props.className + " mx_fadable";
-        if (this.props.alwaysShowTimestamps) {
-            className += " mx_MessagePanel_alwaysShowTimestamps";
-        }
+        const className = classNames(
+            this.props.className,
+            {
+                "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+            },
+        );
 
         return (
-            <ScrollPanel ref="scrollPanel" className={ className }
-                    onScroll={ this.props.onScroll }
-                    onResize={ this.onResize }
-                    onFillRequest={ this.props.onFillRequest }
-                    onUnfillRequest={ this.props.onUnfillRequest }
-                    style={ style }
-                    stickyBottom={ this.props.stickyBottom }>
-                {topSpinner}
-                {this._getEventTiles()}
-                {bottomSpinner}
+            <ScrollPanel ref="scrollPanel" className={className}
+                    onScroll={this.props.onScroll}
+                    onResize={this.onResize}
+                    onFillRequest={this.props.onFillRequest}
+                    onUnfillRequest={this.props.onUnfillRequest}
+                    style={style}
+                    stickyBottom={this.props.stickyBottom}>
+                { topSpinner }
+                { this._getEventTiles() }
+                { bottomSpinner }
             </ScrollPanel>
         );
     },

src/components/structures/MyGroups.js

@@ -15,39 +15,18 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../index';
-import { _t, _tJsx } from '../../languageHandler';
+import { _t } from '../../languageHandler';
+import dis from '../../dispatcher';
 import withMatrixClient from '../../wrappers/withMatrixClient';
 import AccessibleButton from '../views/elements/AccessibleButton';
-import dis from '../../dispatcher';
-import PropTypes from 'prop-types';
-import Modal from '../../Modal';
-
-const GroupTile = React.createClass({
-    displayName: 'GroupTile',
-
-    propTypes: {
-        groupId: PropTypes.string.isRequired,
-    },
-
-    onClick: function(e) {
-        e.preventDefault();
-        dis.dispatch({
-            action: 'view_group',
-            group_id: this.props.groupId,
-        });
-    },
-
-    render: function() {
-        return <a onClick={this.onClick} href="#">{this.props.groupId}</a>;
-    },
-});
 
 export default withMatrixClient(React.createClass({
     displayName: 'MyGroups',
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {
@@ -62,14 +41,18 @@ export default withMatrixClient(React.createClass({
     },
 
     _onCreateGroupClick: function() {
-        const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
-        Modal.createTrackedDialog('Create Group', '', CreateGroupDialog);
+        dis.dispatch({action: 'view_create_group'});
     },
 
     _fetch: function() {
         this.props.matrixClient.getJoinedGroups().done((result) => {
             this.setState({groups: result.groups, error: null});
         }, (err) => {
+            if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
+                // Indicate that the guest isn't in any groups (which should be true)
+                this.setState({groups: [], error: null});
+                return;
+            }
             this.setState({groups: null, error: err});
         });
     },
@@ -78,63 +61,90 @@ export default withMatrixClient(React.createClass({
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const GroupTile = sdk.getComponent("groups.GroupTile");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
 
         let content;
+        let contentHeader;
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
-                groupNodes.push(
-                    <div key={g}>
-                        <GroupTile groupId={g} />
-                    </div>,
-                );
+                groupNodes.push(<GroupTile key={g} groupId={g} />);
             });
-            content = <div>
-                <div>{_t('You are a member of these groups:')}</div>
-                {groupNodes}
-            </div>;
+            contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
+            content = groupNodes.length > 0 ?
+                <GeminiScrollbarWrapper>
+                    <div className="mx_MyGroups_microcopy">
+                        <p>
+                            { _t(
+                                "Did you know: you can use communities to filter your Riot.im experience!",
+                            ) }
+                        </p>
+                        <p>
+                            { _t(
+                                "To set up a filter, drag a community avatar over to the filter panel on " +
+                                "the far left hand side of the screen. You can click on an avatar in the " +
+                                "filter panel at any time to see only the rooms and people associated " +
+                                "with that community.",
+                            ) }
+                        </p>
+                    </div>
+                    <div className="mx_MyGroups_joinedGroups">
+                        { groupNodes }
+                    </div>
+                </GeminiScrollbarWrapper> :
+                <div className="mx_MyGroups_placeholder">
+                    { _t(
+                        "You're not currently a member of any communities.",
+                    ) }
+                </div>;
         } else if (this.state.error) {
             content = <div className="mx_MyGroups_error">
-                {_t('Error whilst fetching joined groups')}
+                { _t('Error whilst fetching joined communities') }
             </div>;
         } else {
             content = <Loader />;
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={ _t("Groups") } />
-            <div className='mx_MyGroups_joinCreateBox'>
-                <div className="mx_MyGroups_createBox">
-                    <div className="mx_MyGroups_joinCreateHeader">
-                        {_t('Create a new group')}
-                    </div>
-                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
+            <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
+            <div className='mx_MyGroups_header'>
+                <div className="mx_MyGroups_headerCard">
+                    <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
                         <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
-                    {_t(
-                        'Create a group to represent your community! '+
-                        'Define a set of rooms and your own custom homepage '+
-                        'to mark out your space in the Matrix universe.',
-                    )}
-                </div>
-                <div className="mx_MyGroups_joinBox">
-                    <div className="mx_MyGroups_joinCreateHeader">
-                        {_t('Join an existing group')}
+                    <div className="mx_MyGroups_headerCard_content">
+                        <div className="mx_MyGroups_headerCard_header">
+                            { _t('Create a new community') }
+                        </div>
+                        { _t(
+                            'Create a community to group together users and rooms! ' +
+                            'Build a custom homepage to mark out your space in the Matrix universe.',
+                        ) }
                     </div>
-                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}>
+                </div>
+                {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
+                    <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
                         <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
-                    {_tJsx(
-                        'To join an existing group you\'ll have to '+
-                        'know its group identifier; this will look '+
-                        'something like <i>+example:matrix.org</i>.',
-                        /<i>(.*)<\/i>/,
-                        (sub) => <i>{sub}</i>,
-                    )}
-                </div>
+                    <div className="mx_MyGroups_headerCard_content">
+                        <div className="mx_MyGroups_headerCard_header">
+                            { _t('Join an existing community') }
+                        </div>
+                        { _t(
+                            'To join an existing community you\'ll have to '+
+                            'know its community identifier; this will look '+
+                            'something like <i>+example:matrix.org</i>.',
+                            {},
+                            { 'i': (sub) => <i>{ sub }</i> })
+                        }
+                    </div>
+                </div>*/}
             </div>
             <div className="mx_MyGroups_content">
-                {content}
+                { contentHeader }
+                { content }
             </div>
         </div>;
     },

src/components/structures/NotificationPanel.js

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ReactDOM = require("react-dom");
+const React = require('react');
+const ReactDOM = require("react-dom");
 import { _t } from '../../languageHandler';
-var Matrix = require("matrix-js-sdk");
-var sdk = require('../../index');
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var dis = require("../../dispatcher");
+const Matrix = require("matrix-js-sdk");
+const sdk = require('../../index');
+const MatrixClientPeg = require("../../MatrixClientPeg");
+const dis = require("../../dispatcher");
 
 /*
  * Component which shows the global notification list using a TimelinePanel
  */
-var NotificationPanel = React.createClass({
+const NotificationPanel = React.createClass({
     displayName: 'NotificationPanel',
 
     propTypes: {
@@ -33,10 +33,10 @@ var NotificationPanel = React.createClass({
 
     render: function() {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
-        var TimelinePanel = sdk.getComponent("structures.TimelinePanel");
-        var Loader = sdk.getComponent("elements.Spinner");
+        const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
+        const Loader = sdk.getComponent("elements.Spinner");
 
-        var timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
+        const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
         if (timelineSet) {
             return (
                 <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
@@ -44,18 +44,16 @@ var NotificationPanel = React.createClass({
                     manageReadReceipts={false}
                     manageReadMarkers={false}
                     timelineSet={timelineSet}
-                    showUrlPreview = { false }
-                    opacity={ this.props.opacity }
+                    showUrlPreview = {false}
                     tileShape="notif"
-                    empty={ _t('You have no visible notifications') }
+                    empty={_t('You have no visible notifications')}
                 />
             );
-        }
-        else {
+        } else {
             console.error("No notifTimelineSet available!");
             return (
                 <div className="mx_NotificationPanel">
-                    <Loader/>
+                    <Loader />
                 </div>
             );
         }

src/components/structures/RightPanel.js

@@ -0,0 +1,424 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { _t } from '../../languageHandler';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import { MatrixClient } from 'matrix-js-sdk';
+import Analytics from '../../Analytics';
+import RateLimitedFunc from '../../ratelimitedfunc';
+import AccessibleButton from '../../components/views/elements/AccessibleButton';
+import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
+import GroupStore from '../../stores/GroupStore';
+
+import { formatCount } from '../../utils/FormattingUtils';
+
+class HeaderButton extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        Analytics.trackEvent(...this.props.analytics);
+        dis.dispatch({
+            action: 'view_right_panel_phase',
+            phase: this.props.clickPhase,
+        });
+    }
+
+    render() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        return <AccessibleButton
+            aria-label={this.props.title}
+            title={this.props.title}
+            className="mx_RightPanel_headerButton"
+            onClick={this.onClick} >
+
+                <div className="mx_RightPanel_headerButton_badge">
+                    { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
+                </div>
+                <TintableSvg src={this.props.iconSrc} width="25" height="25" />
+                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
+
+            </AccessibleButton>;
+    }
+}
+
+HeaderButton.propTypes = {
+    // Whether this button is highlighted
+    isHighlighted: PropTypes.bool.isRequired,
+    // The phase to swap to when the button is clicked
+    clickPhase: PropTypes.string.isRequired,
+    // The source file of the icon to display
+    iconSrc: PropTypes.string.isRequired,
+
+    // The badge to display above the icon
+    badge: PropTypes.node,
+    // The parameters to track the click event
+    analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    // Button title
+    title: PropTypes.string.isRequired,
+};
+
+module.exports = React.createClass({
+    displayName: 'RightPanel',
+
+    propTypes: {
+        // TODO: We're trying to move away from these being props, but we need to know
+        // whether we should be displaying a room or group member list
+        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+        groupId: React.PropTypes.string, // if showing panels for a given group, this is set
+        collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    Phase: {
+        RoomMemberList: 'RoomMemberList',
+        GroupMemberList: 'GroupMemberList',
+        GroupRoomList: 'GroupRoomList',
+        GroupRoomInfo: 'GroupRoomInfo',
+        FilePanel: 'FilePanel',
+        NotificationPanel: 'NotificationPanel',
+        RoomMemberInfo: 'RoomMemberInfo',
+        GroupMemberInfo: 'GroupMemberInfo',
+    },
+
+    componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        const cli = this.context.matrixClient;
+        cli.on("RoomState.members", this.onRoomStateMember);
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        if (this.context.matrixClient) {
+            this.context.matrixClient.removeListener("RoomState.members", this.onRoomStateMember);
+        }
+        this._unregisterGroupStore(this.props.groupId);
+    },
+
+    getInitialState: function() {
+        return {
+            phase: this.props.groupId ? this.Phase.GroupMemberList : this.Phase.RoomMemberList,
+            isUserPrivilegedInGroup: null,
+        };
+    },
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore(this.props.groupId);
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    _initGroupStore(groupId) {
+        if (!groupId) return;
+        GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        GroupStore.unregisterListener(this.onGroupStoreUpdated);
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
+        });
+    },
+
+    onCollapseClick: function() {
+        dis.dispatch({
+            action: 'hide_right_panel',
+        });
+    },
+
+    onInviteButtonClick: function() {
+        if (this.context.matrixClient.isGuest()) {
+            dis.dispatch({action: 'require_registration'});
+            return;
+        }
+
+        // call AddressPickerDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.roomId,
+        });
+    },
+
+    onInviteToGroupButtonClick: function() {
+        showGroupInviteDialog(this.props.groupId).then(() => {
+            this.setState({
+                phase: this.Phase.GroupMemberList,
+            });
+        });
+    },
+
+    onAddRoomToGroupButtonClick: function() {
+        showGroupAddRoomDialog(this.props.groupId).then(() => {
+            this.forceUpdate();
+        });
+    },
+
+    onRoomStateMember: function(ev, state, member) {
+        if (member.roomId !== this.props.roomId) {
+            return;
+        }
+        // redraw the badge on the membership list
+        if (this.state.phase === this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
+            this._delayedUpdate();
+        } else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
+                member.userId === this.state.member.userId) {
+            // refresh the member info (e.g. new power level)
+            this._delayedUpdate();
+        }
+    },
+
+    _delayedUpdate: new RateLimitedFunc(function() {
+        this.forceUpdate(); // eslint-disable-line babel/no-invalid-this
+    }, 500),
+
+    onAction: function(payload) {
+        if (payload.action === "view_user") {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+            if (payload.member) {
+                this.setState({
+                    phase: this.Phase.RoomMemberInfo,
+                    member: payload.member,
+                });
+            } else {
+                if (this.props.roomId) {
+                    this.setState({
+                        phase: this.Phase.RoomMemberList,
+                    });
+                } else if (this.props.groupId) {
+                    this.setState({
+                        phase: this.Phase.GroupMemberList,
+                        member: payload.member,
+                    });
+                }
+            }
+        } else if (payload.action === "view_group") {
+            this.setState({
+                phase: this.Phase.GroupMemberList,
+                member: null,
+            });
+        } else if (payload.action === "view_group_room") {
+            this.setState({
+                phase: this.Phase.GroupRoomInfo,
+                groupRoomId: payload.groupRoomId,
+            });
+        } else if (payload.action === "view_group_room_list") {
+            this.setState({
+                phase: this.Phase.GroupRoomList,
+            });
+        } else if (payload.action === "view_group_member_list") {
+            this.setState({
+                phase: this.Phase.GroupMemberList,
+            });
+        } else if (payload.action === "view_group_user") {
+            this.setState({
+                phase: this.Phase.GroupMemberInfo,
+                member: payload.member,
+            });
+        } else if (payload.action === "view_room") {
+            this.setState({
+                phase: this.Phase.RoomMemberList,
+            });
+        } else if (payload.action === "view_right_panel_phase") {
+            this.setState({
+                phase: payload.phase,
+            });
+        }
+    },
+
+    render: function() {
+        const MemberList = sdk.getComponent('rooms.MemberList');
+        const MemberInfo = sdk.getComponent('rooms.MemberInfo');
+        const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
+        const FilePanel = sdk.getComponent('structures.FilePanel');
+
+        const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
+        const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
+        const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
+        const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
+
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let inviteGroup;
+
+        let membersBadge;
+        let membersTitle = _t('Members');
+        if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
+            && this.props.roomId
+        ) {
+            const cli = this.context.matrixClient;
+            const room = cli.getRoom(this.props.roomId);
+            let isUserInRoom;
+            if (room) {
+                const numMembers = room.getJoinedMemberCount();
+                membersTitle = _t('%(count)s Members', { count: numMembers });
+                membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
+                isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
+            }
+
+            if (isUserInRoom) {
+                inviteGroup =
+                    <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
+                        <div className="mx_RightPanel_icon" >
+                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                        </div>
+                        <div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
+                    </AccessibleButton>;
+            }
+        }
+
+        const isPhaseGroup = [
+            this.Phase.GroupMemberInfo,
+            this.Phase.GroupMemberList,
+        ].includes(this.state.phase);
+
+        let headerButtons = [];
+        if (this.props.roomId) {
+            headerButtons = [
+                <HeaderButton key="_membersButton" title={membersTitle} iconSrc="img/icons-people.svg"
+                    isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
+                    clickPhase={this.Phase.RoomMemberList}
+                    badge={membersBadge}
+                    analytics={['Right Panel', 'Member List Button', 'click']}
+                />,
+                <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/icons-files.svg"
+                    isHighlighted={this.state.phase === this.Phase.FilePanel}
+                    clickPhase={this.Phase.FilePanel}
+                    analytics={['Right Panel', 'File List Button', 'click']}
+                />,
+                <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/icons-notifications.svg"
+                    isHighlighted={this.state.phase === this.Phase.NotificationPanel}
+                    clickPhase={this.Phase.NotificationPanel}
+                    analytics={['Right Panel', 'Notification List Button', 'click']}
+                />,
+            ];
+        } else if (this.props.groupId) {
+            headerButtons = [
+                <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+                    isHighlighted={isPhaseGroup}
+                    clickPhase={this.Phase.GroupMemberList}
+                    analytics={['Right Panel', 'Group Member List Button', 'click']}
+                />,
+                <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room.svg"
+                    isHighlighted={[this.Phase.GroupRoomList, this.Phase.GroupRoomInfo].includes(this.state.phase)}
+                    clickPhase={this.Phase.GroupRoomList}
+                    analytics={['Right Panel', 'Group Room List Button', 'click']}
+                />,
+            ];
+        }
+
+        if (this.props.roomId || this.props.groupId) {
+            // Hiding the right panel hides it completely and relies on an 'expand' button
+            // being put in the RoomHeader or GroupView header, so only show the minimise
+            // button on these 2 screens or you won't be able to re-expand the panel.
+            headerButtons.push(
+                <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
+                    title={_t("Hide panel")} aria-label={_t("Hide panel")} onClick={this.onCollapseClick}
+                >
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" />
+                </div>,
+            );
+        }
+
+        let panel = <div />;
+        if (!this.props.collapsed) {
+            if (this.props.roomId && this.state.phase === this.Phase.RoomMemberList) {
+                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+            } else if (this.props.groupId && this.state.phase === this.Phase.GroupMemberList) {
+                panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+            } else if (this.state.phase === this.Phase.GroupRoomList) {
+                panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
+            } else if (this.state.phase === this.Phase.RoomMemberInfo) {
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+            } else if (this.state.phase === this.Phase.GroupMemberInfo) {
+                panel = <GroupMemberInfo
+                    groupMember={this.state.member}
+                    groupId={this.props.groupId}
+                    key={this.state.member.user_id} />;
+            } else if (this.state.phase === this.Phase.GroupRoomInfo) {
+                panel = <GroupRoomInfo
+                    groupRoomId={this.state.groupRoomId}
+                    groupId={this.props.groupId}
+                    key={this.state.groupRoomId} />;
+            } else if (this.state.phase === this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />;
+            } else if (this.state.phase === this.Phase.FilePanel) {
+                panel = <FilePanel roomId={this.props.roomId} />;
+            }
+        }
+
+        if (!panel) {
+            panel = <div className="mx_RightPanel_blank" />;
+        }
+
+        if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
+            inviteGroup = isPhaseGroup ? (
+                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteToGroupButtonClick}>
+                    <div className="mx_RightPanel_icon" >
+                        <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                    </div>
+                    <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
+                </AccessibleButton>
+            ) : (
+                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onAddRoomToGroupButtonClick}>
+                    <div className="mx_RightPanel_icon" >
+                        <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
+                    </div>
+                    <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
+                </AccessibleButton>
+            );
+        }
+
+        const classes = classNames("mx_RightPanel", "mx_fadable", {
+            "collapsed": this.props.collapsed,
+            "mx_fadable_faded": this.props.disabled,
+        });
+
+        return (
+            <aside className={classes}>
+                <div className="mx_RightPanel_header">
+                    <div className="mx_RightPanel_headerButtonGroup">
+                        { headerButtons }
+                    </div>
+                </div>
+                { panel }
+                <div className="mx_RightPanel_footer">
+                    { inviteGroup }
+                </div>
+            </aside>
+        );
+    },
+});

src/components/structures/RoomDirectory.js

@@ -0,0 +1,587 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MatrixClientPeg = require('../../MatrixClientPeg');
+var ContentRepo = require("matrix-js-sdk").ContentRepo;
+var Modal = require('../../Modal');
+var sdk = require('../../index');
+var dis = require('../../dispatcher');
+
+var linkify = require('linkifyjs');
+var linkifyString = require('linkifyjs/string');
+var linkifyMatrix = require('../../linkify-matrix');
+var sanitizeHtml = require('sanitize-html');
+import Promise from 'bluebird';
+
+import { _t } from '../../languageHandler';
+
+import {instanceForInstanceId, protocolNameForInstanceId} from '../../utils/DirectoryUtils';
+
+linkifyMatrix(linkify);
+
+module.exports = React.createClass({
+    displayName: 'RoomDirectory',
+
+    propTypes: {
+        config: React.PropTypes.object,
+    },
+
+    getDefaultProps: function() {
+        return {
+            config: {},
+        }
+    },
+
+    getInitialState: function() {
+        return {
+            publicRooms: [],
+            loading: true,
+            protocolsLoading: true,
+            instanceId: null,
+            includeAll: false,
+            roomServer: null,
+            filterString: null,
+        }
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this.nextBatch = null;
+        this.filterTimeout = null;
+        this.scrollPanel = null;
+        this.protocols = null;
+
+        this.setState({protocolsLoading: true});
+        MatrixClientPeg.get().getThirdpartyProtocols().done((response) => {
+            this.protocols = response;
+            this.setState({protocolsLoading: false});
+        }, (err) => {
+            console.warn(`error loading thirdparty protocols: ${err}`);
+            this.setState({protocolsLoading: false});
+            if (MatrixClientPeg.get().isGuest()) {
+                // Guests currently aren't allowed to use this API, so
+                // ignore this as otherwise this error is literally the
+                // thing you see when loading the client!
+                return;
+            }
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to get protocol list from Home Server', '', ErrorDialog, {
+                title: _t('Failed to get protocol list from Home Server'),
+                description: _t('The Home Server may be too old to support third party networks'),
+            });
+        });
+
+        // dis.dispatch({
+        //     action: 'panel_disable',
+        //     sideDisabled: true,
+        //     middleDisabled: true,
+        // });
+    },
+
+    componentWillUnmount: function() {
+        // dis.dispatch({
+        //     action: 'panel_disable',
+        //     sideDisabled: false,
+        //     middleDisabled: false,
+        // });
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+        this._unmounted = true;
+    },
+
+    refreshRoomList: function() {
+        this.nextBatch = null;
+        this.setState({
+            publicRooms: [],
+            loading: true,
+        });
+        this.getMoreRooms().done();
+    },
+
+    getMoreRooms: function() {
+        if (!MatrixClientPeg.get()) return Promise.resolve();
+
+        const my_filter_string = this.state.filterString;
+        const my_server = this.state.roomServer;
+        // remember the next batch token when we sent the request
+        // too. If it's changed, appending to the list will corrupt it.
+        const my_next_batch = this.nextBatch;
+        const opts = {limit: 20};
+        if (my_server != MatrixClientPeg.getHomeServerName()) {
+            opts.server = my_server;
+        }
+        if (this.state.instanceId) {
+            opts.third_party_instance_id = this.state.instanceId;
+        } else if (this.state.includeAll) {
+            opts.include_all_networks = true;
+        }
+        if (this.nextBatch) opts.since = this.nextBatch;
+        if (my_filter_string) opts.filter = { generic_search_term: my_filter_string } ;
+        return MatrixClientPeg.get().publicRooms(opts).then((data) => {
+            if (
+                my_filter_string != this.state.filterString ||
+                my_server != this.state.roomServer ||
+                my_next_batch != this.nextBatch)
+            {
+                // if the filter or server has changed since this request was sent,
+                // throw away the result (don't even clear the busy flag
+                // since we must still have a request in flight)
+                return;
+            }
+
+            if (this._unmounted) {
+                // if we've been unmounted, we don't care either.
+                return;
+            }
+
+            this.nextBatch = data.next_batch;
+            this.setState((s) => {
+                s.publicRooms.push(...data.chunk);
+                s.loading = false;
+                return s;
+            });
+            return Boolean(data.next_batch);
+        }, (err) => {
+            if (
+                my_filter_string != this.state.filterString ||
+                my_server != this.state.roomServer ||
+                my_next_batch != this.nextBatch)
+            {
+                // as above: we don't care about errors for old
+                // requests either
+                return;
+            }
+
+            if (this._unmounted) {
+                // if we've been unmounted, we don't care either.
+                return;
+            }
+
+            this.setState({ loading: false });
+            console.error("Failed to get publicRooms: %s", JSON.stringify(err));
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to get public room list', '', ErrorDialog, {
+                title: _t('Failed to get public room list'),
+                description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded'))
+            });
+        });
+    },
+
+    /**
+     * A limited interface for removing rooms from the directory.
+     * Will set the room to not be publicly visible and delete the
+     * default alias. In the long term, it would be better to allow
+     * HS admins to do this through the RoomSettings interface, but
+     * this needs SPEC-417.
+     */
+    removeFromDirectory: function(room) {
+        var alias = get_display_alias_for_room(room);
+        var name = room.name || alias || _t('Unnamed room');
+
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        var desc;
+        if (alias) {
+            desc = _t('Delete the room alias %(alias)s and remove %(name)s from the directory?', {alias: alias, name: name});
+        } else {
+            desc = _t('Remove %(name)s from the directory?', {name: name});
+        }
+
+        Modal.createTrackedDialog('Remove from Directory', '', QuestionDialog, {
+            title: _t('Remove from Directory'),
+            description: desc,
+            onFinished: (should_delete) => {
+                if (!should_delete) return;
+
+                var Loader = sdk.getComponent("elements.Spinner");
+                var modal = Modal.createDialog(Loader);
+                var step = _t('remove %(name)s from the directory.', {name: name});
+
+                MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
+                    if (!alias) return;
+                    step = _t('delete the alias.');
+                    return MatrixClientPeg.get().deleteAlias(alias);
+                }).done(() => {
+                    modal.close();
+                    this.refreshRoomList();
+                }, (err) => {
+                    modal.close();
+                    this.refreshRoomList();
+                    console.error("Failed to " + step + ": " + err);
+                    Modal.createTrackedDialog('Remove from Directory Error', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded'))
+                    });
+                });
+            }
+        });
+    },
+
+    onRoomClicked: function(room, ev) {
+        if (ev.shiftKey) {
+            ev.preventDefault();
+            this.removeFromDirectory(room);
+        } else {
+            this.showRoom(room);
+        }
+    },
+
+    onOptionChange: function(server, instanceId, includeAll) {
+        // clear next batch so we don't try to load more rooms
+        this.nextBatch = null;
+        this.setState({
+            // Clear the public rooms out here otherwise we needlessly
+            // spend time filtering lots of rooms when we're about to
+            // to clear the list anyway.
+            publicRooms: [],
+            roomServer: server,
+            instanceId: instanceId,
+            includeAll: includeAll,
+        }, this.refreshRoomList);
+        // We also refresh the room list each time even though this
+        // filtering is client-side. It hopefully won't be client side
+        // for very long, and we may have fetched a thousand rooms to
+        // find the five gitter ones, at which point we do not want
+        // to render all those rooms when switching back to 'all networks'.
+        // Easiest to just blow away the state & re-fetch.
+    },
+
+    onFillRequest: function(backwards) {
+        if (backwards || !this.nextBatch) return Promise.resolve(false);
+
+        return this.getMoreRooms();
+    },
+
+    onFilterChange: function(alias) {
+        this.setState({
+            filterString: alias || null,
+        });
+
+        // don't send the request for a little bit,
+        // no point hammering the server with a
+        // request for every keystroke, let the
+        // user finish typing.
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+        this.filterTimeout = setTimeout(() => {
+            this.filterTimeout = null;
+            this.refreshRoomList();
+        }, 700);
+    },
+
+    onFilterClear: function() {
+        // update immediately
+        this.setState({
+            filterString: null,
+        }, this.refreshRoomList);
+
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+    },
+
+    onJoinClick: function(alias) {
+        // If we don't have a particular instance id selected, just show that rooms alias
+        if (!this.state.instanceId) {
+            // If the user specified an alias without a domain, add on whichever server is selected
+            // in the dropdown
+            if (alias.indexOf(':') == -1) {
+                alias = alias + ':' + this.state.roomServer;
+            }
+            this.showRoomAlias(alias);
+        } else {
+            // This is a 3rd party protocol. Let's see if we can join it
+            const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+            const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+            const fields = protocolName ? this._getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance) : null;
+            if (!fields) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createTrackedDialog('Unable to join network', '', ErrorDialog, {
+                    title: _t('Unable to join network'),
+                    description: _t('Riot does not know how to join a room on this network'),
+                });
+                return;
+            }
+            MatrixClientPeg.get().getThirdpartyLocation(protocolName, fields).done((resp) => {
+                if (resp.length > 0 && resp[0].alias) {
+                    this.showRoomAlias(resp[0].alias);
+                } else {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Room not found', '', ErrorDialog, {
+                        title: _t('Room not found'),
+                        description: _t('Couldn\'t find a matching Matrix room'),
+                    });
+                }
+            }, (e) => {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createTrackedDialog('Fetching third party location failed', '', ErrorDialog, {
+                    title: _t('Fetching third party location failed'),
+                    description: _t('Unable to look up room ID from server'),
+                });
+            });
+        }
+    },
+
+    showRoomAlias: function(alias) {
+        this.showRoom(null, alias);
+    },
+
+    showRoom: function(room, room_alias) {
+        var payload = {action: 'view_room'};
+        if (room) {
+            // Don't let the user view a room they won't be able to either
+            // peek or join: fail earlier so they don't have to click back
+            // to the directory.
+            if (MatrixClientPeg.get().isGuest()) {
+                if (!room.world_readable && !room.guest_can_join) {
+                    dis.dispatch({action: 'require_registration'});
+                    return;
+                }
+            }
+
+            if (!room_alias) {
+                room_alias = get_display_alias_for_room(room);
+            }
+
+            payload.oob_data = {
+                avatarUrl: room.avatar_url,
+                // XXX: This logic is duplicated from the JS SDK which
+                // would normally decide what the name is.
+                name: room.name || room_alias || _t('Unnamed room'),
+            };
+        }
+        // It's not really possible to join Matrix rooms by ID because the HS has no way to know
+        // which servers to start querying. However, there's no other way to join rooms in
+        // this list without aliases at present, so if roomAlias isn't set here we have no
+        // choice but to supply the ID.
+        if (room_alias) {
+            payload.room_alias = room_alias;
+        } else {
+            payload.room_id = room.room_id;
+        }
+        dis.dispatch(payload);
+    },
+
+    getRows: function() {
+        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+        if (!this.state.publicRooms) return [];
+
+        var rooms = this.state.publicRooms;
+        var rows = [];
+        var self = this;
+        var guestRead, guestJoin, perms;
+        for (var i = 0; i < rooms.length; i++) {
+            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || _t('Unnamed room');
+            guestRead = null;
+            guestJoin = null;
+
+            if (rooms[i].world_readable) {
+                guestRead = (
+                    <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
+                );
+            }
+            if (rooms[i].guest_can_join) {
+                guestJoin = (
+                    <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
+                );
+            }
+
+            perms = null;
+            if (guestRead || guestJoin) {
+                perms = <div className="mx_RoomDirectory_perms">{guestRead}{guestJoin}</div>;
+            }
+
+            var topic = rooms[i].topic || '';
+            topic = linkifyString(sanitizeHtml(topic));
+
+            rows.push(
+                <tr key={ rooms[i].room_id }
+                    onClick={self.onRoomClicked.bind(self, rooms[i])}
+                    // cancel onMouseDown otherwise shift-clicking highlights text
+                    onMouseDown={(ev) => {ev.preventDefault();}}
+                >
+                    <td className="mx_RoomDirectory_roomAvatar">
+                        <BaseAvatar width={24} height={24} resizeMethod='crop'
+                            name={ name } idName={ name }
+                            url={ ContentRepo.getHttpUriForMxc(
+                                    MatrixClientPeg.get().getHomeserverUrl(),
+                                    rooms[i].avatar_url, 24, 24, "crop") } />
+                    </td>
+                    <td className="mx_RoomDirectory_roomDescription">
+                        <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
+                        { perms }
+                        <div className="mx_RoomDirectory_topic"
+                             onClick={ function(e) { e.stopPropagation() } }
+                             dangerouslySetInnerHTML={{ __html: topic }}/>
+                        <div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(rooms[i]) }</div>
+                    </td>
+                    <td className="mx_RoomDirectory_roomMemberCount">
+                        { rooms[i].num_joined_members }
+                    </td>
+                </tr>
+            );
+        }
+        return rows;
+    },
+
+    collectScrollPanel: function(element) {
+        this.scrollPanel = element;
+    },
+
+    _stringLooksLikeId: function(s, field_type) {
+        let pat = /^#[^\s]+:[^\s]/;
+        if (field_type && field_type.regexp) {
+            pat = new RegExp(field_type.regexp);
+        }
+
+        return pat.test(s);
+    },
+
+    _getFieldsForThirdPartyLocation: function(userInput, protocol, instance) {
+        // make an object with the fields specified by that protocol. We
+        // require that the values of all but the last field come from the
+        // instance. The last is the user input.
+        const requiredFields = protocol.location_fields;
+        if (!requiredFields) return null;
+        const fields = {};
+        for (let i = 0; i < requiredFields.length - 1; ++i) {
+            const thisField = requiredFields[i];
+            if (instance.fields[thisField] === undefined) return null;
+            fields[thisField] = instance.fields[thisField];
+        }
+        fields[requiredFields[requiredFields.length - 1]] = userInput;
+        return fields;
+    },
+
+    /**
+     * called by the parent component when PageUp/Down/etc is pressed.
+     *
+     * We pass it down to the scroll panel.
+     */
+    handleScrollKey: function(ev) {
+        if (this.scrollPanel) {
+            this.scrollPanel.handleScrollKey(ev);
+        }
+    },
+
+    render: function() {
+        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        if (this.state.protocolsLoading) {
+            return (
+                <div className="mx_RoomDirectory">
+                    <SimpleRoomHeader title={ _t('Directory') } />
+                    <Loader />
+                </div>
+            );
+        }
+
+        let content;
+        if (this.state.loading) {
+            content = <div className="mx_RoomDirectory">
+                <Loader />
+            </div>;
+        } else {
+            const rows = this.getRows();
+            // we still show the scrollpanel, at least for now, because
+            // otherwise we don't fetch more because we don't get a fill
+            // request from the scrollpanel because there isn't one
+            let scrollpanel_content;
+            if (rows.length == 0) {
+                scrollpanel_content = <i>{ _t('No rooms to show') }</i>;
+            } else {
+                scrollpanel_content = <table ref="directory_table" className="mx_RoomDirectory_table">
+                    <tbody>
+                        { this.getRows() }
+                    </tbody>
+                </table>;
+            }
+            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+            content = <ScrollPanel ref={this.collectScrollPanel}
+                className="mx_RoomDirectory_tableWrapper"
+                onFillRequest={ this.onFillRequest }
+                stickyBottom={false}
+                startAtBottom={false}
+                onResize={function(){}}
+            >
+                { scrollpanel_content }
+            </ScrollPanel>;
+        }
+
+        const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+        let instance_expected_field_type;
+        if (
+            protocolName &&
+            this.protocols &&
+            this.protocols[protocolName] &&
+            this.protocols[protocolName].location_fields.length > 0 &&
+            this.protocols[protocolName].field_types
+        ) {
+            const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
+            instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
+        }
+
+
+        let placeholder = _t('Search for a room');
+        if (!this.state.instanceId) {
+            placeholder = _t('#example') + ':' + this.state.roomServer;
+        } else if (instance_expected_field_type) {
+            placeholder = instance_expected_field_type.placeholder;
+        }
+
+        let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
+        if (protocolName) {
+            const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
+                showJoinButton = false;
+            }
+        }
+
+        const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
+        const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
+        return (
+            <div className="mx_RoomDirectory">
+                <SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
+                <div className="mx_RoomDirectory_list">
+                    <div className="mx_RoomDirectory_listheader">
+                        <DirectorySearchBox
+                            className="mx_RoomDirectory_searchbox"
+                            onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
+                            placeholder={placeholder} showJoinButton={showJoinButton}
+                        />
+                        <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
+                    </div>
+                    {content}
+                </div>
+            </div>
+        );
+    }
+});
+
+// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
+// but works with the objects we get from the public room list
+function get_display_alias_for_room(room) {
+    return  room.canonical_alias || (room.aliases ? room.aliases[0] : "");
+}

src/components/structures/RoomStatusBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 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.
@@ -15,66 +16,87 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t, _tJsx } from '../../languageHandler';
+import PropTypes from 'prop-types';
+import Matrix from 'matrix-js-sdk';
+import { _t, _td } from '../../languageHandler';
 import sdk from '../../index';
 import WhoIsTyping from '../../WhoIsTyping';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import MemberAvatar from '../views/avatars/MemberAvatar';
+import Resend from '../../Resend';
+import * as cryptodevices from '../../cryptodevices';
+import dis from '../../dispatcher';
+import { messageForResourceLimitError } from '../../utils/ErrorUtils';
 
-const HIDE_DEBOUNCE_MS = 10000;
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
 const STATUS_BAR_EXPANDED_LARGE = 2;
 
+function getUnsentMessages(room) {
+    if (!room) { return []; }
+    return room.getPendingEvents().filter(function(ev) {
+        return ev.status === Matrix.EventStatus.NOT_SENT;
+    });
+};
+
 module.exports = React.createClass({
     displayName: 'RoomStatusBar',
 
     propTypes: {
         // the room this statusbar is representing.
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
 
         // the number of messages which have arrived since we've been scrolled up
-        numUnreadMessages: React.PropTypes.number,
-
-        // string to display when there are messages in the room which had errors on send
-        unsentMessageError: React.PropTypes.string,
+        numUnreadMessages: PropTypes.number,
 
         // this is true if we are fully scrolled-down, and are looking at
         // the end of the live timeline.
-        atEndOfLiveTimeline: React.PropTypes.bool,
+        atEndOfLiveTimeline: PropTypes.bool,
+
+        // This is true when the user is alone in the room, but has also sent a message.
+        // Used to suggest to the user to invite someone
+        sentMessageAndIsAlone: PropTypes.bool,
 
         // true if there is an active call in this room (means we show
         // the 'Active Call' text in the status bar if there is nothing
         // more interesting)
-        hasActiveCall: React.PropTypes.bool,
+        hasActiveCall: PropTypes.bool,
 
         // Number of names to display in typing indication. E.g. set to 3, will
         // result in "X, Y, Z and 100 others are typing."
-        whoIsTypingLimit: React.PropTypes.number,
+        whoIsTypingLimit: PropTypes.number,
 
         // callback for when the user clicks on the 'resend all' button in the
         // 'unsent messages' bar
-        onResendAllClick: React.PropTypes.func,
+        onResendAllClick: PropTypes.func,
 
         // callback for when the user clicks on the 'cancel all' button in the
         // 'unsent messages' bar
-        onCancelAllClick: React.PropTypes.func,
+        onCancelAllClick: PropTypes.func,
+
+        // callback for when the user clicks on the 'invite others' button in the
+        // 'you are alone' bar
+        onInviteClick: PropTypes.func,
+
+        // callback for when the user clicks on the 'stop warning me' button in the
+        // 'you are alone' bar
+        onStopWarningClick: PropTypes.func,
 
         // callback for when the user clicks on the 'scroll to bottom' button
-        onScrollToBottomClick: React.PropTypes.func,
+        onScrollToBottomClick: PropTypes.func,
 
         // callback for when we do something that changes the size of the
         // status bar. This is used to trigger a re-layout in the parent
         // component.
-        onResize: React.PropTypes.func,
+        onResize: PropTypes.func,
 
         // callback for when the status bar can be hidden from view, as it is
         // not displaying anything
-        onHidden: React.PropTypes.func,
+        onHidden: PropTypes.func,
 
         // callback for when the status bar is displaying something and should
         // be visible
-        onVisible: React.PropTypes.func,
+        onVisible: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -86,13 +108,16 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             syncState: MatrixClientPeg.get().getSyncState(),
+            syncStateData: MatrixClientPeg.get().getSyncStateData(),
             usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
+            unsentMessages: getUnsentMessages(this.props.room),
         };
     },
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
+        MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
 
         this._checkSize();
     },
@@ -103,32 +128,65 @@ module.exports = React.createClass({
 
     componentWillUnmount: function() {
         // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
             client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
+            client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
         }
     },
 
-    onSyncStateChange: function(state, prevState) {
+    onSyncStateChange: function(state, prevState, data) {
         if (state === "SYNCING" && prevState === "SYNCING") {
             return;
         }
         this.setState({
-            syncState: state
+            syncState: state,
+            syncStateData: data,
         });
     },
 
     onRoomMemberTyping: function(ev, member) {
         this.setState({
-            usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
+            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
+        });
+    },
+
+    _onSendWithoutVerifyingClick: function() {
+        cryptodevices.getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((devices) => {
+            cryptodevices.markAllDevicesKnown(MatrixClientPeg.get(), devices);
+            Resend.resendUnsentEvents(this.props.room);
+        });
+    },
+
+    _onResendAllClick: function() {
+        Resend.resendUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
+    },
+
+    _onCancelAllClick: function() {
+        Resend.cancelUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
+    },
+
+    _onShowDevicesClick: function() {
+        cryptodevices.showUnknownDeviceDialogForMessages(MatrixClientPeg.get(), this.props.room);
+    },
+
+    _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
+        if (room.roomId !== this.props.room.roomId) return;
+
+        this.setState({
+            unsentMessages: getUnsentMessages(this.props.room),
         });
     },
 
     // Check whether current size is greater than 0, if yes call props.onVisible
-    _checkSize: function () {
-        if (this.props.onVisible && this._getSize()) {
-            this.props.onVisible();
+    _checkSize: function() {
+        if (this._getSize()) {
+            if (this.props.onVisible) this.props.onVisible();
+        } else {
+            if (this.props.onHidden) this.props.onHidden();
         }
     },
 
@@ -136,14 +194,15 @@ module.exports = React.createClass({
     // changed - so we use '0' to indicate normal size, and other values to
     // indicate other sizes.
     _getSize: function() {
-        if (this.state.syncState === "ERROR" ||
+        if (this._shouldShowConnectionError() ||
             (this.state.usersTyping.length > 0) ||
             this.props.numUnreadMessages ||
             !this.props.atEndOfLiveTimeline ||
-            this.props.hasActiveCall
+            this.props.hasActiveCall ||
+            this.props.sentMessageAndIsAlone
         ) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.props.unsentMessageError) {
+        } else if (this.state.unsentMessages.length > 0) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -157,9 +216,9 @@ module.exports = React.createClass({
         if (this.props.numUnreadMessages) {
             return (
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={ this.props.onScrollToBottomClick }>
+                        onClick={this.props.onScrollToBottomClick}>
                     <img src="img/newmessages.svg" width="24" height="24"
-                        alt=""/>
+                        alt="" />
                 </div>
             );
         }
@@ -167,29 +226,29 @@ module.exports = React.createClass({
         if (!this.props.atEndOfLiveTimeline) {
             return (
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={ this.props.onScrollToBottomClick }>
+                        onClick={this.props.onScrollToBottomClick}>
                     <img src="img/scrolldown.svg" width="24" height="24"
-                        alt={ _t("Scroll to bottom of page") }
-                        title={ _t("Scroll to bottom of page") }/>
+                        alt={_t("Scroll to bottom of page")}
+                        title={_t("Scroll to bottom of page")} />
                 </div>
             );
         }
 
         if (this.props.hasActiveCall) {
-            var TintableSvg = sdk.getComponent("elements.TintableSvg");
+            const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src="img/sound-indicator.svg" width="23" height="20"/>
+                <TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
             );
         }
 
-        if (this.state.syncState === "ERROR") {
+        if (this._shouldShowConnectionError()) {
             return null;
         }
 
         if (wantPlaceholder) {
             return (
                 <div className="mx_RoomStatusBar_typingIndicatorAvatars">
-                    {this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
+                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
                 </div>
             );
         }
@@ -221,78 +280,169 @@ module.exports = React.createClass({
         if (othersCount > 0) {
             avatars.push(
                 <span className="mx_RoomStatusBar_typingIndicatorRemaining" key="others">
-                    +{othersCount}
-                </span>
+                    +{ othersCount }
+                </span>,
             );
         }
 
         return avatars;
     },
 
-    // return suitable content for the main (text) part of the status bar.
-    _getContent: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-
+    _shouldShowConnectionError: function() {
         // no conn bar trumps unread count since you can't get unread messages
         // without a connection! (technically may already have some but meh)
         // It also trumps the "some not sent" msg since you can't resend without
         // a connection!
-        if (this.state.syncState === "ERROR") {
+        // There's one situation in which we don't show this 'no connection' bar, and that's
+        // if it's a resource limit exceeded error: those are shown in the top bar.
+        const errorIsMauError = Boolean(
+            this.state.syncStateData &&
+            this.state.syncStateData.error &&
+            this.state.syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED'
+        );
+        return this.state.syncState === "ERROR" && !errorIsMauError;
+    },
+
+    _getUnsentMessageContent: function() {
+        const unsentMessages = this.state.unsentMessages;
+        if (!unsentMessages.length) return null;
+
+        let title;
+        let content;
+
+        const hasUDE = unsentMessages.some((m) => {
+            return m.error && m.error.name === "UnknownDeviceError";
+        });
+
+        if (hasUDE) {
+            title = _t("Message not sent due to unknown devices being present");
+            content = _t(
+                "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
+                {},
+                {
+                    'showDevicesText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onShowDevicesClick}>{ sub }</a>,
+                    'sendAnywayText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="sendAnyway" onClick={this._onSendWithoutVerifyingClick}>{ sub }</a>,
+                    'cancelText': (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
+                },
+            );
+        } else {
+            let consentError = null;
+            let resourceLimitError = null;
+            for (const m of unsentMessages) {
+                if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
+                    consentError = m.error;
+                    break;
+                } else if (m.error && m.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
+                    resourceLimitError = m.error;
+                    break;
+                }
+            }
+            if (consentError) {
+                title = _t(
+                    "You can't send any messages until you review and agree to " +
+                    "<consentLink>our terms and conditions</consentLink>.",
+                    {},
+                    {
+                        'consentLink': (sub) =>
+                            <a href={consentError.data && consentError.data.consent_uri} target="_blank">
+                                { sub }
+                            </a>,
+                    },
+                );
+            } else if (resourceLimitError) {
+                title = messageForResourceLimitError(
+                    resourceLimitError.data.limit_type,
+                    resourceLimitError.data.admin_contact, {
+                    'monthly_active_user': _td(
+                        "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. " +
+                        "Please <a>contact your service administrator</a> to continue using the service.",
+                    ),
+                    '': _td(
+                        "Your message wasn't sent because this homeserver has exceeded a resource limit. " +
+                        "Please <a>contact your service administrator</a> to continue using the service.",
+                    ),
+                });
+            } else if (
+                unsentMessages.length === 1 &&
+                unsentMessages[0].error &&
+                unsentMessages[0].error.data &&
+                unsentMessages[0].error.data.error
+            ) {
+                title = unsentMessages[0].error.data.error;
+            } else {
+                title = _t('%(count)s of your messages have not been sent.', { count: unsentMessages.length });
+            }
+            content = _t("%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. " +
+               "You can also select individual messages to resend or cancel.",
+                { count: unsentMessages.length },
+                {
+                    'resendText': (sub) =>
+                        <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={this._onResendAllClick}>{ sub }</a>,
+                    'cancelText': (sub) =>
+                        <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={this._onCancelAllClick}>{ sub }</a>,
+                },
+            );
+        }
+
+        return <div className="mx_RoomStatusBar_connectionLostBar">
+            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt={_t("Warning")} />
+            <div>
+                <div className="mx_RoomStatusBar_connectionLostBar_title">
+                    { title }
+                </div>
+                <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                    { content }
+                </div>
+            </div>
+        </div>;
+    },
+
+    // return suitable content for the main (text) part of the status bar.
+    _getContent: function() {
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
-                    <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        {_t('Connectivity to the server has been lost.')}
-                    </div>
-                    <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                        {_t('Sent messages will be stored until your connection has returned.')}
+                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
+                    <div>
+                        <div className="mx_RoomStatusBar_connectionLostBar_title">
+                            { _t('Connectivity to the server has been lost.') }
+                        </div>
+                        <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                            { _t('Sent messages will be stored until your connection has returned.') }
+                        </div>
                     </div>
                 </div>
             );
         }
 
-        if (this.props.unsentMessageError) {
-            return (
-                <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
-                    <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        { this.props.unsentMessageError }
-                    </div>
-                    <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                    {_tJsx("<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.",
-                        [/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/],
-                        [
-                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={ this.props.onResendAllClick }>{sub}</a>,
-                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={ this.props.onCancelAllClick }>{sub}</a>,
-                        ]
-                    )}
-                    </div>
-                </div>
-            );
+        if (this.state.unsentMessages.length > 0) {
+            return this._getUnsentMessageContent();
         }
 
         // unread count trumps who is typing since the unread count is only
         // set when you've scrolled up
         if (this.props.numUnreadMessages) {
             // MUST use var name "count" for pluralization to kick in
-            var unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
+            const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
 
             return (
                 <div className="mx_RoomStatusBar_unreadMessagesBar"
-                        onClick={ this.props.onScrollToBottomClick }>
-                    {unreadMsgs}
+                        onClick={this.props.onScrollToBottomClick}>
+                    { unreadMsgs }
                 </div>
             );
         }
 
         const typingString = WhoIsTyping.whoIsTypingString(
             this.state.usersTyping,
-            this.props.whoIsTypingLimit
+            this.props.whoIsTypingLimit,
         );
         if (typingString) {
             return (
                 <div className="mx_RoomStatusBar_typingBar">
-                    <EmojiText>{typingString}</EmojiText>
+                    <EmojiText>{ typingString }</EmojiText>
                 </div>
             );
         }
@@ -300,7 +450,25 @@ module.exports = React.createClass({
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
-                    <b>{_t('Active call')}</b>
+                    <b>{ _t('Active call') }</b>
+                </div>
+            );
+        }
+
+        // If you're alone in the room, and have sent a message, suggest to invite someone
+        if (this.props.sentMessageAndIsAlone) {
+            return (
+                <div className="mx_RoomStatusBar_isAlone">
+                    { _t("There's no one else here! Would you like to <inviteText>invite others</inviteText> " +
+                            "or <nowarnText>stop warning about the empty room</nowarnText>?",
+                        {},
+                        {
+                            'inviteText': (sub) =>
+                                <a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>,
+                            'nowarnText': (sub) =>
+                                <a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>,
+                        },
+                    ) }
                 </div>
             );
         }
@@ -308,17 +476,16 @@ module.exports = React.createClass({
         return null;
     },
 
-
     render: function() {
-        var content = this._getContent();
-        var indicator = this._getIndicator(this.state.usersTyping.length > 0);
+        const content = this._getContent();
+        const indicator = this._getIndicator(this.state.usersTyping.length > 0);
 
         return (
             <div className="mx_RoomStatusBar">
                 <div className="mx_RoomStatusBar_indicator">
-                    {indicator}
+                    { indicator }
                 </div>
-                {content}
+                { content }
             </div>
         );
     },

src/components/structures/RoomSubList.js

@@ -0,0 +1,469 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+import sdk from '../../index';
+import { Droppable } from 'react-beautiful-dnd';
+import { _t } from '../../languageHandler';
+import dis from '../../dispatcher';
+import Unread from '../../Unread';
+import * as RoomNotifs from '../../RoomNotifs';
+import * as FormattingUtils from '../../utils/FormattingUtils';
+import { KeyCode } from '../../Keyboard';
+import { Group } from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
+
+
+// turn this on for drop & drag console debugging galore
+const debug = false;
+
+const TRUNCATE_AT = 10;
+
+const RoomSubList = React.createClass({
+    displayName: 'RoomSubList',
+
+    debug: debug,
+
+    propTypes: {
+        list: PropTypes.arrayOf(PropTypes.object).isRequired,
+        label: PropTypes.string.isRequired,
+        tagName: PropTypes.string,
+        editable: PropTypes.bool,
+
+        order: PropTypes.string.isRequired,
+
+        // passed through to RoomTile and used to highlight room with `!` regardless of notifications count
+        isInvite: PropTypes.bool,
+
+        startAsHidden: PropTypes.bool,
+        showSpinner: PropTypes.bool, // true to show a spinner if 0 elements when expanded
+        collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
+        onHeaderClick: PropTypes.func,
+        alwaysShowHeader: PropTypes.bool,
+        incomingCall: PropTypes.object,
+        onShowMoreRooms: PropTypes.func,
+        searchFilter: PropTypes.string,
+        emptyContent: PropTypes.node, // content shown if the list is empty
+        headerItems: PropTypes.node, // content shown in the sublist header
+        extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
+        showEmpty: PropTypes.bool,
+    },
+
+    getInitialState: function() {
+        return {
+            hidden: this.props.startAsHidden || false,
+            truncateAt: TRUNCATE_AT,
+            sortedList: [],
+        };
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHeaderClick: function() {
+            }, // NOP
+            onShowMoreRooms: function() {
+            }, // NOP
+            extraTiles: [],
+            isInvite: false,
+            showEmpty: true,
+        };
+    },
+
+    componentWillMount: function() {
+        this.setState({
+            sortedList: this.applySearchFilter(this.props.list, this.props.searchFilter),
+        });
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        // order the room list appropriately before we re-render
+        //if (debug) console.log("received new props, list = " + newProps.list);
+        this.setState({
+            sortedList: this.applySearchFilter(newProps.list, newProps.searchFilter),
+        });
+    },
+
+    applySearchFilter: function(list, filter) {
+        if (filter === "") return list;
+        const lcFilter = filter.toLowerCase();
+        // case insensitive if room name includes filter,
+        // or if starts with `#` and one of room's aliases starts with filter
+        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
+            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
+    },
+
+    // The header is collapsable if it is hidden or not stuck
+    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
+    isCollapsableOnClick: function() {
+        const stuck = this.refs.header.dataset.stuck;
+        if (this.state.hidden || stuck === undefined || stuck === "none") {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    onAction: function(payload) {
+        // XXX: Previously RoomList would forceUpdate whenever on_room_read is dispatched,
+        // but this is no longer true, so we must do it here (and can apply the small
+        // optimisation of checking that we care about the room being read).
+        //
+        // Ultimately we need to transition to a state pushing flow where something
+        // explicitly notifies the components concerned that the notif count for a room
+        // has change (e.g. a Flux store).
+        if (payload.action === 'on_room_read' &&
+            this.props.list.some((r) => r.roomId === payload.roomId)
+        ) {
+            this.forceUpdate();
+        }
+    },
+
+    onClick: function(ev) {
+        if (this.isCollapsableOnClick()) {
+            // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
+            const isHidden = !this.state.hidden;
+            this.setState({hidden: isHidden});
+
+            if (isHidden) {
+                // as good a way as any to reset the truncate state
+                this.setState({truncateAt: TRUNCATE_AT});
+            }
+
+            this.props.onShowMoreRooms();
+            this.props.onHeaderClick(isHidden);
+        } else {
+            // The header is stuck, so the click is to be interpreted as a scroll to the header
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
+        }
+    },
+
+    onRoomTileClick(roomId, ev) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+            clear_search: (ev && (ev.keyCode === KeyCode.ENTER || ev.keyCode === KeyCode.SPACE)),
+        });
+    },
+
+    _shouldShowNotifBadge: function(roomNotifState) {
+        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
+        return showBadgeInStates.indexOf(roomNotifState) > -1;
+    },
+
+    _shouldShowMentionBadge: function(roomNotifState) {
+        return roomNotifState !== RoomNotifs.MUTE;
+    },
+
+    /**
+     * Total up all the notification counts from the rooms
+     *
+     * @param {Number} truncateAt If supplied will only total notifications for rooms outside the truncation number
+     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
+     */
+    roomNotificationCount: function(truncateAt) {
+        const self = this;
+
+        if (this.props.isInvite) {
+            return [0, true];
+        }
+
+        return this.props.list.reduce(function(result, room, index) {
+            if (truncateAt === undefined || index >= truncateAt) {
+                const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+                const highlight = room.getUnreadNotificationCount('highlight') > 0;
+                const notificationCount = room.getUnreadNotificationCount();
+
+                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+                const badges = notifBadges || mentionBadges;
+
+                if (badges) {
+                    result[0] += notificationCount;
+                    if (highlight) {
+                        result[1] = true;
+                    }
+                }
+            }
+            return result;
+        }, [0, false]);
+    },
+
+    _updateSubListCount: function() {
+        // Force an update by setting the state to the current state
+        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
+        // method is honoured
+        this.setState(this.state);
+    },
+
+    makeRoomTiles: function() {
+        const DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
+        const RoomTile = sdk.getComponent("rooms.RoomTile");
+        return this.state.sortedList.map((room, index) => {
+            // XXX: is it evil to pass in this as a prop to RoomTile? Yes.
+
+            // We should only use <DNDRoomTile /> when editable
+            const RoomTileComponent = this.props.editable ? DNDRoomTile : RoomTile;
+            return <RoomTileComponent
+                index={index} // For DND
+                room={room}
+                roomSubList={this}
+                tagName={this.props.tagName}
+                key={room.roomId}
+                collapsed={this.props.collapsed || false}
+                unread={Unread.doesRoomHaveUnreadMessages(room)}
+                highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
+                isInvite={this.props.isInvite}
+                refreshSubList={this._updateSubListCount}
+                incomingCall={null}
+                onClick={this.onRoomTileClick}
+            />;
+        });
+    },
+
+    _onNotifBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        e.preventDefault();
+        e.stopPropagation();
+        // find first room which has notifications and switch to it
+        for (const room of this.state.sortedList) {
+            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+            const highlight = room.getUnreadNotificationCount('highlight') > 0;
+            const notificationCount = room.getUnreadNotificationCount();
+
+            const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(roomNotifState);
+            const mentionBadges = highlight && this._shouldShowMentionBadge(roomNotifState);
+
+            if (notifBadges || mentionBadges) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: room.roomId,
+                });
+                return;
+            }
+        }
+    },
+
+    _onInviteBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        e.preventDefault();
+        e.stopPropagation();
+        // switch to first room in sortedList as that'll be the top of the list for the user
+        if (this.state.sortedList && this.state.sortedList.length > 0) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.sortedList[0].roomId,
+            });
+        } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
+            // Group Invites are different in that they are all extra tiles and not rooms
+            // XXX: this is a horrible special case because Group Invite sublist is a hack
+            if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
+                dis.dispatch({
+                    action: 'view_group',
+                    group_id: this.props.extraTiles[0].props.group.groupId,
+                });
+            }
+        }
+    },
+
+    _getHeaderJsx: function() {
+        const subListNotifications = this.roomNotificationCount();
+        const subListNotifCount = subListNotifications[0];
+        const subListNotifHighlight = subListNotifications[1];
+
+        const totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
+        const roomCount = totalTiles > 0 ? totalTiles : '';
+
+        const chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronRight': this.state.hidden,
+            'mx_RoomSubList_chevronDown': !this.state.hidden,
+        });
+
+        const badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+        });
+
+        let badge;
+        if (subListNotifCount > 0) {
+            badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
+                { FormattingUtils.formatCount(subListNotifCount) }
+            </div>;
+        } else if (this.props.isInvite) {
+            // no notifications but highlight anyway because this is an invite badge
+            badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
+        }
+
+        // When collapsed, allow a long hover on the header to show user
+        // the full tag name and room count
+        let title;
+        if (this.props.collapsed) {
+            title = this.props.label;
+            if (roomCount !== '') {
+                title += " [" + roomCount + "]";
+            }
+        }
+
+        let incomingCall;
+        if (this.props.incomingCall) {
+            const self = this;
+            // Check if the incoming call is for this section
+            const incomingCallRoom = this.props.list.filter(function(room) {
+                return self.props.incomingCall.roomId === room.roomId;
+            });
+
+            if (incomingCallRoom.length === 1) {
+                const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+                incomingCall =
+                    <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
+            }
+        }
+
+        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return (
+            <div className="mx_RoomSubList_labelContainer" title={title} ref="header">
+                <AccessibleButton onClick={this.onClick} className="mx_RoomSubList_label" tabIndex={tabindex}>
+                    {this.props.collapsed ? '' : this.props.label}
+                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
+                    <div className={chevronClasses} />
+                    {badge}
+                    {incomingCall}
+                </AccessibleButton>
+            </div>
+        );
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        let content = <div className="mx_RoomSubList_chevronDown" />;
+
+        const overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        const overflowNotifCount = overflowNotifications[0];
+        const overflowNotifHighlight = overflowNotifications[1];
+        if (overflowNotifCount && !this.props.collapsed) {
+            content = FormattingUtils.formatCount(overflowNotifCount);
+        }
+
+        const badgeClasses = classNames({
+            'mx_RoomSubList_moreBadge': true,
+            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
+            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
+        });
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return (
+            <AccessibleButton className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+                <div className="mx_RoomSubList_line" />
+                <div className="mx_RoomSubList_more">{_t("more")}</div>
+                <div className={badgeClasses}>{content}</div>
+            </AccessibleButton>
+        );
+    },
+
+    _showFullMemberList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+
+        this.props.onShowMoreRooms();
+        this.props.onHeaderClick(false);
+    },
+
+    render: function() {
+        const TruncatedList = sdk.getComponent('elements.TruncatedList');
+
+        let content;
+
+        if (this.props.showEmpty) {
+            // this is new behaviour with still controversial UX in that in hiding RoomSubLists the drop zones for DnD
+            // are also gone so when filtering users can't DnD rooms to some tags but is a lot cleaner otherwise.
+            if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) {
+                content = this.props.emptyContent;
+            } else {
+                content = this.makeRoomTiles();
+                content.push(...this.props.extraTiles);
+            }
+        } else {
+            if (this.state.sortedList.length === 0 && this.props.extraTiles.length === 0) {
+                // if no search filter is applied and there is a placeholder defined then show it, otherwise show nothing
+                if (!this.props.searchFilter && this.props.emptyContent) {
+                    content = this.props.emptyContent;
+                } else {
+                    // don't show an empty sublist
+                    return null;
+                }
+            } else {
+                content = this.makeRoomTiles();
+                content.push(...this.props.extraTiles);
+            }
+        }
+
+        if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0 || this.props.editable) {
+            let subList;
+            const classes = "mx_RoomSubList";
+
+            if (!this.state.hidden) {
+                subList = <TruncatedList className={classes} truncateAt={this.state.truncateAt}
+                                         createOverflowElement={this._createOverflowTile}>
+                    {content}
+                </TruncatedList>;
+            } else {
+                subList = <TruncatedList className={classes}>
+                </TruncatedList>;
+            }
+
+            const subListContent = <div>
+                {this._getHeaderJsx()}
+                {subList}
+            </div>;
+
+            return this.props.editable ?
+                <Droppable
+                    droppableId={"room-sub-list-droppable_" + this.props.tagName}
+                    type="draggable-RoomTile"
+                >
+                    {(provided, snapshot) => (
+                        <div ref={provided.innerRef}>
+                            {subListContent}
+                        </div>
+                    )}
+                </Droppable> : subListContent;
+        } else {
+            const Loader = sdk.getComponent("elements.Spinner");
+            if (this.props.showSpinner) {
+                content = <Loader />;
+            }
+
+            return (
+                <div className="mx_RoomSubList">
+                    {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
+                    { this.state.hidden ? undefined : content }
+                </div>
+            );
+        }
+    },
+});
+
+module.exports = RoomSubList;

src/components/structures/ScrollPanel.js

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
-var ReactDOM = require("react-dom");
-var GeminiScrollbar = require('react-gemini-scrollbar');
+const React = require("react");
+const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
 import Promise from 'bluebird';
-var KeyCode = require('../../KeyCode');
+import { KeyCode } from '../../Keyboard';
+import sdk from '../../index.js';
 
-var DEBUG_SCROLL = false;
+const DEBUG_SCROLL = false;
 // var DEBUG_SCROLL = true;
 
 // The amount of extra scroll distance to allow prior to unfilling.
@@ -86,7 +87,7 @@ module.exports = React.createClass({
          * scroll down to show the new element, rather than preserving the
          * existing view.
          */
-        stickyBottom: React.PropTypes.bool,
+        stickyBottom: PropTypes.bool,
 
         /* startAtBottom: if set to true, the view is assumed to start
          * scrolled to the bottom.
@@ -95,7 +96,7 @@ module.exports = React.createClass({
          * behaviour stays the same for other uses of ScrollPanel.
          * If so, let's remove this parameter down the line.
          */
-        startAtBottom: React.PropTypes.bool,
+        startAtBottom: PropTypes.bool,
 
         /* onFillRequest(backwards): a callback which is called on scroll when
          * the user nears the start (backwards = true) or end (backwards =
@@ -110,7 +111,7 @@ module.exports = React.createClass({
          * directon (at this time) - which will stop the pagination cycle until
          * the user scrolls again.
          */
-        onFillRequest: React.PropTypes.func,
+        onFillRequest: PropTypes.func,
 
         /* onUnfillRequest(backwards): a callback which is called on scroll when
          * there are children elements that are far out of view and could be removed
@@ -121,24 +122,24 @@ module.exports = React.createClass({
          * first element to remove if removing from the front/bottom, and last element
          * to remove if removing from the back/top.
          */
-        onUnfillRequest: React.PropTypes.func,
+        onUnfillRequest: PropTypes.func,
 
         /* onScroll: a callback which is called whenever any scroll happens.
          */
-        onScroll: React.PropTypes.func,
+        onScroll: PropTypes.func,
 
         /* onResize: a callback which is called whenever the Gemini scroll
          * panel is resized
          */
-        onResize: React.PropTypes.func,
+        onResize: PropTypes.func,
 
         /* className: classnames to add to the top-level div
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /* style: styles to add to the top-level div
          */
-        style: React.PropTypes.object,
+        style: PropTypes.object,
     },
 
     getDefaultProps: function() {
@@ -148,6 +149,7 @@ module.exports = React.createClass({
             onFillRequest: function(backwards) { return Promise.resolve(false); },
             onUnfillRequest: function(backwards, scrollToken) {},
             onScroll: function() {},
+            onResize: function() {},
         };
     },
 
@@ -178,7 +180,7 @@ module.exports = React.createClass({
     },
 
     onScroll: function(ev) {
-        var sn = this._getScrollNode();
+        const sn = this._getScrollNode();
         debuglog("Scroll event: offset now:", sn.scrollTop,
                  "_lastSetScroll:", this._lastSetScroll);
 
@@ -222,7 +224,7 @@ module.exports = React.createClass({
     onResize: function() {
         this.props.onResize();
         this.checkScroll();
-        this.refs.geminiPanel.forceUpdate();
+        if (this._gemScroll) this._gemScroll.forceUpdate();
     },
 
     // after an update to the contents of the panel, check that the scroll is
@@ -238,7 +240,7 @@ module.exports = React.createClass({
     // about whether the the content is scrolled down right now, irrespective of
     // whether it will stay that way when the children update.
     isAtBottom: function() {
-        var sn = this._getScrollNode();
+        const sn = this._getScrollNode();
 
         // there seems to be some bug with flexbox/gemini/chrome/richvdh's
         // understanding of the box model, wherein the scrollNode ends up 2
@@ -281,7 +283,7 @@ module.exports = React.createClass({
     //   |#########|                                       |
     //   `---------'                                       -
     _getExcessHeight: function(backwards) {
-        var sn = this._getScrollNode();
+        const sn = this._getScrollNode();
         if (backwards) {
             return sn.scrollTop - sn.clientHeight - UNPAGINATION_PADDING;
         } else {
@@ -295,7 +297,7 @@ module.exports = React.createClass({
             return;
         }
 
-        var sn = this._getScrollNode();
+        const sn = this._getScrollNode();
 
         // if there is less than a screenful of messages above or below the
         // viewport, try to get some more messages.
@@ -377,7 +379,7 @@ module.exports = React.createClass({
 
     // check if there is already a pending fill request. If not, set one off.
     _maybeFill: function(backwards) {
-        var dir = backwards ? 'b' : 'f';
+        const dir = backwards ? 'b' : 'f';
         if (this._pendingFillRequests[dir]) {
             debuglog("ScrollPanel: Already a "+dir+" fill in progress - not starting another");
             return;
@@ -470,8 +472,8 @@ module.exports = React.createClass({
      * mult: -1 to page up, +1 to page down
      */
     scrollRelative: function(mult) {
-        var scrollNode = this._getScrollNode();
-        var delta = mult * scrollNode.clientHeight * 0.5;
+        const scrollNode = this._getScrollNode();
+        const delta = mult * scrollNode.clientHeight * 0.5;
         this._setScrollTop(scrollNode.scrollTop + delta);
         this._saveScrollState();
     },
@@ -535,7 +537,7 @@ module.exports = React.createClass({
         this.scrollState = {
             stuckAtBottom: false,
             trackedScrollToken: scrollToken,
-            pixelOffset: pixelOffset
+            pixelOffset: pixelOffset,
         };
 
         // ... then make it so.
@@ -546,10 +548,10 @@ module.exports = React.createClass({
     // given offset in the window. A helper for _restoreSavedScrollState.
     _scrollToToken: function(scrollToken, pixelOffset) {
         /* find the dom node with the right scrolltoken */
-        var node;
-        var messages = this.refs.itemlist.children;
-        for (var i = messages.length-1; i >= 0; --i) {
-            var m = messages[i];
+        let node;
+        const messages = this.refs.itemlist.children;
+        for (let i = messages.length-1; i >= 0; --i) {
+            const m = messages[i];
             // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
             // There might only be one scroll token
             if (m.dataset.scrollTokens &&
@@ -564,18 +566,17 @@ module.exports = React.createClass({
             return;
         }
 
-        var scrollNode = this._getScrollNode();
-        var wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
-        var boundingRect = node.getBoundingClientRect();
-        var scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
+        const scrollNode = this._getScrollNode();
+        const wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const boundingRect = node.getBoundingClientRect();
+        const scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
 
         debuglog("ScrollPanel: scrolling to token '" + scrollToken + "'+" +
                  pixelOffset + " (delta: "+scrollDelta+")");
 
-        if(scrollDelta != 0) {
+        if (scrollDelta != 0) {
             this._setScrollTop(scrollNode.scrollTop + scrollDelta);
         }
-
     },
 
     _saveScrollState: function() {
@@ -585,16 +586,16 @@ module.exports = React.createClass({
             return;
         }
 
-        var itemlist = this.refs.itemlist;
-        var wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
-        var messages = itemlist.children;
+        const itemlist = this.refs.itemlist;
+        const wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        const messages = itemlist.children;
         let newScrollState = null;
 
-        for (var i = messages.length-1; i >= 0; --i) {
-            var node = messages[i];
+        for (let i = messages.length-1; i >= 0; --i) {
+            const node = messages[i];
             if (!node.dataset.scrollTokens) continue;
 
-            var boundingRect = node.getBoundingClientRect();
+            const boundingRect = node.getBoundingClientRect();
             newScrollState = {
                 stuckAtBottom: false,
                 trackedScrollToken: node.dataset.scrollTokens.split(',')[0],
@@ -619,8 +620,8 @@ module.exports = React.createClass({
     },
 
     _restoreSavedScrollState: function() {
-        var scrollState = this.scrollState;
-        var scrollNode = this._getScrollNode();
+        const scrollState = this.scrollState;
+        const scrollNode = this._getScrollNode();
 
         if (scrollState.stuckAtBottom) {
             this._setScrollTop(Number.MAX_VALUE);
@@ -631,9 +632,9 @@ module.exports = React.createClass({
     },
 
     _setScrollTop: function(scrollTop) {
-        var scrollNode = this._getScrollNode();
+        const scrollNode = this._getScrollNode();
 
-        var prevScroll = scrollNode.scrollTop;
+        const prevScroll = scrollNode.scrollTop;
 
         // FF ignores attempts to set scrollTop to very large numbers
         scrollNode.scrollTop = Math.min(scrollTop, scrollNode.scrollHeight);
@@ -664,22 +665,33 @@ module.exports = React.createClass({
             throw new Error("ScrollPanel._getScrollNode called when unmounted");
         }
 
-        return this.refs.geminiPanel.scrollbar.getViewElement();
+        if (!this._gemScroll) {
+            // Likewise, we should have the ref by this point, but if not
+            // turn the NPE into something meaningful.
+            throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
+        }
+
+        return this._gemScroll.scrollbar.getViewElement();
+    },
+
+    _collectGeminiScroll: function(gemScroll) {
+        this._gemScroll = gemScroll;
     },
 
     render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbar autoshow={true} ref="geminiPanel"
+        return (<GeminiScrollbarWrapper autoshow={true} wrappedRef={this._collectGeminiScroll}
                 onScroll={this.onScroll} onResize={this.onResize}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
                         <ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite">
-                            {this.props.children}
+                            { this.props.children }
                         </ol>
                     </div>
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
                );
     },
 });

src/components/structures/SearchBox.js

@@ -0,0 +1,163 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+import { _t } from '../../languageHandler';
+import { KeyCode } from '../../Keyboard';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import rate_limited_func from '../../ratelimitedfunc';
+import AccessibleButton from '../../components/views/elements/AccessibleButton';
+
+module.exports = React.createClass({
+    displayName: 'SearchBox',
+
+    propTypes: {
+        collapsed: React.PropTypes.bool,
+        onSearch: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        return {
+            searchTerm: "",
+        };
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'view_room':
+                if (this.refs.search && payload.clear_search) {
+                    this._clearSearch();
+                }
+                break;
+            case 'focus_room_filter':
+                if (this.refs.search) {
+                    this.refs.search.focus();
+                    this.refs.search.select();
+                }
+                break;
+        }
+    },
+
+    onChange: function() {
+        if (!this.refs.search) return;
+        this.setState({ searchTerm: this.refs.search.value });
+        this.onSearch();
+    },
+
+    onSearch: new rate_limited_func(
+        function() {
+            this.props.onSearch(this.refs.search.value);
+        },
+        100
+    ),
+
+    onToggleCollapse: function(show) {
+        if (show) {
+            dis.dispatch({
+                action: 'show_left_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_left_panel',
+            });
+        }
+    },
+
+    _onKeyDown: function(ev) {
+        switch (ev.keyCode) {
+            case KeyCode.ESCAPE:
+                this._clearSearch();
+                dis.dispatch({action: 'focus_composer'});
+                break;
+        }
+    },
+
+    _clearSearch: function() {
+        this.refs.search.value = "";
+        this.onChange();
+    },
+
+    render: function() {
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+
+        var collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
+
+        var toggleCollapse;
+        if (this.props.collapsed) {
+            toggleCollapse =
+                <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt={ _t("Expand panel") }/>
+                </AccessibleButton>
+        }
+        else {
+            toggleCollapse =
+                <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt={ _t("Collapse panel") }/>
+                </AccessibleButton>
+        }
+
+        var searchControls;
+        if (!this.props.collapsed) {
+            searchControls = [
+                    this.state.searchTerm.length > 0 ?
+                    <AccessibleButton key="button"
+                            className="mx_SearchBox_closeButton"
+                            onClick={ ()=>{ this._clearSearch(); } }>
+                        <TintableSvg
+                            className="mx_SearchBox_searchButton"
+                            src="img/icons-close.svg" width="24" height="24"
+                        />
+                    </AccessibleButton>
+                    :
+                    <TintableSvg
+                        key="button"
+                        className="mx_SearchBox_searchButton"
+                        src="img/icons-search-copy.svg" width="13" height="13"
+                    />,
+                    <input
+                        key="searchfield"
+                        type="text"
+                        ref="search"
+                        className="mx_SearchBox_search"
+                        value={ this.state.searchTerm }
+                        onChange={ this.onChange }
+                        onKeyDown={ this._onKeyDown }
+                        placeholder={ _t('Filter room names') }
+                    />
+                ];
+        }
+
+        var self = this;
+        return (
+            <div className="mx_SearchBox">
+                { searchControls }
+                { toggleCollapse }
+            </div>
+        );
+    }
+});

src/components/structures/TagPanel.js

@@ -0,0 +1,170 @@
+/*
+Copyright 2017, 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
+import TagOrderStore from '../../stores/TagOrderStore';
+
+import GroupActions from '../../actions/GroupActions';
+
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import { _t } from '../../languageHandler';
+
+import { Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+
+const TagPanel = React.createClass({
+    displayName: 'TagPanel',
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getInitialState() {
+        return {
+            orderedTags: [],
+            selectedTags: [],
+        };
+    },
+
+    componentWillMount: function() {
+        this.unmounted = false;
+        this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
+        this.context.matrixClient.on("sync", this._onClientSync);
+
+        this._tagOrderStoreToken = TagOrderStore.addListener(() => {
+            if (this.unmounted) {
+                return;
+            }
+            this.setState({
+                orderedTags: TagOrderStore.getOrderedTags() || [],
+                selectedTags: TagOrderStore.getSelectedTags(),
+            });
+        });
+        // This could be done by anything with a matrix client
+        dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.context.matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
+        this.context.matrixClient.removeListener("sync", this._onClientSync);
+        if (this._filterStoreToken) {
+            this._filterStoreToken.remove();
+        }
+    },
+
+    _onGroupMyMembership() {
+        if (this.unmounted) return;
+        dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
+    },
+
+    _onClientSync(syncState, prevState) {
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected) {
+            // Load joined groups
+            dis.dispatch(GroupActions.fetchJoinedGroups(this.context.matrixClient));
+        }
+    },
+
+    onMouseDown(e) {
+        // only dispatch if its not a no-op
+        if (this.state.selectedTags.length > 0) {
+            dis.dispatch({action: 'deselect_tags'});
+        }
+    },
+
+    onCreateGroupClick(ev) {
+        ev.stopPropagation();
+        dis.dispatch({action: 'view_create_group'});
+    },
+
+    onClearFilterClick(ev) {
+        dis.dispatch({action: 'deselect_tags'});
+    },
+
+    render() {
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+        const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
+
+        const tags = this.state.orderedTags.map((tag, index) => {
+            return <DNDTagTile
+                key={tag}
+                tag={tag}
+                index={index}
+                selected={this.state.selectedTags.includes(tag)}
+            />;
+        });
+
+        const itemsSelected = this.state.selectedTags.length > 0;
+
+        let clearButton;
+        if (itemsSelected) {
+            clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
+                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                             alt={_t("Clear filter")}
+                             title={_t("Clear filter")}
+                />
+            </AccessibleButton>;
+        }
+
+        const classes = classNames('mx_TagPanel', {
+            mx_TagPanel_items_selected: itemsSelected,
+        });
+
+        return <div className={classes}>
+            <div className="mx_TagPanel_clearButton_container">
+                { clearButton }
+            </div>
+            <div className="mx_TagPanel_divider" />
+            <GeminiScrollbarWrapper
+                className="mx_TagPanel_scroller"
+                autoshow={true}
+                // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+                // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6253
+                onMouseDown={this.onMouseDown}
+            >
+                <Droppable
+                    droppableId="tag-panel-droppable"
+                    type="draggable-TagTile"
+                >
+                    { (provided, snapshot) => (
+                            <div
+                                className="mx_TagPanel_tagTileContainer"
+                                ref={provided.innerRef}
+                            >
+                                { tags }
+                                { provided.placeholder }
+                            </div>
+                    ) }
+                </Droppable>
+            </GeminiScrollbarWrapper>
+            <div className="mx_TagPanel_divider" />
+            <div className="mx_TagPanel_groupsButton">
+                <GroupsButton tooltip={true} />
+            </div>
+        </div>;
+    },
+});
+export default TagPanel;

src/components/structures/TimelinePanel.js

@@ -15,27 +15,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ReactDOM = require("react-dom");
+import SettingsStore from "../../settings/SettingsStore";
+
+const React = require('react');
+const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
 import Promise from 'bluebird';
 
-var Matrix = require("matrix-js-sdk");
-var EventTimeline = Matrix.EventTimeline;
+const Matrix = require("matrix-js-sdk");
+const EventTimeline = Matrix.EventTimeline;
 
-var sdk = require('../../index');
+const sdk = require('../../index');
 import { _t } from '../../languageHandler';
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var dis = require("../../dispatcher");
-var ObjectUtils = require('../../ObjectUtils');
-var Modal = require("../../Modal");
-var UserActivity = require("../../UserActivity");
-var KeyCode = require('../../KeyCode');
-import UserSettingsStore from '../../UserSettingsStore';
+const MatrixClientPeg = require("../../MatrixClientPeg");
+const dis = require("../../dispatcher");
+const ObjectUtils = require('../../ObjectUtils');
+const Modal = require("../../Modal");
+const UserActivity = require("../../UserActivity");
+import { KeyCode } from '../../Keyboard';
 
-var PAGINATE_SIZE = 20;
-var INITIAL_SIZE = 20;
+const PAGINATE_SIZE = 20;
+const INITIAL_SIZE = 20;
 
-var DEBUG = false;
+const DEBUG = false;
 
 if (DEBUG) {
     // using bind means that we get to keep useful line numbers in the console
@@ -57,52 +59,49 @@ var TimelinePanel = React.createClass({
         // representing.  This may or may not have a room, depending on what it's
         // a timeline representing.  If it has a room, we maintain RRs etc for
         // that room.
-        timelineSet: React.PropTypes.object.isRequired,
+        timelineSet: PropTypes.object.isRequired,
 
-        showReadReceipts: React.PropTypes.bool,
+        showReadReceipts: PropTypes.bool,
         // Enable managing RRs and RMs. These require the timelineSet to have a room.
-        manageReadReceipts: React.PropTypes.bool,
-        manageReadMarkers: React.PropTypes.bool,
+        manageReadReceipts: PropTypes.bool,
+        manageReadMarkers: PropTypes.bool,
 
         // true to give the component a 'display: none' style.
-        hidden: React.PropTypes.bool,
+        hidden: PropTypes.bool,
 
         // ID of an event to highlight. If undefined, no event will be highlighted.
         // typically this will be either 'eventId' or undefined.
-        highlightedEventId: React.PropTypes.string,
+        highlightedEventId: PropTypes.string,
 
         // id of an event to jump to. If not given, will go to the end of the
         // live timeline.
-        eventId: React.PropTypes.string,
+        eventId: PropTypes.string,
 
         // where to position the event given by eventId, in pixels from the
         // bottom of the viewport. If not given, will try to put the event
         // half way down the viewport.
-        eventPixelOffset: React.PropTypes.number,
+        eventPixelOffset: PropTypes.number,
 
         // Should we show URL Previews
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         // callback which is called when the panel is scrolled.
-        onScroll: React.PropTypes.func,
+        onScroll: PropTypes.func,
 
         // callback which is called when the read-up-to mark is updated.
-        onReadMarkerUpdated: React.PropTypes.func,
-
-        // opacity for dynamic UI fading effects
-        opacity: React.PropTypes.number,
+        onReadMarkerUpdated: PropTypes.func,
 
         // maximum number of events to show in a timeline
-        timelineCap: React.PropTypes.number,
+        timelineCap: PropTypes.number,
 
         // classname to use for the messagepanel
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         // shape property to be passed to EventTiles
-        tileShape: React.PropTypes.string,
+        tileShape: PropTypes.string,
 
         // placeholder text to use if the timeline is empty
-        empty: React.PropTypes.string,
+        empty: PropTypes.string,
     },
 
     statics: {
@@ -132,8 +131,6 @@ var TimelinePanel = React.createClass({
             }
         }
 
-        const syncedSettings = UserSettingsStore.getSyncedSettings();
-
         return {
             events: [],
             timelineLoading: true, // track whether our room timeline is loading
@@ -178,10 +175,10 @@ var TimelinePanel = React.createClass({
             clientSyncState: MatrixClientPeg.get().getSyncState(),
 
             // should the event tiles have twelve hour times
-            isTwelveHour: syncedSettings.showTwelveHourTimestamps,
+            isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
 
             // always show timestamps on event tiles?
-            alwaysShowTimestamps: syncedSettings.alwaysShowTimestamps,
+            alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
         };
     },
 
@@ -260,7 +257,7 @@ var TimelinePanel = React.createClass({
 
         dis.unregister(this.dispatcherRef);
 
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("Room.timeline", this.onRoomTimeline);
             client.removeListener("Room.timelineReset", this.onRoomTimelineReset);
@@ -275,20 +272,20 @@ var TimelinePanel = React.createClass({
 
     onMessageListUnfillRequest: function(backwards, scrollToken) {
         // If backwards, unpaginate from the back (i.e. the start of the timeline)
-        let dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
+        const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
         debuglog("TimelinePanel: unpaginating events in direction", dir);
 
         // All tiles are inserted by MessagePanel to have a scrollToken === eventId, and
         // this particular event should be the first or last to be unpaginated.
-        let eventId = scrollToken;
+        const eventId = scrollToken;
 
-        let marker = this.state.events.findIndex(
+        const marker = this.state.events.findIndex(
             (ev) => {
                 return ev.getId() === eventId;
-            }
+            },
         );
 
-        let count = backwards ? marker + 1 : this.state.events.length - marker;
+        const count = backwards ? marker + 1 : this.state.events.length - marker;
 
         if (count > 0) {
             debuglog("TimelinePanel: Unpaginating", count, "in direction", dir);
@@ -305,16 +302,18 @@ var TimelinePanel = React.createClass({
 
     // set off a pagination request.
     onMessageListFillRequest: function(backwards) {
-        var dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
-        var canPaginateKey = backwards ? 'canBackPaginate' : 'canForwardPaginate';
-        var paginatingKey = backwards ? 'backPaginating' : 'forwardPaginating';
+        if (!this._shouldPaginate()) return Promise.resolve(false);
+
+        const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
+        const canPaginateKey = backwards ? 'canBackPaginate' : 'canForwardPaginate';
+        const paginatingKey = backwards ? 'backPaginating' : 'forwardPaginating';
 
         if (!this.state[canPaginateKey]) {
             debuglog("TimelinePanel: have given up", dir, "paginating this timeline");
             return Promise.resolve(false);
         }
 
-        if(!this._timelineWindow.canPaginate(dir)) {
+        if (!this._timelineWindow.canPaginate(dir)) {
             debuglog("TimelinePanel: can't", dir, "paginate any further");
             this.setState({[canPaginateKey]: false});
             return Promise.resolve(false);
@@ -328,7 +327,7 @@ var TimelinePanel = React.createClass({
 
             debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r);
 
-            var newState = {
+            const newState = {
                 [paginatingKey]: false,
                 [canPaginateKey]: r,
                 events: this._getEvents(),
@@ -336,8 +335,8 @@ var TimelinePanel = React.createClass({
 
             // moving the window in this direction may mean that we can now
             // paginate in the other where we previously could not.
-            var otherDirection = backwards ? EventTimeline.FORWARDS : EventTimeline.BACKWARDS;
-            var canPaginateOtherWayKey = backwards ? 'canForwardPaginate' : 'canBackPaginate';
+            const otherDirection = backwards ? EventTimeline.FORWARDS : EventTimeline.BACKWARDS;
+            const canPaginateOtherWayKey = backwards ? 'canForwardPaginate' : 'canBackPaginate';
             if (!this.state[canPaginateOtherWayKey] &&
                     this._timelineWindow.canPaginate(otherDirection)) {
                 debuglog('TimelinePanel: can now', otherDirection, 'paginate again');
@@ -384,6 +383,9 @@ var TimelinePanel = React.createClass({
                 this.sendReadReceipt();
                 this.updateReadMarker();
                 break;
+            case 'ignore_state_changed':
+                this.forceUpdate();
+                break;
         }
     },
 
@@ -417,15 +419,15 @@ var TimelinePanel = React.createClass({
         this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).done(() => {
             if (this.unmounted) { return; }
 
-            var events = this._timelineWindow.getEvents();
-            var lastEv = events[events.length-1];
+            const events = this._timelineWindow.getEvents();
+            const lastEv = events[events.length-1];
 
             // if we're at the end of the live timeline, append the pending events
             if (this.props.timelineSet.room && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
                 events.push(...this.props.timelineSet.room.getPendingEvents());
             }
 
-            var updatedState = {events: events};
+            const updatedState = {events: events};
 
             if (this.props.manageReadMarkers) {
                 // when a new event arrives when the user is not watching the
@@ -436,12 +438,12 @@ var TimelinePanel = React.createClass({
                 // read-marker when a remote echo of an event we have just sent takes
                 // more than the timeout on userCurrentlyActive.
                 //
-                var myUserId = MatrixClientPeg.get().credentials.userId;
-                var sender = ev.sender ? ev.sender.userId : null;
+                const myUserId = MatrixClientPeg.get().credentials.userId;
+                const sender = ev.sender ? ev.sender.userId : null;
                 var callback = null;
                 if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
                     updatedState.readMarkerVisible = true;
-                } else if(lastEv && this.getReadMarkerPosition() === 0) {
+                } else if (lastEv && this.getReadMarkerPosition() === 0) {
                     // we know we're stuckAtBottom, so we can advance the RM
                     // immediately, to save a later render cycle
 
@@ -622,6 +624,7 @@ var TimelinePanel = React.createClass({
                 this.props.timelineSet.room.setUnreadNotificationCount('highlight', 0);
                 dis.dispatch({
                     action: 'on_room_read',
+                    roomId: this.props.timelineSet.room.roomId,
                 });
             }
         }
@@ -643,7 +646,7 @@ var TimelinePanel = React.createClass({
         // and we'll get confused when their ID changes and we can't figure out
         // where the RM is pointing to. The read marker will be invisible for
         // now anyway, so this doesn't really matter.
-        var lastDisplayedIndex = this._getLastDisplayedEventIndex({
+        const lastDisplayedIndex = this._getLastDisplayedEventIndex({
             allowPartial: true,
             ignoreEchoes: true,
         });
@@ -652,13 +655,13 @@ var TimelinePanel = React.createClass({
             return;
         }
 
-        var lastDisplayedEvent = this.state.events[lastDisplayedIndex];
+        const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
         this._setReadMarker(lastDisplayedEvent.getId(),
                             lastDisplayedEvent.getTs());
 
         // the read-marker should become invisible, so that if the user scrolls
         // down, they don't see it.
-        if(this.state.readMarkerVisible) {
+        if (this.state.readMarkerVisible) {
             this.setState({
                 readMarkerVisible: false,
             });
@@ -673,7 +676,7 @@ var TimelinePanel = React.createClass({
         // we call _timelineWindow.getEvents() rather than using
         // this.state.events, because react batches the update to the latter, so it
         // may not have been updated yet.
-        var events = this._timelineWindow.getEvents();
+        const events = this._timelineWindow.getEvents();
 
         // first find where the current RM is
         for (var i = 0; i < events.length; i++) {
@@ -686,7 +689,7 @@ var TimelinePanel = React.createClass({
         }
 
         // now think about advancing it
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUserId = MatrixClientPeg.get().credentials.userId;
         for (i++; i < events.length; i++) {
             var ev = events[i];
             if (!ev.sender || ev.sender.userId != myUserId) {
@@ -731,7 +734,7 @@ var TimelinePanel = React.createClass({
         //
         // a quick way to figure out if we've loaded the relevant event is
         // simply to check if the messagepanel knows where the read-marker is.
-        var ret = this.refs.messagePanel.getReadMarkerPosition();
+        const ret = this.refs.messagePanel.getReadMarkerPosition();
         if (ret !== null) {
             // The messagepanel knows where the RM is, so we must have loaded
             // the relevant event.
@@ -752,13 +755,13 @@ var TimelinePanel = React.createClass({
     forgetReadMarker: function() {
         if (!this.props.manageReadMarkers) return;
 
-        var rmId = this._getCurrentReadReceipt();
+        const rmId = this._getCurrentReadReceipt();
 
         // see if we know the timestamp for the rr event
-        var tl = this.props.timelineSet.getTimelineForEvent(rmId);
-        var rmTs;
+        const tl = this.props.timelineSet.getTimelineForEvent(rmId);
+        let rmTs;
         if (tl) {
-            var event = tl.getEvents().find((e) => { return e.getId() == rmId; });
+            const event = tl.getEvents().find((e) => { return e.getId() == rmId; });
             if (event) {
                 rmTs = event.getTs();
             }
@@ -798,7 +801,7 @@ var TimelinePanel = React.createClass({
         if (!this.props.manageReadMarkers) return null;
         if (!this.refs.messagePanel) return null;
 
-        var ret = this.refs.messagePanel.getReadMarkerPosition();
+        const ret = this.refs.messagePanel.getReadMarkerPosition();
         if (ret !== null) {
             return ret;
         }
@@ -841,8 +844,7 @@ var TimelinePanel = React.createClass({
         // jump to the live timeline on ctrl-end, rather than the end of the
         // timeline window.
         if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey &&
-            ev.keyCode == KeyCode.END)
-        {
+            ev.keyCode == KeyCode.END) {
             this.jumpToLiveTimeline();
         } else {
             this.refs.messagePanel.handleScrollKey(ev);
@@ -850,12 +852,12 @@ var TimelinePanel = React.createClass({
     },
 
     _initTimeline: function(props) {
-        var initialEvent = props.eventId;
-        var pixelOffset = props.eventPixelOffset;
+        const initialEvent = props.eventId;
+        const pixelOffset = props.eventPixelOffset;
 
         // if a pixelOffset is given, it is relative to the bottom of the
         // container. If not, put the event in the middle of the container.
-        var offsetBase = 1;
+        let offsetBase = 1;
         if (pixelOffset == null) {
             offsetBase = 0.5;
         }
@@ -884,7 +886,7 @@ var TimelinePanel = React.createClass({
             MatrixClientPeg.get(), this.props.timelineSet,
             {windowLimit: this.props.timelineCap});
 
-        var onLoaded = () => {
+        const onLoaded = () => {
             this._reloadEvents();
 
             // If we switched away from the room while there were pending
@@ -919,15 +921,15 @@ var TimelinePanel = React.createClass({
             });
         };
 
-        var onError = (error) => {
+        const onError = (error) => {
             this.setState({timelineLoading: false});
             console.error(
                 `Error loading timeline panel at ${eventId}: ${error}`,
             );
-            var msg = error.message ? error.message : JSON.stringify(error);
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const msg = error.message ? error.message : JSON.stringify(error);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
-            var onFinished;
+            let onFinished;
 
             // if we were given an event ID, then when the user closes the
             // dialog, let's jump to the end of the timeline. If we weren't,
@@ -942,7 +944,7 @@ var TimelinePanel = React.createClass({
                     });
                 };
             }
-            var message = (error.errcode == 'M_FORBIDDEN')
+            const message = (error.errcode == 'M_FORBIDDEN')
             	? _t("Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.")
                 : _t("Tried to load a specific point in this room's timeline, but was unable to find it.");
             Modal.createTrackedDialog('Failed to load timeline position', '', ErrorDialog, {
@@ -952,7 +954,7 @@ var TimelinePanel = React.createClass({
             });
         };
 
-        var prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
+        let prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
 
         // if we already have the event in question, TimelineWindow.load
         // returns a resolved promise.
@@ -993,7 +995,7 @@ var TimelinePanel = React.createClass({
 
     // get the list of events from the timeline window and the pending event list
     _getEvents: function() {
-        var events = this._timelineWindow.getEvents();
+        const events = this._timelineWindow.getEvents();
 
         // if we're at the end of the live timeline, append the pending events
         if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
@@ -1004,7 +1006,7 @@ var TimelinePanel = React.createClass({
     },
 
     _indexForEventId: function(evId) {
-        for (var i = 0; i < this.state.events.length; ++i) {
+        for (let i = 0; i < this.state.events.length; ++i) {
             if (evId == this.state.events[i].getId()) {
                 return i;
             }
@@ -1014,18 +1016,18 @@ var TimelinePanel = React.createClass({
 
     _getLastDisplayedEventIndex: function(opts) {
         opts = opts || {};
-        var ignoreOwn = opts.ignoreOwn || false;
-        var ignoreEchoes = opts.ignoreEchoes || false;
-        var allowPartial = opts.allowPartial || false;
+        const ignoreOwn = opts.ignoreOwn || false;
+        const ignoreEchoes = opts.ignoreEchoes || false;
+        const allowPartial = opts.allowPartial || false;
 
-        var messagePanel = this.refs.messagePanel;
+        const messagePanel = this.refs.messagePanel;
         if (messagePanel === undefined) return null;
 
-        var wrapperRect = ReactDOM.findDOMNode(messagePanel).getBoundingClientRect();
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        const wrapperRect = ReactDOM.findDOMNode(messagePanel).getBoundingClientRect();
+        const myUserId = MatrixClientPeg.get().credentials.userId;
 
-        for (var i = this.state.events.length-1; i >= 0; --i) {
-            var ev = this.state.events[i];
+        for (let i = this.state.events.length-1; i >= 0; --i) {
+            const ev = this.state.events[i];
 
             if (ignoreOwn && ev.sender && ev.sender.userId == myUserId) {
                 continue;
@@ -1036,10 +1038,10 @@ var TimelinePanel = React.createClass({
                 continue;
             }
 
-            var node = messagePanel.getNodeForEventId(ev.getId());
+            const node = messagePanel.getNodeForEventId(ev.getId());
             if (!node) continue;
 
-            var boundingRect = node.getBoundingClientRect();
+            const boundingRect = node.getBoundingClientRect();
             if ((allowPartial && boundingRect.top < wrapperRect.bottom) ||
                 (!allowPartial && boundingRect.bottom < wrapperRect.bottom)) {
                 return i;
@@ -1057,18 +1059,18 @@ var TimelinePanel = React.createClass({
      *                                    SDK.
      */
     _getCurrentReadReceipt: function(ignoreSynthesized) {
-        var client = MatrixClientPeg.get();
+        const client = MatrixClientPeg.get();
         // the client can be null on logout
         if (client == null) {
             return null;
         }
 
-        var myUserId = client.credentials.userId;
+        const myUserId = client.credentials.userId;
         return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized);
     },
 
     _setReadMarker: function(eventId, eventTs, inhibitSetState) {
-        var roomId = this.props.timelineSet.room.roomId;
+        const roomId = this.props.timelineSet.room.roomId;
 
         // don't update the state (and cause a re-render) if there is
         // no change to the RM.
@@ -1092,9 +1094,20 @@ var TimelinePanel = React.createClass({
         }, this.props.onReadMarkerUpdated);
     },
 
+    _shouldPaginate: function() {
+        // don't try to paginate while events in the timeline are
+        // still being decrypted. We don't render events while they're
+        // being decrypted, so they don't take up space in the timeline.
+        // This means we can pull quite a lot of events into the timeline
+        // and end up trying to render a lot of events.
+        return !this.state.events.some((e) => {
+            return e.isBeingDecrypted();
+        });
+    },
+
     render: function() {
-        var MessagePanel = sdk.getComponent("structures.MessagePanel");
-        var Loader = sdk.getComponent("elements.Spinner");
+        const MessagePanel = sdk.getComponent("structures.MessagePanel");
+        const Loader = sdk.getComponent("elements.Spinner");
 
         // just show a spinner while the timeline loads.
         //
@@ -1109,15 +1122,15 @@ var TimelinePanel = React.createClass({
         // exist.
         if (this.state.timelineLoading) {
             return (
-                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
-                        <Loader />
-                    </div>
+                <div className="mx_RoomView_messagePanelSpinner">
+                    <Loader />
+                </div>
             );
         }
 
         if (this.state.events.length == 0 && !this.state.canBackPaginate && this.props.empty) {
             return (
-                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
+                    <div className={this.props.className + " mx_RoomView_messageListWrapper"}>
                         <div className="mx_RoomView_empty">{ this.props.empty }</div>
                     </div>
             );
@@ -1131,35 +1144,35 @@ var TimelinePanel = React.createClass({
         // forwards, otherwise if somebody hits the bottom of the loaded
         // events when viewing historical messages, we get stuck in a loop
         // of paginating our way through the entire history of the room.
-        var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
+        const stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
 
-        // If the state is PREPARED, we're still waiting for the js-sdk to sync with
+        // If the state is PREPARED or CATCHUP, we're still waiting for the js-sdk to sync with
         // the HS and fetch the latest events, so we are effectively forward paginating.
         const forwardPaginating = (
-            this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED'
+            this.state.forwardPaginating ||
+            ['PREPARED', 'CATCHUP'].includes(this.state.clientSyncState)
         );
         return (
             <MessagePanel ref="messagePanel"
-                          hidden={ this.props.hidden }
-                          backPaginating={ this.state.backPaginating }
-                          forwardPaginating={ forwardPaginating }
-                          events={ this.state.events }
-                          highlightedEventId={ this.props.highlightedEventId }
-                          readMarkerEventId={ this.state.readMarkerEventId }
-                          readMarkerVisible={ this.state.readMarkerVisible }
-                          suppressFirstDateSeparator={ this.state.canBackPaginate }
-                          showUrlPreview={ this.props.showUrlPreview }
-                          showReadReceipts={ this.props.showReadReceipts }
-                          ourUserId={ MatrixClientPeg.get().credentials.userId }
-                          stickyBottom={ stickyBottom }
-                          onScroll={ this.onMessageListScroll }
-                          onFillRequest={ this.onMessageListFillRequest }
-                          onUnfillRequest={ this.onMessageListUnfillRequest }
-                          opacity={ this.props.opacity }
-                          isTwelveHour={ this.state.isTwelveHour }
-                          alwaysShowTimestamps={ this.state.alwaysShowTimestamps }
-                          className={ this.props.className }
-                          tileShape={ this.props.tileShape }
+                          hidden={this.props.hidden}
+                          backPaginating={this.state.backPaginating}
+                          forwardPaginating={forwardPaginating}
+                          events={this.state.events}
+                          highlightedEventId={this.props.highlightedEventId}
+                          readMarkerEventId={this.state.readMarkerEventId}
+                          readMarkerVisible={this.state.readMarkerVisible}
+                          suppressFirstDateSeparator={this.state.canBackPaginate}
+                          showUrlPreview={this.props.showUrlPreview}
+                          showReadReceipts={this.props.showReadReceipts}
+                          ourUserId={MatrixClientPeg.get().credentials.userId}
+                          stickyBottom={stickyBottom}
+                          onScroll={this.onMessageListScroll}
+                          onFillRequest={this.onMessageListFillRequest}
+                          onUnfillRequest={this.onMessageListUnfillRequest}
+                          isTwelveHour={this.state.isTwelveHour}
+                          alwaysShowTimestamps={this.state.alwaysShowTimestamps}
+                          className={this.props.className}
+                          tileShape={this.props.tileShape}
             />
         );
     },

src/components/structures/UploadBar.js

@@ -14,15 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ContentMessages = require('../../ContentMessages');
-var dis = require('../../dispatcher');
-var filesize = require('filesize');
+const React = require('react');
+import PropTypes from 'prop-types';
+const ContentMessages = require('../../ContentMessages');
+const dis = require('../../dispatcher');
+const filesize = require('filesize');
 import { _t } from '../../languageHandler';
 
 module.exports = React.createClass({displayName: 'UploadBar',
     propTypes: {
-        room: React.PropTypes.object
+        room: PropTypes.object,
     },
 
     componentDidMount: function() {
@@ -46,7 +47,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
     },
 
     render: function() {
-        var uploads = ContentMessages.getCurrentUploads();
+        const uploads = ContentMessages.getCurrentUploads();
 
         // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
         // check in RoomView
@@ -62,8 +63,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
             return <div />;
         }
 
-        var upload;
-        for (var i = 0; i < uploads.length; ++i) {
+        let upload;
+        for (let i = 0; i < uploads.length; ++i) {
             if (uploads[i].roomId == this.props.room.roomId) {
                 upload = uploads[i];
                 break;
@@ -73,32 +74,32 @@ module.exports = React.createClass({displayName: 'UploadBar',
             return <div />;
         }
 
-        var innerProgressStyle = {
-            width: ((upload.loaded / (upload.total || 1)) * 100) + '%'
+        const innerProgressStyle = {
+            width: ((upload.loaded / (upload.total || 1)) * 100) + '%',
         };
-        var uploadedSize = filesize(upload.loaded);
-        var totalSize = filesize(upload.total);
+        let uploadedSize = filesize(upload.loaded);
+        const totalSize = filesize(upload.total);
         if (uploadedSize.replace(/^.* /, '') === totalSize.replace(/^.* /, '')) {
             uploadedSize = uploadedSize.replace(/ .*/, '');
         }
 
         // MUST use var name 'count' for pluralization to kick in
-        var uploadText = _t("Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)});
+        const uploadText = _t("Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)});
 
         return (
             <div className="mx_UploadBar">
                 <div className="mx_UploadBar_uploadProgressOuter">
                     <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
                 </div>
-                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22"/>
+                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
                 <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
                     onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
                 />
                 <div className="mx_UploadBar_uploadBytes">
                     { uploadedSize } / { totalSize }
                 </div>
-                <div className="mx_UploadBar_uploadFilename">{uploadText}</div>
+                <div className="mx_UploadBar_uploadFilename">{ uploadText }</div>
             </div>
         );
-    }
+    },
 });

src/components/structures/ViewSource.js

@@ -0,0 +1,57 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import SyntaxHighlight from '../views/elements/SyntaxHighlight';
+
+
+module.exports = React.createClass({
+    displayName: 'ViewSource',
+
+    propTypes: {
+        content: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    componentDidMount: function() {
+        document.addEventListener("keydown", this.onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    },
+
+    onKeyDown: function(ev) {
+        if (ev.keyCode == 27) { // escape
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_ViewSource">
+                <SyntaxHighlight className="json">
+                    { JSON.stringify(this.props.content, null, 2) }
+                </SyntaxHighlight>
+            </div>
+        );
+    }
+});

src/components/structures/login/ForgotPassword.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 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.
@@ -15,50 +15,52 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
+import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-var sdk = require('../../../index');
-var Modal = require("../../../Modal");
-var MatrixClientPeg = require('../../../MatrixClientPeg');
+import sdk from '../../../index';
+import Modal from "../../../Modal";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import SdkConfig from "../../../SdkConfig";
 
-var PasswordReset = require("../../../PasswordReset");
+import PasswordReset from "../../../PasswordReset";
 
 module.exports = React.createClass({
     displayName: 'ForgotPassword',
 
     propTypes: {
-        defaultHsUrl: React.PropTypes.string,
-        defaultIsUrl: React.PropTypes.string,
-        customHsUrl: React.PropTypes.string,
-        customIsUrl: React.PropTypes.string,
-        onLoginClick: React.PropTypes.func,
-        onRegisterClick: React.PropTypes.func,
-        onComplete: React.PropTypes.func.isRequired
+        defaultHsUrl: PropTypes.string,
+        defaultIsUrl: PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+        onLoginClick: PropTypes.func,
+        onRegisterClick: PropTypes.func,
+        onComplete: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
         return {
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
-            progress: null
+            progress: null,
+            password: null,
+            password2: null,
         };
     },
 
     submitPasswordReset: function(hsUrl, identityUrl, email, password) {
         this.setState({
-            progress: "sending_email"
+            progress: "sending_email",
         });
         this.reset = new PasswordReset(hsUrl, identityUrl);
         this.reset.resetPassword(email, password).done(() => {
             this.setState({
-                progress: "sent_email"
+                progress: "sent_email",
             });
         }, (err) => {
             this.showErrorDialog(_t('Failed to send email') + ": " + err.message);
             this.setState({
-                progress: null
+                progress: null,
             });
         });
     },
@@ -81,15 +83,12 @@ module.exports = React.createClass({
 
         if (!this.state.email) {
             this.showErrorDialog(_t('The email address linked to your account must be entered.'));
-        }
-        else if (!this.state.password || !this.state.password2) {
+        } else if (!this.state.password || !this.state.password2) {
             this.showErrorDialog(_t('A new password must be entered.'));
-        }
-        else if (this.state.password !== this.state.password2) {
+        } else if (this.state.password !== this.state.password2) {
             this.showErrorDialog(_t('New passwords must match each other.'));
-        }
-        else {
-            var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        } else {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createTrackedDialog('Forgot Password Warning', '', QuestionDialog, {
                 title: _t('Warning!'),
                 description:
@@ -99,21 +98,21 @@ module.exports = React.createClass({
                             'end-to-end encryption keys on all devices, ' +
                             'making encrypted chat history unreadable, ' +
                             'unless you first export your room keys and re-import ' +
-                            'them afterwards. In future this will be improved.'
+                            'them afterwards. In future this will be improved.',
                         ) }
                     </div>,
                 button: _t('Continue'),
                 extraButtons: [
-                    <button className="mx_Dialog_primary"
+                    <button key="export_keys" className="mx_Dialog_primary"
                             onClick={this._onExportE2eKeysClicked}>
                         { _t('Export E2E room keys') }
-                    </button>
+                    </button>,
                 ],
                 onFinished: (confirmed) => {
                     if (confirmed) {
                         this.submitPasswordReset(
                             this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl,
-                            this.state.email, this.state.password
+                            this.state.email, this.state.password,
                         );
                     }
                 },
@@ -133,7 +132,7 @@ module.exports = React.createClass({
 
     onInputChanged: function(stateKey, ev) {
         this.setState({
-            [stateKey]: ev.target.value
+            [stateKey]: ev.target.value,
         });
     },
 
@@ -149,7 +148,7 @@ module.exports = React.createClass({
     },
 
     showErrorDialog: function(body, title) {
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
             title: title,
             description: body,
@@ -157,37 +156,53 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var LoginHeader = sdk.getComponent("login.LoginHeader");
-        var LoginFooter = sdk.getComponent("login.LoginFooter");
-        var ServerConfig = sdk.getComponent("login.ServerConfig");
-        var Spinner = sdk.getComponent("elements.Spinner");
+        const LoginPage = sdk.getComponent("login.LoginPage");
+        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const Spinner = sdk.getComponent("elements.Spinner");
 
-        var resetPasswordJsx;
+        let resetPasswordJsx;
 
         if (this.state.progress === "sending_email") {
             resetPasswordJsx = <Spinner />;
-        }
-        else if (this.state.progress === "sent_email") {
+        } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
-                <div>
-                    { _t('An email has been sent to') } {this.state.email}. { _t("Once you've followed the link it contains, click below") }.
+                <div className="mx_Login_prompt">
+                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
+                        "click below.", { emailAddress: this.state.email }) }
                     <br />
                     <input className="mx_Login_submit" type="button" onClick={this.onVerify}
-                        value={ _t('I have verified my email address') } />
+                        value={_t('I have verified my email address')} />
                 </div>
             );
-        }
-        else if (this.state.progress === "complete") {
+        } else if (this.state.progress === "complete") {
             resetPasswordJsx = (
-                <div>
+                <div className="mx_Login_prompt">
                     <p>{ _t('Your password has been reset') }.</p>
-                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device') }.</p>
+                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
+                        'To re-enable notifications, sign in again on each device') }.</p>
                     <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
-                        value={ _t('Return to login screen') } />
+                        value={_t('Return to login screen')} />
                 </div>
             );
-        }
-        else {
+        } else {
+            let serverConfigSection;
+            if (!SdkConfig.get()['disable_custom_urls']) {
+                serverConfigSection = (
+                    <ServerConfig ref="serverConfig"
+                        withToggleButton={true}
+                        defaultHsUrl={this.props.defaultHsUrl}
+                        defaultIsUrl={this.props.defaultIsUrl}
+                        customHsUrl={this.props.customHsUrl}
+                        customIsUrl={this.props.customIsUrl}
+                        onServerConfigChange={this.onServerConfigChange}
+                        delayTimeMs={0} />
+                );
+            }
+
+            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
             resetPasswordJsx = (
             <div>
                 <div className="mx_Login_prompt">
@@ -199,38 +214,30 @@ module.exports = React.createClass({
                             name="reset_email" // define a name so browser's password autofill gets less confused
                             value={this.state.email}
                             onChange={this.onInputChanged.bind(this, "email")}
-                            placeholder={ _t('Email address') } autoFocus />
+                            placeholder={_t('Email address')} autoFocus />
                         <br />
                         <input className="mx_Login_field" ref="pass" type="password"
                             name="reset_password"
                             value={this.state.password}
                             onChange={this.onInputChanged.bind(this, "password")}
-                            placeholder={ _t('New password') } />
+                            placeholder={_t('New password')} />
                         <br />
                         <input className="mx_Login_field" ref="pass" type="password"
                             name="reset_password_confirm"
                             value={this.state.password2}
                             onChange={this.onInputChanged.bind(this, "password2")}
-                            placeholder={ _t('Confirm your new password') } />
+                            placeholder={_t('Confirm your new password')} />
                         <br />
-                        <input className="mx_Login_submit" type="submit" value={ _t('Send Reset Email') } />
+                        <input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
                     </form>
-                    <ServerConfig ref="serverConfig"
-                        withToggleButton={true}
-                        defaultHsUrl={this.props.defaultHsUrl}
-                        defaultIsUrl={this.props.defaultIsUrl}
-                        customHsUrl={this.props.customHsUrl}
-                        customIsUrl={this.props.customIsUrl}
-                        onServerConfigChange={this.onServerConfigChange}
-                        delayTimeMs={0}/>
-                    <div className="mx_Login_error">
-                    </div>
+                    { serverConfigSection }
                     <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        {_t('Return to login screen')}
+                        { _t('Return to login screen') }
                     </a>
                     <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
                         { _t('Create an account') }
                     </a>
+                    <LanguageSelector />
                     <LoginFooter />
                 </div>
             </div>
@@ -239,12 +246,12 @@ module.exports = React.createClass({
 
 
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader />
-                    {resetPasswordJsx}
+                    { resetPasswordJsx }
                 </div>
-            </div>
+            </LoginPage>
         );
-    }
+    },
 });

src/components/structures/login/LanguageSelector.js

@@ -0,0 +1,38 @@
+/*
+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 SdkConfig from "../../../SdkConfig";
+import {getCurrentLanguage} from "../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import PlatformPeg from "../../../PlatformPeg";
+import sdk from '../../../index';
+import React from 'react';
+
+function onChange(newLang) {
+    if (getCurrentLanguage() !== newLang) {
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
+        PlatformPeg.get().reload();
+    }
+}
+
+export default function LanguageSelector() {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+
+    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+    return <div className="mx_Login_language_div">
+        <LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
+    </div>;
+}

src/components/structures/login/Login.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,15 +19,16 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import { _t, _tJsx } from '../../../languageHandler';
-import * as languageHandler from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
-import UserSettingsStore from '../../../UserSettingsStore';
-import PlatformPeg from '../../../PlatformPeg';
+import SdkConfig from '../../../SdkConfig';
+import SettingsStore from "../../../settings/SettingsStore";
+import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 
 // For validating phone numbers without country codes
-const PHONE_NUMBER_REGEX = /^[0-9\(\)\-\s]*$/;
+const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
 /**
  * A wire component which glues together login UI components and Login logic
@@ -35,27 +37,28 @@ module.exports = React.createClass({
     displayName: 'Login',
 
     propTypes: {
-        onLoggedIn: React.PropTypes.func.isRequired,
+        onLoggedIn: PropTypes.func.isRequired,
 
-        enableGuest: React.PropTypes.bool,
+        enableGuest: PropTypes.bool,
 
-        customHsUrl: React.PropTypes.string,
-        customIsUrl: React.PropTypes.string,
-        defaultHsUrl: React.PropTypes.string,
-        defaultIsUrl: React.PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+        defaultHsUrl: PropTypes.string,
+        defaultIsUrl: PropTypes.string,
         // Secondary HS which we try to log into if the user is using
         // the default HS but login fails. Useful for migrating to a
         // different home server without confusing users.
-        fallbackHsUrl: React.PropTypes.string,
+        fallbackHsUrl: PropTypes.string,
 
-        defaultDeviceDisplayName: React.PropTypes.string,
+        defaultDeviceDisplayName: PropTypes.string,
 
         // login shouldn't know or care how registration is done.
-        onRegisterClick: React.PropTypes.func.isRequired,
+        onRegisterClick: PropTypes.func.isRequired,
 
         // login shouldn't care how password recovery is done.
-        onForgotPasswordClick: React.PropTypes.func,
-        onCancelClick: React.PropTypes.func,
+        onForgotPasswordClick: PropTypes.func,
+        onCancelClick: PropTypes.func,
+        onServerConfigChange: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -76,6 +79,14 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         this._unmounted = false;
+
+        // map from login step type to a function which will render a control
+        // letting you do that login type
+        this._stepRendererMap = {
+            'm.login.password': this._renderPasswordStep,
+            'm.login.cas': this._renderCasStep,
+        };
+
         this._initLoginLogic();
     },
 
@@ -83,6 +94,13 @@ module.exports = React.createClass({
         this._unmounted = true;
     },
 
+    onPasswordLoginError: function(errorText) {
+        this.setState({
+            errorText,
+            loginIncorrect: Boolean(errorText),
+        });
+    },
+
     onPasswordLogin: function(username, phoneCountry, phoneNumber, password) {
         this.setState({
             busy: true,
@@ -95,17 +113,56 @@ module.exports = React.createClass({
         ).then((data) => {
             this.props.onLoggedIn(data);
         }, (error) => {
-            if(this._unmounted) {
+            if (this._unmounted) {
                 return;
             }
             let errorText;
 
             // Some error strings only apply for logging in
             const usingEmail = username.indexOf("@") > 0;
-            if (error.httpStatus == 400 && usingEmail) {
+            if (error.httpStatus === 400 && usingEmail) {
                 errorText = _t('This Home Server does not support login using email address.');
+            } else if (error.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
+                const errorTop = messageForResourceLimitError(
+                    error.data.limit_type,
+                    error.data.admin_contact, {
+                    'monthly_active_user': _td(
+                        "This homeserver has hit its Monthly Active User limit.",
+                    ),
+                    '': _td(
+                        "This homeserver has exceeded one of its resource limits.",
+                    ),
+                });
+                const errorDetail = messageForResourceLimitError(
+                    error.data.limit_type,
+                    error.data.admin_contact, {
+                    '': _td(
+                        "Please <a>contact your service administrator</a> to continue using this service.",
+                    ),
+                });
+                errorText = (
+                    <div>
+                        <div>{errorTop}</div>
+                        <div className="mx_Login_smallError">{errorDetail}</div>
+                    </div>
+                );
             } else if (error.httpStatus === 401 || error.httpStatus === 403) {
-                errorText = _t('Incorrect username and/or password.');
+                if (SdkConfig.get()['disable_custom_urls']) {
+                    errorText = (
+                        <div>
+                            <div>{ _t('Incorrect username and/or password.') }</div>
+                            <div className="mx_Login_smallError">
+                                { _t('Please note you are logging into the %(hs)s server, not matrix.org.',
+                                    {
+                                        hs: this.props.defaultHsUrl.replace(/^https?:\/\//, ''),
+                                    })
+                                }
+                            </div>
+                        </div>
+                    );
+                } else {
+                    errorText = _t('Incorrect username and/or password.');
+                }
             } else {
                 // other errors, not specific to doing a password login
                 errorText = this._errorTextFromError(error);
@@ -117,10 +174,10 @@ module.exports = React.createClass({
                 // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
                 // mentions this (although the bug is for UI auth which is not this)
                 // We treat both as an incorrect password
-                loginIncorrect: error.httpStatus === 401 || error.httpStatus == 403,
+                loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
             });
         }).finally(() => {
-            if(this._unmounted) {
+            if (this._unmounted) {
                 return;
             }
             this.setState({
@@ -134,7 +191,7 @@ module.exports = React.createClass({
     },
 
     _onLoginAsGuestClick: function() {
-        var self = this;
+        const self = this;
         self.setState({
             busy: true,
             errorText: null,
@@ -156,7 +213,7 @@ module.exports = React.createClass({
             });
         }).finally(function() {
             self.setState({
-                busy: false
+                busy: false,
             });
         }).done();
     },
@@ -183,8 +240,8 @@ module.exports = React.createClass({
     },
 
     onServerConfigChange: function(config) {
-        var self = this;
-        let newState = {
+        const self = this;
+        const newState = {
             errorText: null, // reset err messages
         };
         if (config.hsUrl !== undefined) {
@@ -193,19 +250,21 @@ module.exports = React.createClass({
         if (config.isUrl !== undefined) {
             newState.enteredIdentityServerUrl = config.isUrl;
         }
+
+        this.props.onServerConfigChange(config);
         this.setState(newState, function() {
             self._initLoginLogic(config.hsUrl || null, config.isUrl);
         });
     },
 
     _initLoginLogic: function(hsUrl, isUrl) {
-        var self = this;
+        const self = this;
         hsUrl = hsUrl || this.state.enteredHomeserverUrl;
         isUrl = isUrl || this.state.enteredIdentityServerUrl;
 
-        var fallbackHsUrl = hsUrl == this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
+        const fallbackHsUrl = hsUrl === this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
 
-        var loginLogic = new Login(hsUrl, isUrl, fallbackHsUrl, {
+        const loginLogic = new Login(hsUrl, isUrl, fallbackHsUrl, {
             defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
         });
         this._loginLogic = loginLogic;
@@ -217,13 +276,29 @@ module.exports = React.createClass({
             loginIncorrect: false,
         });
 
-        loginLogic.getFlows().then(function(flows) {
-            // old behaviour was to always use the first flow without presenting
-            // options. This works in most cases (we don't have a UI for multiple
-            // logins so let's skip that for now).
-            loginLogic.chooseFlow(0);
-            self.setState({
-                currentFlow: self._getCurrentFlowStep(),
+        loginLogic.getFlows().then((flows) => {
+            // look for a flow where we understand all of the steps.
+            for (let i = 0; i < flows.length; i++ ) {
+                if (!this._isSupportedFlow(flows[i])) {
+                    continue;
+                }
+
+                // we just pick the first flow where we support all the
+                // steps. (we don't have a UI for multiple logins so let's skip
+                // that for now).
+                loginLogic.chooseFlow(i);
+                this.setState({
+                    currentFlow: this._getCurrentFlowStep(),
+                });
+                return;
+            }
+            // we got to the end of the list without finding a suitable
+            // flow.
+            this.setState({
+                errorText: _t(
+                    "This homeserver doesn't offer any login flows which are " +
+                        "supported by this client.",
+                ),
             });
         }, function(err) {
             self.setState({
@@ -237,6 +312,16 @@ module.exports = React.createClass({
         }).done();
     },
 
+    _isSupportedFlow: function(flow) {
+        // technically the flow can have multiple steps, but no one does this
+        // for login and loginLogic doesn't support it so we can ignore it.
+        if (!this._stepRendererMap[flow.type]) {
+            console.log("Skipping flow", flow, "due to unsupported login type", flow.type);
+            return false;
+        }
+        return true;
+    },
+
     _getCurrentFlowStep: function() {
         return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
     },
@@ -256,18 +341,28 @@ module.exports = React.createClass({
                  !this.state.enteredHomeserverUrl.startsWith("http"))
             ) {
                 errorText = <span>
-                    { _tJsx("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
-                            "Either use HTTPS or <a>enable unsafe scripts</a>.",
-                      /<a>(.*?)<\/a>/,
-                      (sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; }
-                    )}
+                    { _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
+                        "Either use HTTPS or <a>enable unsafe scripts</a>.", {},
+                        {
+                            'a': (sub) => {
+                                return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">
+                                    { sub }
+                                </a>;
+                            },
+                        },
+                    ) }
                 </span>;
             } else {
                 errorText = <span>
-                    { _tJsx("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
-                      /<a>(.*?)<\/a>/,
-                      (sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; }
-                    )}
+                    { _t("Can't connect to homeserver - please check your connectivity, ensure your " +
+                        "<a>homeserver's SSL certificate</a> is trusted, and that a browser extension " +
+                        "is not blocking requests.", {},
+                        {
+                            'a': (sub) => {
+                                return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>;
+                            },
+                        },
+                    ) }
                 </span>;
             }
         }
@@ -276,109 +371,114 @@ module.exports = React.createClass({
     },
 
     componentForStep: function(step) {
-        switch (step) {
-            case 'm.login.password':
-                const PasswordLogin = sdk.getComponent('login.PasswordLogin');
-                return (
-                    <PasswordLogin
-                        onSubmit={this.onPasswordLogin}
-                        initialUsername={this.state.username}
-                        initialPhoneCountry={this.state.phoneCountry}
-                        initialPhoneNumber={this.state.phoneNumber}
-                        onUsernameChanged={this.onUsernameChanged}
-                        onPhoneCountryChanged={this.onPhoneCountryChanged}
-                        onPhoneNumberChanged={this.onPhoneNumberChanged}
-                        onForgotPasswordClick={this.props.onForgotPasswordClick}
-                        loginIncorrect={this.state.loginIncorrect}
-                    />
-                );
-            case 'm.login.cas':
-                const CasLogin = sdk.getComponent('login.CasLogin');
-                return (
-                    <CasLogin onSubmit={this.onCasLogin} />
-                );
-            default:
-                if (!step) {
-                    return;
-                }
-                return (
-                    <div>
-                    { _t('Sorry, this homeserver is using a login which is not recognised ')}({step})
-                    </div>
-                );
+        if (!step) {
+            return null;
         }
+
+        const stepRenderer = this._stepRendererMap[step];
+
+        if (stepRenderer) {
+            return stepRenderer();
+        }
+
+        return null;
     },
 
-    _onLanguageChange: function(newLang) {
-        if(languageHandler.getCurrentLanguage() !== newLang) {
-            UserSettingsStore.setLocalSetting('language', newLang);
-            PlatformPeg.get().reload();
-        }
+    _renderPasswordStep: function() {
+        const PasswordLogin = sdk.getComponent('login.PasswordLogin');
+        return (
+            <PasswordLogin
+               onSubmit={this.onPasswordLogin}
+               onError={this.onPasswordLoginError}
+               initialUsername={this.state.username}
+               initialPhoneCountry={this.state.phoneCountry}
+               initialPhoneNumber={this.state.phoneNumber}
+               onUsernameChanged={this.onUsernameChanged}
+               onPhoneCountryChanged={this.onPhoneCountryChanged}
+               onPhoneNumberChanged={this.onPhoneNumberChanged}
+               onForgotPasswordClick={this.props.onForgotPasswordClick}
+               loginIncorrect={this.state.loginIncorrect}
+               hsUrl={this.state.enteredHomeserverUrl}
+               />
+        );
     },
 
-    _renderLanguageSetting: function() {
-        const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-        return <div className="mx_Login_language_div">
-            <LanguageDropdown onOptionChange={this._onLanguageChange}
-                          className="mx_Login_language"
-                          value={languageHandler.getCurrentLanguage()}
-            />
-        </div>;
+    _renderCasStep: function() {
+        const CasLogin = sdk.getComponent('login.CasLogin');
+        return (
+            <CasLogin onSubmit={this.onCasLogin} />
+        );
     },
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const LoginPage = sdk.getComponent("login.LoginPage");
         const LoginHeader = sdk.getComponent("login.LoginHeader");
         const LoginFooter = sdk.getComponent("login.LoginFooter");
         const ServerConfig = sdk.getComponent("login.ServerConfig");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
-        var loginAsGuestJsx;
+        let loginAsGuestJsx;
         if (this.props.enableGuest) {
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
-                    { _t('Login as guest')}
+                    { _t('Try the app first') }
                 </a>;
         }
 
-        var returnToAppJsx;
-        if (this.props.onCancelClick) {
-            returnToAppJsx =
-                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    { _t('Return to app')}
-                </a>;
+        let serverConfig;
+        let header;
+
+        if (!SdkConfig.get()['disable_custom_urls']) {
+            serverConfig = <ServerConfig ref="serverConfig"
+                withToggleButton={true}
+                customHsUrl={this.props.customHsUrl}
+                customIsUrl={this.props.customIsUrl}
+                defaultHsUrl={this.props.defaultHsUrl}
+                defaultIsUrl={this.props.defaultIsUrl}
+                onServerConfigChange={this.onServerConfigChange}
+                delayTimeMs={1000} />;
         }
 
+        // FIXME: remove status.im theme tweaks
+        const theme = SettingsStore.getValue("theme");
+        if (theme !== "status") {
+            header = <h2>{ _t('Sign in') } { loader }</h2>;
+        } else {
+            if (!this.state.errorText) {
+                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
+            }
+        }
+
+        let errorTextSection;
+        if (this.state.errorText) {
+            errorTextSection = (
+                <div className="mx_Login_error">
+                    { this.state.errorText }
+                </div>
+            );
+        }
+
+        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div>
-                        <h2>{ _t('Sign in')}
-                            { loader }
-                        </h2>
+                        { header }
+                        { errorTextSection }
                         { this.componentForStep(this.state.currentFlow) }
-                        <ServerConfig ref="serverConfig"
-                            withToggleButton={true}
-                            customHsUrl={this.props.customHsUrl}
-                            customIsUrl={this.props.customIsUrl}
-                            defaultHsUrl={this.props.defaultHsUrl}
-                            defaultIsUrl={this.props.defaultIsUrl}
-                            onServerConfigChange={this.onServerConfigChange}
-                            delayTimeMs={1000}/>
-                        <div className="mx_Login_error">
-                                { this.state.errorText }
-                        </div>
+                        { serverConfig }
                         <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
-                            { _t('Create an account')}
+                            { _t('Create an account') }
                         </a>
                         { loginAsGuestJsx }
-                        { returnToAppJsx }
-                        { this._renderLanguageSetting() }
+                        <LanguageSelector />
                         <LoginFooter />
                     </div>
                 </div>
-            </div>
+            </LoginPage>
         );
-    }
+    },
 });

src/components/structures/login/PostRegistration.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
@@ -25,14 +26,14 @@ module.exports = React.createClass({
     displayName: 'PostRegistration',
 
     propTypes: {
-        onComplete: React.PropTypes.func.isRequired
+        onComplete: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
         return {
             avatarUrl: null,
             errorString: null,
-            busy: false
+            busy: false,
         };
     },
 
@@ -40,28 +41,29 @@ module.exports = React.createClass({
         // There is some assymetry between ChangeDisplayName and ChangeAvatar,
         // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
         // the URL to be passed to you (because it's also used for room avatars).
-        var cli = MatrixClientPeg.get();
+        const cli = MatrixClientPeg.get();
         this.setState({busy: true});
-        var self = this;
+        const self = this;
         cli.getProfileInfo(cli.credentials.userId).done(function(result) {
             self.setState({
                 avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
-                busy: false
+                busy: false,
             });
         }, function(error) {
             self.setState({
                 errorString: _t("Failed to fetch avatar URL"),
-                busy: false
+                busy: false,
             });
         });
     },
 
     render: function() {
-        var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
-        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        var LoginHeader = sdk.getComponent('login.LoginHeader');
+        const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
+        const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        const LoginPage = sdk.getComponent('login.LoginPage');
+        const LoginHeader = sdk.getComponent('login.LoginHeader');
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div className="mx_Login_profile">
@@ -71,10 +73,10 @@ module.exports = React.createClass({
                         <ChangeAvatar
                             initialAvatarUrl={this.state.avatarUrl} />
                         <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
-                        {this.state.errorString}
+                        { this.state.errorString }
                     </div>
                 </div>
-            </div>
+            </LoginPage>
         );
-    }
+    },
 });

src/components/structures/login/Registration.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,13 +20,16 @@ import Matrix from 'matrix-js-sdk';
 
 import Promise from 'bluebird';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
-import ServerConfig from '../../views/login/ServerConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
 import RtsClient from '../../../RtsClient';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
+import SettingsStore from "../../../settings/SettingsStore";
+import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 
 const MIN_PASSWORD_LENGTH = 6;
 
@@ -33,31 +37,38 @@ module.exports = React.createClass({
     displayName: 'Registration',
 
     propTypes: {
-        onLoggedIn: React.PropTypes.func.isRequired,
-        clientSecret: React.PropTypes.string,
-        sessionId: React.PropTypes.string,
-        makeRegistrationUrl: React.PropTypes.func.isRequired,
-        idSid: React.PropTypes.string,
-        customHsUrl: React.PropTypes.string,
-        customIsUrl: React.PropTypes.string,
-        defaultHsUrl: React.PropTypes.string,
-        defaultIsUrl: React.PropTypes.string,
-        brand: React.PropTypes.string,
-        email: React.PropTypes.string,
-        referrer: React.PropTypes.string,
-        teamServerConfig: React.PropTypes.shape({
+        onLoggedIn: PropTypes.func.isRequired,
+        clientSecret: PropTypes.string,
+        sessionId: PropTypes.string,
+        makeRegistrationUrl: PropTypes.func.isRequired,
+        idSid: PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+        defaultHsUrl: PropTypes.string,
+        defaultIsUrl: PropTypes.string,
+        brand: PropTypes.string,
+        email: PropTypes.string,
+        referrer: PropTypes.string,
+        teamServerConfig: PropTypes.shape({
             // Email address to request new teams
-            supportEmail: React.PropTypes.string.isRequired,
+            supportEmail: PropTypes.string.isRequired,
             // URL of the riot-team-server to get team configurations and track referrals
-            teamServerURL: React.PropTypes.string.isRequired,
+            teamServerURL: PropTypes.string.isRequired,
         }),
-        teamSelected: React.PropTypes.object,
+        teamSelected: PropTypes.object,
 
-        defaultDeviceDisplayName: React.PropTypes.string,
+        defaultDeviceDisplayName: PropTypes.string,
 
         // registration shouldn't know or care how login is done.
-        onLoginClick: React.PropTypes.func.isRequired,
-        onCancelClick: React.PropTypes.func
+        onLoginClick: PropTypes.func.isRequired,
+        onCancelClick: PropTypes.func,
+        onServerConfigChange: PropTypes.func.isRequired,
+
+        rtsClient: PropTypes.shape({
+            getTeamsConfig: PropTypes.func.isRequired,
+            trackReferral: PropTypes.func.isRequired,
+            getTeam: PropTypes.func.isRequired,
+        }),
     },
 
     getInitialState: function() {
@@ -82,6 +93,7 @@ module.exports = React.createClass({
             doingUIAuth: Boolean(this.props.sessionId),
             hsUrl: this.props.customHsUrl,
             isUrl: this.props.customIsUrl,
+            flows: null,
         };
     },
 
@@ -121,23 +133,40 @@ module.exports = React.createClass({
     },
 
     onServerConfigChange: function(config) {
-        let newState = {};
+        const newState = {};
         if (config.hsUrl !== undefined) {
             newState.hsUrl = config.hsUrl;
         }
         if (config.isUrl !== undefined) {
             newState.isUrl = config.isUrl;
         }
-        this.setState(newState, function() {
+        this.props.onServerConfigChange(config);
+        this.setState(newState, () => {
             this._replaceClient();
         });
     },
 
-    _replaceClient: function() {
+    _replaceClient: async function() {
         this._matrixClient = Matrix.createClient({
             baseUrl: this.state.hsUrl,
             idBaseUrl: this.state.isUrl,
         });
+        try {
+            await this._makeRegisterRequest({});
+            // This should never succeed since we specified an empty
+            // auth object.
+            console.log("Expecting 401 from register request but got success!");
+        } catch (e) {
+            if (e.httpStatus === 401) {
+                this.setState({
+                    flows: e.data.flows,
+                });
+            } else {
+                this.setState({
+                    errorText: _t("Unable to query for supported registration methods"),
+                });
+            }
+        }
     },
 
     onFormSubmit: function(formVals) {
@@ -153,12 +182,34 @@ module.exports = React.createClass({
         if (!success) {
             let msg = response.message || response.toString();
             // can we give a better error message?
-            if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
-                let msisdn_available = false;
+            if (response.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
+                const errorTop = messageForResourceLimitError(
+                    response.data.limit_type,
+                    response.data.admin_contact, {
+                    'monthly_active_user': _td(
+                        "This homeserver has hit its Monthly Active User limit.",
+                    ),
+                    '': _td(
+                        "This homeserver has exceeded one of its resource limits.",
+                    ),
+                });
+                const errorDetail = messageForResourceLimitError(
+                    response.data.limit_type,
+                    response.data.admin_contact, {
+                    '': _td(
+                        "Please <a>contact your service administrator</a> to continue using this service.",
+                    ),
+                });
+                msg = <div>
+                    <p>{errorTop}</p>
+                    <p>{errorDetail}</p>
+                </div>;
+            } else if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
+                let msisdnAvailable = false;
                 for (const flow of response.available_flows) {
-                    msisdn_available |= flow.stages.indexOf('m.login.msisdn') > -1;
+                    msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
                 }
-                if (!msisdn_available) {
+                if (!msisdnAvailable) {
                     msg = _t('This server does not support authentication with a phone number.');
                 }
             }
@@ -195,7 +246,7 @@ module.exports = React.createClass({
 
                 this._rtsClient.getTeam(teamToken).then((team) => {
                     console.log(
-                        `User successfully registered with team ${team.name}`
+                        `User successfully registered with team ${team.name}`,
                     );
                     if (!team.rooms) {
                         return;
@@ -223,7 +274,7 @@ module.exports = React.createClass({
                 deviceId: response.device_id,
                 homeserverUrl: this._matrixClient.getHomeserverUrl(),
                 identityServerUrl: this._matrixClient.getIdentityServerUrl(),
-                accessToken: response.access_token
+                accessToken: response.access_token,
             }, teamToken);
         }).then((cli) => {
             return this._setupPushers(cli);
@@ -237,7 +288,7 @@ module.exports = React.createClass({
         return matrixClient.getPushers().then((resp)=>{
             const pushers = resp.pushers;
             for (let i = 0; i < pushers.length; ++i) {
-                if (pushers[i].kind == 'email') {
+                if (pushers[i].kind === 'email') {
                     const emailPusher = pushers[i];
                     emailPusher.data = { brand: this.props.brand };
                     matrixClient.setPusher(emailPusher).done(() => {
@@ -253,7 +304,7 @@ module.exports = React.createClass({
     },
 
     onFormValidationFailed: function(errCode) {
-        var errMsg;
+        let errMsg;
         switch (errCode) {
             case "RegistrationForm.ERR_PASSWORD_MISSING":
                 errMsg = _t('Missing password.');
@@ -262,7 +313,7 @@ module.exports = React.createClass({
                 errMsg = _t('Passwords don\'t match.');
                 break;
             case "RegistrationForm.ERR_PASSWORD_LENGTH":
-                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH: MIN_PASSWORD_LENGTH});
+                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
                 break;
             case "RegistrationForm.ERR_EMAIL_INVALID":
                 errMsg = _t('This doesn\'t look like a valid email address.');
@@ -282,7 +333,7 @@ module.exports = React.createClass({
                 break;
         }
         this.setState({
-            errorText: errMsg
+            errorText: errMsg,
         });
     },
 
@@ -316,16 +367,19 @@ module.exports = React.createClass({
             emailAddress: this.state.formVals.email,
             phoneCountry: this.state.formVals.phoneCountry,
             phoneNumber: this.state.formVals.phoneNumber,
-        }
+        };
     },
 
     render: function() {
         const LoginHeader = sdk.getComponent('login.LoginHeader');
         const LoginFooter = sdk.getComponent('login.LoginFooter');
+        const LoginPage = sdk.getComponent('login.LoginPage');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent("elements.Spinner");
         const ServerConfig = sdk.getComponent('views.login.ServerConfig');
 
+        const theme = SettingsStore.getValue("theme");
+
         let registerBody;
         if (this.state.doingUIAuth) {
             registerBody = (
@@ -341,12 +395,22 @@ module.exports = React.createClass({
                     poll={true}
                 />
             );
-        } else if (this.state.busy || this.state.teamServerBusy) {
+        } else if (this.state.busy || this.state.teamServerBusy || !this.state.flows) {
             registerBody = <Spinner />;
         } else {
-            let errorSection;
-            if (this.state.errorText) {
-                errorSection = <div className="mx_Login_error">{this.state.errorText}</div>;
+            let serverConfigSection;
+            if (!SdkConfig.get()['disable_custom_urls']) {
+                serverConfigSection = (
+                    <ServerConfig ref="serverConfig"
+                        withToggleButton={true}
+                        customHsUrl={this.props.customHsUrl}
+                        customIsUrl={this.props.customIsUrl}
+                        defaultHsUrl={this.props.defaultHsUrl}
+                        defaultIsUrl={this.props.defaultIsUrl}
+                        onServerConfigChange={this.onServerConfigChange}
+                        delayTimeMs={1000}
+                    />
+                );
             }
             registerBody = (
                 <div>
@@ -361,31 +425,38 @@ module.exports = React.createClass({
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit}
                         onTeamSelected={this.onTeamSelected}
+                        flows={this.state.flows}
                     />
-                    {errorSection}
-                    <ServerConfig ref="serverConfig"
-                        withToggleButton={true}
-                        customHsUrl={this.props.customHsUrl}
-                        customIsUrl={this.props.customIsUrl}
-                        defaultHsUrl={this.props.defaultHsUrl}
-                        defaultIsUrl={this.props.defaultIsUrl}
-                        onServerConfigChange={this.onServerConfigChange}
-                        delayTimeMs={1000}
-                    />
+                    { serverConfigSection }
                 </div>
             );
         }
 
-        let returnToAppJsx;
-        if (this.props.onCancelClick) {
-            returnToAppJsx = (
-                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    {_t('Return to app')}
+        let header;
+        let errorText;
+        // FIXME: remove hardcoded Status team tweaks at some point
+        if (theme === 'status' && this.state.errorText) {
+            header = <div className="mx_Login_error">{ this.state.errorText }</div>;
+        } else {
+            header = <h2>{ _t('Create an account') }</h2>;
+            if (this.state.errorText) {
+                errorText = <div className="mx_Login_error">{ this.state.errorText }</div>;
+            }
+        }
+
+        let signIn;
+        if (!this.state.doingUIAuth) {
+            signIn = (
+                <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                    { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
                 </a>
             );
         }
+
+        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
         return (
-            <div className="mx_Login">
+            <LoginPage>
                 <div className="mx_Login_box">
                     <LoginHeader
                         icon={this.state.teamSelected ?
@@ -393,15 +464,14 @@ module.exports = React.createClass({
                             this.state.teamSelected.domain + "/icon.png" :
                             null}
                     />
-                    <h2>{_t('Create an account')}</h2>
-                    {registerBody}
-                    <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        {_t('I already have an account')}
-                    </a>
-                    {returnToAppJsx}
+                    { header }
+                    { registerBody }
+                    { signIn }
+                    { errorText }
+                    <LanguageSelector />
                     <LoginFooter />
                 </div>
-            </div>
+            </LoginPage>
         );
-    }
+    },
 });

src/components/views/avatars/BaseAvatar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 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.
@@ -14,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-var AvatarLogic = require("../../../Avatar");
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
+import AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 
@@ -25,16 +26,20 @@ module.exports = React.createClass({
     displayName: 'BaseAvatar',
 
     propTypes: {
-        name: React.PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: React.PropTypes.string, // ID for generating hash colours
-        title: React.PropTypes.string, // onHover title text
-        url: React.PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
+        name: PropTypes.string.isRequired, // The name (first initial used as default)
+        idName: PropTypes.string, // ID for generating hash colours
+        title: PropTypes.string, // onHover title text
+        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+        width: PropTypes.number,
+        height: PropTypes.number,
         // XXX resizeMethod not actually used.
-        resizeMethod: React.PropTypes.string,
-        defaultToInitialLetter: React.PropTypes.bool // true to add default url
+        resizeMethod: PropTypes.string,
+        defaultToInitialLetter: PropTypes.bool, // true to add default url
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
     getDefaultProps: function() {
@@ -42,7 +47,7 @@ module.exports = React.createClass({
             width: 40,
             height: 40,
             resizeMethod: 'crop',
-            defaultToInitialLetter: true
+            defaultToInitialLetter: true,
         };
     },
 
@@ -50,17 +55,26 @@ module.exports = React.createClass({
         return this._getState(this.props);
     },
 
+    componentWillMount() {
+        this.unmounted = false;
+        this.context.matrixClient.on('sync', this.onClientSync);
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.context.matrixClient.removeListener('sync', this.onClientSync);
+    },
+
     componentWillReceiveProps: function(nextProps) {
         // work out if we need to call setState (if the image URLs array has changed)
-        var newState = this._getState(nextProps);
-        var newImageUrls = newState.imageUrls;
-        var oldImageUrls = this.state.imageUrls;
+        const newState = this._getState(nextProps);
+        const newImageUrls = newState.imageUrls;
+        const oldImageUrls = this.state.imageUrls;
         if (newImageUrls.length !== oldImageUrls.length) {
             this.setState(newState); // detected a new entry
-        }
-        else {
+        } else {
             // check each one to see if they are the same
-            for (var i = 0; i < newImageUrls.length; i++) {
+            for (let i = 0; i < newImageUrls.length; i++) {
                 if (oldImageUrls[i] !== newImageUrls[i]) {
                     this.setState(newState); // detected a diff
                     break;
@@ -69,35 +83,52 @@ module.exports = React.createClass({
         }
     },
 
+    onClientSync: function(syncState, prevState) {
+        if (this.unmounted) return;
+
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected &&
+            // Did we fall back?
+            this.state.urlsIndex > 0
+        ) {
+            // Start from the highest priority URL again
+            this.setState({
+                urlsIndex: 0,
+            });
+        }
+    },
+
     _getState: function(props) {
         // work out the full set of urls to try to load. This is formed like so:
         // imageUrls: [ props.url, props.urls, default image ]
 
-        var urls = props.urls || [];
+        const urls = props.urls || [];
         if (props.url) {
             urls.unshift(props.url); // put in urls[0]
         }
 
-        var defaultImageUrl = null;
+        let defaultImageUrl = null;
         if (props.defaultToInitialLetter) {
             defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name
+                props.idName || props.name,
             );
             urls.push(defaultImageUrl); // lowest priority
         }
         return {
             imageUrls: urls,
             defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0
+            urlsIndex: 0,
         };
     },
 
     onError: function(ev) {
-        var nextIndex = this.state.urlsIndex + 1;
+        const nextIndex = this.state.urlsIndex + 1;
         if (nextIndex < this.state.imageUrls.length) {
             // try the next one
             this.setState({
-                urlsIndex: nextIndex
+                urlsIndex: nextIndex,
             });
         }
     },
@@ -111,32 +142,32 @@ module.exports = React.createClass({
             return undefined;
         }
 
-        var idx = 0;
-        var initial = name[0];
-        if ((initial === '@' || initial === '#') && name[1]) {
+        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).
-        var chars = 1;
-        var first = name.charCodeAt(idx);
+        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]) {
-            var second = name.charCodeAt(idx+1);
+            const second = name.charCodeAt(idx+1);
             if (second >= 0xDC00 && second <= 0xDFFF) {
                 chars++;
             }
         }
 
-        var firstChar = name.substring(idx, idx+chars);
+        const firstChar = name.substring(idx, idx+chars);
         return firstChar.toUpperCase();
     },
 
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
-        var imageUrl = this.state.imageUrls[this.state.urlsIndex];
+        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
 
         const {
             name, idName, title, url, urls, width, height, resizeMethod,
@@ -152,7 +183,7 @@ module.exports = React.createClass({
                     width: width + "px",
                     lineHeight: height + "px" }}
                 >
-                    {initialLetter}
+                    { initialLetter }
                 </EmojiText>
             );
             const imgNode = (
@@ -165,15 +196,15 @@ module.exports = React.createClass({
                     <AccessibleButton element='span' className="mx_BaseAvatar"
                         onClick={onClick} {...otherProps}
                     >
-                        {textNode}
-                        {imgNode}
+                        { textNode }
+                        { imgNode }
                     </AccessibleButton>
                 );
             } else {
                 return (
                     <span className="mx_BaseAvatar" {...otherProps}>
-                        {textNode}
-                        {imgNode}
+                        { textNode }
+                        { imgNode }
                     </span>
                 );
             }
@@ -198,5 +229,5 @@ module.exports = React.createClass({
                     {...otherProps} />
             );
         }
-    }
+    },
 });

src/components/views/avatars/GroupAvatar.js

@@ -24,10 +24,12 @@ export default React.createClass({
 
     propTypes: {
         groupId: PropTypes.string,
+        groupName: PropTypes.string,
         groupAvatarUrl: PropTypes.string,
         width: PropTypes.number,
         height: PropTypes.number,
         resizeMethod: PropTypes.string,
+        onClick: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -52,11 +54,11 @@ export default React.createClass({
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
-        const {groupId, groupAvatarUrl, ...otherProps} = this.props;
+        const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;
 
         return (
             <BaseAvatar
-                name={this.props.groupId[1]}
+                name={groupName || this.props.groupId[1]}
                 idName={this.props.groupId}
                 url={this.getGroupAvatarUrl()}
                 {...otherProps}