Merge remote-tracking branch 'origin/develop' into develop

src/AddThreepid.js

@@ -26,7 +26,7 @@ import { _t } from './languageHandler';
  * the client owns the given email address, which is then passed to the
  * add threepid API on the homeserver.
  */
-class AddThreepid {
+export default class AddThreepid {
     constructor() {
         this.clientSecret = MatrixClientPeg.get().generateClientSecret();
     }
@@ -124,5 +124,3 @@ class AddThreepid {
         });
     }
 }
-
-module.exports = AddThreepid;

src/Analytics.js

@@ -66,7 +66,7 @@ const customVariables = {
     },
     'User Type': {
         id: 3,
-        expl: _td('Whether or not you\'re logged in (we don\'t record your user name)'),
+        expl: _td('Whether or not you\'re logged in (we don\'t record your username)'),
         example: 'Logged In',
     },
     'Chosen Language': {

src/Avatar.js

@@ -56,6 +56,6 @@ module.exports = {
         for (let i = 0; i < s.length; ++i) {
             total += s.charCodeAt(i);
         }
-        return 'img/' + images[total % images.length] + '.png';
+        return require('../res/img/' + images[total % images.length] + '.png');
     },
 };

src/CallMediaHandler.js

@@ -69,4 +69,16 @@ export default {
         SettingsStore.setValue("webrtc_videoinput", null, SettingLevel.DEVICE, deviceId);
         Matrix.setMatrixCallVideoInput(deviceId);
     },
+
+    getAudioOutput: function() {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput");
+    },
+
+    getAudioInput: function() {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audioinput");
+    },
+
+    getVideoInput: function() {
+        return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_videoinput");
+    },
 };

src/Lifecycle.js

@@ -27,7 +27,6 @@ import UserActivity from './UserActivity';
 import Presence from './Presence';
 import dis from './dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
-import RtsClient from './RtsClient';
 import Modal from './Modal';
 import sdk from './index';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
@@ -224,7 +223,7 @@ 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.)
+//      localStorage (e.g. isGuest etc.)
 async function _restoreFromLocalStorage() {
     if (!localStorage) {
         return false;
@@ -286,15 +285,6 @@ function _handleLoadSessionFailure(e) {
     });
 }
 
-let rtsClient = null;
-export function initRtsClient(url) {
-    if (url) {
-        rtsClient = new RtsClient(url);
-    } else {
-        rtsClient = null;
-    }
-}
-
 /**
  * Transitions to a logged-in state using the given credentials.
  *
@@ -333,7 +323,7 @@ async function _doSetLoggedIn(credentials, clearStorage) {
     );
 
     // This is dispatched to indicate that the user is still in the process of logging in
-    // because `teamPromise` may take some time to resolve, breaking the assumption that
+    // because async code may take some time to resolve, breaking the assumption that
     // `setLoggedIn` takes an "instant" to complete, and dispatch `on_logged_in` a few ms
     // later than MatrixChat might assume.
     //
@@ -347,10 +337,6 @@ async function _doSetLoggedIn(credentials, clearStorage) {
 
     Analytics.setLoggedIn(credentials.guest, credentials.homeserverUrl, credentials.identityServerUrl);
 
-    // Resolves by default
-    let teamPromise = Promise.resolve(null);
-
-
     if (localStorage) {
         try {
             _persistCredentialsToLocalStorage(credentials);
@@ -367,27 +353,13 @@ async function _doSetLoggedIn(credentials, clearStorage) {
         } catch (e) {
             console.warn("Error using local storage: can't persist session!", e);
         }
-
-        if (rtsClient && !credentials.guest) {
-            teamPromise = rtsClient.login(credentials.userId).then((body) => {
-                if (body.team_token) {
-                    localStorage.setItem("mx_team_token", body.team_token);
-                }
-                return body.team_token;
-            }, (err) => {
-                console.warn(`Failed to get team token on login: ${err}` );
-                return null;
-            });
-        }
     } else {
         console.warn("No local storage available: can't persist session!");
     }
 
     MatrixClientPeg.replaceUsingCreds(credentials);
 
-    teamPromise.then((teamToken) => {
-        dis.dispatch({action: 'on_logged_in', teamToken: teamToken});
-    });
+    dis.dispatch({ action: 'on_logged_in' });
 
     await startMatrixClient();
     return MatrixClientPeg.get();

src/Login.js

@@ -49,6 +49,7 @@ export default class Login {
     /**
      * Get a temporary MatrixClient, which can be used for login or register
      * requests.
+     * @returns {MatrixClient}
      */
     _createTemporaryClient() {
         return Matrix.createClient({
@@ -144,8 +145,8 @@ export default class Login {
         const tryFallbackHs = (originalError) => {
             return sendLoginRequest(
                 self._fallbackHsUrl, this._isUrl, 'm.login.password', loginParams,
-            ).catch((fallback_error) => {
-                console.log("fallback HS login failed", fallback_error);
+            ).catch((fallbackError) => {
+                console.log("fallback HS login failed", fallbackError);
                 // throw the original error
                 throw originalError;
             });

src/MatrixClientPeg.js

@@ -29,6 +29,7 @@ import SettingsStore from './settings/SettingsStore';
 import MatrixActionCreators from './actions/MatrixActionCreators';
 import {phasedRollOutExpiredForUser} from "./PhasedRollOut";
 import Modal from './Modal';
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
 
 interface MatrixClientCreds {
     homeserverUrl: string,
@@ -183,7 +184,8 @@ class MatrixClientPeg {
             userId: creds.userId,
             deviceId: creds.deviceId,
             timelineSupport: true,
-            forceTURN: SettingsStore.getValue('webRtcForceTURN', false),
+            forceTURN: !SettingsStore.getValue('webRtcForcePeerToPeer', false),
+            verificationMethods: [verificationMethods.SAS]
         };
 
         this.matrixClient = createMatrixClient(opts, useIndexedDb);

src/Notifier.js

@@ -289,11 +289,6 @@ const Notifier = {
         const room = MatrixClientPeg.get().getRoom(ev.getRoomId());
         const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
         if (actions && actions.notify) {
-            dis.dispatch({
-                action: "event_notification",
-                event: ev,
-                room: room,
-            });
             if (this.isEnabled()) {
                 this._displayPopupNotification(ev, room);
             }

src/PageTypes.js

@@ -20,7 +20,6 @@ export default {
     HomePage: "home_page",
     RoomView: "room_view",
     UserSettings: "user_settings",
-    CreateRoom: "create_room",
     RoomDirectory: "room_directory",
     UserView: "user_view",
     GroupView: "group_view",

src/PhasedRollOut.js

@@ -15,21 +15,7 @@ limitations under the License.
 */
 
 import SdkConfig from './SdkConfig';
-
-function hashCode(str) {
-    let hash = 0;
-    let i;
-    let chr;
-    if (str.length === 0) {
-        return hash;
-    }
-    for (i = 0; i < str.length; i++) {
-        chr = str.charCodeAt(i);
-        hash = ((hash << 5) - hash) + chr;
-        hash |= 0;
-    }
-    return Math.abs(hash);
-}
+import {hashCode} from './utils/FormattingUtils';
 
 export function phasedRollOutExpiredForUser(username, feature, now, rollOutConfig = SdkConfig.get().phasedRollOut) {
     if (!rollOutConfig) {

src/Presence.js

@@ -17,21 +17,33 @@ limitations under the License.
 
 const MatrixClientPeg = require("./MatrixClientPeg");
 const dis = require("./dispatcher");
+import Timer from './utils/Timer';
 
  // Time in ms after that a user is considered as unavailable/away
 const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins
 const PRESENCE_STATES = ["online", "offline", "unavailable"];
 
 class Presence {
+
+    constructor() {
+        this._activitySignal = null;
+        this._unavailableTimer = null;
+        this._onAction = this._onAction.bind(this);
+        this._dispatcherRef = null;
+    }
     /**
      * Start listening the user activity to evaluate his presence state.
      * Any state change will be sent to the Home Server.
      */
-    start() {
-        this.running = true;
-        if (undefined === this.state) {
-            this._resetTimer();
-            this.dispatcherRef = dis.register(this._onAction.bind(this));
+    async start() {
+        this._unavailableTimer = new Timer(UNAVAILABLE_TIME_MS);
+        // the user_activity_start action starts the timer
+        this._dispatcherRef = dis.register(this._onAction);
+        while (this._unavailableTimer) {
+            try {
+                await this._unavailableTimer.finished();
+                this.setState("unavailable");
+            } catch(e) { /* aborted, stop got called */ }
         }
     }
 
@@ -39,13 +51,14 @@ class Presence {
      * Stop tracking user activity
      */
     stop() {
-        this.running = false;
-        if (this.timer) {
-            clearInterval(this.timer);
-            this.timer = undefined;
-            dis.unregister(this.dispatcherRef);
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+            this._dispatcherRef = null;
+        }
+        if (this._unavailableTimer) {
+            this._unavailableTimer.abort();
+            this._unavailableTimer = null;
         }
-        this.state = undefined;
     }
 
     /**
@@ -56,21 +69,25 @@ class Presence {
         return this.state;
     }
 
+    _onAction(payload) {
+        if (payload.action === 'user_activity') {
+            this.setState("online");
+            this._unavailableTimer.restart();
+        }
+    }
+
     /**
      * Set the presence state.
      * If the state has changed, the Home Server will be notified.
      * @param {string} newState the new presence state (see PRESENCE enum)
      */
-    setState(newState) {
+    async setState(newState) {
         if (newState === this.state) {
             return;
         }
         if (PRESENCE_STATES.indexOf(newState) === -1) {
             throw new Error("Bad presence state: " + newState);
         }
-        if (!this.running) {
-            return;
-        }
         const old_state = this.state;
         this.state = newState;
 
@@ -78,42 +95,14 @@ class Presence {
             return; // don't try to set presence when a guest; it won't work.
         }
 
-        const self = this;
-        MatrixClientPeg.get().setPresence(this.state).done(function() {
+        try {
+            await MatrixClientPeg.get().setPresence(this.state);
             console.log("Presence: %s", newState);
-        }, function(err) {
+        } catch(err) {
             console.error("Failed to set presence: %s", err);
-            self.state = old_state;
-        });
-    }
-
-    /**
-     * Callback called when the user made no action on the page for UNAVAILABLE_TIME ms.
-     * @private
-     */
-    _onUnavailableTimerFire() {
-        this.setState("unavailable");
-    }
-
-    _onAction(payload) {
-        if (payload.action === "user_activity") {
-            this._resetTimer();
+            this.state = old_state;
         }
     }
-
-    /**
-     * Callback called when the user made an action on the page
-     * @private
-     */
-    _resetTimer() {
-        const self = this;
-        this.setState("online");
-        // Re-arm the timer
-        clearTimeout(this.timer);
-        this.timer = setTimeout(function() {
-            self._onUnavailableTimerFire();
-        }, UNAVAILABLE_TIME_MS);
-    }
 }
 
 module.exports = new Presence();

src/RtsClient.js

@@ -1,104 +0,0 @@
-import 'whatwg-fetch';
-
-let fetchFunction = fetch;
-
-function checkStatus(response) {
-    if (!response.ok) {
-        return response.text().then((text) => {
-            throw new Error(text);
-        });
-    }
-    return response;
-}
-
-function parseJson(response) {
-    return response.json();
-}
-
-function encodeQueryParams(params) {
-    return '?' + Object.keys(params).map((k) => {
-        return k + '=' + encodeURIComponent(params[k]);
-    }).join('&');
-}
-
-const request = (url, opts) => {
-    if (opts && opts.qs) {
-        url += encodeQueryParams(opts.qs);
-        delete opts.qs;
-    }
-    if (opts && opts.body) {
-        if (!opts.headers) {
-            opts.headers = {};
-        }
-        opts.body = JSON.stringify(opts.body);
-        opts.headers['Content-Type'] = 'application/json';
-    }
-    return fetchFunction(url, opts)
-        .then(checkStatus)
-        .then(parseJson);
-};
-
-
-export default class RtsClient {
-    constructor(url) {
-        this._url = url;
-    }
-
-    getTeamsConfig() {
-        return request(this._url + '/teams');
-    }
-
-    /**
-     * Track a referral with the Riot Team Server. This should be called once a referred
-     * user has been successfully registered.
-     * @param {string} referrer the user ID of one who referred the user to Riot.
-     * @param {string} sid the sign-up identity server session ID .
-     * @param {string} clientSecret the sign-up client secret.
-     * @returns {Promise} a promise that resolves to { team_token: 'sometoken' } upon
-     * success.
-     */
-    trackReferral(referrer, sid, clientSecret) {
-        return request(this._url + '/register',
-            {
-                body: {
-                    referrer: referrer,
-                    session_id: sid,
-                    client_secret: clientSecret,
-                },
-                method: 'POST',
-            },
-        );
-    }
-
-    getTeam(teamToken) {
-        return request(this._url + '/teamConfiguration',
-            {
-                qs: {
-                    team_token: teamToken,
-                },
-            },
-        );
-    }
-
-    /**
-     * Signal to the RTS that a login has occurred and that a user requires their team's
-     * token.
-     * @param {string} userId the user ID of the user who is a member of a team.
-     * @returns {Promise} a promise that resolves to { team_token: 'sometoken' } upon
-     * success.
-     */
-    login(userId) {
-        return request(this._url + '/login',
-            {
-                qs: {
-                    user_id: userId,
-                },
-            },
-        );
-    }
-
-    // allow fetch to be replaced, for testing.
-    static setFetch(fn) {
-        fetchFunction = fn;
-    }
-}

src/SlashCommands.js

@@ -86,6 +86,18 @@ export const CommandMap = {
         hideCompletionAfterSpace: true,
     }),
 
+    upgraderoom: new Command({
+        name: 'upgraderoom',
+        args: '<new_version>',
+        description: _td('Upgrades a room to a new version'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().upgradeRoom(roomId, args));
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
     nick: new Command({
         name: 'nick',
         args: '<display_name>',
@@ -135,6 +147,18 @@ export const CommandMap = {
         },
     }),
 
+    roomname: new Command({
+        name: 'roomname',
+        args: '<name>',
+        description: _td('Sets the room name'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setRoomName(roomId, args));
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
     invite: new Command({
         name: 'invite',
         args: '<user-id>',

src/TextForEvent.js

@@ -129,6 +129,11 @@ function textForRoomNameEvent(ev) {
     });
 }
 
+function textForTombstoneEvent(ev) {
+    const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    return _t('%(senderDisplayName)s upgraded this room.', {senderDisplayName});
+}
+
 function textForServerACLEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
     const prevContent = ev.getPrevContent();
@@ -433,6 +438,7 @@ const stateHandlers = {
     'm.room.power_levels': textForPowerEvent,
     'm.room.pinned_events': textForPinnedEvent,
     'm.room.server_acl': textForServerACLEvent,
+    'm.room.tombstone': textForTombstoneEvent,
 
     'im.vector.modular.widgets': textForWidgetEvent,
 };

src/Tinter.js

@@ -154,6 +154,8 @@ class Tinter {
     }
 
     tint(primaryColor, secondaryColor, tertiaryColor) {
+        return;
+        // eslint-disable-next-line no-unreachable
         this.currentTint[0] = primaryColor;
         this.currentTint[1] = secondaryColor;
         this.currentTint[2] = tertiaryColor;
@@ -390,7 +392,7 @@ class Tinter {
     // 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(svgs, forceColors) {
+    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
@@ -418,21 +420,13 @@ class Tinter {
                 const tag = tags[j];
                 for (let k = 0; k < this.svgAttrs.length; k++) {
                     const attr = this.svgAttrs[k];
-                    for (let m = 0; m < this.keyHex.length; m++) { // dev note: don't use L please.
-                        // We use a different attribute from the one we're setting
-                        // because we may also be using forceColors. If we were to
-                        // check the keyHex against a forceColors value, it may not
-                        // match and therefore not change when we need it to.
-                        const valAttrName = "mx-val-" + attr;
-                        let attribute = tag.getAttribute(valAttrName);
-                        if (!attribute) attribute = tag.getAttribute(attr); // fall back to the original
-                        if (attribute && (attribute.toUpperCase() === this.keyHex[m] || attribute.toLowerCase() === this.keyRgb[m])) {
+                    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,
-                                refAttr: valAttrName,
-                                index: m,
-                                forceColors: forceColors,
+                                index: l,
                             });
                         }
                     }
@@ -448,9 +442,7 @@ class Tinter {
         if (DEBUG) console.log("applySvgFixups start for " + fixups);
         for (let i = 0; i < fixups.length; i++) {
             const svgFixup = fixups[i];
-            const forcedColor = svgFixup.forceColors ? svgFixup.forceColors[svgFixup.index] : null;
-            svgFixup.node.setAttribute(svgFixup.attr, forcedColor ? forcedColor : this.colors[svgFixup.index]);
-            svgFixup.node.setAttribute(svgFixup.refAttr, this.colors[svgFixup.index]);
+            svgFixup.node.setAttribute(svgFixup.attr, this.colors[svgFixup.index]);
         }
         if (DEBUG) console.log("applySvgFixups end");
     }

src/UiEffects.js

@@ -22,6 +22,6 @@ limitations under the License.
 import Velocity from 'velocity-vector';
 import 'velocity-vector/velocity.ui';
 
-export function field_input_incorrect(element) {
+export function fieldInputIncorrect(element) {
     Velocity(element, "callout.shake", 300);
 }

src/UserActivity.js

@@ -15,32 +15,73 @@ limitations under the License.
 */
 
 import dis from './dispatcher';
+import Timer from './utils/Timer';
 
-const MIN_DISPATCH_INTERVAL_MS = 500;
-const CURRENTLY_ACTIVE_THRESHOLD_MS = 2000;
+// important this is larger than the timeouts of timers
+// used with UserActivity.timeWhileActive,
+// such as READ_MARKER_INVIEW_THRESHOLD_MS,
+// READ_MARKER_OUTOFVIEW_THRESHOLD_MS,
+// READ_RECEIPT_INTERVAL_MS in TimelinePanel
+const CURRENTLY_ACTIVE_THRESHOLD_MS = 2 * 60 * 1000;
 
 /**
  * This class watches for user activity (moving the mouse or pressing a key)
- * and dispatches the user_activity action at times when the user is interacting
- * with the app (but at a much lower frequency than mouse move events)
+ * and starts/stops attached timers while the user is active.
  */
 class UserActivity {
+    constructor() {
+        this._attachedTimers = [];
+        this._activityTimeout = new Timer(CURRENTLY_ACTIVE_THRESHOLD_MS);
+        this._onUserActivity = this._onUserActivity.bind(this);
+        this._onDocumentBlurred = this._onDocumentBlurred.bind(this);
+        this._onPageVisibilityChanged = this._onPageVisibilityChanged.bind(this);
+        this.lastScreenX = 0;
+        this.lastScreenY = 0;
+    }
+
+    /**
+     * Runs the given timer while the user is active, aborting when the user becomes inactive.
+     * Can be called multiple times with the same already running timer, which is a NO-OP.
+     * Can be called before the user becomes active, in which case it is only started
+     * later on when the user does become active.
+     * @param {Timer} timer the timer to use
+     */
+    timeWhileActive(timer) {
+        // important this happens first
+        const index = this._attachedTimers.indexOf(timer);
+        if (index === -1) {
+            this._attachedTimers.push(timer);
+            // remove when done or aborted
+            timer.finished().finally(() => {
+                const index = this._attachedTimers.indexOf(timer);
+                if (index !== -1) { // should never be -1
+                    this._attachedTimers.splice(index, 1);
+                }
+            // as we fork the promise here,
+            // avoid unhandled rejection warnings
+            }).catch((err) => {});
+        }
+        if (this.userCurrentlyActive()) {
+            timer.start();
+        }
+    }
+
     /**
      * Start listening to user activity
      */
     start() {
-        document.onmousedown = this._onUserActivity.bind(this);
-        document.onmousemove = this._onUserActivity.bind(this);
-        document.onkeydown = this._onUserActivity.bind(this);
+        document.onmousedown = this._onUserActivity;
+        document.onmousemove = this._onUserActivity;
+        document.onkeydown = this._onUserActivity;
+        document.addEventListener("visibilitychange", this._onPageVisibilityChanged);
+        document.addEventListener("blur", this._onDocumentBlurred);
+        document.addEventListener("focus", this._onUserActivity);
         // can't use document.scroll here because that's only the document
         // itself being scrolled. Need to use addEventListener's useCapture.
         // also this needs to be the wheel event, not scroll, as scroll is
         // fired when the view scrolls down for a new message.
-        window.addEventListener('wheel', this._onUserActivity.bind(this),
+        window.addEventListener('wheel', this._onUserActivity,
                                 { passive: true, capture: true });
-        this.lastActivityAtTs = new Date().getTime();
-        this.lastDispatchAtTs = 0;
-        this.activityEndTimer = undefined;
     }
 
     /**
@@ -50,8 +91,12 @@ class UserActivity {
         document.onmousedown = undefined;
         document.onmousemove = undefined;
         document.onkeydown = undefined;
-        window.removeEventListener('wheel', this._onUserActivity.bind(this),
+        window.removeEventListener('wheel', this._onUserActivity,
                                    { passive: true, capture: true });
+
+        document.removeEventListener("visibilitychange", this._onPageVisibilityChanged);
+        document.removeEventListener("blur", this._onDocumentBlurred);
+        document.removeEventListener("focus", this._onUserActivity);
     }
 
     /**
@@ -60,10 +105,22 @@ class UserActivity {
      * @returns {boolean} true if user is currently/very recently active
      */
     userCurrentlyActive() {
-        return this.lastActivityAtTs > new Date().getTime() - CURRENTLY_ACTIVE_THRESHOLD_MS;
+        return this._activityTimeout.isRunning();
     }
 
-    _onUserActivity(event) {
+    _onPageVisibilityChanged(e) {
+        if (document.visibilityState === "hidden") {
+            this._activityTimeout.abort();
+        } else {
+            this._onUserActivity(e);
+        }
+    }
+
+    _onDocumentBlurred() {
+        this._activityTimeout.abort();
+    }
+
+    async _onUserActivity(event) {
         if (event.screenX && event.type === "mousemove") {
             if (event.screenX === this.lastScreenX && event.screenY === this.lastScreenY) {
                 // mouse hasn't actually moved
@@ -73,30 +130,20 @@ class UserActivity {
             this.lastScreenY = event.screenY;
         }
 
-        this.lastActivityAtTs = new Date().getTime();
-        if (this.lastDispatchAtTs < this.lastActivityAtTs - MIN_DISPATCH_INTERVAL_MS) {
-            this.lastDispatchAtTs = this.lastActivityAtTs;
-            dis.dispatch({
-                action: 'user_activity',
-            });
-            if (!this.activityEndTimer) {
-                this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), MIN_DISPATCH_INTERVAL_MS);
-            }
-        }
-    }
-
-    _onActivityEndTimer() {
-        const now = new Date().getTime();
-        const targetTime = this.lastActivityAtTs + MIN_DISPATCH_INTERVAL_MS;
-        if (now >= targetTime) {
-            dis.dispatch({
-                action: 'user_activity_end',
-            });
-            this.activityEndTimer = undefined;
+        dis.dispatch({action: 'user_activity'});
+        if (!this._activityTimeout.isRunning()) {
+            this._activityTimeout.start();
+            dis.dispatch({action: 'user_activity_start'});
+            this._attachedTimers.forEach((t) => t.start());
+            try {
+                await this._activityTimeout.finished();
+            } catch (_e) { /* aborted */ }
+            this._attachedTimers.forEach((t) => t.abort());
         } else {
-            this.activityEndTimer = setTimeout(this._onActivityEndTimer.bind(this), targetTime - now);
+            this._activityTimeout.restart();
         }
     }
 }
 
+
 module.exports = new UserActivity();

src/WhoIsTyping.js

@@ -63,16 +63,16 @@ module.exports = {
         if (whoIsTyping.length == 0) {
             return '';
         } else if (whoIsTyping.length == 1) {
-            return _t('%(displayName)s is typing', {displayName: whoIsTyping[0].name});
+            return _t('%(displayName)s is typing …', {displayName: whoIsTyping[0].name});
         }
         const names = whoIsTyping.map(function(m) {
             return m.name;
         });
         if (othersCount>=1) {
-            return _t('%(names)s and %(count)s others are typing', {names: names.slice(0, limit - 1).join(', '), count: othersCount});
+            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});
+            return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
         }
     },
 };

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import { scorePassword } from '../../../../utils/PasswordScorer';
 
 import FileSaver from 'file-saver';
 
-import { _t, _td } from '../../../../languageHandler';
+import { _t } from '../../../../languageHandler';
 
 const PHASE_PASSPHRASE = 0;
 const PHASE_PASSPHRASE_CONFIRM = 1;
@@ -32,6 +32,7 @@ const PHASE_DONE = 5;
 const PHASE_OPTOUT_CONFIRM = 6;
 
 const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
+const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
 
 // XXX: copied from ShareDialog: factor out into utils
 function selectText(target) {
@@ -63,6 +64,13 @@ export default React.createClass({
     componentWillMount: function() {
         this._recoveryKeyNode = null;
         this._keyBackupInfo = null;
+        this._setZxcvbnResultTimeout = null;
+    },
+
+    componentWillUnmount: function() {
+        if (this._setZxcvbnResultTimeout !== null) {
+            clearTimeout(this._setZxcvbnResultTimeout);
+        }
     },
 
     _collectRecoveryKeyNode: function(n) {
@@ -102,7 +110,7 @@ export default React.createClass({
             info = await MatrixClientPeg.get().createKeyBackupVersion(
                 this._keyBackupInfo,
             );
-            await MatrixClientPeg.get().backupAllGroupSessions(info.version);
+            await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
             this.setState({
                 phase: PHASE_DONE,
             });
@@ -150,9 +158,23 @@ export default React.createClass({
         this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
     },
 
-    _onPassPhraseKeyPress: function(e) {
-        if (e.key === 'Enter' && this._passPhraseIsValid()) {
-            this._onPassPhraseNextClick();
+    _onPassPhraseKeyPress: async function(e) {
+        if (e.key === 'Enter') {
+            // If we're waiting for the timeout before updating the result at this point,
+            // skip ahead and do it now, otherwise we'll deny the attempt to proceed
+            // even if the user entered a valid passphrase
+            if (this._setZxcvbnResultTimeout !== null) {
+                clearTimeout(this._setZxcvbnResultTimeout);
+                this._setZxcvbnResultTimeout = null;
+                await new Promise((resolve) => {
+                    this.setState({
+                        zxcvbnResult: scorePassword(this.state.passPhrase),
+                    }, resolve);
+                });
+            }
+            if (this._passPhraseIsValid()) {
+                this._onPassPhraseNextClick();
+            }
         }
     },
 
@@ -177,10 +199,11 @@ export default React.createClass({
             passPhrase: '',
             passPhraseConfirm: '',
             phase: PHASE_PASSPHRASE,
+            zxcvbnResult: null,
         });
     },
 
-    _onKeepItSafeGotItClick: function() {
+    _onKeepItSafeBackClick: function() {
         this.setState({
             phase: PHASE_SHOWKEY,
         });
@@ -189,11 +212,20 @@ export default React.createClass({
     _onPassPhraseChange: function(e) {
         this.setState({
             passPhrase: e.target.value,
-            // precompute this and keep it in state: zxcvbn is fast but
-            // we use it in a couple of different places so no point recomputing
-            // it unnecessarily.
-            zxcvbnResult: scorePassword(e.target.value),
         });
+
+        if (this._setZxcvbnResultTimeout !== null) {
+            clearTimeout(this._setZxcvbnResultTimeout);
+        }
+        this._setZxcvbnResultTimeout = setTimeout(() => {
+            this._setZxcvbnResultTimeout = null;
+            this.setState({
+                // precompute this and keep it in state: zxcvbn is fast but
+                // we use it in a couple of different places so no point recomputing
+                // it unnecessarily.
+                zxcvbnResult: scorePassword(this.state.passPhrase),
+            });
+        }, PASSPHRASE_FEEDBACK_DELAY);
     },
 
     _onPassPhraseConfirmChange: function(e) {
@@ -220,9 +252,7 @@ export default React.createClass({
                 for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
                     suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
                 }
-                const suggestionBlock = suggestions.length > 0 ? <div>
-                    {suggestions}
-                </div> : null;
+                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
 
                 helpText = <div>
                     {this.state.zxcvbnResult.feedback.warning}
@@ -246,6 +276,7 @@ export default React.createClass({
                         value={this.state.passPhrase}
                         className="mx_CreateKeyBackupDialog_passPhraseInput"
                         placeholder={_t("Enter a passphrase...")}
+                        autoFocus={true}
                     />
                     <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
                         {strengthMeter}
@@ -294,14 +325,22 @@ export default React.createClass({
     _renderPhasePassPhraseConfirm: function() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+        let matchText;
+        if (this.state.passPhraseConfirm === this.state.passPhrase) {
+            matchText = _t("That matches!");
+        } else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
+            // only tell them they're wrong if they've actually gone wrong.
+            // Security concious readers will note that if you left riot-web unattended
+            // on this screen, this would make it easy for a malicious person to guess
+            // your passphrase one letter at a time, but they could get this faster by
+            // just opening the browser's developer tools and reading it.
+            // Note that not having typed anything at all will not hit this clause and
+            // fall through so empty box === no hint.
+            matchText = _t("That doesn't match.");
+        }
+
         let passPhraseMatch = null;
-        if (this.state.passPhraseConfirm.length > 0) {
-            let matchText;
-            if (this.state.passPhraseConfirm === this.state.passPhrase) {
-                matchText = _t("That matches!");
-            } else {
-                matchText = _t("That doesn't match.");
-            }
+        if (matchText) {
             passPhraseMatch = <div className="mx_CreateKeyBackupDialog_passPhraseMatch">
                 <div>{matchText}</div>
                 <div>
@@ -342,11 +381,12 @@ export default React.createClass({
     },
 
     _renderPhaseShowKey: function() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-
         let bodyText;
         if (this.state.setPassPhrase) {
-            bodyText = _t("As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.");
+            bodyText = _t(
+                "As a safety net, you can use it to restore your encrypted message " +
+                "history if you forget your Recovery Passphrase.",
+            );
         } else {
             bodyText = _t("As a safety net, you can use it to restore your encrypted message history.");
         }
@@ -354,7 +394,7 @@ export default React.createClass({
         return <div>
             <p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
             <p>{bodyText}</p>
-            <p className="mx_CreateKeyBackupDialog_primaryContainer">
+            <div className="mx_CreateKeyBackupDialog_primaryContainer">
                 <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
                     {_t("Your Recovery Key")}
                 </div>
@@ -371,13 +411,7 @@ export default React.createClass({
                         </button>
                     </div>
                 </div>
-            </p>
-            <br />
-            <DialogButtons primaryButton={_t("I've made a copy")}
-                onPrimaryButtonClick={this._createBackup}
-                hasCancel={false}
-                disabled={!this.state.copied && !this.state.downloaded}
-            />
+            </div>
         </div>;
     },
 
@@ -402,17 +436,17 @@ export default React.createClass({
                 <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
                 <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
             </ul>
-            <DialogButtons primaryButton={_t("Got it")}
-                onPrimaryButtonClick={this._onKeepItSafeGotItClick}
-                hasCancel={false}
-            />
+            <DialogButtons primaryButton={_t("OK")}
+                onPrimaryButtonClick={this._createBackup}
+                hasCancel={false}>
+                <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
+            </DialogButtons>
         </div>;
     },
 
     _renderBusyPhase: function(text) {
         const Spinner = sdk.getComponent('views.elements.Spinner');
         return <div>
-            <p>{_t(text)}</p>
             <Spinner />
         </div>;
     },
@@ -420,8 +454,10 @@ export default React.createClass({
     _renderPhaseDone: function() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-            <p>{_t("Backup created")}</p>
-            <p>{_t("Your encryption keys are now being backed up to your Homeserver.")}</p>
+            <p>{_t(
+                "Your encryption keys are now being backed up in the background " +
+                "to your Homeserver. The initial backup could take several minutes. " +
+                "You can view key backup upload progress in Settings.")}</p>
             <DialogButtons primaryButton={_t('Close')}
                 onPrimaryButtonClick={this._onDone}
                 hasCancel={false}
@@ -458,7 +494,9 @@ export default React.createClass({
             case PHASE_KEEPITSAFE:
                 return _t('Keep it safe');
             case PHASE_BACKINGUP:
-                return _t('Backing up...');
+                return _t('Starting backup...');
+            case PHASE_DONE:
+                return _t('Backup Started');
             default:
                 return _t("Create Key Backup");
         }
@@ -495,7 +533,7 @@ export default React.createClass({
                     content = this._renderPhaseKeepItSafe();
                     break;
                 case PHASE_BACKINGUP:
-                    content = this._renderBusyPhase(_td("Backing up..."));
+                    content = this._renderBusyPhase();
                     break;
                 case PHASE_DONE:
                     content = this._renderPhaseDone();
@@ -510,7 +548,7 @@ export default React.createClass({
             <BaseDialog className='mx_CreateKeyBackupDialog'
                 onFinished={this.props.onFinished}
                 title={this._titleForPhase(this.state.phase)}
-                hasCancel={[PHASE_DONE].includes(this.state.phase)}
+                hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
             >
             <div>
                 {content}

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018-2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,9 +24,15 @@ import Modal from "../../../../Modal";
 
 export default class NewRecoveryMethodDialog extends React.PureComponent {
     static propTypes = {
+        // As returned by js-sdk getKeyBackupVersion()
+        newVersionInfo: PropTypes.object,
         onFinished: PropTypes.func.isRequired,
     }
 
+    onOkClick = () => {
+        this.props.onFinished();
+    }
+
     onGoToSettingsClick = () => {
         this.props.onFinished();
         dis.dispatch({ action: 'view_user_settings' });
@@ -41,8 +47,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
         // sending our own new keys to it.
         let backupSigStatus;
         try {
-            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
-            backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo);
+            backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(this.props.newVersionInfo);
         } catch (e) {
             console.log("Unable to fetch key backup status", e);
             return;
@@ -71,39 +76,62 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
     render() {
         const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
         const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
-        const title = <span className="mx_NewRecoveryMethodDialog_title">
+
+        const title = <span className="mx_KeyBackupFailedDialog_title">
             {_t("New Recovery Method")}
         </span>;
 
+        const newMethodDetected = <p>{_t(
+            "A new recovery passphrase and key for Secure " +
+            "Messages have been detected.",
+        )}</p>;
+
+        const hackWarning = <p className="warning">{_t(
+            "If you didn't set the new recovery method, an " +
+            "attacker may be trying to access your account. " +
+            "Change your account password and set a new recovery " +
+            "method immediately in Settings.",
+        )}</p>;
+
+        let content;
+        if (MatrixClientPeg.get().getKeyBackupEnabled()) {
+            content = <div>
+                {newMethodDetected}
+                <p>{_t(
+                    "This device is encrypting history using the new recovery method.",
+                )}</p>
+                {hackWarning}
+                <DialogButtons
+                    primaryButton={_t("OK")}
+                    onPrimaryButtonClick={this.onOkClick}
+                    cancelButton={_t("Go to Settings")}
+                    onCancel={this.onGoToSettingsClick}
+                />
+            </div>;
+        } else {
+            content = <div>
+                {newMethodDetected}
+                <p>{_t(
+                    "Setting up Secure Messages on this device " +
+                    "will re-encrypt this device's message history with " +
+                    "the new recovery method.",
+                )}</p>
+                {hackWarning}
+                <DialogButtons
+                    primaryButton={_t("Set up Secure Messages")}
+                    onPrimaryButtonClick={this.onSetupClick}
+                    cancelButton={_t("Go to Settings")}
+                    onCancel={this.onGoToSettingsClick}
+                />
+            </div>;
+        }
+
         return (
-            <BaseDialog className="mx_NewRecoveryMethodDialog"
+            <BaseDialog className="mx_KeyBackupFailedDialog"
                 onFinished={this.props.onFinished}
                 title={title}
-                hasCancel={false}
             >
-                <div>
-                    <p>{_t(
-                        "A new recovery passphrase and key for Secure " +
-                        "Messages has been detected.",
-                    )}</p>
-                    <p>{_t(
-                        "Setting up Secure Messages on this device " +
-                        "will re-encrypt this device's message history with " +
-                        "the new recovery method.",
-                    )}</p>
-                    <p className="warning">{_t(
-                        "If you didn't set the new recovery method, an " +
-                        "attacker may be trying to access your account. " +
-                        "Change your account password and set a new recovery " +
-                        "method immediately in Settings.",
-                    )}</p>
-                    <DialogButtons
-                        primaryButton={_t("Set up Secure Messages")}
-                        onPrimaryButtonClick={this.onSetupClick}
-                        cancelButton={_t("Go to Settings")}
-                        onCancel={this.onGoToSettingsClick}
-                    />
-                </div>
+                {content}
             </BaseDialog>
         );
     }

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

@@ -0,0 +1,80 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import PropTypes from "prop-types";
+import sdk from "../../../../index";
+import dis from "../../../../dispatcher";
+import { _t } from "../../../../languageHandler";
+import Modal from "../../../../Modal";
+
+export default class RecoveryMethodRemovedDialog extends React.PureComponent {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    onGoToSettingsClick = () => {
+        this.props.onFinished();
+        dis.dispatch({ action: 'view_user_settings' });
+    }
+
+    onSetupClick = () => {
+        this.props.onFinished();
+        Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
+            import("./CreateKeyBackupDialog"),
+        );
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
+
+        const title = <span className="mx_KeyBackupFailedDialog_title">
+            {_t("Recovery Method Removed")}
+        </span>;
+
+        return (
+            <BaseDialog className="mx_KeyBackupFailedDialog"
+                onFinished={this.props.onFinished}
+                title={title}
+            >
+                <div>
+                    <p>{_t(
+                        "This device has detected that your recovery passphrase and key " +
+                        "for Secure Messages have been removed.",
+                    )}</p>
+                    <p>{_t(
+                        "If you did this accidentally, you can setup Secure Messages on " +
+                        "this device which will re-encrypt this device's message " +
+                        "history with a new recovery method.",
+                    )}</p>
+                    <p className="warning">{_t(
+                        "If you didn't remove the recovery method, an " +
+                        "attacker may be trying to access your account. " +
+                        "Change your account password and set a new recovery " +
+                        "method immediately in Settings.",
+                    )}</p>
+                    <DialogButtons
+                        primaryButton={_t("Set up Secure Messages")}
+                        onPrimaryButtonClick={this.onSetupClick}
+                        cancelButton={_t("Go to Settings")}
+                        onCancel={this.onGoToSettingsClick}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

src/autocomplete/AutocompleteProvider.js

@@ -41,8 +41,12 @@ export default class AutocompleteProvider {
 
     /**
      * Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
+     * @param {string} query The query string
+     * @param {SelectionRange} selection Selection to search
+     * @param {boolean} force True if the user is forcing completion
+     * @return {object} { command, range } where both objects fields are null if no match
      */
-    getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false): ?string {
+    getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false) {
         let commandRegex = this.commandRegex;
 
         if (force && this.shouldForceComplete()) {

src/autocomplete/Autocompleter.js

@@ -60,8 +60,8 @@ const PROVIDER_COMPLETION_TIMEOUT = 3000;
 export default class Autocompleter {
     constructor(room: Room) {
         this.room = room;
-        this.providers = PROVIDERS.map((p) => {
-            return new p(room);
+        this.providers = PROVIDERS.map((Prov) => {
+            return new Prov(room);
         });
     }
 

src/autocomplete/EmojiProvider.js

@@ -97,7 +97,7 @@ export default class EmojiProvider extends AutocompleteProvider {
     }
 
     async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
-        if (SettingsStore.getValue("MessageComposerInput.dontSuggestEmoji")) {
+        if (!SettingsStore.getValue("MessageComposerInput.suggestEmoji")) {
             return []; // don't give any suggestions if the user doesn't want them
         }
 

src/autocomplete/UserProvider.js

@@ -41,7 +41,7 @@ export default class UserProvider extends AutocompleteProvider {
     users: Array<RoomMember> = null;
     room: Room = null;
 
-    constructor(room) {
+    constructor(room: Room) {
         super(USER_REGEX, FORCED_USER_REGEX);
         this.room = room;
         this.matcher = new QueryMatcher([], {

src/components/structures/AutoHideScrollbar.js

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

src/components/structures/BottomLeftMenu.js

@@ -170,7 +170,7 @@ module.exports = React.createClass({
         const SettingsButton = sdk.getComponent('elements.SettingsButton');
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
 
-        const groupsButton = SettingsStore.getValue("TagPanel.disableTagPanel") ?
+        const groupsButton = !SettingsStore.getValue("TagPanel.enableTagPanel") ?
             <GroupsButton tooltip={true} /> : null;
 
         return (

src/components/structures/CompatibilityPage.js

@@ -41,10 +41,15 @@ module.exports = React.createClass({
             <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.") }
+                { _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.',
+                { _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>,
@@ -60,7 +65,12 @@ module.exports = React.createClass({
                 )}
                 </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!") }
+                { _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") }

src/components/structures/ContextualMenu.js

@@ -49,7 +49,7 @@ export default class ContextualMenu extends React.Component {
         menuHeight: PropTypes.number,
         chevronOffset: PropTypes.number,
         menuColour: PropTypes.string,
-        chevronFace: PropTypes.string, // top, bottom, left, right
+        chevronFace: PropTypes.string, // top, bottom, left, right or none
         // Function to be called on menu close
         onFinished: PropTypes.func,
         menuPaddingTop: PropTypes.number,
@@ -113,7 +113,6 @@ export default class ContextualMenu extends React.Component {
     render() {
         const position = {};
         let chevronFace = null;
-
         const props = this.props;
 
         if (props.top) {
@@ -137,6 +136,8 @@ export default class ContextualMenu extends React.Component {
         if (props.chevronFace) {
             chevronFace = props.chevronFace;
         }
+        const hasChevron = chevronFace && chevronFace !== "none";
+
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
         } else {
@@ -174,11 +175,14 @@ export default class ContextualMenu extends React.Component {
             `;
         }
 
-        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />;
+        const chevron = hasChevron ?
+            <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} /> :
+            undefined;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
             'mx_ContextualMenu': true,
+            'mx_ContextualMenu_noChevron': chevronFace === 'none',
             'mx_ContextualMenu_left': chevronFace === 'left',
             'mx_ContextualMenu_right': chevronFace === 'right',
             'mx_ContextualMenu_top': chevronFace === 'top',

src/components/structures/CreateRoom.js

@@ -1,284 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { _t } from '../../languageHandler';
-import sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
-const PresetValues = {
-    PrivateChat: "private_chat",
-    PublicChat: "public_chat",
-    Custom: "custom",
-};
-
-module.exports = React.createClass({
-    displayName: 'CreateRoom',
-
-    propTypes: {
-        onRoomCreated: PropTypes.func,
-        collapsedRhs: PropTypes.bool,
-    },
-
-    phases: {
-        CONFIG: "CONFIG", // We're waiting for user to configure and hit create.
-        CREATING: "CREATING", // We're sending the request.
-        CREATED: "CREATED", // We successfully created the room.
-        ERROR: "ERROR", // There was an error while trying to create room.
-    },
-
-    getDefaultProps: function() {
-        return {
-            onRoomCreated: function() {},
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            phase: this.phases.CONFIG,
-            error_string: "",
-            is_private: true,
-            share_history: false,
-            default_preset: PresetValues.PrivateChat,
-            topic: '',
-            room_name: '',
-            invited_users: [],
-        };
-    },
-
-    onCreateRoom: function() {
-        const options = {};
-
-        if (this.state.room_name) {
-            options.name = this.state.room_name;
-        }
-
-        if (this.state.topic) {
-            options.topic = this.state.topic;
-        }
-
-        if (this.state.preset) {
-            if (this.state.preset != PresetValues.Custom) {
-                options.preset = this.state.preset;
-            } else {
-                options.initial_state = [
-                    {
-                        type: "m.room.join_rules",
-                        content: {
-                            "join_rule": this.state.is_private ? "invite" : "public",
-                        },
-                    },
-                    {
-                        type: "m.room.history_visibility",
-                        content: {
-                            "history_visibility": this.state.share_history ? "shared" : "invited",
-                        },
-                    },
-                ];
-            }
-        }
-
-        options.invite = this.state.invited_users;
-
-        const alias = this.getAliasLocalpart();
-        if (alias) {
-            options.room_alias_name = alias;
-        }
-
-        const cli = MatrixClientPeg.get();
-        if (!cli) {
-            // TODO: Error.
-            console.error("Cannot create room: No matrix client.");
-            return;
-        }
-
-        const deferred = cli.createRoom(options);
-
-        if (this.state.encrypt) {
-            // TODO
-        }
-
-        this.setState({
-            phase: this.phases.CREATING,
-        });
-
-        const self = this;
-
-        deferred.then(function(resp) {
-            self.setState({
-                phase: self.phases.CREATED,
-            });
-            self.props.onRoomCreated(resp.room_id);
-        }, function(err) {
-            self.setState({
-                phase: self.phases.ERROR,
-                error_string: err.toString(),
-            });
-        });
-    },
-
-    getPreset: function() {
-        return this.refs.presets.getPreset();
-    },
-
-    getName: function() {
-        return this.refs.name_textbox.getName();
-    },
-
-    getTopic: function() {
-        return this.refs.topic.getTopic();
-    },
-
-    getAliasLocalpart: function() {
-        return this.refs.alias.getAliasLocalpart();
-    },
-
-    getInvitedUsers: function() {
-        return this.refs.user_selector.getUserIds();
-    },
-
-    onPresetChanged: function(preset) {
-        switch (preset) {
-            case PresetValues.PrivateChat:
-                this.setState({
-                    preset: preset,
-                    is_private: true,
-                    share_history: false,
-                });
-                break;
-            case PresetValues.PublicChat:
-                this.setState({
-                    preset: preset,
-                    is_private: false,
-                    share_history: true,
-                });
-                break;
-            case PresetValues.Custom:
-                this.setState({
-                    preset: preset,
-                });
-                break;
-        }
-    },
-
-    onPrivateChanged: function(ev) {
-        this.setState({
-            preset: PresetValues.Custom,
-            is_private: ev.target.checked,
-        });
-    },
-
-    onShareHistoryChanged: function(ev) {
-        this.setState({
-            preset: PresetValues.Custom,
-            share_history: ev.target.checked,
-        });
-    },
-
-    onTopicChange: function(ev) {
-        this.setState({
-            topic: ev.target.value,
-        });
-    },
-
-    onNameChange: function(ev) {
-        this.setState({
-            room_name: ev.target.value,
-        });
-    },
-
-    onInviteChanged: function(invited_users) {
-        this.setState({
-            invited_users: invited_users,
-        });
-    },
-
-    onAliasChanged: function(alias) {
-        this.setState({
-            alias: alias,
-        });
-    },
-
-    onEncryptChanged: function(ev) {
-        this.setState({
-            encrypt: ev.target.checked,
-        });
-    },
-
-    render: function() {
-        const curr_phase = this.state.phase;
-        if (curr_phase == this.phases.CREATING) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <Loader />
-            );
-        } else {
-            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}) }
-                    </div>
-                );
-            }
-
-            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");
-
-            const domain = MatrixClientPeg.get().getDomain();
-
-            return (
-            <div className="mx_CreateRoom">
-                <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 />
-                    <div>
-                        <label>
-                            <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') }
-                        </label>
-                    </div>
-                    <div className="mx_CreateRoom_encrypt">
-                        <label>
-                            <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 }
-                </div>
-            </div>
-            );
-        }
-    },
-});

src/components/structures/GroupView.js

@@ -24,6 +24,9 @@ import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
+import GroupHeaderButtons from '../views/right_panel/GroupHeaderButtons';
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import Modal from '../../Modal';
 import classnames from 'classnames';
 
@@ -122,7 +125,7 @@ const CategoryRoomList = React.createClass({
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -223,7 +226,7 @@ const FeaturedRoom = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -297,7 +300,7 @@ const RoleUserList = React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                 <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                  <div className="mx_GroupView_featuredThings_addButton_label">
                      { _t('Add a User') }
                  </div>
@@ -376,7 +379,7 @@ const FeaturedUser = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -852,7 +855,7 @@ export default React.createClass({
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
+                    <TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1186,7 +1189,7 @@ export default React.createClass({
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                                <img src="img/camera.svg"
+                                <img src={require("../../../res/img/camera.svg")}
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
@@ -1252,7 +1255,7 @@ export default React.createClass({
                 );
                 rightButtons.push(
                     <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
-                        <img src="img/cancel.svg" className="mx_filterFlipColor"
+                        <img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
                             width="18" height="18" alt={_t("Cancel")} />
                     </AccessibleButton>,
                 );
@@ -1262,34 +1265,28 @@ export default React.createClass({
                         <AccessibleButton className="mx_GroupHeader_button"
                             onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
                         >
-                            <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
+                            <TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
                         </AccessibleButton>,
                     );
                 }
                 rightButtons.push(
                     <AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
-                        <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                        <TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
                     </AccessibleButton>,
                 );
-                if (this.props.collapsedRhs) {
-                    rightButtons.push(
-                        <AccessibleButton className="mx_GroupHeader_button"
-                            onClick={this._onShowRhsClick} title={_t('Show panel')} key="_maximiseButton"
-                        >
-                            <TintableSvg src="img/maximise.svg" width="10" height="16" />
-                        </AccessibleButton>,
-                    );
-                }
             }
 
+            const rightPanel = !this.props.collapsedRhs ? <RightPanel groupId={this.props.groupId} /> : undefined;
+
             const headerClasses = {
-                mx_GroupView_header: true,
-                mx_GroupView_header_view: !this.state.editing,
-                mx_GroupView_header_isUserMember: this.state.isUserMember,
+                "mx_GroupView_header": true,
+                "light-panel": true,
+                "mx_GroupView_header_view": !this.state.editing,
+                "mx_GroupView_header_isUserMember": this.state.isUserMember,
             };
 
             return (
-                <div className="mx_GroupView">
+                <main className="mx_GroupView">
                     <div className={classnames(headerClasses)}>
                         <div className="mx_GroupView_header_leftCol">
                             <div className="mx_GroupView_header_avatar">
@@ -1307,12 +1304,15 @@ export default React.createClass({
                         <div className="mx_GroupView_header_rightCol">
                             { rightButtons }
                         </div>
+                        <GroupHeaderButtons collapsedRhs={this.props.collapsedRhs} />
                     </div>
-                    <GeminiScrollbarWrapper className="mx_GroupView_body">
-                        { this._getMembershipSection() }
-                        { this._getGroupSection() }
-                    </GeminiScrollbarWrapper>
-                </div>
+                    <MainSplit collapsedRhs={this.props.collapsedRhs} panel={rightPanel}>
+                        <GeminiScrollbarWrapper className="mx_GroupView_body">
+                            { this._getMembershipSection() }
+                            { this._getGroupSection() }
+                        </GeminiScrollbarWrapper>
+                    </MainSplit>
+                </main>
             );
         } else if (this.state.error) {
             if (this.state.error.httpStatus === 404) {

src/components/structures/HomePage.js

@@ -30,11 +30,6 @@ 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,
     };
@@ -56,46 +51,44 @@ class HomePage extends React.Component {
     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.
+        // 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.
 
-            const src = this.props.homePageUrl || 'home.html';
+        const src = this.props.homePageUrl || 'home.html';
 
-            request(
-                { method: "GET", url: src },
-                (err, response, body) => {
-                    if (this._unmounted) {
-                        return;
-                    }
+        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;
-                    }
+                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 });
-                },
-            );
-        }
+                body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
+                this.setState({ page: body });
+            },
+        );
     }
 
     componentWillUnmount() {
         this._unmounted = true;
     }
 
-    onLoginClick() {
+    onLoginClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
         dis.dispatch({ action: 'start_login' });
     }
 
-    onRegisterClick() {
+    onRegisterClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
         dis.dispatch({ action: 'start_registration' });
     }
 
@@ -104,7 +97,7 @@ class HomePage extends React.Component {
         if (this.context.matrixClient.isGuest()) {
             guestWarning = (
                 <div className="mx_HomePage_guest_warning">
-                    <img src="img/warning.svg" width="24" height="23" />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" />
                     <div>
                         <div>
                             { _t("You are currently using Riot anonymously as a guest.") }

src/components/structures/IndicatorScrollbar.js

@@ -0,0 +1,77 @@
+/*
+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 AutoHideScrollbar from "./AutoHideScrollbar";
+
+export default class IndicatorScrollbar extends React.Component {
+    constructor(props) {
+        super(props);
+        this._collectScroller = this._collectScroller.bind(this);
+        this._collectScrollerComponent = this._collectScrollerComponent.bind(this);
+        this.checkOverflow = this.checkOverflow.bind(this);
+        this._scrollElement = null;
+        this._autoHideScrollbar = null;
+    }
+
+    _collectScroller(scroller) {
+        if (scroller && !this._scrollElement) {
+            this._scrollElement = scroller;
+            this._scrollElement.addEventListener("scroll", this.checkOverflow);
+            this.checkOverflow();
+        }
+    }
+
+    _collectScrollerComponent(autoHideScrollbar) {
+        this._autoHideScrollbar = autoHideScrollbar;
+    }
+
+    checkOverflow() {
+        const hasTopOverflow = this._scrollElement.scrollTop > 0;
+        const hasBottomOverflow = this._scrollElement.scrollHeight >
+            (this._scrollElement.scrollTop + this._scrollElement.clientHeight);
+        if (hasTopOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_topOverflow");
+        }
+        if (hasBottomOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_bottomOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow");
+        }
+
+        if (this._autoHideScrollbar) {
+            this._autoHideScrollbar.checkOverflow();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this._scrollElement) {
+            this._scrollElement.removeEventListener("scroll", this.checkOverflow);
+        }
+    }
+
+    render() {
+        return (<AutoHideScrollbar
+            ref={this._collectScrollerComponent}
+            wrappedRef={this._collectScroller}
+            {... this.props}
+        >
+            { this.props.children }
+        </AutoHideScrollbar>);
+    }
+}

src/components/structures/InteractiveAuth.js

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
+import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
 
 export default React.createClass({
     displayName: 'InteractiveAuth',

src/components/structures/LeftPanel.js

@@ -151,8 +151,7 @@ const LeftPanel = React.createClass({
             }
         } while (element && !(
             classes.contains("mx_RoomTile") ||
-            classes.contains("mx_SearchBox_search") ||
-            classes.contains("mx_RoomSubList_ellipsis")));
+            classes.contains("mx_textinput_search")));
 
         if (element) {
             element.focus();
@@ -171,6 +170,12 @@ const LeftPanel = React.createClass({
         this.setState({ searchFilter: term });
     },
 
+    onSearchCleared: function(source) {
+        if (source === "keyboard") {
+            dis.dispatch({action: 'focus_composer'});
+        }
+    },
+
     collectRoomList: function(ref) {
         this._roomList = ref;
     },
@@ -178,46 +183,43 @@ const LeftPanel = React.createClass({
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
         const TagPanel = sdk.getComponent('structures.TagPanel');
-        const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
+        const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
+        const SearchBox = sdk.getComponent('structures.SearchBox');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const 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 tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
         const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
 
         const containerClasses = classNames(
             "mx_LeftPanel_container", "mx_fadable",
             {
-                "mx_LeftPanel_container_collapsed": this.props.collapsed,
+                "collapsed": this.props.collapsed,
                 "mx_LeftPanel_container_hasTagPanel": tagPanelEnabled,
                 "mx_fadable_faded": this.props.disabled,
             },
         );
 
+        const searchBox = !this.props.collapsed ?
+            <SearchBox onSearch={ this.onSearch } onCleared={ this.onSearchCleared } /> :
+            undefined;
+
         return (
             <div className={containerClasses}>
                 { tagPanel }
-                <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
-                    { topBox }
+                <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                    <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
+                        toolbarShown={this.props.toolbarShown}
                         collapsed={this.props.collapsed}
                         searchFilter={this.state.searchFilter}
                         ConferenceHandler={VectorConferenceHandler} />
-                    <BottomLeftMenu collapsed={this.props.collapsed} />
                 </aside>
             </div>
         );
+        // <BottomLeftMenu collapsed={this.props.collapsed}/>
     },
 });
 

src/components/structures/LoggedInView.js

@@ -34,7 +34,8 @@ import RoomListStore from "../../stores/RoomListStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
-
+import ResizeHandle from '../views/elements/ResizeHandle';
+import {Resizer, CollapseDistributor} from '../../resizer';
 // 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.
@@ -61,8 +62,7 @@ const LoggedInView = React.createClass({
         // Called with the credentials of a registered user (if they were a ROU that
         // transitioned to PWLU)
         onRegistered: PropTypes.func,
-
-        teamToken: PropTypes.string,
+        collapsedRhs: PropTypes.bool,
 
         // Used by the RoomView to handle joining rooms
         viaServers: PropTypes.arrayOf(PropTypes.string),
@@ -94,6 +94,12 @@ const LoggedInView = React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        this.resizer = this._createResizer();
+        this.resizer.attach();
+        this._loadResizerPreferences();
+    },
+
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
@@ -123,6 +129,7 @@ const LoggedInView = React.createClass({
         if (this._sessionStoreToken) {
             this._sessionStoreToken.remove();
         }
+        this.resizer.detach();
     },
 
     // Child components assume that the client peg will not be null, so give them some
@@ -148,6 +155,42 @@ const LoggedInView = React.createClass({
         });
     },
 
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const collapseConfig = {
+            toggleSize: 260 - 50,
+            onCollapsed: (collapsed) => {
+                this.setState({collapseLhs: collapsed});
+                if (collapsed) {
+                    window.localStorage.setItem("mx_lhs_size", '0');
+                }
+            },
+            onResized: (size) => {
+                window.localStorage.setItem("mx_lhs_size", '' + size);
+            },
+        };
+        const resizer = new Resizer(
+            this.resizeContainer,
+            CollapseDistributor,
+            collapseConfig);
+        resizer.setClassNames(classNames);
+        return resizer;
+    },
+
+    _loadResizerPreferences() {
+        let lhsSize = window.localStorage.getItem("mx_lhs_size");
+        if (lhsSize !== null) {
+            lhsSize = parseInt(lhsSize, 10);
+        } else {
+            lhsSize = 350;
+        }
+        this.resizer.forHandleAt(0).resize(lhsSize);
+    },
+
     onAccountData: function(event) {
         if (event.getType() === "im.vector.web.settings") {
             this.setState({
@@ -160,7 +203,11 @@ const LoggedInView = React.createClass({
     },
 
     onSync: function(syncState, oldSyncState, data) {
-        const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
+        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;
 
@@ -269,12 +316,13 @@ const LoggedInView = React.createClass({
         }
     },
 
-    /** dispatch a page-up/page-down/etc to the appropriate component */
+    /**
+     * dispatch a page-up/page-down/etc to the appropriate component
+     * @param {Object} ev The key event
+     */
     _onScrollKeyPressed: function(ev) {
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
-        } else if (this.refs.roomDirectory) {
-            this.refs.roomDirectory.handleScrollKey(ev);
         }
     },
 
@@ -364,13 +412,14 @@ const LoggedInView = React.createClass({
         this.setState({mouseDown: null});
     },
 
+    _setResizeContainerRef(div) {
+        this.resizeContainer = div;
+    },
+
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
-        const RightPanel = sdk.getComponent('structures.RightPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserSettings = sdk.getComponent('structures.UserSettings');
-        const CreateRoom = sdk.getComponent('structures.CreateRoom');
-        const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         const HomePage = sdk.getComponent('structures.HomePage');
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
@@ -381,12 +430,11 @@ const LoggedInView = React.createClass({
         const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
         const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
-        let page_element;
-        let right_panel = '';
+        let pageElement;
 
         switch (this.props.page_type) {
             case PageTypes.RoomView:
-                page_element = <RoomView
+                pageElement = <RoomView
                         ref='roomView'
                         autoJoin={this.props.autoJoin}
                         onRegistered={this.props.onRegistered}
@@ -396,70 +444,45 @@ const LoggedInView = React.createClass({
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
                         disabled={this.props.middleDisabled}
-                        collapsedRhs={this.props.collapseRhs}
+                        collapsedRhs={this.props.collapsedRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                     />;
-                if (!this.props.collapseRhs) {
-                    right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
-                }
                 break;
 
             case PageTypes.UserSettings:
-                page_element = <UserSettings
+                pageElement = <UserSettings
                     onClose={this.props.onCloseAllSettings}
                     brand={this.props.config.brand}
-                    referralBaseUrl={this.props.config.referralBaseUrl}
-                    teamToken={this.props.teamToken}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
 
             case PageTypes.MyGroups:
-                page_element = <MyGroups />;
-                break;
-
-            case PageTypes.CreateRoom:
-                page_element = <CreateRoom
-                    onRoomCreated={this.props.onRoomCreated}
-                    collapsedRhs={this.props.collapseRhs}
-                />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
+                pageElement = <MyGroups />;
                 break;
 
             case PageTypes.RoomDirectory:
-                page_element = <RoomDirectory
-                    ref="roomDirectory"
-                    config={this.props.config.roomDirectory}
-                />;
+                // handled by MatrixChat for now
                 break;
 
             case PageTypes.HomePage:
                 {
-                    // If team server config is present, pass the teamServerURL. props.teamToken
-                    // must also be set for the team page to be displayed, otherwise the
-                    // welcomePageUrl is used (which might be undefined).
-                    const teamServerUrl = this.props.config.teamServerConfig ?
-                        this.props.config.teamServerConfig.teamServerURL : null;
-
-                    page_element = <HomePage
-                        teamServerUrl={teamServerUrl}
-                        teamToken={this.props.teamToken}
+                    pageElement = <HomePage
                         homePageUrl={this.props.config.welcomePageUrl}
                     />;
                 }
                 break;
 
             case PageTypes.UserView:
-                page_element = null; // deliberately null for now
-                right_panel = <RightPanel disabled={this.props.rightDisabled} />;
+                pageElement = null; // deliberately null for now
+                // TODO: fix/remove UserView
+                // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
-                page_element = <GroupView
+                pageElement = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
-                    collapsedRhs={this.props.collapseRhs}
+                    collapsedRhs={this.props.collapsedRhs}
                 />;
-                if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
                 break;
         }
 
@@ -495,7 +518,10 @@ const LoggedInView = React.createClass({
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
         } else if (this.state.userHasGeneratedPassword) {
             topBar = <PasswordNagBar />;
-        } else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
+        } else if (
+            !isGuest && Notifier.supportsDesktopNotifications() &&
+            !Notifier.isEnabled() && !Notifier.isToolbarHidden()
+        ) {
             topBar = <MatrixToolbar />;
         }
 
@@ -511,15 +537,14 @@ const LoggedInView = React.createClass({
             <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
                 { topBar }
                 <DragDropContext onDragEnd={this._onDragEnd}>
-                    <div className={bodyClasses}>
+                    <div ref={this._setResizeContainerRef} className={bodyClasses}>
                         <LeftPanel
-                            collapsed={this.props.collapseLhs || false}
+                            toolbarShown={!!topBar}
+                            collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
                             disabled={this.props.leftDisabled}
                         />
-                        <main className='mx_MatrixChat_middlePanel'>
-                            { page_element }
-                        </main>
-                        { right_panel }
+                        <ResizeHandle />
+                        { pageElement }
                     </div>
                 </DragDropContext>
             </div>

src/components/structures/MainSplit.js

@@ -0,0 +1,101 @@
+/*
+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 ResizeHandle from '../views/elements/ResizeHandle';
+import {Resizer, FixedDistributor} from '../../resizer';
+
+export default class MainSplit extends React.Component {
+    constructor(props) {
+        super(props);
+        this._setResizeContainerRef = this._setResizeContainerRef.bind(this);
+        this._onResized = this._onResized.bind(this);
+    }
+
+    _onResized(size) {
+        window.localStorage.setItem("mx_rhs_size", size);
+    }
+
+    _createResizer() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        };
+        const resizer = new Resizer(
+            this.resizeContainer,
+            FixedDistributor,
+            {onResized: this._onResized},
+        );
+        resizer.setClassNames(classNames);
+        let rhsSize = window.localStorage.getItem("mx_rhs_size");
+        if (rhsSize !== null) {
+            rhsSize = parseInt(rhsSize, 10);
+        } else {
+            rhsSize = 350;
+        }
+        resizer.forHandleAt(0).resize(rhsSize);
+
+        resizer.attach();
+        this.resizer = resizer;
+    }
+
+    _setResizeContainerRef(div) {
+        this.resizeContainer = div;
+    }
+
+    componentDidMount() {
+        if (this.props.panel && !this.props.collapsedRhs) {
+            this._createResizer();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.resizer) {
+            this.resizer.detach();
+            this.resizer = null;
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs;
+        const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs;
+        const wasPanelSet = this.props.panel && !prevProps.panel;
+        const wasPanelCleared = !this.props.panel && prevProps.panel;
+
+        if (wasExpanded || wasPanelSet) {
+            this._createResizer();
+        } else if (wasCollapsed || wasPanelCleared) {
+            this.resizer.detach();
+            this.resizer = null;
+        }
+    }
+
+    render() {
+        const bodyView = React.Children.only(this.props.children);
+        const panelView = this.props.panel;
+
+        if (this.props.collapsedRhs || !panelView) {
+            return bodyView;
+        } else {
+            return <div className="mx_MainSplit" ref={this._setResizeContainerRef}>
+                { bodyView }
+                <ResizeHandle reverse={true} />
+                { panelView }
+            </div>;
+        }
+    }
+}

src/components/structures/MatrixChat.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017, 2018 New Vector Ltd
+Copyright 2017-2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -75,8 +75,8 @@ const VIEWS = {
     // we have valid matrix credentials (either via an explicit login, via the
     // initial re-animation/guest registration, or via a registration), and are
     // now setting up a matrixclient to talk to it. This isn't an instant
-    // process because (a) we need to clear out indexeddb, and (b) we need to
-    // talk to the team server; while it is going on we show a big spinner.
+    // process because we need to clear out indexeddb. While it is going on we
+    // show a big spinner.
     LOGGING_IN: 5,
 
     // we are logged in with an active matrix client.
@@ -163,7 +163,7 @@ export default React.createClass({
             viewUserId: null,
 
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true",
             leftDisabled: false,
             middleDisabled: false,
             rightDisabled: false,
@@ -183,7 +183,7 @@ export default React.createClass({
             register_is_url: null,
             register_id_sid: null,
 
-            // Parameters used for setting up the login/registration views
+            // Parameters used for setting up the authentication views
             defaultServerName: this.props.config.default_server_name,
             defaultHsUrl: this.props.config.default_hs_url,
             defaultIsUrl: this.props.config.default_is_url,
@@ -256,42 +256,6 @@ export default React.createClass({
             MatrixClientPeg.opts.initialSyncLimit = this.props.config.sync_timeline_limit;
         }
 
-        // To enable things like riot.im/geektime in a nicer way than rewriting the URL
-        // and appending a team token query parameter, use the first path segment to
-        // indicate a team, with "public" team tokens stored in the config teamTokenMap.
-        let routedTeamToken = null;
-        if (this.props.config.teamTokenMap) {
-            const teamName = window.location.pathname.split('/')[1];
-            if (teamName && this.props.config.teamTokenMap.hasOwnProperty(teamName)) {
-                routedTeamToken = this.props.config.teamTokenMap[teamName];
-            }
-        }
-
-        // Persist the team token across refreshes using sessionStorage. A new window or
-        // tab will not persist sessionStorage, but refreshes will.
-        if (this.props.startingFragmentQueryParams.team_token) {
-            window.sessionStorage.setItem(
-                'mx_team_token',
-                this.props.startingFragmentQueryParams.team_token,
-            );
-        }
-
-        // Use the locally-stored team token first, then as a fall-back, check to see if
-        // a referral link was used, which will contain a query parameter `team_token`.
-        this._teamToken = routedTeamToken ||
-            window.localStorage.getItem('mx_team_token') ||
-            window.sessionStorage.getItem('mx_team_token');
-
-        // Some users have ended up with "undefined" as their local storage team token,
-        // treat that as undefined.
-        if (this._teamToken === "undefined") {
-            this._teamToken = undefined;
-        }
-
-        if (this._teamToken) {
-            console.info(`Team token set to ${this._teamToken}`);
-        }
-
         // Set up the default URLs (async)
         if (this.getDefaultServerName() && !this.getDefaultHsUrl(false)) {
             this.setState({loadingDefaultHomeserver: true});
@@ -302,7 +266,10 @@ export default React.createClass({
             // will check their settings.
             this.setState({
                 defaultServerName: null, // To un-hide any secrets people might be keeping
-                defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
+                defaultServerDiscoveryError: _t(
+                    "Invalid configuration: Cannot supply a default homeserver URL and " +
+                    "a default server name",
+                ),
             });
         }
 
@@ -357,9 +324,6 @@ export default React.createClass({
             linkifyMatrix.onGroupClick = this.onGroupClick;
         }
 
-        const teamServerConfig = this.props.config.teamServerConfig || {};
-        Lifecycle.initRtsClient(teamServerConfig.teamServerURL);
-
         // the first thing to do is to try the token params in the query-string
         Lifecycle.attemptTokenLogin(this.props.realQueryParams).then((loggedIn) => {
             if (loggedIn) {
@@ -579,7 +543,7 @@ export default React.createClass({
                 break;
             case 'view_user':
                 // FIXME: ugly hack to expand the RightPanel and then re-dispatch.
-                if (this.state.collapseRhs) {
+                if (this.state.collapsedRhs) {
                     setTimeout(()=>{
                         dis.dispatch({
                             action: 'show_right_panel',
@@ -607,7 +571,17 @@ export default React.createClass({
             case 'view_indexed_room':
                 this._viewIndexedRoom(payload.roomIndex);
                 break;
-            case 'view_user_settings':
+            case 'view_user_settings': {
+                if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) {
+                    const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
+                    Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog');
+                } else {
+                    this._setPage(PageTypes.UserSettings);
+                    this.notifyNewScreen('settings');
+                }
+                break;
+            }
+            case 'view_old_user_settings':
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
@@ -640,10 +614,19 @@ export default React.createClass({
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
             }
             break;
-            case 'view_room_directory':
-                this._setPage(PageTypes.RoomDirectory);
-                this.notifyNewScreen('directory');
-                break;
+            case 'view_room_directory': {
+                const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
+                Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
+                    config: this.props.config,
+                }, 'mx_RoomDirectory_dialogWrapper');
+
+                // View the home page if we need something to look at
+                if (!this.state.currentGroupId && !this.state.currentRoomId) {
+                    this._setPage(PageTypes.HomePage);
+                    this.notifyNewScreen('home');
+                }
+            }
+            break;
             case 'view_my_groups':
                 this._setPage(PageTypes.MyGroups);
                 this.notifyNewScreen('groups');
@@ -680,13 +663,15 @@ export default React.createClass({
                 });
                 break;
             case 'hide_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", true);
                 this.setState({
-                    collapseRhs: true,
+                    collapsedRhs: true,
                 });
                 break;
             case 'show_right_panel':
+                window.localStorage.setItem("mx_rhs_collapsed", false);
                 this.setState({
-                    collapseRhs: false,
+                    collapsedRhs: false,
                 });
                 break;
             case 'panel_disable': {
@@ -697,9 +682,11 @@ export default React.createClass({
                 });
                 break;
             }
-            case 'set_theme':
-                this._onSetTheme(payload.value);
-                break;
+            // case 'set_theme':
+                // disable changing the theme for now
+                // as other themes are not compatible with dharma
+                // this._onSetTheme(payload.value);
+                // break;
             case 'on_logging_in':
                 // We are now logging in, so set the state to reflect that
                 // NB. This does not touch 'ready' since if our dispatches
@@ -709,7 +696,7 @@ export default React.createClass({
                 });
                 break;
             case 'on_logged_in':
-                this._onLoggedIn(payload.teamToken);
+                this._onLoggedIn();
                 break;
             case 'on_logged_out':
                 this._onLoggedOut();
@@ -923,6 +910,10 @@ export default React.createClass({
     },
 
     _viewHome: function() {
+        // The home page requires the "logged in" view, so we'll set that.
+        this.setStateForNewView({
+            view: VIEWS.LOGGED_IN,
+        });
         this._setPage(PageTypes.HomePage);
         this.notifyNewScreen('home');
     },
@@ -1072,6 +1063,7 @@ export default React.createClass({
                         modal.close();
                         if (this.state.currentRoomId === roomId) {
                             dis.dispatch({action: 'view_next_room'});
+                            dis.dispatch({action: 'close_room_settings'});
                         }
                     }, (err) => {
                         modal.close();
@@ -1175,19 +1167,10 @@ export default React.createClass({
 
     /**
      * Called when a new logged in session has started
-     *
-     * @param {string} teamToken
      */
-    _onLoggedIn: async function(teamToken) {
-        this.setState({
-            view: VIEWS.LOGGED_IN,
-        });
-
-        if (teamToken) {
-            // A team member has logged in, not a guest
-            this._teamToken = teamToken;
-            dis.dispatch({action: 'view_home_page'});
-        } else if (this._is_registered) {
+    _onLoggedIn: async function() {
+        this.setStateForNewView({view: VIEWS.LOGGED_IN});
+        if (this._is_registered) {
             this._is_registered = false;
 
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
@@ -1239,11 +1222,10 @@ export default React.createClass({
             view: VIEWS.LOGIN,
             ready: false,
             collapseLhs: false,
-            collapseRhs: false,
+            collapsedRhs: false,
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });
-        this._teamToken = null;
         this._setPageSubtitle();
     },
 
@@ -1260,6 +1242,7 @@ export default React.createClass({
         this.firstSyncComplete = false;
         this.firstSyncPromise = Promise.defer();
         const cli = MatrixClientPeg.get();
+        const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
 
         // Allow the JS SDK to reap timeline events. This reduces the amount of
         // memory consumed as the JS SDK stores multiple distinct copies of room
@@ -1430,10 +1413,39 @@ export default React.createClass({
                     break;
             }
         });
-        cli.on("crypto.keyBackupFailed", () => {
-            Modal.createTrackedDialogAsync('New Recovery Method', 'New Recovery Method',
-                import('../../async-components/views/dialogs/keybackup/NewRecoveryMethodDialog'),
-            );
+        cli.on("crypto.keyBackupFailed", async (errcode) => {
+            let haveNewVersion;
+            let newVersionInfo;
+            // if key backup is still enabled, there must be a new backup in place
+            if (MatrixClientPeg.get().getKeyBackupEnabled()) {
+                haveNewVersion = true;
+            } else {
+                // otherwise check the server to see if there's a new one
+                try {
+                    newVersionInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+                    if (newVersionInfo !== null) haveNewVersion = true;
+                } catch (e) {
+                    console.error("Saw key backup error but failed to check backup version!", e);
+                    return;
+                }
+            }
+
+            if (haveNewVersion) {
+                Modal.createTrackedDialogAsync('New Recovery Method', 'New Recovery Method',
+                    import('../../async-components/views/dialogs/keybackup/NewRecoveryMethodDialog'),
+                    { newVersionInfo },
+                );
+            } else {
+                Modal.createTrackedDialogAsync('Recovery Method Removed', 'Recovery Method Removed',
+                    import('../../async-components/views/dialogs/keybackup/RecoveryMethodRemovedDialog'),
+                );
+            }
+        });
+
+        cli.on("crypto.verification.start", (verifier) => {
+            Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+                verifier,
+            });
         });
 
         // Fire the tinter right on startup to ensure the default theme is applied
@@ -1666,15 +1678,13 @@ export default React.createClass({
 
     onReturnToAppClick: function() {
         // treat it the same as if the user had completed the login
-        this._onLoggedIn(null);
+        this._onLoggedIn();
     },
 
     // returns a promise which resolves to the new MatrixClient
-    onRegistered: function(credentials, teamToken) {
-        // XXX: These both should be in state or ideally store(s) because we risk not
+    onRegistered: function(credentials) {
+        // XXX: This should be in state or ideally store(s) because we risk not
         //      rendering the most up-to-date view of state otherwise.
-        // teamToken may not be truthy
-        this._teamToken = teamToken;
         this._is_registered = true;
         return Lifecycle.setLoggedIn(credentials);
     },
@@ -1805,7 +1815,11 @@ export default React.createClass({
     render: function() {
         // console.log(`Rendering MatrixChat with view ${this.state.view}`);
 
-        if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
+        if (
+            this.state.view === VIEWS.LOADING ||
+            this.state.view === VIEWS.LOGGING_IN ||
+            this.state.loadingDefaultHomeserver
+        ) {
             const Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
@@ -1816,7 +1830,7 @@ export default React.createClass({
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.view === VIEWS.POST_REGISTRATION) {
-            const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
+            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
             return (
                 <PostRegistration
                     onComplete={this.onFinishPostRegistration} />
@@ -1843,7 +1857,6 @@ export default React.createClass({
                         onCloseAllSettings={this.onCloseAllSettings}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
-                        teamToken={this._teamToken}
                         showCookieBar={this.state.showCookieBar}
                         {...this.props}
                         {...this.state}
@@ -1871,7 +1884,7 @@ export default React.createClass({
         }
 
         if (this.state.view === VIEWS.REGISTER) {
-            const Registration = sdk.getComponent('structures.login.Registration');
+            const Registration = sdk.getComponent('structures.auth.Registration');
             return (
                 <Registration
                     clientSecret={this.state.register_client_secret}
@@ -1884,7 +1897,6 @@ export default React.createClass({
                     defaultHsUrl={this.getDefaultHsUrl()}
                     defaultIsUrl={this.getDefaultIsUrl()}
                     brand={this.props.config.brand}
-                    teamServerConfig={this.props.config.teamServerConfig}
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     makeRegistrationUrl={this._makeRegistrationUrl}
@@ -1900,7 +1912,7 @@ export default React.createClass({
 
 
         if (this.state.view === VIEWS.FORGOT_PASSWORD) {
-            const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
+            const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
             return (
                 <ForgotPassword
                     defaultServerName={this.getDefaultServerName()}
@@ -1910,13 +1922,12 @@ export default React.createClass({
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     onComplete={this.onLoginClick}
-                    onRegisterClick={this.onRegisterClick}
                     onLoginClick={this.onLoginClick} />
             );
         }
 
         if (this.state.view === VIEWS.LOGIN) {
-            const Login = sdk.getComponent('structures.login.Login');
+            const Login = sdk.getComponent('structures.auth.Login');
             return (
                 <Login
                     onLoggedIn={Lifecycle.setLoggedIn}

src/components/structures/MessagePanel.js

@@ -631,12 +631,36 @@ module.exports = React.createClass({
         }
     },
 
+    _onTypingVisible: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
+            scrollPanel.blockShrinking();
+            // scroll down if at bottom
+            scrollPanel.checkScroll();
+        }
+    },
+
+    updateTimelineMinHeight: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        const whoIsTyping = this.refs.whoIsTyping;
+        const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
+
+        if (scrollPanel) {
+            if (isTypingVisible) {
+                scrollPanel.blockShrinking();
+            } else {
+                scrollPanel.clearBlockShrinking();
+            }
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
 
     render: function() {
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile");
         const Spinner = sdk.getComponent("elements.Spinner");
         let topSpinner;
         let bottomSpinner;
@@ -656,6 +680,11 @@ module.exports = React.createClass({
             },
         );
 
+        let whoIsTyping;
+        if (this.props.room) {
+            whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._onTypingVisible} ref="whoIsTyping" />);
+        }
+
         return (
             <ScrollPanel ref="scrollPanel" className={className}
                     onScroll={this.props.onScroll}
@@ -666,6 +695,7 @@ module.exports = React.createClass({
                     stickyBottom={this.props.stickyBottom}>
                 { topSpinner }
                 { this._getEventTiles() }
+                { whoIsTyping }
                 { bottomSpinner }
             </ScrollPanel>
         );

src/components/structures/MyGroups.js

@@ -60,7 +60,6 @@ export default withMatrixClient(React.createClass({
     render: function() {
         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");
 
@@ -108,11 +107,10 @@ export default withMatrixClient(React.createClass({
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/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>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">
@@ -126,7 +124,7 @@ export default withMatrixClient(React.createClass({
                 </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" />
+                        <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">

src/components/structures/RightPanel.js

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector 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,97 +20,28 @@ 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';
-import MatrixClientPeg from "../../MatrixClientPeg";
-
-class HeaderButton extends React.Component {
-    constructor() {
-        super();
-        this.onClick = this.onClick.bind(this);
+export default class RightPanel extends React.Component {
+    static get propTypes() {
+        return {
+            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
+        };
     }
 
-    onClick(ev) {
-        Analytics.trackEvent(...this.props.analytics);
-        dis.dispatch({
-            action: 'view_right_panel_phase',
-            phase: this.props.clickPhase,
-        });
+    static get contextTypes() {
+        return {
+            matrixClient: PropTypes.instanceOf(MatrixClient),
+        };
     }
 
-    render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
-        // XXX: We really shouldn't be hardcoding colors here, but the way TintableSvg
-        // works kinda prevents us from using normal CSS tactics. We use $warning-color
-        // here.
-        // Note: This array gets passed along to the Tinter's forceColors eventually.
-        const tintableColors = this.props.badgeHighlight ? ["#ff0064"] : null;
-
-        const classNames = ["mx_RightPanel_headerButton"];
-        if (this.props.badgeHighlight) classNames.push("mx_RightPanel_headerButton_badgeHighlight");
-
-        return <AccessibleButton
-            aria-label={this.props.title}
-            aria-expanded={this.props.isHighlighted}
-            title={this.props.title}
-            className={classNames.join(" ")}
-            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" forceColors={tintableColors} />
-                { 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,
-    badgeHighlight: PropTypes.bool,
-    // 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: {
+    static Phase = Object.freeze({
         RoomMemberList: 'RoomMemberList',
         GroupMemberList: 'GroupMemberList',
         GroupRoomList: 'GroupRoomList',
@@ -118,163 +50,102 @@ module.exports = React.createClass({
         NotificationPanel: 'NotificationPanel',
         RoomMemberInfo: 'RoomMemberInfo',
         GroupMemberInfo: 'GroupMemberInfo',
-    },
+    });
 
-    componentWillMount: function() {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            phase: this.props.groupId ? RightPanel.Phase.GroupMemberList : RightPanel.Phase.RoomMemberList,
+            isUserPrivilegedInGroup: null,
+        };
+        this.onAction = this.onAction.bind(this);
+        this.onRoomStateMember = this.onRoomStateMember.bind(this);
+        this.onGroupStoreUpdated = this.onGroupStoreUpdated.bind(this);
+        this.onInviteToGroupButtonClick = this.onInviteToGroupButtonClick.bind(this);
+        this.onAddRoomToGroupButtonClick = this.onAddRoomToGroupButtonClick.bind(this);
+
+        this._delayedUpdate = new RateLimitedFunc(() => {
+            this.forceUpdate();
+        }, 500);
+    }
+
+    componentWillMount() {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context.matrixClient;
         cli.on("RoomState.members", this.onRoomStateMember);
         this._initGroupStore(this.props.groupId);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         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() {
+    onGroupStoreUpdated() {
         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() {
+    onInviteToGroupButtonClick() {
         showGroupInviteDialog(this.props.groupId).then(() => {
             this.setState({
-                phase: this.Phase.GroupMemberList,
+                phase: RightPanel.Phase.GroupMemberList,
             });
         });
-    },
+    }
 
-    onAddRoomToGroupButtonClick: function() {
+    onAddRoomToGroupButtonClick() {
         showGroupAddRoomDialog(this.props.groupId).then(() => {
             this.forceUpdate();
         });
-    },
+    }
 
-    onRoomStateMember: function(ev, state, member) {
+    onRoomStateMember(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) {
+        if (this.state.phase === RightPanel.Phase.RoomMemberList && member.roomId === this.props.roomId) {
             this._delayedUpdate();
-        } else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
+        } else if (this.state.phase === RightPanel.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 === "event_notification") {
-            // Try and re-caclulate any badge counts we might have
-            this.forceUpdate();
-        } else 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") {
+    onAction(payload) {
+        if (payload.action === "view_right_panel_phase") {
             this.setState({
                 phase: payload.phase,
+                groupRoomId: payload.groupRoomId,
+                groupId: payload.groupId,
+                member: payload.member,
             });
         }
-    },
+    }
 
-    render: function() {
+    render() {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
@@ -285,164 +156,42 @@ module.exports = React.createClass({
         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) {
-            let notifCountBadge;
-            let notifCount = 0;
-            MatrixClientPeg.get().getRooms().forEach(r => notifCount += (r.getUnreadNotificationCount('highlight') || 0));
-            if (notifCount > 0) {
-                const title = _t("%(count)s Notifications", {count: formatCount(notifCount)});
-                notifCountBadge = <div title={title}>{ formatCount(notifCount) }</div>;
-            }
-
-            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}
-                    badge={notifCountBadge} badgeHighlight={notifCount > 0}
-                    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(
-                <AccessibleButton 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" alt="" />
-                </AccessibleButton>,
-            );
-        }
-
         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>
-            );
+        if (this.props.roomId && this.state.phase === RightPanel.Phase.RoomMemberList) {
+            panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
+        } else if (this.props.groupId && this.state.phase === RightPanel.Phase.GroupMemberList) {
+            panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupRoomList) {
+            panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
+        } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo) {
+            panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupMemberInfo) {
+            panel = <GroupMemberInfo
+                groupMember={this.state.member}
+                groupId={this.props.groupId}
+                key={this.state.member.user_id} />;
+        } else if (this.state.phase === RightPanel.Phase.GroupRoomInfo) {
+            panel = <GroupRoomInfo
+                groupRoomId={this.state.groupRoomId}
+                groupId={this.props.groupId}
+                key={this.state.groupRoomId} />;
+        } else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
+            panel = <NotificationPanel />;
+        } else if (this.state.phase === RightPanel.Phase.FilePanel) {
+            panel = <FilePanel roomId={this.props.roomId} />;
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
+            "dark-panel": true,
         });
 
         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

@@ -44,6 +44,7 @@ module.exports = React.createClass({
 
     propTypes: {
         config: React.PropTypes.object,
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -64,6 +65,16 @@ module.exports = React.createClass({
         };
     },
 
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    },
+
     componentWillMount: function() {
         this._unmounted = false;
         this.nextBatch = null;
@@ -301,6 +312,11 @@ module.exports = React.createClass({
         }
     },
 
+    onCreateRoomClicked: function() {
+        this.props.onFinished();
+        dis.dispatch({action: 'view_create_room'});
+    },
+
     onJoinClick: function(alias) {
         // If we don't have a particular instance id selected, just show that rooms alias
         if (!this.state.instanceId) {
@@ -348,6 +364,7 @@ module.exports = React.createClass({
     },
 
     showRoom: function(room, room_alias) {
+        this.props.onFinished();
         const payload = {action: 'view_room'};
         if (room) {
             // Don't let the user view a room they won't be able to either
@@ -496,11 +513,13 @@ module.exports = React.createClass({
     render: function() {
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const Loader = sdk.getComponent("elements.Spinner");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+        // TODO: clean this up
         if (this.state.protocolsLoading) {
             return (
                 <div className="mx_RoomDirectory">
-                    <SimpleRoomHeader title={ _t('Directory') } />
                     <Loader />
                 </div>
             );
@@ -554,7 +573,7 @@ module.exports = React.createClass({
 
         let placeholder = _t('Search for a room');
         if (!this.state.instanceId) {
-            placeholder = _t('#example') + ':' + this.state.roomServer;
+            placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
         } else if (instance_expected_field_type) {
             placeholder = instance_expected_field_type.placeholder;
         }
@@ -567,23 +586,35 @@ module.exports = React.createClass({
             }
         }
 
+        const createRoomButton = (<AccessibleButton
+            onClick={this.onCreateRoomClicked}
+            className="mx_RoomDirectory_createRoom"
+        >{_t("Create new room")}</AccessibleButton>);
+
         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} />
+            <BaseDialog
+                className={'mx_RoomDirectory_dialog'}
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                headerButton={createRoomButton}
+                title={_t("Room directory")}
+            >
+                <div className="mx_RoomDirectory">
+                    <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>
-                    {content}
                 </div>
-            </div>
+            </BaseDialog>
         );
     },
 });

src/components/structures/RoomStatusBar.js

@@ -45,14 +45,6 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-
-        // the number of messages which have arrived since we've been scrolled up
-        numUnreadMessages: PropTypes.number,
-
-        // this is true if we are fully scrolled-down, and are looking at
-        // the end of the live timeline.
-        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,
@@ -62,10 +54,6 @@ module.exports = React.createClass({
         // more interesting)
         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: PropTypes.number,
-
         // true if the room is being peeked at. This affects components that shouldn't
         // logically be shown when peeking, such as a prompt to invite people to a room.
         isPeeking: PropTypes.bool,
@@ -86,9 +74,6 @@ module.exports = React.createClass({
         // 'you are alone' bar
         onStopWarningClick: PropTypes.func,
 
-        // callback for when the user clicks on the 'scroll to bottom' button
-        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.
@@ -103,24 +88,16 @@ module.exports = React.createClass({
         onVisible: PropTypes.func,
     },
 
-    getDefaultProps: function() {
-        return {
-            whoIsTypingLimit: 3,
-        };
-    },
-
     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();
@@ -135,7 +112,6 @@ module.exports = React.createClass({
         const client = MatrixClientPeg.get();
         if (client) {
             client.removeListener("sync", this.onSyncStateChange);
-            client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
             client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
         }
     },
@@ -150,12 +126,6 @@ module.exports = React.createClass({
         });
     },
 
-    onRoomMemberTyping: function(ev, member) {
-        this.setState({
-            usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room),
-        });
-    },
-
     _onSendWithoutVerifyingClick: function() {
         cryptodevices.getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((devices) => {
             cryptodevices.markAllDevicesKnown(MatrixClientPeg.get(), devices);
@@ -199,9 +169,6 @@ module.exports = React.createClass({
     // indicate other sizes.
     _getSize: function() {
         if (this._shouldShowConnectionError() ||
-            (this.state.usersTyping.length > 0) ||
-            this.props.numUnreadMessages ||
-            !this.props.atEndOfLiveTimeline ||
             this.props.hasActiveCall ||
             this.props.sentMessageAndIsAlone
         ) {
@@ -213,36 +180,11 @@ module.exports = React.createClass({
     },
 
     // return suitable content for the image on the left of the status bar.
-    //
-    // if wantPlaceholder is true, we include a "..." placeholder if
-    // there is nothing better to put in.
-    _getIndicator: function(wantPlaceholder) {
-        if (this.props.numUnreadMessages) {
-            return (
-                <div className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/newmessages.svg" width="24" height="24"
-                        alt="" />
-                </div>
-            );
-        }
-
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        if (!this.props.atEndOfLiveTimeline) {
-            return (
-                <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
-                        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")} />
-                </AccessibleButton>
-            );
-        }
-
+    _getIndicator: function() {
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
+                <TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
             );
         }
 
@@ -250,53 +192,11 @@ module.exports = React.createClass({
             return null;
         }
 
-        if (wantPlaceholder) {
-            return (
-                <div className="mx_RoomStatusBar_typingIndicatorAvatars">
-                    { this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) }
-                </div>
-            );
-        }
-
         return null;
     },
 
-    _renderTypingIndicatorAvatars: function(limit) {
-        let users = this.state.usersTyping;
-
-        let othersCount = 0;
-        if (users.length > limit) {
-            othersCount = users.length - limit + 1;
-            users = users.slice(0, limit - 1);
-        }
-
-        const avatars = users.map((u) => {
-            return (
-                <MemberAvatar
-                    key={u.userId}
-                    member={u}
-                    width={24}
-                    height={24}
-                    resizeMethod="crop"
-                />
-            );
-        });
-
-        if (othersCount > 0) {
-            avatars.push(
-                <span className="mx_RoomStatusBar_typingIndicatorRemaining" key="others">
-                    +{ othersCount }
-                </span>,
-            );
-        }
-
-        return avatars;
-    },
-
     _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
+        // no conn bar trumps the "some not sent" msg since you can't resend without
         // a connection!
         // 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.
@@ -390,7 +290,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
+            <img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -409,7 +309,7 @@ module.exports = React.createClass({
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
                     <div>
                         <div className="mx_RoomStatusBar_connectionLostBar_title">
                             { _t('Connectivity to the server has been lost.') }
@@ -426,32 +326,6 @@ module.exports = React.createClass({
             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
-            const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
-
-            return (
-                <div className="mx_RoomStatusBar_unreadMessagesBar"
-                        onClick={this.props.onScrollToBottomClick}>
-                    { unreadMsgs }
-                </div>
-            );
-        }
-
-        const typingString = WhoIsTyping.whoIsTypingString(
-            this.state.usersTyping,
-            this.props.whoIsTypingLimit,
-        );
-        if (typingString) {
-            return (
-                <div className="mx_RoomStatusBar_typingBar">
-                    <EmojiText>{ typingString }</EmojiText>
-                </div>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
@@ -483,7 +357,7 @@ module.exports = React.createClass({
 
     render: function() {
         const content = this._getContent();
-        const indicator = this._getIndicator(this.state.usersTyping.length > 0);
+        const indicator = this._getIndicator();
 
         return (
             <div className="mx_RoomStatusBar">

src/components/structures/RoomSubList.js

@@ -19,12 +19,11 @@ 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 IndicatorScrollbar from './IndicatorScrollbar';
 import { KeyCode } from '../../Keyboard';
 import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -33,8 +32,6 @@ 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',
 
@@ -44,7 +41,6 @@ const RoomSubList = React.createClass({
         list: PropTypes.arrayOf(PropTypes.object).isRequired,
         label: PropTypes.string.isRequired,
         tagName: PropTypes.string,
-        editable: PropTypes.bool,
 
         order: PropTypes.string.isRequired,
 
@@ -55,21 +51,15 @@ const RoomSubList = React.createClass({
         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
+        isFiltered: PropTypes.bool,
         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: [],
         };
     },
 
@@ -77,18 +67,12 @@ const RoomSubList = React.createClass({
         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);
     },
 
@@ -96,28 +80,11 @@ const RoomSubList = React.createClass({
         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") {
+        if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
             return true;
         } else {
             return false;
@@ -143,15 +110,9 @@ const RoomSubList = React.createClass({
         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);
+            this.setState({hidden: isHidden}, () => {
+                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);
@@ -178,10 +139,9 @@ const RoomSubList = React.createClass({
     /**
      * 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) {
+    roomNotificationCount: function() {
         const self = this;
 
         if (this.props.isInvite) {
@@ -189,20 +149,18 @@ const RoomSubList = React.createClass({
         }
 
         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 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;
+            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;
-                    }
+            if (badges) {
+                result[0] += notificationCount;
+                if (highlight) {
+                    result[1] = true;
                 }
             }
             return result;
@@ -217,15 +175,9 @@ const RoomSubList = React.createClass({
     },
 
     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
+        return this.props.list.map((room, index) => {
+            return <RoomTile
                 room={room}
                 roomSubList={this}
                 tagName={this.props.tagName}
@@ -246,7 +198,7 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // find first room which has notifications and switch to it
-        for (const room of this.state.sortedList) {
+        for (const room of this.props.list) {
             const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             const highlight = room.getUnreadNotificationCount('highlight') > 0;
             const notificationCount = room.getUnreadNotificationCount();
@@ -269,10 +221,10 @@ const RoomSubList = React.createClass({
         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) {
+        if (this.props.list && this.props.list.length > 0) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: this.state.sortedList[0].roomId,
+                room_id: this.props.list[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
@@ -286,33 +238,26 @@ const RoomSubList = React.createClass({
         }
     },
 
-    _getHeaderJsx: function() {
+    _getHeaderJsx: function(isCollapsed) {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         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>;
+        if (!this.props.collapsed) {
+            const badgeClasses = classNames({
+                'mx_RoomSubList_badge': true,
+                'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+            });
+            if (subListNotifCount > 0) {
+                badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
+                    { FormattingUtils.formatCount(subListNotifCount) }
+                </div>;
+            } else if (this.props.isInvite && this.props.list.length) {
+                // no notifications but highlight anyway because this is an invite badge
+                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>{this.props.list.length}</div>;
+            }
         }
 
         // When collapsed, allow a long hover on the header to show user
@@ -320,9 +265,6 @@ const RoomSubList = React.createClass({
         let title;
         if (this.props.collapsed) {
             title = this.props.label;
-            if (roomCount !== '') {
-                title += " [" + roomCount + "]";
-            }
         }
 
         let incomingCall;
@@ -333,126 +275,85 @@ const RoomSubList = React.createClass({
                 <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
         }
 
-        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        let addRoomButton;
+        if (this.props.onAddRoom) {
+            addRoomButton = (
+                <AccessibleButton onClick={ this.props.onAddRoom } className="mx_RoomSubList_addRoom" />
+            );
+        }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const len = this.props.list.length + this.props.extraTiles.length;
+        let chevron;
+        if (len) {
+            const chevronClasses = classNames({
+                'mx_RoomSubList_chevron': true,
+                'mx_RoomSubList_chevronRight': isCollapsed,
+                'mx_RoomSubList_chevronDown': !isCollapsed,
+            });
+            chevron = (<div className={chevronClasses}></div>);
+        }
+
+        const tabindex = this.props.isFiltered ? "0" : "-1";
         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}
+            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
+                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
+                    { chevron }
+                    <span>{this.props.label}</span>
+                    { incomingCall }
                 </AccessibleButton>
+                { badge }
+                { addRoomButton }
             </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);
+    checkOverflow: function() {
+        if (this.refs.scroller) {
+            this.refs.scroller.checkOverflow();
         }
-
-        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);
+    setHeight: function(height) {
+        if (this.refs.subList) {
+            this.refs.subList.style.height = `${height}px`;
+        }
     },
 
     render: function() {
-        const TruncatedList = sdk.getComponent('elements.TruncatedList');
+        const len = this.props.list.length + this.props.extraTiles.length;
+        const isCollapsed = this.state.hidden && !this.props.forceExpand;
+        if (len) {
+            const subListClasses = classNames({
+                "mx_RoomSubList": true,
+                "mx_RoomSubList_hidden": isCollapsed,
+                "mx_RoomSubList_nonEmpty": len && !isCollapsed,
+            });
 
-        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;
+            if (isCollapsed) {
+                return <div ref="subList" className={subListClasses}>
+                    {this._getHeaderJsx(isCollapsed)}
+                </div>;
             } else {
-                content = this.makeRoomTiles();
-                content.push(...this.props.extraTiles);
+                const tiles = this.makeRoomTiles();
+                tiles.push(...this.props.extraTiles);
+                return <div ref="subList" className={subListClasses}>
+                    {this._getHeaderJsx(isCollapsed)}
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
+                        { tiles }
+                    </IndicatorScrollbar>
+                </div>;
             }
-        } 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) {
+            let content;
+            if (this.props.showSpinner && !isCollapsed) {
                 content = <Loader />;
             }
 
             return (
-                <div className="mx_RoomSubList">
-                    {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
-                    { this.state.hidden ? undefined : content }
+                <div ref="subList" className="mx_RoomSubList">
+                    { this._getHeaderJsx(isCollapsed) }
+                    { content }
                 </div>
             );
         }

src/components/structures/RoomView.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -44,6 +44,8 @@ const Rooms = require('../../Rooms');
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
+import MainSplit from './MainSplit';
+import RightPanel from './RightPanel';
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import WidgetEchoStore from '../../stores/WidgetEchoStore';
@@ -149,6 +151,10 @@ module.exports = React.createClass({
             auxPanelMaxHeight: undefined,
 
             statusBarVisible: false,
+
+            // We load this later by asking the js-sdk to suggest a version for us.
+            // This object is the result of Room#getRecommendedVersion()
+            upgradeRecommendation: null,
         };
     },
 
@@ -609,17 +615,10 @@ module.exports = React.createClass({
         }
     },
 
-    async onRoomRecoveryReminderFinished(backupCreated) {
-        // If the user cancelled the key backup dialog, it suggests they don't
-        // want to be reminded anymore.
-        if (!backupCreated) {
-            await SettingsStore.setValue(
-                "showRoomRecoveryReminder",
-                null,
-                SettingLevel.ACCOUNT,
-                false,
-            );
-        }
+    onRoomRecoveryReminderDontAskAgain: function() {
+        // Called when the option to not ask again is set:
+        // force an update to hide the recovery reminder
+        this.forceUpdate();
     },
 
     onKeyBackupStatus() {
@@ -642,6 +641,13 @@ module.exports = React.createClass({
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
         this._loadMembersIfJoined(room);
+        this._calculateRecommendedVersion(room);
+    },
+
+    _calculateRecommendedVersion: async function(room) {
+        this.setState({
+            upgradeRecommendation: await room.getRecommendedVersion(),
+        });
     },
 
     _loadMembersIfJoined: async function(room) {
@@ -1141,11 +1147,6 @@ module.exports = React.createClass({
         // XXX: todo: merge overlapping results somehow?
         // XXX: why doesn't searching on name work?
 
-        if (this.state.searchResults.results === undefined) {
-            // awaiting results
-            return [];
-        }
-
         const ret = [];
 
         if (this.state.searchInProgress) {
@@ -1202,7 +1203,7 @@ module.exports = React.createClass({
                     const roomName = room ? room.name : _t("Unknown room %(roomId)s", { roomId: roomId });
 
                     ret.push(<li key={mxEv.getId() + "-room"}>
-                                 <h1>{ _t("Room") }: { roomName }</h1>
+                                 <h2>{ _t("Room") }: { roomName }</h2>
                              </li>);
                     lastRoomId = roomId;
                 }
@@ -1483,11 +1484,10 @@ module.exports = React.createClass({
 
     onStatusBarHidden: function() {
         // This is currently not desired as it is annoying if it keeps expanding and collapsing
-        // TODO: Find a less annoying way of hiding the status bar
-        /*if (this.unmounted) return;
+        if (this.unmounted) return;
         this.setState({
             statusBarVisible: false,
-        });*/
+        });
     },
 
     /**
@@ -1571,18 +1571,20 @@ module.exports = React.createClass({
                             oobData={this.props.oobData}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectThreepidInviteButtonClicked}
-                                            canPreview={false} error={this.state.roomLoadError}
-                                            roomAlias={roomAlias}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            inviterName={inviterName}
-                                            invitedEmail={invitedEmail}
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectThreepidInviteButtonClicked}
+                                                canPreview={false} error={this.state.roomLoadError}
+                                                roomAlias={roomAlias}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                inviterName={inviterName}
+                                                invitedEmail={invitedEmail}
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1616,16 +1618,18 @@ module.exports = React.createClass({
                             room={this.state.room}
                             collapsedRhs={this.props.collapsedRhs}
                         />
-                        <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
-                                            onForgetClick={this.onForgetClick}
-                                            onRejectClick={this.onRejectButtonClicked}
-                                            inviterName={inviterName}
-                                            canPreview={false}
-                                            spinner={this.state.joining}
-                                            spinnerState="joining"
-                                            room={this.state.room}
-                            />
+                        <div className="mx_RoomView_body">
+                            <div className="mx_RoomView_auxPanel">
+                                <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                                onForgetClick={this.onForgetClick}
+                                                onRejectClick={this.onRejectButtonClicked}
+                                                inviterName={inviterName}
+                                                canPreview={false}
+                                                spinner={this.state.joining}
+                                                spinnerState="joining"
+                                                room={this.state.room}
+                                />
+                            </div>
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
                     </div>
@@ -1657,23 +1661,21 @@ module.exports = React.createClass({
             isStatusAreaExpanded = this.state.statusBarVisible;
             statusBar = <RoomStatusBar
                 room={this.state.room}
-                numUnreadMessages={this.state.numUnreadMessages}
-                atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
                 sentMessageAndIsAlone={this.state.isAlone}
                 hasActiveCall={inCall}
                 isPeeking={myMembership !== "join"}
                 onInviteClick={this.onInviteButtonClick}
                 onStopWarningClick={this.onStopAloneWarningClick}
-                onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
-                whoIsTypingLimit={3}
             />;
         }
 
+        const roomVersionRecommendation = this.state.upgradeRecommendation;
         const showRoomUpgradeBar = (
-            this.state.room.shouldUpgradeToVersion() &&
+            roomVersionRecommendation &&
+            roomVersionRecommendation.needsUpgrade &&
             this.state.room.userMayUpgradeRoom(MatrixClientPeg.get().credentials.userId)
         );
 
@@ -1696,10 +1698,10 @@ module.exports = React.createClass({
             hideCancel = true; // has own cancel
             aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress} onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch} />;
         } else if (showRoomUpgradeBar) {
-            aux = <RoomUpgradeWarningBar room={this.state.room} />;
+            aux = <RoomUpgradeWarningBar room={this.state.room} recommendation={roomVersionRecommendation} />;
             hideCancel = true;
         } else if (showRoomRecoveryReminder) {
-            aux = <RoomRecoveryReminder onFinished={this.onRoomRecoveryReminderFinished} />;
+            aux = <RoomRecoveryReminder onDontAskAgainSet={this.onRoomRecoveryReminderDontAskAgain} />;
             hideCancel = true;
         } else if (this.state.showingPinned) {
             hideCancel = true; // has own cancel
@@ -1732,6 +1734,7 @@ module.exports = React.createClass({
 
         const auxPanel = (
             <AuxPanel ref="auxPanel" room={this.state.room}
+              fullHeight={this.state.editingRoomSettings}
               userId={MatrixClientPeg.get().credentials.userId}
               conferenceHandler={this.props.ConferenceHandler}
               draggingFile={this.state.draggingFile}
@@ -1763,8 +1766,8 @@ module.exports = React.createClass({
         }
 
         if (MatrixClientPeg.get().isGuest()) {
-            const LoginBox = sdk.getComponent('structures.LoginBox');
-            messageComposer = <LoginBox />;
+            const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
+            messageComposer = <AuthButtons />;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
@@ -1783,20 +1786,20 @@ module.exports = React.createClass({
             if (call.type === "video") {
                 zoomButton = (
                     <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
-                        <TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
+                        <TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
                     </div>
                 );
 
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
-                        <TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
+                        <TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
                              alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
                              width="31" height="27" />
                     </div>;
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                    <TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
+                    <TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
                          alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                          width="21" height="26" />
                 </div>;
@@ -1808,7 +1811,7 @@ module.exports = React.createClass({
                     { videoMuteButton }
                     { zoomButton }
                     { statusBar }
-                    <TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17" />
+                    <TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
                 </div>;
         }
 
@@ -1818,16 +1821,21 @@ module.exports = React.createClass({
         let hideMessagePanel = false;
 
         if (this.state.searchResults) {
-            searchResultsPanel = (
-                <ScrollPanel ref="searchResultsPanel"
-                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
-                    onFillRequest={this.onSearchResultsFillRequest}
-                    onResize={this.onSearchResultsResize}
-                >
-                    <li className={scrollheader_classes}></li>
-                    { this.getSearchResultTiles() }
-                </ScrollPanel>
-            );
+            // show searching spinner
+            if (this.state.searchResults.results === undefined) {
+                searchResultsPanel = (<div className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner" />);
+            } else {
+                searchResultsPanel = (
+                    <ScrollPanel ref="searchResultsPanel"
+                        className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                        onFillRequest={this.onSearchResultsFillRequest}
+                        onResize={this.onSearchResultsResize}
+                    >
+                        <li className={scrollheader_classes}></li>
+                        { this.getSearchResultTiles() }
+                    </ScrollPanel>
+                );
+            }
             hideMessagePanel = true;
         }
 
@@ -1843,7 +1851,7 @@ module.exports = React.createClass({
         const messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
                 timelineSet={this.state.room.getUnfilteredTimelineSet()}
-                showReadReceipts={!SettingsStore.getValue('hideReadReceipts')}
+                showReadReceipts={SettingsStore.getValue('showReadReceipts')}
                 manageReadReceipts={!this.state.isPeeking}
                 manageReadMarkers={!this.state.isPeeking}
                 hidden={hideMessagePanel}
@@ -1860,14 +1868,18 @@ module.exports = React.createClass({
         let topUnreadMessagesBar = null;
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
-            topUnreadMessagesBar = (
-                <div className="mx_RoomView_topUnreadMessagesBar">
-                    <TopUnreadMessagesBar
-                       onScrollUpClick={this.jumpToReadMarker}
-                       onCloseClick={this.forgetReadMarker}
-                    />
-                </div>
-            );
+            topUnreadMessagesBar = (<TopUnreadMessagesBar
+                                       onScrollUpClick={this.jumpToReadMarker}
+                                       onCloseClick={this.forgetReadMarker}
+                                    />);
+        }
+        let jumpToBottom;
+        if (!this.state.atEndOfLiveTimeline) {
+            const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
+            jumpToBottom = (<JumpToBottomButton
+                numUnreadMessages={this.state.numUnreadMessages}
+                onScrollToBottomClick={this.jumpToLiveTimeline}
+            />);
         }
         const statusBarAreaClass = classNames(
             "mx_RoomView_statusArea",
@@ -1883,8 +1895,10 @@ module.exports = React.createClass({
             },
         );
 
+        const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+
         return (
-            <div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
+            <main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
                 <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
                     oobData={this.props.oobData}
                     editing={this.state.editingRoomSettings}
@@ -1899,20 +1913,25 @@ module.exports = React.createClass({
                     onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
                 />
-                { auxPanel }
-                <div className={fadableSectionClasses}>
-                    { topUnreadMessagesBar }
-                    { messagePanel }
-                    { searchResultsPanel }
-                    <div className={statusBarAreaClass}>
-                        <div className="mx_RoomView_statusAreaBox">
-                            <div className="mx_RoomView_statusAreaBox_line"></div>
-                            { statusBar }
+                <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
+                    <div className={fadableSectionClasses}>
+                        { auxPanel }
+                        <div className="mx_RoomView_timeline">
+                            { topUnreadMessagesBar }
+                            { jumpToBottom }
+                            { messagePanel }
+                            { searchResultsPanel }
                         </div>
+                        <div className={statusBarAreaClass}>
+                            <div className="mx_RoomView_statusAreaBox">
+                                <div className="mx_RoomView_statusAreaBox_line"></div>
+                                { statusBar }
+                            </div>
+                        </div>
+                        { messageComposer }
                     </div>
-                    { messageComposer }
-                </div>
-            </div>
+                </MainSplit>
+            </main>
         );
     },
 });

src/components/structures/ScrollPanel.js

@@ -223,6 +223,8 @@ module.exports = React.createClass({
 
     onResize: function() {
         this.props.onResize();
+        // clear min-height as the height might have changed
+        this.clearBlockShrinking();
         this.checkScroll();
         if (this._gemScroll) this._gemScroll.forceUpdate();
     },
@@ -372,6 +374,8 @@ module.exports = React.createClass({
             }
             this._unfillDebouncer = setTimeout(() => {
                 this._unfillDebouncer = null;
+                // if timeline shrinks, min-height should be cleared
+                this.clearBlockShrinking();
                 this.props.onUnfillRequest(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
@@ -678,6 +682,29 @@ module.exports = React.createClass({
         this._gemScroll = gemScroll;
     },
 
+    /**
+     * Set the current height as the min height for the message list
+     * so the timeline cannot shrink. This is used to avoid
+     * jumping when the typing indicator gets replaced by a smaller message.
+     */
+    blockShrinking: function() {
+        const messageList = this.refs.itemlist;
+        if (messageList) {
+            const currentHeight = messageList.clientHeight;
+            messageList.style.minHeight = `${currentHeight}px`;
+        }
+    },
+
+    /**
+     * Clear the previously set min height
+     */
+    clearBlockShrinking: function() {
+        const messageList = this.refs.itemlist;
+        if (messageList) {
+            messageList.style.minHeight = null;
+        }
+    },
+
     render: function() {
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to

src/components/structures/SearchBox.js

@@ -28,8 +28,8 @@ module.exports = React.createClass({
     displayName: 'SearchBox',
 
     propTypes: {
-        collapsed: React.PropTypes.bool,
         onSearch: React.PropTypes.func,
+        onCleared: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -56,7 +56,6 @@ module.exports = React.createClass({
             case 'focus_room_filter':
                 if (this.refs.search) {
                     this.refs.search.focus();
-                    this.refs.search.select();
                 }
                 break;
         }
@@ -75,86 +74,49 @@ module.exports = React.createClass({
         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'});
+                this._clearSearch("keyboard");
                 break;
         }
     },
 
-    _clearSearch: function() {
+    _onFocus: function(ev) {
+        ev.target.select();
+    },
+
+    _clearSearch: function(source) {
         this.refs.search.value = "";
         this.onChange();
+        if (this.props.onCleared) {
+            this.props.onCleared(source);
+        }
     },
 
     render: function() {
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
 
-        const collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
+        const clearButton = this.state.searchTerm.length > 0 ?
+            (<AccessibleButton key="button"
+                    className="mx_SearchBox_closeButton"
+                    onClick={ () => {this._clearSearch("button")} }>
+            </AccessibleButton>) :  undefined;
 
-        let 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>;
-        }
-
-        let 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') }
-                    />,
-                ];
-        }
-
-        const self = this;
         return (
-            <div className="mx_SearchBox">
-                { searchControls }
-                { toggleCollapse }
+            <div className="mx_SearchBox mx_textinput">
+                <input
+                    key="searchfield"
+                    type="text"
+                    ref="search"
+                    className="mx_textinput_icon mx_textinput_search"
+                    value={ this.state.searchTerm }
+                    onFocus={ this._onFocus }
+                    onChange={ this.onChange }
+                    onKeyDown={ this._onKeyDown }
+                    placeholder={ _t('Filter room names') }
+                />
+                { clearButton }
             </div>
         );
     },

src/components/structures/TabbedView.js

@@ -0,0 +1,118 @@
+/*
+Copyright 2017 Travis Ralston
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react";
+import {_t} from '../../languageHandler';
+import PropTypes from "prop-types";
+
+/**
+ * Represents a tab for the TabbedView.
+ */
+export class Tab {
+    /**
+     * Creates a new tab.
+     * @param {string} tabLabel The untranslated tab label.
+     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
+     * @param {string} tabJsx The JSX for the tab container.
+     */
+    constructor(tabLabel, tabIconClass, tabJsx) {
+        this.label = tabLabel;
+        this.icon = tabIconClass;
+        this.body = tabJsx;
+    }
+}
+
+export class TabbedView extends React.Component {
+    static propTypes = {
+        // The tabs to show
+        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            activeTabIndex: 0,
+        };
+    }
+
+    _getActiveTabIndex() {
+        if (!this.state || !this.state.activeTabIndex) return 0;
+        return this.state.activeTabIndex;
+    }
+
+    /**
+     * Shows the given tab
+     * @param {Tab} tab the tab to show
+     * @private
+     */
+    _setActiveTab(tab) {
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx !== -1) {
+            this.setState({activeTabIndex: idx});
+        } else {
+            console.error("Could not find tab " + tab.label + " in tabs");
+        }
+    }
+
+    _renderTabLabel(tab) {
+        let classes = "mx_TabbedView_tabLabel ";
+
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
+        if (tab.label === "Visit old settings") classes += "mx_TabbedView_tabLabel_TEMP_HACK";
+
+        let tabIcon = null;
+        if (tab.icon) {
+            tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
+        }
+
+        const onClickHandler = () => this._setActiveTab(tab);
+
+        return (
+            <span className={classes} key={"tab_label_" + tab.label}
+                  onClick={onClickHandler}>
+                {tabIcon}
+                <span className="mx_TabbedView_tabLabel_text">
+                    {_t(tab.label)}
+                </span>
+            </span>
+        );
+    }
+
+    _renderTabPanel(tab) {
+        return (
+            <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
+                {tab.body}
+            </div>
+        );
+    }
+
+    render() {
+        const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
+        const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
+
+        return (
+            <div className="mx_TabbedView">
+                <div className="mx_TabbedView_tabLabels">
+                    {labels}
+                </div>
+                {panel}
+            </div>
+        );
+    }
+}

src/components/structures/TagPanel.js

@@ -23,6 +23,7 @@ import GroupActions from '../../actions/GroupActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
@@ -47,6 +48,8 @@ const TagPanel = React.createClass({
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
         this.context.matrixClient.on("sync", this._onClientSync);
 
+        this._dispatcherRef = dis.register(this._onAction);
+
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
@@ -67,6 +70,9 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+        }
     },
 
     _onGroupMyMembership() {
@@ -100,13 +106,21 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createDialog(RedesignFeedbackDialog);
+        }
+    },
+
     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 ActionButton = sdk.getComponent("elements.ActionButton");
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -122,7 +136,7 @@ const TagPanel = React.createClass({
         let clearButton;
         if (itemsSelected) {
             clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                <TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
                              alt={_t("Clear filter")}
                              title={_t("Clear filter")}
                 />
@@ -162,7 +176,10 @@ const TagPanel = React.createClass({
             </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_groupsButton">
-                <GroupsButton tooltip={true} />
+                <GroupsButton />
+                <ActionButton
+                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
+                    label={_t("Report bugs & give feedback")} tooltip={true} />
             </div>
         </div>;
     },

src/components/structures/TimelinePanel.js

@@ -33,9 +33,13 @@ const ObjectUtils = require('../../ObjectUtils');
 const Modal = require("../../Modal");
 const UserActivity = require("../../UserActivity");
 import { KeyCode } from '../../Keyboard';
+import Timer from '../../utils/Timer';
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
+const READ_MARKER_INVIEW_THRESHOLD_MS = 1 * 1000;
+const READ_MARKER_OUTOFVIEW_THRESHOLD_MS = 30 * 1000;
+const READ_RECEIPT_INTERVAL_MS = 500;
 
 const DEBUG = false;
 
@@ -188,6 +192,14 @@ var TimelinePanel = React.createClass({
         this.lastRRSentEventId = undefined;
         this.lastRMSentEventId = undefined;
 
+        if (this.props.manageReadReceipts) {
+            this.updateReadReceiptOnUserActivity();
+        }
+        if (this.props.manageReadMarkers) {
+            this.updateReadMarkerOnUserActivity();
+        }
+
+
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
@@ -254,6 +266,14 @@ var TimelinePanel = React.createClass({
         //
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
+        if (this._readReceiptActivityTimer) {
+            this._readReceiptActivityTimer.abort();
+            this._readReceiptActivityTimer = null;
+        }
+        if (this._readMarkerActivityTimer) {
+            this._readMarkerActivityTimer.abort();
+            this._readMarkerActivityTimer = null;
+        }
 
         dis.unregister(this.dispatcherRef);
 
@@ -362,30 +382,25 @@ var TimelinePanel = React.createClass({
         }
 
         if (this.props.manageReadMarkers) {
+            const rmPosition = this.getReadMarkerPosition();
             // we hide the read marker when it first comes onto the screen, but if
             // it goes back off the top of the screen (presumably because the user
             // clicks on the 'jump to bottom' button), we need to re-enable it.
-            if (this.getReadMarkerPosition() < 0) {
+            if (rmPosition < 0) {
                 this.setState({readMarkerVisible: true});
             }
+
+            // if read marker position goes between 0 and -1/1,
+            // (and user is active), switch timeout
+            const timeout = this._readMarkerTimeout(rmPosition);
+            // NO-OP when timeout already has set to the given value
+            this._readMarkerActivityTimer.changeTimeout(timeout);
         }
     },
 
     onAction: function(payload) {
-        switch (payload.action) {
-            case 'user_activity':
-            case 'user_activity_end':
-                // we could treat user_activity_end differently and not
-                // send receipts for messages that have arrived between
-                // the actual user activity and the time they stopped
-                // being active, but let's see if this is actually
-                // necessary.
-                this.sendReadReceipt();
-                this.updateReadMarker();
-                break;
-            case 'ignore_state_changed':
-                this.forceUpdate();
-                break;
+        if (payload.action === 'ignore_state_changed') {
+            this.forceUpdate();
         }
     },
 
@@ -440,7 +455,7 @@ var TimelinePanel = React.createClass({
                 //
                 const myUserId = MatrixClientPeg.get().credentials.userId;
                 const sender = ev.sender ? ev.sender.userId : null;
-                var callback = null;
+                var callRMUpdated = false;
                 if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
                     updatedState.readMarkerVisible = true;
                 } else if (lastEv && this.getReadMarkerPosition() === 0) {
@@ -450,11 +465,16 @@ var TimelinePanel = React.createClass({
                     this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
                     updatedState.readMarkerVisible = false;
                     updatedState.readMarkerEventId = lastEv.getId();
-                    callback = this.props.onReadMarkerUpdated;
+                    callRMUpdated = true;
                 }
             }
 
-            this.setState(updatedState, callback);
+            this.setState(updatedState, () => {
+                this.refs.messagePanel.updateTimelineMinHeight();
+                if (callRMUpdated) {
+                    this.props.onReadMarkerUpdated();
+                }
+            });
         });
     },
 
@@ -531,6 +551,38 @@ var TimelinePanel = React.createClass({
         this.setState({clientSyncState: state});
     },
 
+    _readMarkerTimeout(readMarkerPosition) {
+        return readMarkerPosition === 0 ?
+            READ_MARKER_INVIEW_THRESHOLD_MS :
+            READ_MARKER_OUTOFVIEW_THRESHOLD_MS;
+    },
+
+    updateReadMarkerOnUserActivity: async function() {
+        const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition());
+        this._readMarkerActivityTimer = new Timer(initialTimeout);
+
+        while (this._readMarkerActivityTimer) { //unset on unmount
+            UserActivity.timeWhileActive(this._readMarkerActivityTimer);
+            try {
+                await this._readMarkerActivityTimer.finished();
+            } catch(e) { continue; /* aborted */ }
+            // outside of try/catch to not swallow errors
+            this.updateReadMarker();
+        }
+    },
+
+    updateReadReceiptOnUserActivity: async function() {
+        this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
+        while (this._readReceiptActivityTimer) { //unset on unmount
+            UserActivity.timeWhileActive(this._readReceiptActivityTimer);
+            try {
+                await this._readReceiptActivityTimer.finished();
+            } catch(e) { continue; /* aborted */ }
+            // outside of try/catch to not swallow errors
+            this.sendReadReceipt();
+        }
+    },
+
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;
         if (!this.props.manageReadReceipts) return;
@@ -634,10 +686,11 @@ var TimelinePanel = React.createClass({
     // of the screen, so move the marker down to the bottom of the screen.
     updateReadMarker: function() {
         if (!this.props.manageReadMarkers) return;
-        if (this.getReadMarkerPosition() !== 0) {
+        if (this.getReadMarkerPosition() === 1) {
+            // the read marker is at an event below the viewport,
+            // we don't want to rewind it.
             return;
         }
-
         // move the RM to *after* the message at the bottom of the screen. This
         // avoids a problem whereby we never advance the RM if there is a huge
         // message which doesn't fit on the screen.
@@ -654,7 +707,6 @@ var TimelinePanel = React.createClass({
         if (lastDisplayedIndex === null) {
             return;
         }
-
         const lastDisplayedEvent = this.state.events[lastDisplayedIndex];
         this._setReadMarker(lastDisplayedEvent.getId(),
                             lastDisplayedEvent.getTs());
@@ -749,7 +801,6 @@ var TimelinePanel = React.createClass({
         this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
     },
 
-
     /* update the read-up-to marker to match the read receipt
      */
     forgetReadMarker: function() {
@@ -822,15 +873,12 @@ var TimelinePanel = React.createClass({
 
     canJumpToReadMarker: function() {
         // 1. Do not show jump bar if neither the RM nor the RR are set.
-        // 2. Only show jump bar if RR !== RM. If they are the same, there are only fully
-        // read messages and unread messages. We already have a badge count and the bottom
-        // bar to jump to "live" when we have unread messages.
         // 3. We want to show the bar if the read-marker is off the top of the screen.
         // 4. Also, if pos === null, the event might not be paginated - show the unread bar
         const pos = this.getReadMarkerPosition();
-        return this.state.readMarkerEventId !== null && // 1.
-            this.state.readMarkerEventId !== this._getCurrentReadReceipt() && // 2.
+        const ret = this.state.readMarkerEventId !== null && // 1.
             (pos < 0 || pos === null); // 3., 4.
+        return ret;
     },
 
     /**
@@ -917,7 +965,6 @@ var TimelinePanel = React.createClass({
                 }
 
                 this.sendReadReceipt();
-                this.updateReadMarker();
             });
         };
 
@@ -1154,6 +1201,7 @@ var TimelinePanel = React.createClass({
         );
         return (
             <MessagePanel ref="messagePanel"
+                          room={this.props.timelineSet.room}
                           hidden={this.props.hidden}
                           backPaginating={this.state.backPaginating}
                           forwardPaginating={forwardPaginating}

src/components/structures/TopLeftMenuButton.js

@@ -0,0 +1,123 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as ContextualMenu from './ContextualMenu';
+import {TopLeftMenu} from '../views/context_menus/TopLeftMenu';
+import AccessibleButton from '../views/elements/AccessibleButton';
+import BaseAvatar from '../views/avatars/BaseAvatar';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import Avatar from '../../Avatar';
+import { _t } from '../../languageHandler';
+
+const AVATAR_SIZE = 28;
+
+export default class TopLeftMenuButton extends React.Component {
+    static propTypes = {
+        collapsed: PropTypes.bool.isRequired,
+    };
+
+    static displayName = 'TopLeftMenuButton';
+
+    constructor() {
+        super();
+        this.state = {
+            menuDisplayed: false,
+            profileInfo: null,
+        };
+
+        this.onToggleMenu = this.onToggleMenu.bind(this);
+    }
+
+    async _getProfileInfo() {
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
+        const profileInfo = await cli.getProfileInfo(userId);
+        const avatarUrl = Avatar.avatarUrlForUser(
+            {avatarUrl: profileInfo.avatar_url},
+            AVATAR_SIZE, AVATAR_SIZE, "crop");
+
+        return {
+            userId,
+            name: profileInfo.displayname,
+            avatarUrl,
+        };
+    }
+
+    async componentDidMount() {
+        try {
+            const profileInfo = await this._getProfileInfo();
+            this.setState({profileInfo});
+        } catch (ex) {
+            console.log("could not fetch profile");
+            console.error(ex);
+        }
+    }
+
+    render() {
+        const fallbackUserId = MatrixClientPeg.get().getUserId();
+        const profileInfo = this.state.profileInfo;
+        let name;
+        if (MatrixClientPeg.get().isGuest()) {
+            name = _t("Guest");
+        } else if (profileInfo) {
+            name = profileInfo.name;
+        } else {
+            name = fallbackUserId;
+        }
+        let nameElement;
+        if (!this.props.collapsed) {
+            nameElement = <div className="mx_TopLeftMenuButton_name">
+                { name }
+            </div>;
+        }
+
+        return (
+            <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
+                <BaseAvatar
+                    idName={fallbackUserId}
+                    name={name}
+                    url={profileInfo && profileInfo.avatarUrl}
+                    width={AVATAR_SIZE}
+                    height={AVATAR_SIZE}
+                    resizeMethod="crop"
+                />
+                { nameElement }
+                <img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
+            </AccessibleButton>
+        );
+    }
+
+    onToggleMenu(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const elementRect = e.currentTarget.getBoundingClientRect();
+        const x = elementRect.left;
+        const y = elementRect.top + elementRect.height;
+
+        ContextualMenu.createMenu(TopLeftMenu, {
+            chevronFace: "none",
+            left: x,
+            top: y,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    }
+}

src/components/structures/UploadBar.js

@@ -91,8 +91,8 @@ module.exports = React.createClass({displayName: '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_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
+                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
+                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
                     onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
                 />
                 <div className="mx_UploadBar_uploadBytes">

src/components/structures/UserSettings.js

@@ -65,24 +65,23 @@ const SIMPLE_SETTINGS = [
     { id: "autoplayGifsAndVideos" },
     { id: "alwaysShowEncryptionIcons" },
     { id: "showRoomRecoveryReminder" },
-    { id: "hideReadReceipts" },
-    { id: "dontSendTypingNotifications" },
+    { id: "showReadReceipts" },
+    { id: "sendTypingNotifications" },
     { id: "alwaysShowTimestamps" },
     { id: "showTwelveHourTimestamps" },
-    { id: "hideJoinLeaves" },
-    { id: "hideAvatarChanges" },
-    { id: "hideDisplaynameChanges" },
+    { id: "showJoinLeaves" },
+    { id: "showAvatarChanges" },
+    { id: "showDisplaynameChanges" },
     { id: "useCompactLayout" },
-    { id: "hideRedactions" },
+    { id: "showRedactions" },
     { id: "enableSyntaxHighlightLanguageDetection" },
     { id: "MessageComposerInput.autoReplaceEmoji" },
-    { id: "MessageComposerInput.dontSuggestEmoji" },
-    { id: "Pill.shouldHidePillAvatar" },
-    { id: "TextualBody.disableBigEmoji" },
+    { id: "MessageComposerInput.suggestEmoji" },
+    { id: "Pill.shouldShowPillAvatar" },
+    { id: "TextualBody.enableBigEmoji" },
     { id: "VideoView.flipVideoHorizontally" },
-    { id: "TagPanel.disableTagPanel" },
+    { id: "TagPanel.enableTagPanel" },
     { id: "enableWidgetScreenshots" },
-    { id: "RoomSubList.showEmpty" },
     { id: "pinMentionedRooms" },
     { id: "pinUnreadRooms" },
     { id: "showDeveloperTools" },
@@ -102,9 +101,9 @@ const ANALYTICS_SETTINGS = [
 // These settings must be defined in SettingsStore
 const WEBRTC_SETTINGS = [
     {
-        id: 'webRtcForceTURN',
+        id: 'webRtcForcePeerToPeer',
         fn: (val) => {
-            MatrixClientPeg.get().setForceTURN(val);
+            MatrixClientPeg.get().setForceTURN(!val);
         },
     },
 ];
@@ -129,6 +128,7 @@ const CRYPTO_SETTINGS = [
 const THEMES = [
     { label: _td('Light theme'), value: 'light' },
     { label: _td('Dark theme'), value: 'dark' },
+    { label: _td('2018 theme'), value: 'dharma' },
     { label: _td('Status.im theme'), value: 'status' },
 ];
 
@@ -167,13 +167,6 @@ module.exports = React.createClass({
         onClose: PropTypes.func,
         // The brand string given when creating email pushers
         brand: PropTypes.string,
-
-        // The base URL to use in the referral link. Defaults to window.location.origin.
-        referralBaseUrl: PropTypes.string,
-
-        // Team token for the referral link. If falsy, the referral section will
-        // not appear
-        teamToken: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -384,32 +377,8 @@ module.exports = React.createClass({
     },
 
     onLogoutClicked: function(ev) {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
-            title: _t("Sign out"),
-            description:
-                <div>
-             { _t("For security, logging out will delete any end-to-end " +
-                  "encryption keys from this browser. If you want to be able " +
-                  "to decrypt your conversation history from future Riot sessions, " +
-                  "please export your room keys for safe-keeping.") }
-                </div>,
-            button: _t("Sign out"),
-            extraButtons: [
-                <button key="export" className="mx_Dialog_primary"
-                        onClick={this._onExportE2eKeysClicked}>
-                   { _t("Export E2E room keys") }
-                </button>,
-            ],
-            onFinished: (confirmed) => {
-                if (confirmed) {
-                    dis.dispatch({action: 'logout'});
-                    if (this.props.onFinished) {
-                        this.props.onFinished();
-                    }
-                }
-            },
-        });
+        const LogoutDialog = sdk.getComponent("dialogs.LogoutDialog");
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
     },
 
     onPasswordChangeError: function(err) {
@@ -614,27 +583,6 @@ module.exports = React.createClass({
         return <GroupUserSettings />;
     },
 
-    _renderReferral: function() {
-        const teamToken = this.props.teamToken;
-        if (!teamToken) {
-            return null;
-        }
-        if (typeof teamToken !== 'string') {
-            console.warn('Team token not a string');
-            return null;
-        }
-        const href = (this.props.referralBaseUrl || window.location.origin) +
-            `/#/register?referrer=${this._me}&team_token=${teamToken}`;
-        return (
-            <div>
-                <h3>Referral</h3>
-                <div className="mx_UserSettings_section">
-                    { _t("Refer a friend to Riot:") } <a href={href}>{ href }</a>
-                </div>
-            </div>
-        );
-    },
-
     onLanguageChange: function(newLang) {
         if (this.state.language !== newLang) {
             SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
@@ -661,11 +609,14 @@ module.exports = React.createClass({
         // to rebind the onChange each time we render
         const onChange = (e) =>
             SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
+        // HACK: Lack of translations for themes header. We're removing this view in the very near future,
+        // and the header is really only there to maintain some semblance of the UX the section once was.
         return (
             <div>
                 <h3>{ _t("User Interface") }</h3>
                 <div className="mx_UserSettings_section">
                     { SIMPLE_SETTINGS.map( this._renderAccountSetting ) }
+                    <div><b>Themes</b></div>
                     { THEMES.map( this._renderThemeOption ) }
                     <table>
                         <tbody>
@@ -700,18 +651,12 @@ module.exports = React.createClass({
     },
 
     _renderThemeOption: function(setting) {
-        const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
-        const onChange = (v) => dis.dispatch({action: 'set_theme', value: setting.value});
-        return (
-            <div className="mx_UserSettings_toggle" key={setting.id + '_' + setting.value}>
-                <SettingsFlag name="theme"
-                                  label={setting.label}
-                                  level={SettingLevel.ACCOUNT}
-                                  onChange={onChange}
-                                  group="theme"
-                                  value={setting.value} />
-            </div>
-        );
+        // HACK: Temporary disablement of theme selection.
+        // We don't support changing themes on experimental anyways, and radio groups aren't
+        // a thing anymore for setting flags. We're also dropping this view in the very near
+        // future, so just replace the theme selection with placeholder text.
+        const currentTheme = SettingsStore.getValue("theme");
+        return <div>{_t(setting.label)} {currentTheme === setting.value ? '(current)' : null}</div>;
     },
 
     _renderCryptoInfo: function() {
@@ -859,7 +804,7 @@ module.exports = React.createClass({
         SettingsStore.getLabsFeatures().forEach((featureId) => {
             // TODO: this ought to be a separate component so that we don't need
             // to rebind the onChange each time we render
-            const onChange = async(e) => {
+            const onChange = async (e) => {
                 const checked = e.target.checked;
                 if (featureId === "feature_lazyloading") {
                     const confirmed = await this._onLazyLoadChanging(checked);
@@ -1251,7 +1196,7 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
+                        <AccessibleButton element="img" src={require("../../../res/img/cancel-small.svg")} width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
                     </div>
                 </div>
@@ -1276,7 +1221,7 @@ module.exports = React.createClass({
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
+                         <AccessibleButton element="img" src={require("../../../res/img/plus.svg")} width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
                     </div>
                 </div>
             );
@@ -1292,9 +1237,7 @@ module.exports = React.createClass({
                 <ChangePassword
                         className="mx_UserSettings_accountTable"
                         rowClassName="mx_UserSettings_profileTableRow"
-                        rowLabelClassName="mx_UserSettings_profileLabelCell"
-                        rowInputClassName="mx_UserSettings_profileInputCell"
-                        buttonClassName="mx_UserSettings_button mx_UserSettings_changePasswordButton"
+                        buttonClassName="mx_UserSettings_button"
                         onError={this.onPasswordChangeError}
                         onFinished={this.onPasswordChanged} />
         );
@@ -1346,7 +1289,7 @@ module.exports = React.createClass({
 
                     <div className="mx_UserSettings_avatarPicker">
                         <AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                            <img src="img/cancel.svg"
+                            <img src={require("../../../res/img/cancel.svg")}
                                 width="15" height="15"
                                 className="mx_filterFlipColor"
                                 alt={_t("Remove avatar")}
@@ -1358,7 +1301,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg" className="mx_filterFlipColor"
+                                <img src={require("../../../res/img/camera.svg")} className="mx_filterFlipColor"
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
@@ -1384,8 +1327,6 @@ module.exports = React.createClass({
 
                 { this._renderGroupSettings() }
 
-                { this._renderReferral() }
-
                 { notificationArea }
 
                 { this._renderUserInterfaceSettings() }

src/components/structures/auth/ForgotPassword.js

@@ -34,7 +34,6 @@ module.exports = React.createClass({
         customHsUrl: PropTypes.string,
         customIsUrl: PropTypes.string,
         onLoginClick: PropTypes.func,
-        onRegisterClick: PropTypes.func,
         onComplete: PropTypes.func.isRequired,
 
         // The default server name to use when the user hasn't specified
@@ -162,6 +161,12 @@ module.exports = React.createClass({
         this.setState(newState);
     },
 
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
     showErrorDialog: function(body, title) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
@@ -171,10 +176,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        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 AuthPage = sdk.getComponent("auth.AuthPage");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const Spinner = sdk.getComponent("elements.Spinner");
 
         let resetPasswordJsx;
@@ -183,7 +188,7 @@ module.exports = React.createClass({
             resetPasswordJsx = <Spinner />;
         } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
-                <div className="mx_Login_prompt">
+                <div>
                     { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
                         "click below.", { emailAddress: this.state.email }) }
                     <br />
@@ -193,7 +198,7 @@ module.exports = React.createClass({
             );
         } else if (this.state.progress === "complete") {
             resetPasswordJsx = (
-                <div className="mx_Login_prompt">
+                <div>
                     <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>
@@ -206,7 +211,6 @@ module.exports = React.createClass({
             if (!SdkConfig.get()['disable_custom_urls']) {
                 serverConfigSection = (
                     <ServerConfig ref="serverConfig"
-                        withToggleButton={true}
                         defaultHsUrl={this.props.defaultHsUrl}
                         defaultIsUrl={this.props.defaultIsUrl}
                         customHsUrl={this.props.customHsUrl}
@@ -222,13 +226,11 @@ module.exports = React.createClass({
                 errorText = <div className="mx_Login_error">{ err }</div>;
             }
 
-            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
             resetPasswordJsx = (
             <div>
-                <div className="mx_Login_prompt">
+                <p>
                     { _t('To reset your password, enter the email address linked to your account') }:
-                </div>
+                </p>
                 <div>
                     <form onSubmit={this.onSubmitForm}>
                         <input className="mx_Login_field" ref="user" type="text"
@@ -253,14 +255,9 @@ module.exports = React.createClass({
                     </form>
                     { serverConfigSection }
                     { errorText }
-                    <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        { _t('Return to login screen') }
+                    <a className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
+                        { _t('Sign in instead') }
                     </a>
-                    <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
-                        { _t('Create an account') }
-                    </a>
-                    <LanguageSelector />
-                    <LoginFooter />
                 </div>
             </div>
             );
@@ -268,12 +265,13 @@ module.exports = React.createClass({
 
 
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
-                    { resetPasswordJsx }
-                </div>
-            </LoginPage>
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2> { _t('Set a new password') } </h2>
+                    {resetPasswordJsx}
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Login.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,13 +24,22 @@ import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import { AutoDiscovery } from "matrix-js-sdk";
+import * as ServerType from '../../views/auth/ServerTypeSelector';
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the appropriate login flow(s) for the server
+const PHASE_LOGIN = 1;
+
+// Disable phases for now, pending UX discussion on WK discovery
+const PHASES_ENABLED = false;
+
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
 _td("Invalid homeserver discovery response");
@@ -81,6 +90,8 @@ module.exports = React.createClass({
             busy: false,
             errorText: null,
             loginIncorrect: false,
+
+            serverType: null,
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
 
@@ -88,6 +99,10 @@ module.exports = React.createClass({
             username: "",
             phoneCountry: null,
             phoneNumber: "",
+
+            // Phase of the overall login dialog.
+            phase: PHASE_SERVER_DETAILS,
+            // The current login flow, such as password, SSO, etc.
             currentFlow: "m.login.password",
 
             // .well-known discovery
@@ -214,7 +229,10 @@ module.exports = React.createClass({
         }).done();
     },
 
-    _onLoginAsGuestClick: function() {
+    _onLoginAsGuestClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+
         const self = this;
         self.setState({
             busy: true,
@@ -297,6 +315,60 @@ module.exports = React.createClass({
         });
     },
 
+    onServerTypeChange(type) {
+        this.setState({
+            serverType: type,
+        });
+
+        // When changing server types, set the HS / IS URLs to reasonable defaults for the
+        // the new type.
+        switch (type) {
+            case ServerType.FREE: {
+                const { hsUrl, isUrl } = ServerType.TYPES.FREE;
+                this.onServerConfigChange({
+                    hsUrl,
+                    isUrl,
+                });
+                // Move directly to the login phase since the server details are fixed.
+                this.setState({
+                    phase: PHASE_LOGIN,
+                });
+                break;
+            }
+            case ServerType.PREMIUM:
+            case ServerType.ADVANCED:
+                this.onServerConfigChange({
+                    hsUrl: this.props.defaultHsUrl,
+                    isUrl: this.props.defaultIsUrl,
+                });
+                this.setState({
+                    phase: PHASE_SERVER_DETAILS,
+                });
+                break;
+        }
+    },
+
+    onRegisterClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onRegisterClick();
+    },
+
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_LOGIN,
+        });
+    },
+
+    onEditServerDetailsClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_SERVER_DETAILS,
+        });
+    },
+
     _tryWellKnownDiscovery: async function(serverName) {
         if (!serverName.trim()) {
             // Nothing to discover
@@ -438,7 +510,9 @@ module.exports = React.createClass({
                         "Either use HTTPS or <a>enable unsafe scripts</a>.", {},
                         {
                             'a': (sub) => {
-                                return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">
+                                return <a target="_blank" rel="noopener"
+                                    href="https://www.google.com/search?&q=enable%20unsafe%20scripts"
+                                >
                                     { sub }
                                 </a>;
                             },
@@ -452,7 +526,9 @@ module.exports = React.createClass({
                         "is not blocking requests.", {},
                         {
                             'a': (sub) => {
-                                return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>;
+                                return <a target="_blank" rel="noopener"
+                                    href={this.state.enteredHomeserverUrl}
+                                >{ sub }</a>;
                             },
                         },
                     ) }
@@ -463,7 +539,79 @@ module.exports = React.createClass({
         return errorText;
     },
 
-    componentForStep: function(step) {
+    renderServerComponentForStep() {
+        const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        // TODO: May need to adjust the behavior of this config option
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
+        }
+
+        // If we're on a different phase, we only show the server type selector,
+        // which is always shown if we allow custom URLs at all.
+        if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
+            return <div>
+                <ServerTypeSelector
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    onChange={this.onServerTypeChange}
+                />
+            </div>;
+        }
+
+        let serverDetails = null;
+        switch (this.state.serverType) {
+            case ServerType.FREE:
+                break;
+            case ServerType.PREMIUM:
+                serverDetails = <ModularServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
+                break;
+            case ServerType.ADVANCED:
+                serverDetails = <ServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
+                break;
+        }
+
+        let nextButton = null;
+        if (PHASES_ENABLED) {
+            nextButton = <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>;
+        }
+
+        return <div>
+            <ServerTypeSelector
+                defaultHsUrl={this.props.defaultHsUrl}
+                onChange={this.onServerTypeChange}
+            />
+            {serverDetails}
+            {nextButton}
+        </div>;
+    },
+
+    renderLoginComponentForStep() {
+        if (PHASES_ENABLED && this.state.phase !== PHASE_LOGIN) {
+            return null;
+        }
+
+        const step = this.state.currentFlow;
+
         if (!step) {
             return null;
         }
@@ -478,11 +626,22 @@ module.exports = React.createClass({
     },
 
     _renderPasswordStep: function() {
-        const PasswordLogin = sdk.getComponent('login.PasswordLogin');
+        const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
+        let onEditServerDetailsClick = null;
+        // If custom URLs are allowed and we haven't selected the Free server type, wire
+        // up the server details edit link.
+        if (
+            PHASES_ENABLED &&
+            !SdkConfig.get()['disable_custom_urls'] &&
+            this.state.serverType !== ServerType.FREE
+        ) {
+            onEditServerDetailsClick = this.onEditServerDetailsClick;
+        }
         return (
             <PasswordLogin
                onSubmit={this.onPasswordLogin}
                onError={this.onPasswordLoginError}
+               onEditServerDetailsClick={onEditServerDetailsClick}
                initialUsername={this.state.username}
                initialPhoneCountry={this.state.phoneCountry}
                initialPhoneNumber={this.state.phoneNumber}
@@ -500,17 +659,24 @@ module.exports = React.createClass({
     },
 
     _renderSsoStep: function(url) {
+        // XXX: This link does *not* have a target="_blank" because single sign-on relies on
+        // redirecting the user back to a URI once they're logged in. On the web, this means
+        // we use the same window and redirect back to riot. On electron, this actually
+        // opens the SSO page in the electron app itself due to
+        // https://github.com/electron/electron/issues/8841 and so happens to work.
+        // If this bug gets fixed, it will break SSO since it will open the SSO page in the
+        // user's browser, let them log into their SSO provider, then redirect their browser
+        // to vector://vector which, of course, will not work.
         return (
-            <a href={url} className="mx_Login_sso_link">{ _t('Sign in with single sign-on') }</a>
+            <a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
         );
     },
 
     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 AuthPage = sdk.getComponent("auth.AuthPage");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -518,35 +684,11 @@ module.exports = React.createClass({
         let loginAsGuestJsx;
         if (this.props.enableGuest) {
             loginAsGuestJsx =
-                <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
+                <a className="mx_Auth_changeFlow" onClick={this._onLoginAsGuestClick} href="#">
                     { _t('Try the app first') }
                 </a>;
         }
 
-        let serverConfig;
-        let header;
-
-        if (!SdkConfig.get()['disable_custom_urls']) {
-            serverConfig = <ServerConfig ref="serverConfig"
-                withToggleButton={true}
-                customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
-                customIsUrl={this.state.discoveredIsUrl || 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 (!errorText) {
-                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
-            }
-        }
-
         let errorTextSection;
         if (errorText) {
             errorTextSection = (
@@ -556,26 +698,23 @@ module.exports = React.createClass({
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
-                    <div>
-                        { header }
-                        { errorTextSection }
-                        { this.componentForStep(this.state.currentFlow) }
-                        { serverConfig }
-                        <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
-                            { _t('Create an account') }
-                        </a>
-                        { loginAsGuestJsx }
-                        <LanguageSelector />
-                        <LoginFooter />
-                    </div>
-                </div>
-            </LoginPage>
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2>
+                        {_t('Sign in to your account')}
+                        {loader}
+                    </h2>
+                    { errorTextSection }
+                    { this.renderServerComponentForStep() }
+                    { this.renderLoginComponentForStep() }
+                    <a className="mx_Auth_changeFlow" onClick={this.onRegisterClick} href="#">
+                        { _t('Create account') }
+                    </a>
+                    { loginAsGuestJsx }
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/PostRegistration.js

@@ -60,12 +60,13 @@ module.exports = React.createClass({
     render: function() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        const LoginPage = sdk.getComponent('login.LoginPage');
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
                     <div className="mx_Login_profile">
                         { _t('Set a display name:') }
                         <ChangeDisplayName />
@@ -75,8 +76,8 @@ module.exports = React.createClass({
                         <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
                         { this.state.errorString }
                     </div>
-                </div>
-            </LoginPage>
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Registration.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,16 +23,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import RegistrationForm from '../../views/login/RegistrationForm';
-import RtsClient from '../../../RtsClient';
 import { _t, _td } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
+import * as ServerType from '../../views/auth/ServerTypeSelector';
 
 const MIN_PASSWORD_LENGTH = 6;
 
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the appropriate registration flow(s) for the server
+const PHASE_REGISTRATION = 1;
+
+// Enable phases for registration
+const PHASES_ENABLED = true;
+
 module.exports = React.createClass({
     displayName: 'Registration',
 
@@ -49,13 +55,6 @@ module.exports = React.createClass({
         brand: PropTypes.string,
         email: PropTypes.string,
         referrer: PropTypes.string,
-        teamServerConfig: PropTypes.shape({
-            // Email address to request new teams
-            supportEmail: PropTypes.string.isRequired,
-            // URL of the riot-team-server to get team configurations and track referrals
-            teamServerURL: PropTypes.string.isRequired,
-        }),
-        teamSelected: PropTypes.object,
 
         // The default server name to use when the user hasn't specified
         // one. This is used when displaying the defaultHsUrl in the UI.
@@ -71,18 +70,11 @@ module.exports = React.createClass({
         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() {
         return {
             busy: false,
-            teamServerBusy: false,
             errorText: null,
             // We remember the values entered by the user because
             // the registration form will be unmounted during the
@@ -99,6 +91,7 @@ module.exports = React.createClass({
             // If we've been given a session ID, we're resuming
             // straight back into UI auth
             doingUIAuth: Boolean(this.props.sessionId),
+            serverType: null,
             hsUrl: this.props.customHsUrl,
             isUrl: this.props.customIsUrl,
             flows: null,
@@ -107,37 +100,7 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         this._unmounted = false;
-
         this._replaceClient();
-
-        if (
-            this.props.teamServerConfig &&
-            this.props.teamServerConfig.teamServerURL &&
-            !this._rtsClient
-        ) {
-            this._rtsClient = this.props.rtsClient || new RtsClient(this.props.teamServerConfig.teamServerURL);
-
-            this.setState({
-                teamServerBusy: true,
-            });
-            // GET team configurations including domains, names and icons
-            this._rtsClient.getTeamsConfig().then((data) => {
-                const teamsConfig = {
-                    teams: data,
-                    supportEmail: this.props.teamServerConfig.supportEmail,
-                };
-                console.log('Setting teams config to ', teamsConfig);
-                this.setState({
-                    teamsConfig: teamsConfig,
-                    teamServerBusy: false,
-                });
-            }, (err) => {
-                console.error('Error retrieving config for teams', err);
-                this.setState({
-                    teamServerBusy: false,
-                });
-            });
-        }
     },
 
     onServerConfigChange: function(config) {
@@ -154,6 +117,39 @@ module.exports = React.createClass({
         });
     },
 
+    onServerTypeChange(type) {
+        this.setState({
+            serverType: type,
+        });
+
+        // When changing server types, set the HS / IS URLs to reasonable defaults for the
+        // the new type.
+        switch (type) {
+            case ServerType.FREE: {
+                const { hsUrl, isUrl } = ServerType.TYPES.FREE;
+                this.onServerConfigChange({
+                    hsUrl,
+                    isUrl,
+                });
+                // Move directly to the registration phase since the server details are fixed.
+                this.setState({
+                    phase: PHASE_REGISTRATION,
+                });
+                break;
+            }
+            case ServerType.PREMIUM:
+            case ServerType.ADVANCED:
+                this.onServerConfigChange({
+                    hsUrl: this.props.defaultHsUrl,
+                    isUrl: this.props.defaultIsUrl,
+                });
+                this.setState({
+                    phase: PHASE_SERVER_DETAILS,
+                });
+                break;
+        }
+    },
+
     _replaceClient: async function() {
         this._matrixClient = Matrix.createClient({
             baseUrl: this.state.hsUrl,
@@ -192,7 +188,7 @@ module.exports = React.createClass({
         });
     },
 
-    _onUIAuthFinished: function(success, response, extra) {
+    _onUIAuthFinished: async function(success, response, extra) {
         if (!success) {
             let msg = response.message || response.toString();
             // can we give a better error message?
@@ -241,58 +237,15 @@ module.exports = React.createClass({
             doingUIAuth: false,
         });
 
-        // Done regardless of `teamSelected`. People registering with non-team emails
-        // will just nop. The point of this being we might not have the email address
-        // that the user registered with at this stage (depending on whether this
-        // is the client they initiated registration).
-        let trackPromise = Promise.resolve(null);
-        if (this._rtsClient && extra.emailSid) {
-            // Track referral if this.props.referrer set, get team_token in order to
-            // retrieve team config and see welcome page etc.
-            trackPromise = this._rtsClient.trackReferral(
-                this.props.referrer || '', // Default to empty string = not referred
-                extra.emailSid,
-                extra.clientSecret,
-            ).then((data) => {
-                const teamToken = data.team_token;
-                // Store for use /w welcome pages
-                window.localStorage.setItem('mx_team_token', teamToken);
-
-                this._rtsClient.getTeam(teamToken).then((team) => {
-                    console.log(
-                        `User successfully registered with team ${team.name}`,
-                    );
-                    if (!team.rooms) {
-                        return;
-                    }
-                    // Auto-join rooms
-                    team.rooms.forEach((room) => {
-                        if (room.auto_join && room.room_id) {
-                            console.log(`Auto-joining ${room.room_id}`);
-                            MatrixClientPeg.get().joinRoom(room.room_id);
-                        }
-                    });
-                }, (err) => {
-                    console.error('Error getting team config', err);
-                });
-
-                return teamToken;
-            }, (err) => {
-                console.error('Error tracking referral', err);
-            });
-        }
-
-        trackPromise.then((teamToken) => {
-            return this.props.onLoggedIn({
-                userId: response.user_id,
-                deviceId: response.device_id,
-                homeserverUrl: this._matrixClient.getHomeserverUrl(),
-                identityServerUrl: this._matrixClient.getIdentityServerUrl(),
-                accessToken: response.access_token,
-            }, teamToken);
-        }).then((cli) => {
-            return this._setupPushers(cli);
+        const cli = await this.props.onLoggedIn({
+            userId: response.user_id,
+            deviceId: response.device_id,
+            homeserverUrl: this._matrixClient.getHomeserverUrl(),
+            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
+            accessToken: response.access_token,
         });
+
+        this._setupPushers(cli);
     },
 
     _setupPushers: function(matrixClient) {
@@ -345,7 +298,7 @@ module.exports = React.createClass({
                 errMsg = _t("Only use lower case letters, numbers and '=_-./'");
                 break;
             case "RegistrationForm.ERR_USERNAME_BLANK":
-                errMsg = _t('You need to enter a user name.');
+                errMsg = _t('You need to enter a username.');
                 break;
             default:
                 console.error("Unknown error code: %s", errCode);
@@ -357,10 +310,25 @@ module.exports = React.createClass({
         });
     },
 
-    onTeamSelected: function(teamSelected) {
-        if (!this._unmounted) {
-            this.setState({ teamSelected });
-        }
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_REGISTRATION,
+        });
+    },
+
+    onEditServerDetailsClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_SERVER_DETAILS,
+        });
     },
 
     _makeRegisterRequest: function(auth) {
@@ -390,109 +358,154 @@ module.exports = React.createClass({
         };
     },
 
-    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');
+    renderServerComponent() {
+        const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        const theme = SettingsStore.getValue("theme");
-
-        let registerBody;
-        if (this.state.doingUIAuth) {
-            registerBody = (
-                <InteractiveAuth
-                    matrixClient={this._matrixClient}
-                    makeRequest={this._makeRegisterRequest}
-                    onAuthFinished={this._onUIAuthFinished}
-                    inputs={this._getUIAuthInputs()}
-                    makeRegistrationUrl={this.props.makeRegistrationUrl}
-                    sessionId={this.props.sessionId}
-                    clientSecret={this.props.clientSecret}
-                    emailSid={this.props.idSid}
-                    poll={true}
-                />
-            );
-        } else if (this.state.busy || this.state.teamServerBusy || !this.state.flows) {
-            registerBody = <Spinner />;
-        } else {
-            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>
-                    <RegistrationForm
-                        defaultUsername={this.state.formVals.username}
-                        defaultEmail={this.state.formVals.email}
-                        defaultPhoneCountry={this.state.formVals.phoneCountry}
-                        defaultPhoneNumber={this.state.formVals.phoneNumber}
-                        defaultPassword={this.state.formVals.password}
-                        teamsConfig={this.state.teamsConfig}
-                        minPasswordLength={MIN_PASSWORD_LENGTH}
-                        onError={this.onFormValidationFailed}
-                        onRegisterClick={this.onFormSubmit}
-                        onTeamSelected={this.onTeamSelected}
-                        flows={this.state.flows}
-                    />
-                    { serverConfigSection }
-                </div>
-            );
+        // TODO: May need to adjust the behavior of this config option
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
         }
 
-        let header;
-        let errorText;
-        // FIXME: remove hardcoded Status team tweaks at some point
-        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-        if (theme === 'status' && err) {
-            header = <div className="mx_Login_error">{ err }</div>;
+        // If we're on a different phase, we only show the server type selector,
+        // which is always shown if we allow custom URLs at all.
+        if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
+            return <div>
+                <ServerTypeSelector
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    onChange={this.onServerTypeChange}
+                />
+            </div>;
+        }
+
+        let serverDetails = null;
+        switch (this.state.serverType) {
+            case ServerType.FREE:
+                break;
+            case ServerType.PREMIUM:
+                serverDetails = <ModularServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
+                break;
+            case ServerType.ADVANCED:
+                serverDetails = <ServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
+                break;
+        }
+
+        let nextButton = null;
+        if (PHASES_ENABLED) {
+            nextButton = <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>;
+        }
+
+        return <div>
+            <ServerTypeSelector
+                defaultHsUrl={this.props.defaultHsUrl}
+                onChange={this.onServerTypeChange}
+            />
+            {serverDetails}
+            {nextButton}
+        </div>;
+    },
+
+    renderRegisterComponent() {
+        if (PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) {
+            return null;
+        }
+
+        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
+        const Spinner = sdk.getComponent('elements.Spinner');
+        const RegistrationForm = sdk.getComponent('auth.RegistrationForm');
+
+        if (this.state.doingUIAuth) {
+            return <InteractiveAuth
+                matrixClient={this._matrixClient}
+                makeRequest={this._makeRegisterRequest}
+                onAuthFinished={this._onUIAuthFinished}
+                inputs={this._getUIAuthInputs()}
+                makeRegistrationUrl={this.props.makeRegistrationUrl}
+                sessionId={this.props.sessionId}
+                clientSecret={this.props.clientSecret}
+                emailSid={this.props.idSid}
+                poll={true}
+            />;
+        } else if (this.state.busy || !this.state.flows) {
+            return <Spinner />;
         } else {
-            header = <h2>{ _t('Create an account') }</h2>;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
+            let onEditServerDetailsClick = null;
+            // If custom URLs are allowed and we haven't selected the Free server type, wire
+            // up the server details edit link.
+            if (
+                PHASES_ENABLED &&
+                !SdkConfig.get()['disable_custom_urls'] &&
+                this.state.serverType !== ServerType.FREE
+            ) {
+                onEditServerDetailsClick = this.onEditServerDetailsClick;
             }
+            return <RegistrationForm
+                defaultUsername={this.state.formVals.username}
+                defaultEmail={this.state.formVals.email}
+                defaultPhoneCountry={this.state.formVals.phoneCountry}
+                defaultPhoneNumber={this.state.formVals.phoneNumber}
+                defaultPassword={this.state.formVals.password}
+                minPasswordLength={MIN_PASSWORD_LENGTH}
+                onError={this.onFormValidationFailed}
+                onRegisterClick={this.onFormSubmit}
+                onEditServerDetailsClick={onEditServerDetailsClick}
+                flows={this.state.flows}
+                hsUrl={this.state.hsUrl}
+                hsName={this.props.defaultServerName}
+            />;
+        }
+    },
+
+    render: function() {
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
+        const AuthPage = sdk.getComponent('auth.AuthPage');
+
+        let errorText;
+        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
+        if (err) {
+            errorText = <div className="mx_Login_error">{ err }</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 className="mx_Auth_changeFlow" onClick={this.onLoginClick} href="#">
+                    { _t('Sign in instead') }
                 </a>
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader
-                        icon={this.state.teamSelected ?
-                            this.props.teamServerConfig.teamServerURL + "/static/common/" +
-                            this.state.teamSelected.domain + "/icon.png" :
-                            null}
-                    />
-                    { header }
-                    { registerBody }
-                    { signIn }
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2>{ _t('Create your account') }</h2>
                     { errorText }
-                    <LanguageSelector />
-                    <LoginFooter />
-                </div>
-            </LoginPage>
+                    { this.renderServerComponent() }
+                    { this.renderRegisterComponent() }
+                    { signIn }
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/views/auth/AuthBody.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthBody extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/auth/AuthButtons.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,12 +18,12 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
-import { _t } from '../../languageHandler';
-const dis = require('../../dispatcher');
-const AccessibleButton = require('../../components/views/elements/AccessibleButton');
+import { _t } from '../../../languageHandler';
+const dis = require('../../../dispatcher');
+const AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
-    displayName: 'LoginBox',
+    displayName: 'AuthButtons',
 
     propTypes: {
     },
@@ -38,18 +38,18 @@ module.exports = React.createClass({
 
     render: function() {
         const loginButton = (
-            <div className="mx_LoginBox_loginButton_wrapper">
-                <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
+            <div className="mx_AuthButtons_loginButton_wrapper">
+                <AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
                     { _t("Login") }
                 </AccessibleButton>
-                <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                <AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
                     { _t("Register") }
                 </AccessibleButton>
             </div>
         );
 
         return (
-            <div className="mx_LoginBox">
+            <div className="mx_AuthButtons">
                 { loginButton }
             </div>
         );

src/components/views/auth/AuthFooter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,12 +21,12 @@ import { _t } from '../../../languageHandler';
 import React from 'react';
 
 module.exports = React.createClass({
-    displayName: 'LoginFooter',
+    displayName: 'AuthFooter',
 
     render: function() {
         return (
-            <div className="mx_Login_links">
-                <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
+            <div className="mx_AuthFooter">
+                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t("powered by Matrix") }</a>
             </div>
         );
     },

src/components/views/auth/AuthHeader.js

@@ -0,0 +1,37 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+const React = require('react');
+import sdk from '../../../index';
+
+module.exports = React.createClass({
+    displayName: 'AuthHeader',
+
+    render: function() {
+        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
+        const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
+
+        return (
+            <div className="mx_AuthHeader">
+                <AuthHeaderLogo />
+                <LanguageSelector />
+            </div>
+        );
+    },
+});

src/components/views/auth/AuthHeaderLogo.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthHeaderLogo extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthHeaderLogo">
+            Matrix
+        </div>;
+    }
+}

src/components/views/auth/AuthPage.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,14 +18,20 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import sdk from '../../../index';
 
 module.exports = React.createClass({
-    displayName: 'LoginHeader',
+    displayName: 'AuthPage',
 
     render: function() {
+        const AuthFooter = sdk.getComponent('auth.AuthFooter');
+
         return (
-            <div className="mx_Login_logo">
-                Matrix
+            <div className="mx_AuthPage">
+                <div className="mx_AuthPage_modal">
+                    { this.props.children }
+                </div>
+                <AuthFooter />
             </div>
         );
     },

src/components/views/auth/CaptchaForm.js

@@ -62,7 +62,7 @@ module.exports = React.createClass({
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
             const protocol = global.location.protocol;
-            if (protocol === "file:") {
+            if (protocol === "vector:") {
                 const warning = document.createElement('div');
                 // XXX: fix hardcoded app URL.  Better solutions include:
                 // * jumping straight to a hosted captcha page (but we don't support that yet)
@@ -71,7 +71,11 @@ module.exports = React.createClass({
                 ReactDOM.render(_t(
                     "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
                     {},
-                    { 'a': (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }}), warning);
+                    {
+                        'a': (sub) => {
+                            return <a target="_blank" rel="noopener" href='https://riot.im/app'>{ sub }</a>;
+                        },
+                    }), warning);
                 this.refs.recaptchaContainer.appendChild(warning);
             } else {
                 const scriptTag = document.createElement('script');

src/components/views/auth/CountryDropdown.js

@@ -21,7 +21,7 @@ import sdk from '../../../index';
 
 import { COUNTRIES } from '../../../phonenumber';
 
-const COUNTRIES_BY_ISO2 = new Object(null);
+const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }
@@ -70,7 +70,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={`img/flags/${iso2}.png`} />;
+        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
     }
 
     _getShortOption(iso2) {
@@ -81,7 +81,7 @@ export default class CountryDropdown extends React.Component {
         if (this.props.showPrefix) {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
-        return <span>
+        return <span className="mx_CountryDropdown_shortOption">
             { this._flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
@@ -111,7 +111,7 @@ export default class CountryDropdown extends React.Component {
         }
 
         const options = displayedCountries.map((country) => {
-            return <div key={country.iso2}>
+            return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
                 { country.name } <span>(+{ country.prefix })</span>
             </div>;
@@ -121,7 +121,7 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || COUNTRIES[0].iso2;
 
-        return <Dropdown className={this.props.className + " left_aligned"}
+        return <Dropdown className={this.props.className + " mx_CountryDropdown"}
             onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
             menuWidth={298} getShortOption={this._getShortOption}
             value={value} searchEnabled={true} disabled={this.props.disabled}

src/components/views/auth/CustomServerDialog.js

@@ -27,17 +27,17 @@ module.exports = React.createClass({
                     { _t("Custom Server Options") }
                 </div>
                 <div className="mx_Dialog_content">
-                    <span>
-                        { _t("You can use the custom server options to sign into other Matrix " +
-                        "servers by specifying a different Home server URL.") }
-                        <br />
-                        { _t("This allows you to use this app with an existing Matrix account on " +
-                            "a different home server.") }
-                        <br />
-                        <br />
-                        { _t("You can also set a custom identity server but this will typically prevent " +
-                            "interaction with users based on email address.") }
-                    </span>
+                    <p>{_t(
+                        "You can use the custom server options to sign into other " +
+                        "Matrix servers by specifying a different homeserver URL. This " +
+                        "allows you to use this app with an existing Matrix account on a " +
+                        "different homeserver.",
+                    )}</p>
+                    <p>{_t(
+                        "You can also set a custom identity server, but you won't be " +
+                        "able to invite users by email address, or be invited by email " +
+                        "address yourself.",
+                    )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.props.onFinished} autoFocus={true}>

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
             return <Loader />;
         }
 
-        const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
+        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         const sitePublicKey = this.props.stageParams.public_key;
 
         let errorSection;
@@ -294,7 +294,7 @@ export const TermsAuthEntry = React.createClass({
     _trySubmit: function() {
         let allChecked = true;
         for (const policy of this.state.policies) {
-            let checked = this.state.toggledPolicies[policy.id];
+            const checked = this.state.toggledPolicies[policy.id];
             allChecked = allChecked && checked;
         }
 
@@ -440,7 +440,6 @@ export const MsisdnAuthEntry = React.createClass({
         clientSecret: PropTypes.func,
         submitAuthDict: PropTypes.func.isRequired,
         matrixClient: PropTypes.object,
-        submitAuthDict: PropTypes.func,
     },
 
     getInitialState: function() {

src/components/views/auth/LanguageSelector.js

@@ -32,7 +32,8 @@ 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>;
+    return <LanguageDropdown className="mx_Auth_language"
+        onOptionChange={onChange}
+        value={getCurrentLanguage()}
+    />;
 }

src/components/views/auth/ModularServerConfig.js

@@ -0,0 +1,126 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+
+/*
+ * Configure the Modular server name.
+ *
+ * This is a variant of ServerConfig with only the HS field and different body
+ * text that is specific to the Modular case.
+ */
+export default class ModularServerConfig extends React.PureComponent {
+    static propTypes = {
+        onServerConfigChange: PropTypes.func,
+
+        // default URLs are defined in config.json (or the hardcoded defaults)
+        // they are used if the user has not overridden them with a custom URL.
+        // In other words, if the custom URL is blank, the default is used.
+        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
+
+        // This component always uses the default IS URL and doesn't allow it
+        // to be changed.  We still receive it as a prop here to simplify
+        // consumers by still passing the IS URL via onServerConfigChange.
+        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
+
+        // custom URLs are explicitly provided by the user and override the
+        // default URLs.  The user enters them via the component's input fields,
+        // which is reflected on these properties whenever on..UrlChanged fires.
+        // They are persisted in localStorage by MatrixClientPeg, and so can
+        // override the default URLs when the component initially loads.
+        customHsUrl: PropTypes.string,
+
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+    }
+
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: this.props.defaultIsUrl,
+        });
+    }
+
+    onHomeserverChanged = (ev) => {
+        this.setState({hsUrl: ev.target.value}, () => {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
+                let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
+                if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.props.defaultIsUrl,
+                });
+            });
+        });
+    }
+
+    _waitThenInvoke(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    }
+
+    render() {
+        const Field = sdk.getComponent('elements.Field');
+
+        return (
+            <div className="mx_ServerConfig">
+                <h3>{_t("Your Modular server")}</h3>
+                {_t(
+                    "Enter the location of your Modular homeserver. It may use your own " +
+                    "domain name or be a subdomain of <a>modular.im</a>.",
+                    {}, {
+                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                            {sub}
+                        </a>,
+                    },
+                )}
+                <div className="mx_ServerConfig_fields">
+                    <Field id="mx_ServerConfig_hsUrl"
+                        label={_t("Server Name")}
+                        placeholder={this.props.defaultHsUrl}
+                        value={this.state.hsUrl}
+                        onChange={this.onHomeserverChanged}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

src/components/views/auth/PasswordLogin.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {field_input_incorrect} from '../../../UiEffects';
+import {fieldInputIncorrect} from '../../../UiEffects';
 import SdkConfig from '../../../SdkConfig';
 
 /**
@@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
 class PasswordLogin extends React.Component {
     static defaultProps = {
         onError: function() {},
+        onEditServerDetailsClick: null,
         onUsernameChanged: function() {},
         onUsernameBlur: function() {},
         onPasswordChanged: function() {},
@@ -39,7 +40,7 @@ class PasswordLogin extends React.Component {
         initialPhoneNumber: "",
         initialPassword: "",
         loginIncorrect: false,
-        hsDomain: "",
+        hsUrl: "",
         hsName: null,
         disableSubmit: false,
     }
@@ -71,7 +72,7 @@ class PasswordLogin extends React.Component {
 
     componentWillReceiveProps(nextProps) {
         if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
-            field_input_incorrect(this.isLoginEmpty() ? this._loginField : this._passwordField);
+            fieldInputIncorrect(this.isLoginEmpty() ? this._loginField : this._passwordField);
         }
     }
 
@@ -93,7 +94,7 @@ class PasswordLogin extends React.Component {
             case PasswordLogin.LOGIN_FIELD_MXID:
                 username = this.state.username;
                 if (!username) {
-                    error = _t('The user name field must not be blank.');
+                    error = _t('The username field must not be blank.');
                 }
                 break;
             case PasswordLogin.LOGIN_FIELD_PHONE:
@@ -158,18 +159,16 @@ class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType, disabled) {
+    renderLoginField(loginType) {
         const classes = {
             mx_Login_field: true,
-            mx_Login_field_disabled: disabled,
         };
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
-                classes.mx_Login_email = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
-                    className={classNames(classes)}
+                    className="mx_Login_field"
                     ref={(e) => {this._loginField = e;}}
                     key="email_input"
                     type="text"
@@ -179,10 +178,8 @@ class PasswordLogin extends React.Component {
                     placeholder="joe@example.com"
                     value={this.state.username}
                     autoFocus
-                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
-                classes.mx_Login_username = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className={classNames(classes)}
@@ -195,14 +192,12 @@ class PasswordLogin extends React.Component {
                     placeholder={SdkConfig.get().disable_custom_urls ?
                                       _t("Username on %(hs)s", {
                                         hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
-                                      }) : _t("User name")}
+                                      }) : _t("Username")}
                     value={this.state.username}
                     autoFocus
-                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
-                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-                classes.mx_Login_phoneNumberField = true;
+                const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
                 classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
                 return <div className="mx_Login_phoneSection">
@@ -212,7 +207,6 @@ class PasswordLogin extends React.Component {
                         value={this.state.phoneCountry}
                         isSmall={true}
                         showPrefix={true}
-                        disabled={disabled}
                     />
                     <input
                         className={classNames(classes)}
@@ -224,7 +218,6 @@ class PasswordLogin extends React.Component {
                         placeholder={_t("Mobile phone number")}
                         value={this.state.phoneNumber}
                         autoFocus
-                        disabled={disabled}
                     />
                 </div>;
             }
@@ -245,34 +238,47 @@ class PasswordLogin extends React.Component {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
-            forgotPasswordJsx = (
-                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    { _t('Forgot your password?') }
-                </a>
-            );
+            forgotPasswordJsx = <span>
+                {_t('Not sure of your password? <a>Set a new one</a>', {}, {
+                    a: sub => <a className="mx_Login_forgot"
+                        onClick={this.props.onForgotPasswordClick}
+                        href="#"
+                    >
+                        {sub}
+                    </a>,
+                })}
+            </span>;
         }
 
-        let matrixIdText = _t('Matrix ID');
+        let yourMatrixAccountText = _t('Your account');
         if (this.props.hsName) {
-            matrixIdText = _t('%(serverName)s Matrix ID', {serverName: this.props.hsName});
+            yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: this.props.hsName});
         } else {
             try {
                 const parsedHsUrl = new URL(this.props.hsUrl);
-                matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
+                yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: parsedHsUrl.hostname});
             } catch (e) {
                 // ignore
             }
         }
 
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_Auth_editServerDetails"
+                href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_t('Edit')}
+            </a>;
+        }
+
         const pwFieldClass = classNames({
             mx_Login_field: true,
-            mx_Login_field_disabled: matrixIdText === '',
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
-        const loginField = this.renderLoginField(this.state.loginType, matrixIdText === '');
+        const loginField = this.renderLoginField(this.state.loginType);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
@@ -282,9 +288,8 @@ class PasswordLogin extends React.Component {
                     <Dropdown
                         className="mx_Login_type_dropdown"
                         value={this.state.loginType}
-                        disabled={matrixIdText === ''}
                         onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ matrixIdText }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span>
                             <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
                             <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
                     </Dropdown>
@@ -292,22 +297,27 @@ class PasswordLogin extends React.Component {
             );
         }
 
-        const disableSubmit = this.props.disableSubmit || matrixIdText === '';
-
         return (
             <div>
+                <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3>
                 <form onSubmit={this.onSubmitForm}>
-                { loginType }
-                { loginField }
-                <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
-                    name="password"
-                    value={this.state.password} onChange={this.onPasswordChanged}
-                    placeholder={_t('Password')}
-                    disabled={matrixIdText === ''}
-                />
-                <br />
-                { forgotPasswordJsx }
-                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={disableSubmit} />
+                    { loginType }
+                    { loginField }
+                    <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
+                        name="password"
+                        value={this.state.password} onChange={this.onPasswordChanged}
+                        placeholder={_t('Password')}
+                    />
+                    <br />
+                    { forgotPasswordJsx }
+                    <input className="mx_Login_submit"
+                        type="submit"
+                        value={_t('Sign in')}
+                        disabled={this.props.disableSubmit}
+                    />
                 </form>
             </div>
         );

src/components/views/auth/RegistrationForm.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { field_input_incorrect } from '../../../UiEffects';
+import { fieldInputIncorrect } from '../../../UiEffects';
 import sdk from '../../../index';
 import Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
@@ -28,7 +28,6 @@ import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 
 const FIELD_EMAIL = 'field_email';
-const FIELD_PHONE_COUNTRY = 'field_phone_country';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
 const FIELD_USERNAME = 'field_username';
 const FIELD_PASSWORD = 'field_password';
@@ -47,20 +46,10 @@ module.exports = React.createClass({
         defaultPhoneNumber: PropTypes.string,
         defaultUsername: PropTypes.string,
         defaultPassword: PropTypes.string,
-        teamsConfig: PropTypes.shape({
-            // Email address to request new teams
-            supportEmail: PropTypes.string,
-            teams: PropTypes.arrayOf(PropTypes.shape({
-                // The displayed name of the team
-                "name": PropTypes.string,
-                // The domain of team email addresses
-                "domain": PropTypes.string,
-            })).required,
-        }),
-
         minPasswordLength: PropTypes.number,
         onError: PropTypes.func,
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
+        onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
     },
 
@@ -76,7 +65,6 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             fieldValid: {},
-            selectedTeam: null,
             // The ISO2 country code selected in the phone number entry
             phoneCountry: this.props.defaultPhoneCountry,
         };
@@ -139,8 +127,7 @@ module.exports = React.createClass({
     },
 
     /**
-     * Returns true if all fields were valid last time
-     * they were validated.
+     * @returns {boolean} true if all fields were valid last time they were validated.
      */
     allFieldsValid: function() {
         const keys = Object.keys(this.state.fieldValid);
@@ -152,103 +139,84 @@ module.exports = React.createClass({
         return true;
     },
 
-    _isUniEmail: function(email) {
-        return email.endsWith('.ac.uk') || email.endsWith('.edu') || email.endsWith('matrix.org');
-    },
-
-    validateField: function(field_id) {
+    validateField: function(fieldID) {
         const pwd1 = this.refs.password.value.trim();
         const pwd2 = this.refs.passwordConfirm.value.trim();
 
-        switch (field_id) {
-            case FIELD_EMAIL:
+        switch (fieldID) {
+            case FIELD_EMAIL: {
                 const email = this.refs.email.value;
-                if (this.props.teamsConfig && this._isUniEmail(email)) {
-                    const matchingTeam = this.props.teamsConfig.teams.find(
-                        (team) => {
-                            return email.split('@').pop() === team.domain;
-                        },
-                    ) || null;
-                    this.setState({
-                        selectedTeam: matchingTeam,
-                        showSupportEmail: !matchingTeam,
-                    });
-                    this.props.onTeamSelected(matchingTeam);
-                } else {
-                    this.props.onTeamSelected(null);
-                    this.setState({
-                        selectedTeam: null,
-                        showSupportEmail: false,
-                    });
-                }
                 const emailValid = email === '' || Email.looksValid(email);
                 if (this._authStepIsRequired('m.login.email.identity') && (!emailValid || email === '')) {
-                    this.markFieldValid(field_id, false, "RegistrationForm.ERR_MISSING_EMAIL");
-                } else this.markFieldValid(field_id, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
+                    this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_EMAIL");
+                } else this.markFieldValid(fieldID, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
                 break;
-            case FIELD_PHONE_NUMBER:
+            }
+            case FIELD_PHONE_NUMBER: {
                 const phoneNumber = this.refs.phoneNumber ? this.refs.phoneNumber.value : '';
                 const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
                 if (this._authStepIsRequired('m.login.msisdn') && (!phoneNumberValid || phoneNumber === '')) {
-                    this.markFieldValid(field_id, false, "RegistrationForm.ERR_MISSING_PHONE_NUMBER");
-                } else this.markFieldValid(field_id, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
+                    this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_PHONE_NUMBER");
+                } else this.markFieldValid(fieldID, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
                 break;
-            case FIELD_USERNAME:
+            }
+            case FIELD_USERNAME: {
                 const username = this.refs.username.value.trim();
                 if (!SAFE_LOCALPART_REGEX.test(username)) {
                     this.markFieldValid(
-                        field_id,
+                        fieldID,
                         false,
                         "RegistrationForm.ERR_USERNAME_INVALID",
                     );
                 } else if (username == '') {
                     this.markFieldValid(
-                        field_id,
+                        fieldID,
                         false,
                         "RegistrationForm.ERR_USERNAME_BLANK",
                     );
                 } else {
-                    this.markFieldValid(field_id, true);
+                    this.markFieldValid(fieldID, true);
                 }
                 break;
+            }
             case FIELD_PASSWORD:
                 if (pwd1 == '') {
                     this.markFieldValid(
-                        field_id,
+                        fieldID,
                         false,
                         "RegistrationForm.ERR_PASSWORD_MISSING",
                     );
                 } else if (pwd1.length < this.props.minPasswordLength) {
                     this.markFieldValid(
-                        field_id,
+                        fieldID,
                         false,
                         "RegistrationForm.ERR_PASSWORD_LENGTH",
                     );
                 } else {
-                    this.markFieldValid(field_id, true);
+                    this.markFieldValid(fieldID, true);
                 }
                 break;
             case FIELD_PASSWORD_CONFIRM:
                 this.markFieldValid(
-                    field_id, pwd1 == pwd2,
+                    fieldID, pwd1 == pwd2,
                     "RegistrationForm.ERR_PASSWORD_MISMATCH",
                 );
                 break;
         }
     },
 
-    markFieldValid: function(field_id, val, error_code) {
+    markFieldValid: function(fieldID, val, errorCode) {
         const fieldValid = this.state.fieldValid;
-        fieldValid[field_id] = val;
+        fieldValid[fieldID] = val;
         this.setState({fieldValid: fieldValid});
         if (!val) {
-            field_input_incorrect(this.fieldElementById(field_id));
-            this.props.onError(error_code);
+            fieldInputIncorrect(this.fieldElementById(fieldID));
+            this.props.onError(errorCode);
         }
     },
 
-    fieldElementById(field_id) {
-        switch (field_id) {
+    fieldElementById(fieldID) {
+        switch (fieldID) {
             case FIELD_EMAIL:
                 return this.refs.email;
             case FIELD_PHONE_NUMBER:
@@ -262,9 +230,9 @@ module.exports = React.createClass({
         }
     },
 
-    _classForField: function(field_id, ...baseClasses) {
+    _classForField: function(fieldID, ...baseClasses) {
         let cls = baseClasses.join(' ');
-        if (this.state.fieldValid[field_id] === false) {
+        if (this.state.fieldValid[fieldID] === false) {
             if (cls) cls += ' ';
             cls += 'error';
         }
@@ -289,7 +257,34 @@ module.exports = React.createClass({
     render: function() {
         const self = this;
 
-        const emailPlaceholder = this._authStepIsRequired('m.login.email.identity') ? _t("Email address") : _t("Email address (optional)");
+        let yourMatrixAccountText = _t('Create your account');
+        if (this.props.hsName) {
+            yourMatrixAccountText = _t('Create your %(serverName)s account', {
+                serverName: this.props.hsName,
+            });
+        } else {
+            try {
+                const parsedHsUrl = new URL(this.props.hsUrl);
+                yourMatrixAccountText = _t('Create your %(serverName)s account', {
+                    serverName: parsedHsUrl.hostname,
+                });
+            } catch (e) {
+                // ignore
+            }
+        }
+
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_Auth_editServerDetails"
+                href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_t('Edit')}
+            </a>;
+        }
+
+        const emailPlaceholder = this._authStepIsRequired('m.login.email.identity') ?
+            _t("Email") :
+            _t("Email (optional)");
 
         const emailSection = (
             <div>
@@ -301,32 +296,13 @@ module.exports = React.createClass({
                     value={self.state.email} />
             </div>
         );
-        let belowEmailSection;
-        if (this.props.teamsConfig) {
-            if (this.props.teamsConfig.supportEmail && this.state.showSupportEmail) {
-                belowEmailSection = (
-                    <p className="mx_Login_support">
-                        Sorry, but your university is not registered with us just yet.&nbsp;
-                        Email us on&nbsp;
-                        <a href={"mailto:" + this.props.teamsConfig.supportEmail}>
-                            { this.props.teamsConfig.supportEmail }
-                        </a>&nbsp;
-                        to get your university signed up. Or continue to register with Riot to enjoy our open source platform.
-                    </p>
-                );
-            } else if (this.state.selectedTeam) {
-                belowEmailSection = (
-                    <p className="mx_Login_support">
-                        { _t("You are registering with %(SelectedTeamName)s", {SelectedTeamName: this.state.selectedTeam.name}) }
-                    </p>
-                );
-            }
-        }
 
-        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         let phoneSection;
         if (!SdkConfig.get().disable_3pid_login) {
-            const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? _t("Mobile phone number") : _t("Mobile phone number (optional)");
+            const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ?
+                _t("Phone") :
+                _t("Phone (optional)");
             phoneSection = (
                 <div className="mx_Login_phoneSection">
                     <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
@@ -355,30 +331,40 @@ module.exports = React.createClass({
             <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
 
-        const placeholderUserName = _t("User name");
+        const placeholderUsername = _t("Username");
 
         return (
             <div>
+                <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3>
                 <form onSubmit={this.onSubmit}>
-                    { emailSection }
-                    { belowEmailSection }
-                    { phoneSection }
-                    <input type="text" ref="username"
-                        placeholder={placeholderUserName} defaultValue={this.props.defaultUsername}
-                        className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_USERNAME);}} />
-                    <br />
-                    <input type="password" ref="password"
-                        className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD);}}
-                        placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
-                    <br />
-                    <input type="password" ref="passwordConfirm"
-                        placeholder={_t("Confirm password")}
-                        className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
-                        defaultValue={this.props.defaultPassword} />
-                    <br />
+                    <div className="mx_Auth_fieldRow">
+                        <input type="text" ref="username"
+                            placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
+                            className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_USERNAME);}} />
+                    </div>
+                    <div className="mx_Auth_fieldRow">
+                        <input type="password" ref="password"
+                            className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_PASSWORD);}}
+                            placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
+                        <input type="password" ref="passwordConfirm"
+                            placeholder={_t("Confirm")}
+                            className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
+                            onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
+                            defaultValue={this.props.defaultPassword} />
+                    </div>
+                    <div className="mx_Auth_fieldRow">
+                        { emailSection }
+                        { phoneSection }
+                    </div>
+                    {_t(
+                        "Use an email address to receover your account. Other users " +
+                        "can invite you to rooms using your contact details.",
+                    )}
                     { registerButton }
                 </form>
             </div>

src/components/views/auth/ServerConfig.js

@@ -0,0 +1,145 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+/*
+ * A pure UI component which displays the HS and IS to use.
+ */
+
+export default class ServerConfig extends React.PureComponent {
+    static propTypes = {
+        onServerConfigChange: PropTypes.func,
+
+        // default URLs are defined in config.json (or the hardcoded defaults)
+        // they are used if the user has not overridden them with a custom URL.
+        // In other words, if the custom URL is blank, the default is used.
+        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
+        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
+
+        // custom URLs are explicitly provided by the user and override the
+        // default URLs.  The user enters them via the component's input fields,
+        // which is reflected on these properties whenever on..UrlChanged fires.
+        // They are persisted in localStorage by MatrixClientPeg, and so can
+        // override the default URLs when the component initially loads.
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+    }
+
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        customIsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+            isUrl: props.customIsUrl,
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl &&
+            newProps.customIsUrl === this.state.isUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+            isUrl: newProps.customIsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: newProps.customIsUrl,
+        });
+    }
+
+    onHomeserverChanged = (ev) => {
+        this.setState({hsUrl: ev.target.value}, () => {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
+                let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
+                if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.state.isUrl,
+                });
+            });
+        });
+    }
+
+    onIdentityServerChanged = (ev) => {
+        this.setState({isUrl: ev.target.value}, () => {
+            this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
+                let isUrl = this.state.isUrl.trim().replace(/\/$/, "");
+                if (isUrl === "") isUrl = this.props.defaultIsUrl;
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.state.isUrl,
+                });
+            });
+        });
+    }
+
+    _waitThenInvoke(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    }
+
+    showHelpPopup = () => {
+        const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
+        Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
+    }
+
+    render() {
+        const Field = sdk.getComponent('elements.Field');
+
+        return (
+            <div className="mx_ServerConfig">
+                <h3>{_t("Other servers")}</h3>
+                {_t("Enter custom server URLs <a>What does this mean?</a>", {}, {
+                    a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                        { sub }
+                    </a>,
+                })}
+                <div className="mx_ServerConfig_fields">
+                    <Field id="mx_ServerConfig_hsUrl"
+                        label={_t("Homeserver URL")}
+                        placeholder={this.props.defaultHsUrl}
+                        value={this.state.hsUrl}
+                        onChange={this.onHomeserverChanged}
+                    />
+                    <Field id="mx_ServerConfig_isUrl"
+                        label={_t("Identity Server URL")}
+                        placeholder={this.props.defaultIsUrl}
+                        value={this.state.isUrl}
+                        onChange={this.onIdentityServerChanged}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

src/components/views/auth/ServerTypeSelector.js

@@ -0,0 +1,148 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import classnames from 'classnames';
+
+const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+
+export const FREE = 'Free';
+export const PREMIUM = 'Premium';
+export const ADVANCED = 'Advanced';
+
+export const TYPES = {
+    FREE: {
+        id: FREE,
+        label: () => _t('Free'),
+        logo: () => <img src={require('../../../../res/img/feather-icons/matrix-org-bw-logo.svg')} />,
+        description: () => _t('Join millions for free on the largest public server'),
+        hsUrl: 'https://matrix.org',
+        isUrl: 'https://vector.im',
+    },
+    PREMIUM: {
+        id: PREMIUM,
+        label: () => _t('Premium'),
+        logo: () => <img src={require('../../../../res/img/feather-icons/modular-bw-logo.svg')} />,
+        description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
+            a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                {sub}
+            </a>,
+        }),
+    },
+    ADVANCED: {
+        id: ADVANCED,
+        label: () => _t('Advanced'),
+        logo: () => <div>
+            <img src={require('../../../../res/img/feather-icons/globe.svg')} />
+            {_t('Other')}
+        </div>,
+        description: () => _t('Find other public servers or use a custom server'),
+    },
+};
+
+function getDefaultType(defaultHsUrl) {
+    if (!defaultHsUrl) {
+        return null;
+    } else if (defaultHsUrl === TYPES.FREE.hsUrl) {
+        return FREE;
+    } else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) {
+        // TODO: Use a Riot config parameter to detect Modular-ness.
+        // https://github.com/vector-im/riot-web/issues/8253
+        return PREMIUM;
+    } else {
+        return ADVANCED;
+    }
+}
+
+export default class ServerTypeSelector extends React.PureComponent {
+    static propTypes = {
+        // The default HS URL as another way to set the initially selected type.
+        defaultHsUrl: PropTypes.string,
+        // Handler called when the selected type changes.
+        onChange: PropTypes.func.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        const {
+            defaultHsUrl,
+            onChange,
+        } = props;
+        const type = getDefaultType(defaultHsUrl);
+        this.state = {
+            selected: type,
+        };
+        if (onChange) {
+            onChange(type);
+        }
+    }
+
+    updateSelectedType(type) {
+        if (this.state.selected === type) {
+            return;
+        }
+        this.setState({
+            selected: type,
+        });
+        if (this.props.onChange) {
+            this.props.onChange(type);
+        }
+    }
+
+    onClick = (e) => {
+        e.stopPropagation();
+        const type = e.currentTarget.dataset.id;
+        this.updateSelectedType(type);
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const serverTypes = [];
+        for (const type of Object.values(TYPES)) {
+            const { id, label, logo, description } = type;
+            const classes = classnames(
+                "mx_ServerTypeSelector_type",
+                `mx_ServerTypeSelector_type_${id}`,
+                {
+                    "mx_ServerTypeSelector_type_selected": id === this.state.selected,
+                },
+            );
+
+            serverTypes.push(<div className={classes} key={id} >
+                <div className="mx_ServerTypeSelector_label">
+                    {label()}
+                </div>
+                <AccessibleButton onClick={this.onClick} data-id={id}>
+                    <div className="mx_ServerTypeSelector_logo">
+                        {logo()}
+                    </div>
+                    <div className="mx_ServerTypeSelector_description">
+                        {description()}
+                    </div>
+                </AccessibleButton>
+            </div>);
+        }
+
+        return <div className="mx_ServerTypeSelector">
+            {serverTypes}
+        </div>;
+    }
+}

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -40,38 +40,50 @@ export default class MemberStatusMessageAvatar extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+
+        this.state = {
+            hasStatus: this.hasStatus,
+        };
     }
 
     componentWillMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }
-    }
-
-    componentDidMount() {
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-
-        if (this.props.member.user) {
-            this.setState({message: this.props.member.user._unstable_statusMessage});
-        } else {
-            this.setState({message: ""});
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return;
         }
-    }
-
-    componentWillUnmount() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+        const { user } = this.props.member;
+        if (!user) {
+            return;
         }
+        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     }
 
-    _onRoomStateEvents = (ev, state) => {
-        if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
-        if (ev.getType() !== "im.vector.user_status") return;
-        // TODO: We should be relying on `this.props.member.user._unstable_statusMessage`
-        // We don't currently because the js-sdk doesn't emit a specific event for this
-        // change, and we don't want to race it. This should be improved when we rip out
-        // the im.vector.user_status stuff and replace it with a complete solution.
-        this.setState({message: ev.getContent()["status"]});
+    componentWillUmount() {
+        const { user } = this.props.member;
+        if (!user) {
+            return;
+        }
+        user.removeListener(
+            "User._unstable_statusMessage",
+            this._onStatusMessageCommitted,
+        );
+    }
+
+    get hasStatus() {
+        const { user } = this.props.member;
+        if (!user) {
+            return false;
+        }
+        return !!user._unstable_statusMessage;
+    }
+
+    _onStatusMessageCommitted = () => {
+        // The `User` object has observed a status message change.
+        this.setState({
+            hasStatus: this.hasStatus,
+        });
     };
 
     _onClick = (e) => {
@@ -79,42 +91,43 @@ export default class MemberStatusMessageAvatar extends React.Component {
 
         const elementRect = e.target.getBoundingClientRect();
 
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
-        const chevronOffset = 12;
-        let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
-        y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
+        const x = (elementRect.left + window.pageXOffset);
+        const chevronWidth = 16; // See .mx_ContextualMenu_chevron_bottom
+        const chevronOffset = (elementRect.width - chevronWidth) / 2;
+        const chevronMargin = 1; // Add some spacing away from target
+        const y = elementRect.top + window.pageYOffset - chevronMargin;
 
         ContextualMenu.createMenu(StatusMessageContextMenu, {
             chevronOffset: chevronOffset,
             chevronFace: 'bottom',
             left: x,
             top: y,
-            menuWidth: 190,
+            menuWidth: 226,
             user: this.props.member.user,
         });
     };
 
     render() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return <MemberAvatar member={this.props.member}
-                                 width={this.props.width}
-                                 height={this.props.height}
-                                 resizeMethod={this.props.resizeMethod} />;
-        }
+        const avatar = <MemberAvatar
+            member={this.props.member}
+            width={this.props.width}
+            height={this.props.height}
+            resizeMethod={this.props.resizeMethod}
+        />;
 
-        const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : false;
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return avatar;
+        }
 
         const classes = classNames({
             "mx_MemberStatusMessageAvatar": true,
-            "mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
+            "mx_MemberStatusMessageAvatar_hasStatus": this.state.hasStatus,
         });
 
-        return <AccessibleButton onClick={this._onClick} className={classes} element="div">
-            <MemberAvatar member={this.props.member}
-                          width={this.props.width}
-                          height={this.props.height}
-                          resizeMethod={this.props.resizeMethod} />
+        return <AccessibleButton className={classes}
+            element="div" onClick={this._onClick}
+        >
+            {avatar}
         </AccessibleButton>;
     }
 }

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -79,7 +79,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
-                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Reject') }
             </div>
         </div>;

src/components/views/context_menus/MessageContextMenu.js

@@ -333,7 +333,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div>
+            <div className="mx_MessageContextMenu">
                 { resendButton }
                 { redactButton }
                 { cancelButton }

src/components/views/context_menus/RoomTileContextMenu.js

@@ -243,28 +243,28 @@ module.exports = React.createClass({
         });
 
         return (
-            <div>
+            <div className="mx_RoomTileContextMenu">
                 <div className="mx_RoomTileContextMenu_notif_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
+                    <img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
                 </div>
                 <div className={alertMeClasses} onClick={this._onClickAlertMe} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
                     { _t('All messages (noisy)') }
                 </div>
                 <div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
                     { _t('All messages') }
                 </div>
                 <div className={mentionsClasses} onClick={this._onClickMentions} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
                     { _t('Mentions only') }
                 </div>
                 <div className={muteNotifsClasses} onClick={this._onClickMute} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
                     { _t('Mute') }
                 </div>
             </div>
@@ -298,7 +298,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                     { leaveText }
                 </div>
             </div>
@@ -327,18 +327,18 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className={favouriteClasses} onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
                     { _t('Favourite') }
                 </div>
                 <div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
                     { _t('Low Priority') }
                 </div>
                 <div className={dmClasses} onClick={this._onClickDM} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
                     { _t('Direct Chat') }
                 </div>
             </div>

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -18,69 +18,125 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
-import classNames from 'classnames';
 
 export default class StatusMessageContextMenu extends React.Component {
     static propTypes = {
         // js-sdk User object. Not required because it might not exist.
         user: PropTypes.object,
+        // True when waiting for status change to complete.
+        waiting: false,
     };
 
     constructor(props, context) {
         super(props, context);
 
         this.state = {
-            message: props.user ? props.user._unstable_statusMessage : "",
+            message: this.comittedStatusMessage,
         };
     }
 
-    _onClearClick = async (e) => {
-        await MatrixClientPeg.get()._unstable_setStatusMessage("");
-        this.setState({message: ""});
+    componentWillMount() {
+        const { user } = this.props;
+        if (!user) {
+            return;
+        }
+        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+    }
+
+    componentWillUmount() {
+        const { user } = this.props;
+        if (!user) {
+            return;
+        }
+        user.removeListener(
+            "User._unstable_statusMessage",
+            this._onStatusMessageCommitted,
+        );
+    }
+
+    get comittedStatusMessage() {
+        return this.props.user ? this.props.user._unstable_statusMessage : "";
+    }
+
+    _onStatusMessageCommitted = () => {
+        // The `User` object has observed a status message change.
+        this.setState({
+            message: this.comittedStatusMessage,
+            waiting: false,
+        });
+    };
+
+    _onClearClick = (e) => {
+        MatrixClientPeg.get()._unstable_setStatusMessage("");
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onSubmit = (e) => {
         e.preventDefault();
         MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onStatusChange = (e) => {
-        this.setState({message: e.target.value});
+        // The input field's value was changed.
+        this.setState({
+            message: e.target.value,
+        });
     };
 
     render() {
-        const formSubmitClasses = classNames({
-            "mx_StatusMessageContextMenu_submit": true,
-            "mx_StatusMessageContextMenu_submitFaded": !this.state.message, // no message == faded
-        });
+        const Spinner = sdk.getComponent('views.elements.Spinner');
 
-        const form = <form className="mx_StatusMessageContextMenu_form" onSubmit={this._onSubmit} autoComplete="off">
-            <input type="text" key="message" placeholder={_t("Set a new status...")} autoFocus={true}
-                   className="mx_StatusMessageContextMenu_message"
-                   value={this.state.message} onChange={this._onStatusChange} maxLength="60" />
-            <AccessibleButton onClick={this._onSubmit} element="div" className={formSubmitClasses}>
-                <img src="img/icons-checkmark.svg" width="22" height="22" />
-            </AccessibleButton>
+        let actionButton;
+        if (this.comittedStatusMessage) {
+            if (this.state.message === this.comittedStatusMessage) {
+                actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_clear"
+                    onClick={this._onClearClick}
+                >
+                    <span>{_t("Clear status")}</span>
+                </AccessibleButton>;
+            } else {
+                actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
+                    onClick={this._onSubmit}
+                >
+                    <span>{_t("Update status")}</span>
+                </AccessibleButton>;
+            }
+        } else {
+            actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
+                disabled={!this.state.message} onClick={this._onSubmit}
+            >
+                <span>{_t("Set status")}</span>
+            </AccessibleButton>;
+        }
+
+        let spinner = null;
+        if (this.state.waiting) {
+            spinner = <Spinner w="24" h="24" />;
+        }
+
+        const form = <form className="mx_StatusMessageContextMenu_form"
+            autoComplete="off" onSubmit={this._onSubmit}
+        >
+            <input type="text" className="mx_StatusMessageContextMenu_message"
+                key="message" placeholder={_t("Set a new status...")}
+                autoFocus={true} maxLength="60" value={this.state.message}
+                onChange={this._onStatusChange}
+            />
+            <div className="mx_StatusMessageContextMenu_actionContainer">
+                {actionButton}
+                {spinner}
+            </div>
         </form>;
 
-        const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg";
-        const clearButton = <AccessibleButton onClick={this._onClearClick} disabled={!this.state.message}
-                                              className="mx_StatusMessageContextMenu_clear">
-            <img src={clearIcon} alt={_t('Clear status')} width="12" height="12"
-                 className="mx_filterFlipColor mx_StatusMessageContextMenu_clearIcon" />
-            <span>{_t("Clear status")}</span>
-        </AccessibleButton>;
-
-        const menuClasses = classNames({
-            "mx_StatusMessageContextMenu": true,
-            "mx_StatusMessageContextMenu_hasStatus": this.state.message,
-        });
-
-        return <div className={menuClasses}>
+        return <div className="mx_StatusMessageContextMenu">
             { form }
-            <hr />
-            { clearButton }
         </div>;
     }
 }

src/components/views/context_menus/TagTileContextMenu.js

@@ -59,7 +59,7 @@ export default class TagTileContextMenu extends React.Component {
             <div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
                 <TintableSvg
                     className="mx_TagTileContextMenu_item_icon"
-                    src="img/icons-groups.svg"
+                    src={require("../../../../res/img/icons-groups.svg")}
                     width="15"
                     height="15"
                 />
@@ -67,7 +67,7 @@ export default class TagTileContextMenu extends React.Component {
             </div>
             <hr className="mx_TagTileContextMenu_separator" />
             <div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
-                <img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Remove') }
             </div>
         </div>;

src/components/views/context_menus/TopLeftMenu.js

@@ -0,0 +1,54 @@
+/*
+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 dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import LogoutDialog from "../dialogs/LogoutDialog";
+import Modal from "../../../Modal";
+
+export class TopLeftMenu extends React.Component {
+    constructor() {
+        super();
+        this.openSettings = this.openSettings.bind(this);
+        this.signOut = this.signOut.bind(this);
+    }
+
+    render() {
+        return <div className="mx_TopLeftMenu">
+            <ul className="mx_TopLeftMenu_section">
+                <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
+            </ul>
+            <ul className="mx_TopLeftMenu_section">
+                <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
+            </ul>
+        </div>;
+    }
+
+    openSettings() {
+        dis.dispatch({action: 'view_user_settings'});
+        this.closeMenu();
+    }
+
+    signOut() {
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
+        this.closeMenu();
+    }
+
+    closeMenu() {
+        if (this.props.onFinished) this.props.onFinished();
+    }
+}

src/components/views/dialogs/AddressPickerDialog.js

@@ -389,6 +389,17 @@ module.exports = React.createClass({
         const suggestedList = [];
         results.forEach((result) => {
             if (result.room_id) {
+                const client = MatrixClientPeg.get();
+                const room = client.getRoom(result.room_id);
+                if (room) {
+                    const tombstone = room.currentState.getStateEvents('m.room.tombstone', '');
+                    if (tombstone && tombstone.getContent() && tombstone.getContent()["replacement_room"]) {
+                        const replacementRoom = client.getRoom(tombstone.getContent()["replacement_room"]);
+
+                        // Skip rooms with tombstones where we are also aware of the replacement room.
+                        if (replacementRoom) return;
+                    }
+                }
                 suggestedList.push({
                     addressType: 'mx-room-id',
                     address: result.room_id,

src/components/views/dialogs/BaseDialog.js

@@ -24,7 +24,6 @@ import { MatrixClient } from 'matrix-js-sdk';
 
 import { KeyCode } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
-import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
 /**
@@ -106,12 +105,9 @@ export default React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
-                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
             </AccessibleButton>;
         }
 
@@ -128,10 +124,15 @@ export default React.createClass({
                 // AT users can skip its presentation.
                 aria-describedby={this.props.contentId}
             >
-                { cancelButton }
-                <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
-                    { this.props.title }
+                <div className={classNames('mx_Dialog_header', {
+                    'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                })}>
+                    <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
+                        { this.props.title }
+                    </div>
+                    { this.props.headerButton }
                 </div>
+                { cancelButton }
                 { this.props.children }
             </FocusTrap>
         );

src/components/views/dialogs/ChangelogDialog.js

@@ -36,7 +36,7 @@ export default class ChangelogDialog extends React.Component {
         for (let i=0; i<REPOS.length; i++) {
             const oldVersion = version2[2*i];
             const newVersion = version[2*i];
-            const url = `https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
+            const url = `https://riot.im/github/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
             request(url, (err, response, body) => {
                 if (response.statusCode < 200 || response.statusCode >= 300) {
                     this.setState({ [REPOS[i]]: response.statusText });

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 onClick={this.props.onNewDMClick}
             >
                 <div className="mx_RoomTile_avatar">
-                    <img src="img/create-big.svg" width="26" height="26" />
+                    <img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,58 +22,258 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
+import SettingsStore from '../../../settings/SettingsStore';
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
 
-export default function DeviceVerifyDialog(props) {
-    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+const MODE_LEGACY = 'legacy';
+const MODE_SAS = 'sas';
 
-    const key = FormattingUtils.formatCryptoKey(props.device.getFingerprint());
-    const body = (
-        <div>
-            <p>
-                { _t("To verify that this device can be trusted, please contact its " +
-                    "owner using some other means (e.g. in person or a phone call) " +
-                    "and ask them whether the key they see in their User Settings " +
-                    "for this device matches the key below:") }
-            </p>
-            <div className="mx_UserSettings_cryptoSection">
-                <ul>
-                    <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
-                    <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
-                    <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
-                </ul>
-            </div>
-            <p>
-                { _t("If it matches, press the verify button below. " +
-                    "If it doesn't, then someone else is intercepting this device " +
-                    "and you probably want to press the blacklist button instead.") }
-            </p>
-            <p>
-                { _t("In future this verification process will be more sophisticated.") }
-            </p>
-        </div>
-    );
+const PHASE_START = 0;
+const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
+const PHASE_SHOW_SAS = 2;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
+const PHASE_VERIFIED = 4;
+const PHASE_CANCELLED = 5;
 
-    function onFinished(confirm) {
-        if (confirm) {
-            MatrixClientPeg.get().setDeviceVerified(
-                props.userId, props.device.deviceId, true,
-            );
-        }
-        props.onFinished(confirm);
+export default class DeviceVerifyDialog extends React.Component {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+        this._verifier = null;
+        this._showSasEvent = null;
+        this.state = {
+            phase: PHASE_START,
+            mode: SettingsStore.isFeatureEnabled("feature_sas") ? MODE_SAS : MODE_LEGACY,
+            sasVerified: false,
+        };
     }
 
-    return (
-        <QuestionDialog
-            title={_t("Verify device")}
-            description={body}
-            button={_t("I verify that the keys match")}
-            onFinished={onFinished}
-        />
-    );
+    componentWillUnmount() {
+        if (this._verifier) {
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier.cancel('User cancel');
+        }
+    }
+
+    _onSwitchToLegacyClick = () => {
+        this.setState({mode: MODE_LEGACY});
+    }
+
+    _onSwitchToSasClick = () => {
+        this.setState({mode: MODE_SAS});
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    _onLegacyFinished = (confirm) => {
+        if (confirm) {
+            MatrixClientPeg.get().setDeviceVerified(
+                this.props.userId, this.props.device.deviceId, true,
+            );
+        }
+        this.props.onFinished(confirm);
+    }
+
+    _onSasRequestClick = () => {
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
+        });
+        this._verifier = MatrixClientPeg.get().beginKeyVerification(
+            verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
+        );
+        this._verifier.on('show_sas', this._onVerifierShowSas);
+        this._verifier.verify().then(() => {
+            this.setState({phase: PHASE_VERIFIED});
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier = null;
+        }).catch((e) => {
+            console.log("Verification failed", e);
+            this.setState({
+                phase: PHASE_CANCELLED,
+            });
+            this._verifier = null;
+        });
+    }
+
+    _onSasMatchesClick = () => {
+        this._showSasEvent.confirm();
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
+        });
+    }
+
+    _onVerifiedDoneClick = () => {
+        this.props.onFinished(true);
+    }
+
+    _onVerifierShowSas = (e) => {
+        this._showSasEvent = e;
+        this.setState({
+            phase: PHASE_SHOW_SAS,
+        });
+    }
+
+    _renderSasVerification() {
+        let body;
+        switch (this.state.phase) {
+            case PHASE_START:
+                body = this._renderSasVerificationPhaseStart();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
+                body = this._renderSasVerificationPhaseWaitAccept();
+                break;
+            case PHASE_SHOW_SAS:
+                body = this._renderSasVerificationPhaseShowSas();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
+                body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
+                break;
+            case PHASE_VERIFIED:
+                body = this._renderSasVerificationPhaseVerified();
+                break;
+            case PHASE_CANCELLED:
+                body = this._renderSasVerificationPhaseCancelled();
+                break;
+        }
+
+        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+        return (
+            <BaseDialog
+                title={_t("Verify device")}
+                onFinished={this._onCancelClick}
+            >
+                {body}
+            </BaseDialog>
+        );
+    }
+
+    _renderSasVerificationPhaseStart() {
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return (
+            <div>
+                <AccessibleButton
+                    element="span" className="mx_linkButton" onClick={this._onSwitchToLegacyClick}
+                >
+                    {_t("Use Legacy Verification (for older clients)")}
+                </AccessibleButton>
+                <p>
+                    { _t("Verify by comparing a short text string.") }
+                </p>
+                <p>
+                    {_t(
+                        "For maximum security, we recommend you do this in person or " +
+                        "use another trusted means of communication.",
+                    )}
+                </p>
+                <DialogButtons
+                    primaryButton={_t('Begin Verifying')}
+                    hasCancel={true}
+                    onPrimaryButtonClick={this._onSasRequestClick}
+                    onCancel={this._onCancelClick}
+                />
+            </div>
+        );
+    }
+
+    _renderSasVerificationPhaseWaitAccept() {
+        const Spinner = sdk.getComponent("views.elements.Spinner");
+
+        return (
+            <div>
+                <Spinner />
+                <p>{_t("Waiting for partner to accept...")}</p>
+            </div>
+        );
+    }
+
+    _renderSasVerificationPhaseShowSas() {
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+        return <VerificationShowSas
+            sas={this._showSasEvent.sas}
+            onCancel={this._onCancelClick}
+            onDone={this._onSasMatchesClick}
+        />;
+    }
+
+    _renderSasVerificationPhaseWaitForPartnerToConfirm() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        return <div>
+            <Spinner />
+            <p>{_t(
+                "Waiting for %(userId)s to confirm...", {userId: this.props.userId},
+            )}</p>
+        </div>;
+    }
+
+    _renderSasVerificationPhaseVerified() {
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
+    }
+
+    _renderSasVerificationPhaseCancelled() {
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
+        return <VerificationCancelled onDone={this._onCancelClick} />;
+    }
+
+    _renderLegacyVerification() {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+
+        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
+        const body = (
+            <div>
+                <AccessibleButton
+                    element="span" className="mx_linkButton" onClick={this._onSwitchToSasClick}
+                >
+                    {_t("Use two-way text verification")}
+                </AccessibleButton>
+                <p>
+                    { _t("To verify that this device can be trusted, please contact its " +
+                        "owner using some other means (e.g. in person or a phone call) " +
+                        "and ask them whether the key they see in their User Settings " +
+                        "for this device matches the key below:") }
+                </p>
+                <div className="mx_UserSettings_cryptoSection">
+                    <ul>
+                        <li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
+                        <li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
+                        <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
+                    </ul>
+                </div>
+                <p>
+                    { _t("If it matches, press the verify button below. " +
+                        "If it doesn't, then someone else is intercepting this device " +
+                        "and you probably want to press the blacklist button instead.") }
+                </p>
+            </div>
+        );
+
+        return (
+            <QuestionDialog
+                title={_t("Verify device")}
+                description={body}
+                button={_t("I verify that the keys match")}
+                onFinished={this._onLegacyFinished}
+            />
+        );
+    }
+
+    render() {
+        if (this.state.mode === MODE_LEGACY) {
+            return this._renderLegacyVerification();
+        } else {
+            return <div>
+                {this._renderSasVerification()}
+            </div>;
+        }
+    }
 }
 
-DeviceVerifyDialog.propTypes = {
-    userId: PropTypes.string.isRequired,
-    device: PropTypes.object.isRequired,
-    onFinished: PropTypes.func.isRequired,
-};

src/components/views/dialogs/IncomingSasDialog.js

@@ -0,0 +1,182 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+const PHASE_START = 0;
+const PHASE_SHOW_SAS = 1;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
+const PHASE_VERIFIED = 3;
+const PHASE_CANCELLED = 4;
+
+export default class IncomingSasDialog extends React.Component {
+    static propTypes = {
+        verifier: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this._showSasEvent = null;
+        this.state = {
+            phase: PHASE_START,
+            sasVerified: false,
+        };
+        this.props.verifier.on('show_sas', this._onVerifierShowSas);
+        this.props.verifier.on('cancel', this._onVerifierCancel);
+    }
+
+    componentWillUnmount() {
+        if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
+            this.props.verifier.cancel('User cancel');
+        }
+        this.props.verifier.removeListener('show_sas', this._onVerifierShowSas);
+    }
+
+    _onFinished = () => {
+        this.props.onFinished(this.state.phase === PHASE_VERIFIED);
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(this.state.phase === PHASE_VERIFIED);
+    }
+
+    _onContinueClick = () => {
+        this.setState({phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM});
+        this.props.verifier.verify().then(() => {
+            this.setState({phase: PHASE_VERIFIED});
+        }).catch((e) => {
+            console.log("Verification failed", e);
+        });
+    }
+
+    _onVerifierShowSas = (e) => {
+        this._showSasEvent = e;
+        this.setState({
+            phase: PHASE_SHOW_SAS,
+            sas: e.sas,
+        });
+    }
+
+    _onVerifierCancel = (e) => {
+        this.setState({
+            phase: PHASE_CANCELLED,
+        });
+    }
+
+    _onSasMatchesClick = () => {
+        this._showSasEvent.confirm();
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
+        });
+    }
+
+    _onVerifiedDoneClick = () => {
+        this.props.onFinished(true);
+    }
+
+    _renderPhaseStart() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <div>
+                <h2>{this.props.verifier.userId}</h2>
+                <p>{_t(
+                    "Verify this user to mark them as trusted. " +
+                    "Trusting users gives you extra peace of mind when using " +
+                    "end-to-end encrypted messages.",
+                )}</p>
+                <p>{_t(
+                    // NB. Below wording adjusted to singular 'device' until we have
+                    // cross-signing
+                    "Verifying this user will mark their device as trusted, and " +
+                    "also mark your device as trusted to them.",
+                )}</p>
+                <DialogButtons
+                    primaryButton={_t('Continue')}
+                    hasCancel={true}
+                    onPrimaryButtonClick={this._onContinueClick}
+                    onCancel={this._onCancelClick}
+                />
+            </div>
+        );
+    }
+
+    _renderPhaseShowSas() {
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+        return <VerificationShowSas
+            sas={this._showSasEvent.sas}
+            onCancel={this._onCancelClick}
+            onDone={this._onSasMatchesClick}
+        />;
+    }
+
+    _renderPhaseWaitForPartnerToConfirm() {
+        const Spinner = sdk.getComponent("views.elements.Spinner");
+
+        return (
+            <div>
+                <Spinner />
+                <p>{_t("Waiting for partner to confirm...")}</p>
+            </div>
+        );
+    }
+
+    _renderPhaseVerified() {
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
+    }
+
+    _renderPhaseCancelled() {
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
+        return <VerificationCancelled onDone={this._onCancelClick} />;
+    }
+
+    render() {
+        let body;
+        switch (this.state.phase) {
+            case PHASE_START:
+                body = this._renderPhaseStart();
+                break;
+            case PHASE_SHOW_SAS:
+                body = this._renderPhaseShowSas();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
+                body = this._renderPhaseWaitForPartnerToConfirm();
+                break;
+            case PHASE_VERIFIED:
+                body = this._renderPhaseVerified();
+                break;
+            case PHASE_CANCELLED:
+                body = this._renderPhaseCancelled();
+                break;
+        }
+
+        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+        return (
+            <BaseDialog
+                title={_t("Incoming Verification Request")}
+                onFinished={this._onFinished}
+            >
+                {body}
+            </BaseDialog>
+        );
+    }
+}
+

src/components/views/dialogs/LogoutDialog.js

@@ -0,0 +1,166 @@
+/*
+Copyright 2018, 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import SettingsStore from "../../../settings/SettingsStore";
+
+export default class LogoutDialog extends React.Component {
+    constructor() {
+        super();
+        this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
+        this._onExportE2eKeysClicked = this._onExportE2eKeysClicked.bind(this);
+        this._onFinished = this._onFinished.bind(this);
+        this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
+        this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
+    }
+
+    _onSettingsLinkClick() {
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onExportE2eKeysClicked() {
+        Modal.createTrackedDialogAsync('Export E2E Keys', '',
+            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
+            {
+                matrixClient: MatrixClientPeg.get(),
+            },
+        );
+    }
+
+    _onFinished(confirmed) {
+        if (confirmed) {
+            dis.dispatch({action: 'logout'});
+        }
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onSetRecoveryMethodClick() {
+        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
+            import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
+        );
+
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    _onLogoutConfirm() {
+        dis.dispatch({action: 'logout'});
+
+        // close dialog
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    render() {
+        let description;
+        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
+            description = <div>
+                <p>{_t(
+                    "When you log out, you'll lose your secure message history. To prevent " +
+                    "this, set up a recovery method.",
+                )}</p>
+                <p>{_t(
+                    "Alternatively, advanced users can also manually export encryption keys in " +
+                    "<a>Settings</a> before logging out.", {},
+                    {
+                        a: sub => <a href='#/settings' onClick={this._onSettingsLinkClick}>{sub}</a>,
+                    },
+                )}</p>
+            </div>;
+        } else {
+            description = <div>{_t(
+                "For security, logging out will delete any end-to-end " +
+                "encryption keys from this browser. If you want to be able " +
+                "to decrypt your conversation history from future Riot sessions, " +
+                "please export your room keys for safe-keeping.",
+            )}</div>;
+        }
+
+        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
+            if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
+                const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+                const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+                // Not quite a standard question dialog as the primary button cancels
+                // the action and does something else instead, whilst non-default button
+                // confirms the action.
+                return (<BaseDialog
+                    title={_t("Warning!")}
+                    contentId='mx_Dialog_content'
+                    hasCancel={false}
+                    onFinsihed={this._onFinished}
+                >
+                    <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                        { description }
+                    </div>
+                    <DialogButtons primaryButton={_t('Set a Recovery Method')}
+                        hasCancel={false}
+                        onPrimaryButtonClick={this._onSetRecoveryMethodClick}
+                        focus={true}
+                    >
+                        <button onClick={this._onLogoutConfirm}>
+                            {_t("I understand, log out without")}
+                        </button>
+                    </DialogButtons>
+                </BaseDialog>);
+            } else {
+                const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+                return (<QuestionDialog
+                    hasCancelButton={true}
+                    title={_t("Sign out")}
+                    // TODO: This is made up by me and would need to also mention verifying
+                    // once you can restorew a backup by verifying a device
+                    description={_t(
+                        "When signing in again, you can access encrypted chat history by " +
+                        "restoring your key backup. You'll need your recovery passphrase " +
+                        "or, if you didn't set a recovery passphrase, your recovery key " +
+                        "(that you downloaded).",
+                    )}
+                    button={_t("Sign out")}
+                    onFinished={this._onFinished}
+                />);
+            }
+        } else {
+            const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+            return (<QuestionDialog
+                hasCancelButton={true}
+                title={_t("Sign out")}
+                description={description}
+                button={_t("Sign out")}
+                extraButtons={[
+                    (<button key="export" className="mx_Dialog_primary"
+                            onClick={this._onExportE2eKeysClicked}>
+                       { _t("Export E2E room keys") }
+                    </button>),
+                ]}
+                onFinished={this._onFinished}
+            />);
+        }
+    }
+}

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -0,0 +1,51 @@
+/*
+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 QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+
+export default (props) => {
+    const existingIssuesUrl = "https://github.com/vector-im/riot-web/issues" +
+        "?q=is%3Aopen+is%3Aissue+label%3Aredesign+sort%3Areactions-%2B1-desc";
+    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new" +
+        "?assignees=&labels=redesign&template=redesign_issue.md&title=";
+
+    const description1 =
+        _t("Thanks for testing the Riot Redesign. " +
+            "If you run into any bugs or visual issues, " +
+            "please let us know on GitHub.");
+    const description2 = _t("To help avoid duplicate issues, " +
+        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
+        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
+        "if you can't find it.", {},
+        {
+            existingIssuesLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+            },
+            newIssueLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+            },
+        });
+
+    return (<QuestionDialog
+        hasCancelButton={false}
+        title={_t("Report bugs & give feedback")}
+        description={<div><p>{description1}</p><p>{description2}</p></div>}
+        button={_t("Go back")}
+        onFinished={props.onFinished}
+    />);
+};

src/components/views/dialogs/RoomSettingsDialog.js

@@ -0,0 +1,108 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Tab, TabbedView} from "../../structures/TabbedView";
+import {_t, _td} from "../../../languageHandler";
+import AdvancedRoomSettingsTab from "../settings/tabs/AdvancedRoomSettingsTab";
+import AccessibleButton from "../elements/AccessibleButton";
+import dis from '../../../dispatcher';
+import RolesRoomSettingsTab from "../settings/tabs/RolesRoomSettingsTab";
+import GeneralRoomSettingsTab from "../settings/tabs/GeneralRoomSettingsTab";
+import SecurityRoomSettingsTab from "../settings/tabs/SecurityRoomSettingsTab";
+
+// TODO: Ditch this whole component
+export class TempTab extends React.Component {
+    static propTypes = {
+        onClose: PropTypes.func.isRequired,
+    };
+
+    componentDidMount(): void {
+        dis.dispatch({action: "open_old_room_settings"});
+        this.props.onClose();
+    }
+
+    render() {
+        return <div>Hello World</div>;
+    }
+}
+
+export default class RoomSettingsDialog extends React.Component {
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    componentWillMount(): void {
+        this.dispatcherRef = dis.register(this._onAction);
+    }
+
+    componentWillUnmount(): void {
+        dis.unregister(this.dispatcherRef);
+    }
+
+    _onAction = (payload) => {
+        if (payload.action !== 'close_room_settings') return;
+        this.props.onFinished();
+    };
+
+    _getTabs() {
+        const tabs = [];
+
+        tabs.push(new Tab(
+            _td("General"),
+            "mx_RoomSettingsDialog_settingsIcon",
+            <GeneralRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_RoomSettingsDialog_securityIcon",
+            <SecurityRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Roles & Permissions"),
+            "mx_RoomSettingsDialog_rolesIcon",
+            <RolesRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Advanced"),
+            "mx_RoomSettingsDialog_warningIcon",
+            <AdvancedRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Visit old settings"),
+            "mx_RoomSettingsDialog_warningIcon",
+            <TempTab onClose={this.props.onFinished} />,
+        ));
+
+        return tabs;
+    }
+
+    render() {
+        return (
+            <div className="mx_RoomSettingsDialog">
+                <div className="mx_SettingsDialog_header">
+                    {_t("Settings")}
+                    <span className="mx_SettingsDialog_close">
+                        <AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
+                    </span>
+                </div>
+                <TabbedView tabs={this._getTabs()} />
+            </div>
+        );
+    }
+}

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -29,13 +29,15 @@ export default React.createClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
-        this._targetVersion = this.props.room.shouldUpgradeToVersion();
+    componentWillMount: async function() {
+        const recommended = await this.props.room.getRecommendedVersion();
+        this._targetVersion = recommended.version;
+        this.setState({busy: false});
     },
 
     getInitialState: function() {
         return {
-            busy: false,
+            busy: true,
         };
     },
 

src/components/views/dialogs/SetMxIdDialog.js

@@ -193,9 +193,6 @@ export default React.createClass({
             return;
         }
 
-        // XXX Implement RTS /register here
-        const teamToken = null;
-
         this.props.onFinished(true, {
             userId: response.user_id,
             deviceId: response.device_id,
@@ -203,7 +200,6 @@ export default React.createClass({
             identityServerUrl: this._matrixClient.getIdentityServerUrl(),
             accessToken: response.access_token,
             password: this._generatedPassword,
-            teamToken: teamToken,
         });
     },
 

src/components/views/dialogs/SetPasswordDialog.js

@@ -116,9 +116,8 @@ export default React.createClass({
                     <ChangePassword
                         className="mx_SetPasswordDialog_change_password"
                         rowClassName=""
-                        rowLabelClassName=""
-                        rowInputClassName=""
-                        buttonClassName="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonClassNames="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonKind="primary"
                         confirm={false}
                         autoFocusNewPasswordInput={true}
                         shouldAskForEmail={true}

src/components/views/dialogs/ShareDialog.js

@@ -26,11 +26,11 @@ import * as ContextualMenu from "../../structures/ContextualMenu";
 const socials = [
     {
         name: 'Facebook',
-        img: 'img/social/facebook.png',
+        img: require("../../../../res/img/social/facebook.png"),
         url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
     }, {
         name: 'Twitter',
-        img: 'img/social/twitter-2.png',
+        img: require("../../../../res/img/social/twitter-2.png"),
         url: (url) => `https://twitter.com/home?status=${url}`,
     }, /* // icon missing
         name: 'Google Plus',
@@ -38,15 +38,15 @@ const socials = [
         url: (url) => `https://plus.google.com/share?url=${url}`,
     },*/ {
         name: 'LinkedIn',
-        img: 'img/social/linkedin.png',
+        img: require("../../../../res/img/social/linkedin.png"),
         url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
     }, {
         name: 'Reddit',
-        img: 'img/social/reddit.png',
+        img: require("../../../../res/img/social/reddit.png"),
         url: (url) => `http://www.reddit.com/submit?url=${url}`,
     }, {
         name: 'email',
-        img: 'img/social/email-1.png',
+        img: require("../../../../res/img/social/email-1.png"),
         url: (url) => `mailto:?body=${url}`,
     },
 ];
@@ -202,7 +202,7 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {

src/components/views/dialogs/UserSettingsDialog.js

@@ -0,0 +1,121 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Tab, TabbedView} from "../../structures/TabbedView";
+import {_t, _td} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import GeneralUserSettingsTab from "../settings/tabs/GeneralUserSettingsTab";
+import dis from '../../../dispatcher';
+import SettingsStore from "../../../settings/SettingsStore";
+import LabsSettingsTab from "../settings/tabs/LabsSettingsTab";
+import SecuritySettingsTab from "../settings/tabs/SecuritySettingsTab";
+import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab";
+import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab";
+import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab";
+import HelpSettingsTab from "../settings/tabs/HelpSettingsTab";
+import FlairSettingsTab from "../settings/tabs/FlairSettingsTab";
+
+// TODO: Ditch this whole component
+export class TempTab extends React.Component {
+    static propTypes = {
+        onClose: PropTypes.func.isRequired,
+    };
+
+    componentDidMount(): void {
+        dis.dispatch({action: "view_old_user_settings"});
+        this.props.onClose();
+    }
+
+    render() {
+        return <div>Hello World</div>;
+    }
+}
+
+export default class UserSettingsDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _getTabs() {
+        const tabs = [];
+
+        tabs.push(new Tab(
+            _td("General"),
+            "mx_UserSettingsDialog_settingsIcon",
+            <GeneralUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Flair"),
+            "mx_UserSettingsDialog_flairIcon",
+            <FlairSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Notifications"),
+            "mx_UserSettingsDialog_bellIcon",
+            <NotificationSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Preferences"),
+            "mx_UserSettingsDialog_preferencesIcon",
+            <PreferencesSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Voice & Video"),
+            "mx_UserSettingsDialog_voiceIcon",
+            <VoiceSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_UserSettingsDialog_securityIcon",
+            <SecuritySettingsTab />,
+        ));
+        if (SettingsStore.getLabsFeatures().length > 0) {
+            tabs.push(new Tab(
+                _td("Labs"),
+                "mx_UserSettingsDialog_labsIcon",
+                <LabsSettingsTab />,
+            ));
+        }
+        tabs.push(new Tab(
+            _td("Help & About"),
+            "mx_UserSettingsDialog_helpIcon",
+            <HelpSettingsTab closeSettingsFn={this.props.onFinished} />,
+        ));
+        tabs.push(new Tab(
+            _td("Visit old settings"),
+            "mx_UserSettingsDialog_helpIcon",
+            <TempTab onClose={this.props.onFinished} />,
+        ));
+
+        return tabs;
+    }
+
+    render() {
+        return (
+            <div className="mx_UserSettingsDialog">
+                <div className="mx_SettingsDialog_header">
+                    {_t("Settings")}
+                    <span className="mx_SettingsDialog_close">
+                        <AccessibleButton className="mx_SettingsDialog_closeIcon" onClick={this.props.onFinished} />
+                    </span>
+                </div>
+                <TabbedView tabs={this._getTabs()} />
+            </div>
+        );
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -184,6 +184,14 @@ export default React.createClass({
         } else if (this.state.backupInfo === null) {
             title = _t("Error");
             content = _t("No backup found!");
+        } else if (this.state.recoverInfo && this.state.recoverInfo.imported === 0) {
+            title = _t("Error Restoring Backup");
+            content = <div>
+                <p>{_t(
+                    "Backup could not be decrypted with this key: " +
+                    "please verify that you entered the correct recovery key.",
+                )}</p>
+            </div>;
         } else if (this.state.recoverInfo) {
             title = _t("Backup Restored");
             let failedToDecrypt;

src/components/views/directory/NetworkDropdown.js

@@ -18,7 +18,7 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
 
-const DEFAULT_ICON_URL = "img/network-matrix.svg";
+const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
 
 export default class NetworkDropdown extends React.Component {
     constructor(props) {
@@ -191,7 +191,7 @@ export default class NetworkDropdown extends React.Component {
         } else if (!instance) {
             key = server + '_all';
             name = 'Matrix';
-            icon = <img src="img/network-matrix.svg" />;
+            icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
             span_class = 'mx_NetworkDropdown_menu_network';
         } else {
             key = server + '_inst_' + instance.instance_id;
@@ -232,7 +232,7 @@ export default class NetworkDropdown extends React.Component {
         }
 
         return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
-            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
+            <div className="mx_NetworkDropdown_input mx_no_textinput" onClick={this.onInputClick}>
                 {current_value}
                 <span className="mx_NetworkDropdown_arrow"></span>
                 {menu}

src/components/views/elements/AccessibleButton.js

@@ -28,41 +28,56 @@ import { KeyCode } from '../../../Keyboard';
  * @returns {Object} rendered react
  */
 export default function AccessibleButton(props) {
-    const {element, onClick, children, ...restProps} = props;
-    restProps.onClick = onClick;
-    // We need to consume enter onKeyDown and space onKeyUp
-    // otherwise we are risking also activating other keyboard focusable elements
-    // that might receive focus as a result of the AccessibleButtonClick action
-    // It's because we are using html buttons at a few places e.g. inside dialogs
-    // And divs which we report as role button to assistive technologies.
-    // Browsers handle space and enter keypresses differently and we are only adjusting to the
-    // inconsistencies here
-    restProps.onKeyDown = function(e) {
-        if (e.keyCode === KeyCode.ENTER) {
-            e.stopPropagation();
-            e.preventDefault();
-            return onClick(e);
-        }
-        if (e.keyCode === KeyCode.SPACE) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    restProps.onKeyUp = function(e) {
-        if (e.keyCode === KeyCode.SPACE) {
-            e.stopPropagation();
-            e.preventDefault();
-            return onClick(e);
-        }
-        if (e.keyCode === KeyCode.ENTER) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
+    const {element, onClick, children, kind, disabled, ...restProps} = props;
+
+    if (!disabled) {
+        restProps.onClick = onClick;
+        // We need to consume enter onKeyDown and space onKeyUp
+        // otherwise we are risking also activating other keyboard focusable elements
+        // that might receive focus as a result of the AccessibleButtonClick action
+        // It's because we are using html buttons at a few places e.g. inside dialogs
+        // And divs which we report as role button to assistive technologies.
+        // Browsers handle space and enter keypresses differently and we are only adjusting to the
+        // inconsistencies here
+        restProps.onKeyDown = function(e) {
+            if (e.keyCode === KeyCode.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.keyCode === KeyCode.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        restProps.onKeyUp = function(e) {
+            if (e.keyCode === KeyCode.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.keyCode === KeyCode.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+    }
+
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
+
+    if (kind) {
+        // We apply a hasKind class to maintain backwards compatibility with
+        // buttons which might not know about kind and break
+        restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
+    }
+
+    if (disabled) {
+        restProps.className += " mx_AccessibleButton_disabled";
+    }
+
     return React.createElement(element, restProps, children);
 }
 
@@ -76,6 +91,12 @@ AccessibleButton.propTypes = {
     children: PropTypes.node,
     element: PropTypes.string,
     onClick: PropTypes.func.isRequired,
+
+    // The kind of button, similar to how Bootstrap works.
+    // See available classes for AccessibleButton for options.
+    kind: PropTypes.string,
+
+    disabled: PropTypes.bool,
 };
 
 AccessibleButton.defaultProps = {

src/components/views/elements/ActionButton.js

@@ -30,7 +30,8 @@ export default React.createClass({
         action: PropTypes.string.isRequired,
         mouseOverAction: PropTypes.string,
         label: PropTypes.string.isRequired,
-        iconPath: PropTypes.string.isRequired,
+        iconPath: PropTypes.string,
+        className: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -72,14 +73,23 @@ export default React.createClass({
             tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
         }
 
+        const icon = this.props.iconPath ?
+                (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
+                undefined;
+
+        const classNames = ["mx_RoleButton"];
+        if (this.props.className) {
+            classNames.push(this.props.className);
+        }
+
         return (
-            <AccessibleButton className="mx_RoleButton"
+            <AccessibleButton className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
                 aria-label={this.props.label}
             >
-                <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
+                { icon }
                 { tooltip }
             </AccessibleButton>
         );

src/components/views/elements/AddressSelector.js

@@ -150,7 +150,7 @@ export default React.createClass({
                             showAddress={this.props.showAddress}
                             justified={true}
                             networkName="vector"
-                            networkUrl="img/search-icon-vector.svg"
+                            networkUrl={require("../../../../res/img/search-icon-vector.svg")}
                         />
                     </div>,
                 );

src/components/views/elements/AddressTile.js

@@ -54,7 +54,7 @@ export default React.createClass({
                 address.avatarMxc, 25, 25, 'crop',
             ));
         } else if (address.addressType === 'email') {
-            imgUrls.push('img/icon-email-user.svg');
+            imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }
 
         // Removing networks for now as they're not really supported
@@ -141,7 +141,7 @@ export default React.createClass({
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
-                    <TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
+                    <TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
                 </div>
             );
         }