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

src/components/structures/LoggedInView.js

@@ -240,7 +240,6 @@ export default React.createClass({
                 page_element = <UserSettings
                     onClose={this.props.onUserSettingsClose}
                     brand={this.props.config.brand}
-                    collapsedRhs={this.props.collapse_rhs}
                     enableLabs={this.props.config.enableLabs}
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
@@ -271,7 +270,6 @@ export default React.createClass({
                     this.props.config.teamServerConfig.teamServerURL : null;
 
                 page_element = <HomePage
-                    collapsedRhs={this.props.collapse_rhs}
                     teamServerUrl={teamServerUrl}
                     teamToken={this.props.teamToken}
                     homePageUrl={this.props.config.welcomePageUrl}

src/components/structures/MatrixChat.js

@@ -35,15 +35,50 @@ import * as Rooms from '../../Rooms';
 import linkifyMatrix from "../../linkify-matrix";
 import * as Lifecycle from '../../Lifecycle';
 // LifecycleStore is not used but does listen to and dispatch actions
-import LifecycleStore from '../../stores/LifecycleStore';
+require('../../stores/LifecycleStore');
 import RoomViewStore from '../../stores/RoomViewStore';
 import PageTypes from '../../PageTypes';
 
 import createRoom from "../../createRoom";
 import * as UDEHandler from '../../UnknownDeviceErrorHandler';
+import KeyRequestHandler from '../../KeyRequestHandler';
 import { _t, getCurrentLanguage } from '../../languageHandler';
 
+/** constants for MatrixChat.state.view */
+const VIEWS = {
+    // a special initial state which is only used at startup, while we are
+    // trying to re-animate a matrix client or register as a guest.
+    LOADING: 0,
+
+    // we are showing the login view
+    LOGIN: 1,
+
+    // we are showing the registration view
+    REGISTER: 2,
+
+    // completeing the registration flow
+    POST_REGISTRATION: 3,
+
+    // showing the 'forgot password' view
+    FORGOT_PASSWORD: 4,
+
+    // 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.
+    LOGGING_IN: 5,
+
+    // we are logged in with an active matrix client.
+    LOGGED_IN: 6,
+};
+
 module.exports = React.createClass({
+    // we export this so that the integration tests can use it :-S
+    statics: {
+        VIEWS: VIEWS,
+    },
+
     displayName: 'MatrixChat',
 
     propTypes: {
@@ -59,8 +94,8 @@ module.exports = React.createClass({
         // the initial queryParams extracted from the hash-fragment of the URI
         startingFragmentQueryParams: React.PropTypes.object,
 
-        // called when the session load completes
-        onLoadCompleted: React.PropTypes.func,
+        // called when we have completed a token login
+        onTokenLoginCompleted: React.PropTypes.func,
 
         // Represents the screen to display as a result of parsing the initial
         // window.location
@@ -93,14 +128,11 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         const s = {
-            loading: true,
-            screen: undefined,
-            screenAfterLogin: this.props.initialScreenAfterLogin,
+            // the master view we are showing.
+            view: VIEWS.LOADING,
 
-            // Stashed guest credentials if the user logs out
-            // whilst logged in as a guest user (so they can change
-            // their mind & log back in)
-            guestCreds: null,
+            // a thing to call showScreen with once login completes.
+            screenAfterLogin: this.props.initialScreenAfterLogin,
 
             // What the LoggedInView would be showing if visible
             page_type: null,
@@ -113,8 +145,6 @@ module.exports = React.createClass({
             // If we're trying to just view a user ID (i.e. /user URL), this is it
             viewUserId: null,
 
-            loggedIn: false,
-            loggingIn: false,
             collapse_lhs: false,
             collapse_rhs: false,
             ready: false,
@@ -129,11 +159,6 @@ module.exports = React.createClass({
             newVersionReleaseNotes: null,
             checkingForUpdate: null,
 
-            // The username to default to when upgrading an account from a guest
-            upgradeUsername: null,
-            // The access token we had for our guest account, used when upgrading to a normal account
-            guestAccessToken: null,
-
             // Parameters used in the registration dance with the IS
             register_client_secret: null,
             register_session_id: null,
@@ -149,7 +174,7 @@ module.exports = React.createClass({
             realQueryParams: {},
             startingFragmentQueryParams: {},
             config: {},
-            onLoadCompleted: () => {},
+            onTokenLoginCompleted: () => {},
         };
     },
 
@@ -192,7 +217,7 @@ module.exports = React.createClass({
     componentWillMount: function() {
         SdkConfig.put(this.props.config);
 
-        RoomViewStore.addListener(this._onRoomViewStoreUpdated);
+        this._roomViewStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdated);
         this._onRoomViewStoreUpdated();
 
         if (!UserSettingsStore.getLocalSetting('analyticsOptOut', false)) Analytics.enable();
@@ -269,30 +294,52 @@ module.exports = React.createClass({
         window.addEventListener('resize', this.handleResize);
         this.handleResize();
 
-        if (this.props.config.teamServerConfig &&
-            this.props.config.teamServerConfig.teamServerURL
-        ) {
-            Lifecycle.initRtsClient(this.props.config.teamServerConfig.teamServerURL);
-        }
+        const teamServerConfig = this.props.config.teamServerConfig || {};
+        Lifecycle.initRtsClient(teamServerConfig.teamServerURL);
 
-        // the extra q() ensures that synchronous exceptions hit the same codepath as
-        // asynchronous ones.
-        q().then(() => {
-            return Lifecycle.loadSession({
-                realQueryParams: this.props.realQueryParams,
-                fragmentQueryParams: this.props.startingFragmentQueryParams,
-                enableGuest: this.props.enableGuest,
-                guestHsUrl: this.getCurrentHsUrl(),
-                guestIsUrl: this.getCurrentIsUrl(),
-                defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
+        // the first thing to do is to try the token params in the query-string
+        Lifecycle.attemptTokenLogin(this.props.realQueryParams).then((loggedIn) => {
+            if(loggedIn) {
+                this.props.onTokenLoginCompleted();
+
+                // don't do anything else until the page reloads - just stay in
+                // the 'loading' state.
+                return;
+            }
+
+            // if the user has followed a login or register link, don't reanimate
+            // the old creds, but rather go straight to the relevant page
+            const firstScreen = this.state.screenAfterLogin ?
+                this.state.screenAfterLogin.screen : null;
+
+            if (firstScreen === 'login' ||
+                    firstScreen === 'register' ||
+                    firstScreen === 'forgot_password') {
+                this.setState({loading: false});
+                this._showScreenAfterLogin();
+                return;
+            }
+
+            // the extra q() ensures that synchronous exceptions hit the same codepath as
+            // asynchronous ones.
+            return q().then(() => {
+                return Lifecycle.loadSession({
+                    fragmentQueryParams: this.props.startingFragmentQueryParams,
+                    enableGuest: this.props.enableGuest,
+                    guestHsUrl: this.getCurrentHsUrl(),
+                    guestIsUrl: this.getCurrentIsUrl(),
+                    defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
+                });
+            }).catch((e) => {
+                console.error("Unable to load session", e);
+                return false;
+            }).then((loadedSession) => {
+                if (!loadedSession) {
+                    // fall back to showing the login screen
+                    dis.dispatch({action: "start_login"});
+                }
             });
-        }).catch((e) => {
-            console.error("Unable to load session", e);
-        }).done(()=>{
-            // stuff this through the dispatcher so that it happens
-            // after the on_logged_in action.
-            dis.dispatch({action: 'load_completed'});
-        });
+        }).done();
     },
 
     componentWillUnmount: function() {
@@ -301,6 +348,7 @@ module.exports = React.createClass({
         UDEHandler.stopListening();
         window.removeEventListener("focus", this.onFocus);
         window.removeEventListener('resize', this.handleResize);
+        this._roomViewStoreToken.remove();
     },
 
     componentDidUpdate: function() {
@@ -310,20 +358,19 @@ module.exports = React.createClass({
         }
     },
 
-    setStateForNewScreen: function(state) {
+    setStateForNewView: function(state) {
+        if (state.view === undefined) {
+            throw new Error("setStateForNewView with no view!");
+        }
         const newState = {
-            screen: undefined,
             viewUserId: null,
-            loggedIn: false,
-            ready: false,
-            upgradeUsername: null,
-            guestAccessToken: null,
        };
        Object.assign(newState, state);
        this.setState(newState);
     },
 
     onAction: function(payload) {
+        // console.log(`MatrixClientPeg.onAction: ${payload.action}`);
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
@@ -335,45 +382,19 @@ module.exports = React.createClass({
                 this._startRegistration(payload.params || {});
                 break;
             case 'start_login':
-                if (MatrixClientPeg.get() &&
-                    MatrixClientPeg.get().isGuest()
-                ) {
-                    this.setState({
-                        guestCreds: MatrixClientPeg.getCredentials(),
-                    });
-                }
-                this.setStateForNewScreen({
-                    screen: 'login',
+                this.setStateForNewView({
+                    view: VIEWS.LOGIN,
                 });
                 this.notifyNewScreen('login');
                 break;
             case 'start_post_registration':
-                this.setState({ // don't clobber loggedIn status
-                    screen: 'post_registration',
+                this.setState({
+                    view: VIEWS.POST_REGISTRATION,
                 });
                 break;
-            case 'start_upgrade_registration':
-                // also stash our credentials, then if we restore the session,
-                // we can just do it the same way whether we started upgrade
-                // registration or explicitly logged out
-                this.setStateForNewScreen({
-                    guestCreds: MatrixClientPeg.getCredentials(),
-                    screen: "register",
-                    upgradeUsername: MatrixClientPeg.get().getUserIdLocalpart(),
-                    guestAccessToken: MatrixClientPeg.get().getAccessToken(),
-                });
-
-                // stop the client: if we are syncing whilst the registration
-                // is completed in another browser, we'll be 401ed for using
-                // a guest access token for a non-guest account.
-                // It will be restarted in onReturnToGuestClick
-                Lifecycle.stopMatrixClient();
-
-                this.notifyNewScreen('register');
-                break;
             case 'start_password_recovery':
-                this.setStateForNewScreen({
-                    screen: 'forgot_password',
+                this.setStateForNewView({
+                    view: VIEWS.FORGOT_PASSWORD,
                 });
                 this.notifyNewScreen('forgot_password');
                 break;
@@ -397,7 +418,7 @@ module.exports = React.createClass({
 
                             MatrixClientPeg.get().leave(payload.room_id).done(() => {
                                 modal.close();
-                                if (this.currentRoomId === payload.room_id) {
+                                if (this.state.currentRoomId === payload.room_id) {
                                     dis.dispatch({action: 'view_next_room'});
                                 }
                             }, (err) => {
@@ -514,10 +535,11 @@ module.exports = React.createClass({
                 break;
             case 'on_logging_in':
                 // We are now logging in, so set the state to reflect that
-                // and also that we're not ready (we'll be marked as logged
-                // in once the login completes, then ready once the sync
-                // completes).
-                this.setState({loggingIn: true, ready: false});
+                // NB. This does not touch 'ready' since if our dispatches
+                // are delayed, the sync could already have completed
+                this.setStateForNewView({
+                    view: VIEWS.LOGGING_IN,
+                });
                 break;
             case 'on_logged_in':
                 this._onLoggedIn(payload.teamToken);
@@ -528,9 +550,6 @@ module.exports = React.createClass({
             case 'will_start_client':
                 this._onWillStartClient();
                 break;
-            case 'load_completed':
-                this._onLoadCompleted();
-                break;
             case 'new_version':
                 this.onVersion(
                     payload.currentVersion, payload.newVersion,
@@ -540,6 +559,9 @@ module.exports = React.createClass({
             case 'check_updates':
                 this.setState({ checkingForUpdate: payload.value });
                 break;
+            case 'send_event':
+                this.onSendEvent(payload.room_id, payload.event);
+                break;
         }
     },
 
@@ -554,8 +576,8 @@ module.exports = React.createClass({
     },
 
     _startRegistration: function(params) {
-        this.setStateForNewScreen({
-            screen: 'register',
+        this.setStateForNewView({
+            view: VIEWS.REGISTER,
             // these params may be undefined, but if they are,
             // unset them from our state: we don't want to
             // resume a previous registration session if the
@@ -749,8 +771,8 @@ module.exports = React.createClass({
             title: _t('Create Room'),
             description: _t('Room name (optional)'),
             button: _t('Create Room'),
-            onFinished: (should_create, name) => {
-                if (should_create) {
+            onFinished: (shouldCreate, name) => {
+                if (shouldCreate) {
                     const createOpts = {};
                     if (name) createOpts.name = name;
                     createRoom({createOpts}).done();
@@ -863,22 +885,6 @@ module.exports = React.createClass({
         });
     },
 
-    /**
-     * Called when the sessionloader has finished
-     */
-    _onLoadCompleted: function() {
-        this.props.onLoadCompleted();
-        this.setState({loading: false});
-
-        // Show screens (like 'register') that need to be shown without _onLoggedIn
-        // being called. 'register' needs to be routed here when the email confirmation
-        // link is clicked on.
-        if (this.state.screenAfterLogin &&
-            ['register'].indexOf(this.state.screenAfterLogin.screen) !== -1) {
-            this._showScreenAfterLogin();
-        }
-    },
-
     /**
      * Called whenever someone changes the theme
      *
@@ -931,9 +937,7 @@ module.exports = React.createClass({
      */
     _onLoggedIn: function(teamToken) {
         this.setState({
-            guestCreds: null,
-            loggedIn: true,
-            loggingIn: false,
+            view: VIEWS.LOGGED_IN,
         });
 
         if (teamToken) {
@@ -975,6 +979,7 @@ module.exports = React.createClass({
                 this.state.screenAfterLogin.screen,
                 this.state.screenAfterLogin.params,
             );
+            // XXX: is this necessary? `showScreen` should do it for us.
             this.notifyNewScreen(this.state.screenAfterLogin.screen);
             this.setState({screenAfterLogin: null});
         } else if (localStorage && localStorage.getItem('mx_last_room_id')) {
@@ -993,8 +998,8 @@ module.exports = React.createClass({
      */
     _onLoggedOut: function() {
         this.notifyNewScreen('login');
-        this.setStateForNewScreen({
-            loggedIn: false,
+        this.setStateForNewView({
+            view: VIEWS.LOGIN,
             ready: false,
             collapse_lhs: false,
             collapse_rhs: false,
@@ -1010,6 +1015,10 @@ module.exports = React.createClass({
      */
     _onWillStartClient() {
         const self = this;
+        // if the client is about to start, we are, by definition, not ready.
+        // Set ready to false now, then it'll be set to true when the sync
+        // listener we set below fires.
+        this.setState({ready: false});
         const cli = MatrixClientPeg.get();
 
         // Allow the JS SDK to reap timeline events. This reduces the amount of
@@ -1080,6 +1089,14 @@ module.exports = React.createClass({
                 }
             }
         });
+
+        const krh = new KeyRequestHandler(cli);
+        cli.on("crypto.roomKeyRequest", (req) => {
+            krh.handleKeyRequest(req);
+        });
+        cli.on("crypto.roomKeyRequestCancellation", (req) => {
+            krh.handleKeyRequestCancellation(req);
+        });
     },
 
     showScreen: function(screen, params) {
@@ -1157,7 +1174,7 @@ module.exports = React.createClass({
 
             // we can't view a room unless we're logged in
             // (a guest account is fine)
-            if (this.state.loggedIn) {
+            if (this.state.view === VIEWS.LOGGED_IN) {
                 dis.dispatch(payload);
             }
         } else if (screen.indexOf('user/') == 0) {
@@ -1255,27 +1272,25 @@ module.exports = React.createClass({
         this.showScreen("forgot_password");
     },
 
-    onReturnToGuestClick: function() {
-        // reanimate our guest login
-        if (this.state.guestCreds) {
-            Lifecycle.setLoggedIn(this.state.guestCreds);
-            this.setState({guestCreds: null});
-        }
+    onReturnToAppClick: function() {
+        // treat it the same as if the user had completed the login
+        this._onLoggedIn(null);
     },
 
+    // 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
         //      rendering the most up-to-date view of state otherwise.
         // teamToken may not be truthy
         this._teamToken = teamToken;
         this._is_registered = true;
-        Lifecycle.setLoggedIn(credentials);
+        return Lifecycle.setLoggedIn(credentials);
     },
 
     onFinishPostRegistration: function() {
         // Don't confuse this with "PageType" which is the middle window to show
         this.setState({
-            screen: undefined,
+            view: VIEWS.LOGGED_IN,
         });
         this.showScreen("settings");
     },
@@ -1290,6 +1305,27 @@ module.exports = React.createClass({
         });
     },
 
+    onSendEvent: function(roomId, event) {
+        const cli = MatrixClientPeg.get();
+        if (!cli) {
+            dis.dispatch({action: 'message_send_failed'});
+            return;
+        }
+
+        cli.sendEvent(roomId, event.getType(), event.getContent()).done(() => {
+            dis.dispatch({action: 'message_sent'});
+        }, (err) => {
+            if (err.name === 'UnknownDeviceError') {
+                dis.dispatch({
+                    action: 'unknown_device_error',
+                    err: err,
+                    room: cli.getRoom(roomId),
+                });
+            }
+            dis.dispatch({action: 'message_send_failed'});
+        });
+    },
+
     updateStatusIndicator: function(state, prevState) {
         let notifCount = 0;
 
@@ -1344,11 +1380,9 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        // `loading` might be set to false before `loggedIn = true`, causing the default
-        // (`<Login>`) to be visible for a few MS (say, whilst a request is in-flight to
-        // the RTS). So in the meantime, use `loggingIn`, which is true between
-        // actions `on_logging_in` and `on_logged_in`.
-        if (this.state.loading || this.state.loggingIn) {
+        // console.log(`Rendering MatrixChat with view ${this.state.view}`);
+
+        if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN) {
             const Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
@@ -1358,7 +1392,7 @@ module.exports = React.createClass({
         }
 
         // needs to be before normal PageTypes as you are logged in technically
-        if (this.state.screen == 'post_registration') {
+        if (this.state.view === VIEWS.POST_REGISTRATION) {
             const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
             return (
                 <PostRegistration
@@ -1366,38 +1400,42 @@ module.exports = React.createClass({
             );
         }
 
-        // `ready` and `loggedIn` may be set before `page_type` (because the
-        // latter is set via the dispatcher). If we don't yet have a `page_type`,
-        // keep showing the spinner for now.
-        if (this.state.loggedIn && this.state.ready && this.state.page_type) {
-            /* for now, we stuff the entirety of our props and state into the LoggedInView.
-             * we should go through and figure out what we actually need to pass down, as well
-             * as using something like redux to avoid having a billion bits of state kicking around.
-             */
-            const LoggedInView = sdk.getComponent('structures.LoggedInView');
-            return (
-               <LoggedInView ref="loggedInView" matrixClient={MatrixClientPeg.get()}
-                    onRoomCreated={this.onRoomCreated}
-                    onUserSettingsClose={this.onUserSettingsClose}
-                    onRegistered={this.onRegistered}
-                    currentRoomId={this.state.currentRoomId}
-                    teamToken={this._teamToken}
-                    {...this.props}
-                    {...this.state}
-                />
-            );
-        } else if (this.state.loggedIn) {
-            // we think we are logged in, but are still waiting for the /sync to complete
-            const Spinner = sdk.getComponent('elements.Spinner');
-            return (
-                <div className="mx_MatrixChat_splash">
-                    <Spinner />
-                    <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>
-                    { _t('Logout') }
-                    </a>
-                </div>
-            );
-        } else if (this.state.screen == 'register') {
+        if (this.state.view === VIEWS.LOGGED_IN) {
+            // `ready` and `view==LOGGED_IN` may be set before `page_type` (because the
+            // latter is set via the dispatcher). If we don't yet have a `page_type`,
+            // keep showing the spinner for now.
+            if (this.state.ready && this.state.page_type) {
+                /* for now, we stuff the entirety of our props and state into the LoggedInView.
+                 * we should go through and figure out what we actually need to pass down, as well
+                 * as using something like redux to avoid having a billion bits of state kicking around.
+                 */
+                const LoggedInView = sdk.getComponent('structures.LoggedInView');
+                return (
+                   <LoggedInView ref="loggedInView" matrixClient={MatrixClientPeg.get()}
+                        onRoomCreated={this.onRoomCreated}
+                        onUserSettingsClose={this.onUserSettingsClose}
+                        onRegistered={this.onRegistered}
+                        currentRoomId={this.state.currentRoomId}
+                        teamToken={this._teamToken}
+                        {...this.props}
+                        {...this.state}
+                    />
+                );
+            } else {
+                // we think we are logged in, but are still waiting for the /sync to complete
+                const Spinner = sdk.getComponent('elements.Spinner');
+                return (
+                    <div className="mx_MatrixChat_splash">
+                        <Spinner />
+                        <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>
+                        { _t('Logout') }
+                        </a>
+                    </div>
+                );
+            }
+        }
+
+        if (this.state.view === VIEWS.REGISTER) {
             const Registration = sdk.getComponent('structures.login.Registration');
             return (
                 <Registration
@@ -1406,8 +1444,6 @@ module.exports = React.createClass({
                     idSid={this.state.register_id_sid}
                     email={this.props.startingFragmentQueryParams.email}
                     referrer={this.props.startingFragmentQueryParams.referrer}
-                    username={this.state.upgradeUsername}
-                    guestAccessToken={this.state.guestAccessToken}
                     defaultHsUrl={this.getDefaultHsUrl()}
                     defaultIsUrl={this.getDefaultIsUrl()}
                     brand={this.props.config.brand}
@@ -1419,10 +1455,13 @@ module.exports = React.createClass({
                     onLoggedIn={this.onRegistered}
                     onLoginClick={this.onLoginClick}
                     onRegisterClick={this.onRegisterClick}
-                    onCancelClick={this.state.guestCreds ? this.onReturnToGuestClick : null}
+                    onCancelClick={MatrixClientPeg.get() ? this.onReturnToAppClick : null}
                     />
             );
-        } else if (this.state.screen == 'forgot_password') {
+        }
+
+
+        if (this.state.view === VIEWS.FORGOT_PASSWORD) {
             const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
             return (
                 <ForgotPassword
@@ -1434,7 +1473,9 @@ module.exports = React.createClass({
                     onRegisterClick={this.onRegisterClick}
                     onLoginClick={this.onLoginClick} />
             );
-        } else {
+        }
+
+        if (this.state.view === VIEWS.LOGIN) {
             const Login = sdk.getComponent('structures.login.Login');
             return (
                 <Login
@@ -1448,9 +1489,11 @@ module.exports = React.createClass({
                     defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
                     onForgotPasswordClick={this.onForgotPasswordClick}
                     enableGuest={this.props.enableGuest}
-                    onCancelClick={this.state.guestCreds ? this.onReturnToGuestClick : null}
+                    onCancelClick={MatrixClientPeg.get() ? this.onReturnToAppClick : null}
                 />
             );
         }
+
+        console.error(`Unknown view ${this.state.view}`);
     },
 });

src/components/structures/RoomView.js

@@ -93,6 +93,7 @@ module.exports = React.createClass({
             roomId: null,
             roomLoading: true,
             peekLoading: false,
+            shouldPeek: true,
 
             // The event to be scrolled to initially
             initialEventId: null,
@@ -168,8 +169,32 @@ module.exports = React.createClass({
             initialEventId: RoomViewStore.getInitialEventId(),
             initialEventPixelOffset: RoomViewStore.getInitialEventPixelOffset(),
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
+            forwardingEvent: RoomViewStore.getForwardingEvent(),
+            shouldPeek: RoomViewStore.shouldPeek(),
         };
 
+        // finished joining, start waiting for a room and show a spinner. See onRoom.
+        newState.waitingForRoom = this.state.joining && !newState.joining &&
+                        !RoomViewStore.getJoinError();
+
+        // Temporary logging to diagnose https://github.com/vector-im/riot-web/issues/4307
+        console.log(
+            'RVS update:',
+            newState.roomId,
+            newState.roomAlias,
+            'loading?', newState.roomLoading,
+            'joining?', newState.joining,
+            'initial?', initial,
+            'waiting?', newState.waitingForRoom,
+            'shouldPeek?', newState.shouldPeek,
+        );
+
+        // NB: This does assume that the roomID will not change for the lifetime of
+        // the RoomView instance
+        if (initial) {
+            newState.room = MatrixClientPeg.get().getRoom(newState.roomId);
+        }
+
         // Clear the search results when clicking a search result (which changes the
         // currently scrolled to event, this.state.initialEventId).
         if (this.state.initialEventId !== newState.initialEventId) {
@@ -185,8 +210,9 @@ module.exports = React.createClass({
         this.setState(newState, () => {
             // At this point, this.state.roomId could be null (e.g. the alias might not
             // have been resolved yet) so anything called here must handle this case.
-            this._onHaveRoom();
-            this.onRoom(MatrixClientPeg.get().getRoom(this.state.roomId));
+            if (initial) {
+                this._onHaveRoom();
+            }
         });
     },
 
@@ -202,25 +228,24 @@ module.exports = React.createClass({
         // which must be by alias or invite wherever possible (peeking currently does
         // not work over federation).
 
-        // NB. We peek if we are not in the room, although if we try to peek into
-        // a room in which we have a member event (ie. we've left) synapse will just
-        // send us the same data as we get in the sync (ie. the last events we saw).
-        const room = MatrixClientPeg.get().getRoom(this.state.roomId);
-        let isUserJoined = null;
+        // NB. We peek if we have never seen the room before (i.e. js-sdk does not know
+        // about it). We don't peek in the historical case where we were joined but are
+        // now not joined because the js-sdk peeking API will clobber our historical room,
+        // making it impossible to indicate a newly joined room.
+        const room = this.state.room;
         if (room) {
-            isUserJoined = room.hasMembershipState(
-                MatrixClientPeg.get().credentials.userId, 'join',
-            );
-
             this._updateAutoComplete(room);
             this.tabComplete.loadEntries(room);
+            this.setState({
+                unsentMessageError: this._getUnsentMessageError(room),
+            });
+            this._onRoomLoaded(room);
         }
-        if (!isUserJoined && !this.state.joining && this.state.roomId) {
+        if (!this.state.joining && this.state.roomId) {
             if (this.props.autoJoin) {
                 this.onJoinButtonClicked();
-            } else if (this.state.roomId) {
+            } else if (!room && this.state.shouldPeek) {
                 console.log("Attempting to peek into room %s", this.state.roomId);
-
                 this.setState({
                     peekLoading: true,
                 });
@@ -244,12 +269,9 @@ module.exports = React.createClass({
                     }
                 }).done();
             }
-        } else if (isUserJoined) {
+        } else if (room) {
+            // Stop peeking because we have joined this room previously
             MatrixClientPeg.get().stopPeeking();
-            this.setState({
-                unsentMessageError: this._getUnsentMessageError(room),
-            });
-            this._onRoomLoaded(room);
         }
     },
 
@@ -436,11 +458,6 @@ module.exports = React.createClass({
                     callState: callState
                 });
 
-                break;
-            case 'forward_event':
-                this.setState({
-                    forwardingEvent: payload.content,
-                });
                 break;
         }
     },
@@ -607,6 +624,7 @@ module.exports = React.createClass({
         }
         this.setState({
             room: room,
+            waitingForRoom: false,
         }, () => {
             this._onRoomLoaded(room);
         });
@@ -662,7 +680,14 @@ module.exports = React.createClass({
 
     onRoomMemberMembership: function(ev, member, oldMembership) {
         if (member.userId == MatrixClientPeg.get().credentials.userId) {
-            this.forceUpdate();
+
+            if (member.membership === 'join') {
+                this.setState({
+                    waitingForRoom: false,
+                });
+            } else {
+                this.forceUpdate();
+            }
         }
     },
 
@@ -1140,8 +1165,13 @@ module.exports = React.createClass({
         this.updateTint();
         this.setState({
             editingRoomSettings: false,
-            forwardingEvent: null,
         });
+        if (this.state.forwardingEvent) {
+            dis.dispatch({
+                action: 'forward_event',
+                event: null,
+            });
+        }
         dis.dispatch({action: 'focus_composer'});
     },
 
@@ -1416,6 +1446,10 @@ module.exports = React.createClass({
         const Loader = sdk.getComponent("elements.Spinner");
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
 
+        // Whether the preview bar spinner should be shown. We do this when joining or
+        // when waiting for a room to be returned by js-sdk when joining
+        const previewBarSpinner = this.state.joining || this.state.waitingForRoom;
+
         if (!this.state.room) {
             if (this.state.roomLoading || this.state.peekLoading) {
                 return (
@@ -1435,7 +1469,7 @@ module.exports = React.createClass({
 
                 // We have no room object for this room, only the ID.
                 // We've got to this room by following a link, possibly a third party invite.
-                var room_alias = this.state.room_alias;
+                const roomAlias = this.state.roomAlias;
                 return (
                     <div className="mx_RoomView">
                         <RoomHeader ref="header"
@@ -1448,8 +1482,8 @@ module.exports = React.createClass({
                                             onForgetClick={ this.onForgetClick }
                                             onRejectClick={ this.onRejectThreepidInviteButtonClicked }
                                             canPreview={ false } error={ this.state.roomLoadError }
-                                            roomAlias={room_alias}
-                                            spinner={this.state.joining}
+                                            roomAlias={roomAlias}
+                                            spinner={previewBarSpinner}
                                             inviterName={inviterName}
                                             invitedEmail={invitedEmail}
                                             room={this.state.room}
@@ -1492,7 +1526,7 @@ module.exports = React.createClass({
                                             onRejectClick={ this.onRejectButtonClicked }
                                             inviterName={ inviterName }
                                             canPreview={ false }
-                                            spinner={this.state.joining}
+                                            spinner={previewBarSpinner}
                                             room={this.state.room}
                             />
                         </div>
@@ -1548,7 +1582,7 @@ module.exports = React.createClass({
         } else if (this.state.uploadingRoomSettings) {
             aux = <Loader/>;
         } else if (this.state.forwardingEvent !== null) {
-            aux = <ForwardMessage onCancelClick={this.onCancelClick} currentRoomId={this.state.room.roomId} mxEvent={this.state.forwardingEvent} />;
+            aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
         } else if (this.state.searching) {
             hideCancel = true; // has own cancel
             aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
@@ -1568,7 +1602,7 @@ module.exports = React.createClass({
                 <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
                                 onForgetClick={ this.onForgetClick }
                                 onRejectClick={this.onRejectThreepidInviteButtonClicked}
-                                spinner={this.state.joining}
+                                spinner={previewBarSpinner}
                                 inviterName={inviterName}
                                 invitedEmail={invitedEmail}
                                 canPreview={this.state.canPeek}

src/components/structures/ScrollPanel.js

@@ -352,13 +352,14 @@ module.exports = React.createClass({
             const tile = tiles[backwards ? i : tiles.length - 1 - i];
             // Subtract height of tile as if it were unpaginated
             excessHeight -= tile.clientHeight;
+            //If removing the tile would lead to future pagination, break before setting scroll token
+            if (tile.clientHeight > excessHeight) {
+                break;
+            }
             // The tile may not have a scroll token, so guard it
             if (tile.dataset.scrollTokens) {
                 markerScrollToken = tile.dataset.scrollTokens.split(',')[0];
             }
-            if (tile.clientHeight > excessHeight) {
-                break;
-            }
         }
 
         if (markerScrollToken) {

src/components/structures/UserSettings.js

@@ -110,6 +110,13 @@ const ANALYTICS_SETTINGS_LABELS = [
     },
 ];
 
+const WEBRTC_SETTINGS_LABELS = [
+    {
+        id: 'webRtcForceTURN',
+        label: 'Disable Peer-to-Peer for 1:1 calls',
+    },
+];
+
 // Warning: Each "label" string below must be added to i18n/strings/en_EN.json,
 // since they will be translated when rendered.
 const CRYPTO_SETTINGS_LABELS = [
@@ -162,9 +169,6 @@ module.exports = React.createClass({
         // The base URL to use in the referral link. Defaults to window.location.origin.
         referralBaseUrl: React.PropTypes.string,
 
-        // true if RightPanel is collapsed
-        collapsedRhs: React.PropTypes.bool,
-
         // Team token for the referral link. If falsy, the referral section will
         // not appear
         teamToken: React.PropTypes.string,
@@ -310,11 +314,6 @@ module.exports = React.createClass({
     },
 
     onAvatarPickerClick: function(ev) {
-        if (MatrixClientPeg.get().isGuest()) {
-            dis.dispatch({action: 'view_set_mxid'});
-            return;
-        }
-
         if (this.refs.file_label) {
             this.refs.file_label.click();
         }
@@ -389,17 +388,14 @@ module.exports = React.createClass({
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createDialog(ErrorDialog, {
             title: _t("Success"),
-            description: _t("Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them") + ".",
+            description: _t(
+                "Your password was successfully changed. You will not receive " +
+                "push notifications on other devices until you log back in to them",
+            ) + ".",
         });
         dis.dispatch({action: 'password_changed'});
     },
 
-    onUpgradeClicked: function() {
-        dis.dispatch({
-            action: "start_upgrade_registration",
-        });
-    },
-
     onEnableNotificationsChange: function(event) {
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },
@@ -427,7 +423,10 @@ module.exports = React.createClass({
         this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
             Modal.createDialog(QuestionDialog, {
                 title: _t("Verification Pending"),
-                description: _t("Please check your email and click on the link it contains. Once this is done, click continue."),
+                description: _t(
+                    "Please check your email and click on the link it contains. Once this " +
+                    "is done, click continue.",
+                ),
                 button: _t('Continue'),
                 onFinished: this.onEmailDialogFinished,
             });
@@ -447,7 +446,7 @@ module.exports = React.createClass({
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
             title: _t("Remove Contact Information?"),
-            description: _t("Remove %(threePid)s?", { threePid : threepid.address }),
+            description: _t("Remove %(threePid)s?", { threePid: threepid.address }),
             button: _t('Remove'),
             onFinished: (submit) => {
                 if (submit) {
@@ -489,8 +488,8 @@ module.exports = React.createClass({
             this.setState({email_add_pending: false});
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                let message = _t("Unable to verify email address.") + " " +
-                              _t("Please check your email and click on the link it contains. Once this is done, click continue.");
+                const message = _t("Unable to verify email address.") + " " +
+                    _t("Please check your email and click on the link it contains. Once this is done, click continue.");
                 Modal.createDialog(QuestionDialog, {
                     title: _t("Verification Pending"),
                     description: message,
@@ -608,7 +607,7 @@ module.exports = React.createClass({
         }
     },
 
-    _renderLanguageSetting: function () {
+    _renderLanguageSetting: function() {
         const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
         return <div>
             <label htmlFor="languageSelector">{_t('Interface Language')}</label>
@@ -639,7 +638,7 @@ module.exports = React.createClass({
             <input id="urlPreviewsDisabled"
                    type="checkbox"
                    defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
-                   onChange={ (e) => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
+                   onChange={ this._onPreviewsDisabledChanged }
             />
             <label htmlFor="urlPreviewsDisabled">
                 { _t("Disable inline URL previews by default") }
@@ -647,17 +646,24 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _onPreviewsDisabledChanged: function(e) {
+         UserSettingsStore.setUrlPreviewsDisabled(e.target.checked);
+    },
+
     _renderSyncedSetting: function(setting) {
+        // TODO: this ought to be a separate component so that we don't need
+        // to rebind the onChange each time we render
+
+        const onChange = (e) => {
+            UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
+            if (setting.fn) setting.fn(e.target.checked);
+        };
+
         return <div className="mx_UserSettings_toggle" key={ setting.id }>
             <input id={ setting.id }
                    type="checkbox"
                    defaultChecked={ this._syncedSettings[setting.id] }
-                   onChange={
-                       (e) => {
-                           UserSettingsStore.setSyncedSetting(setting.id, e.target.checked);
-                           if (setting.fn) setting.fn(e.target.checked);
-                       }
-                   }
+                   onChange={ onChange }
             />
             <label htmlFor={ setting.id }>
                 { _t(setting.label) }
@@ -666,22 +672,24 @@ module.exports = React.createClass({
     },
 
     _renderThemeSelector: function(setting) {
+        // TODO: this ought to be a separate component so that we don't need
+        // to rebind the onChange each time we render
+        const onChange = (e) => {
+            if (e.target.checked) {
+                UserSettingsStore.setSyncedSetting(setting.id, setting.value);
+            }
+            dis.dispatch({
+                action: 'set_theme',
+                value: setting.value,
+            });
+        };
         return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
             <input id={ setting.id + "_" + setting.value }
                    type="radio"
                    name={ setting.id }
                    value={ setting.value }
                    defaultChecked={ this._syncedSettings[setting.id] === setting.value }
-                   onChange={ (e) => {
-                            if (e.target.checked) {
-                                UserSettingsStore.setSyncedSetting(setting.id, setting.value);
-                            }
-                            dis.dispatch({
-                                action: 'set_theme',
-                                value: setting.value,
-                            });
-                        }
-                   }
+                   onChange={ onChange }
             />
             <label htmlFor={ setting.id + "_" + setting.value }>
                 { setting.label }
@@ -720,8 +728,10 @@ module.exports = React.createClass({
                 <h3>{ _t("Cryptography") }</h3>
                 <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
-                        <li><label>{_t("Device ID:")}</label>             <span><code>{deviceId}</code></span></li>
-                        <li><label>{_t("Device key:")}</label>            <span><code><b>{identityKey}</b></code></span></li>
+                        <li><label>{_t("Device ID:")}</label>
+                            <span><code>{deviceId}</code></span></li>
+                        <li><label>{_t("Device key:")}</label>
+                            <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
                     { importExportButtons }
                 </div>
@@ -733,16 +743,18 @@ module.exports = React.createClass({
     },
 
     _renderLocalSetting: function(setting) {
+        // TODO: this ought to be a separate component so that we don't need
+        // to rebind the onChange each time we render
+        const onChange = (e) => {
+            UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
+            if (setting.fn) setting.fn(e.target.checked);
+        };
+
         return <div className="mx_UserSettings_toggle" key={ setting.id }>
             <input id={ setting.id }
                    type="checkbox"
                    defaultChecked={ this._localSettings[setting.id] }
-                   onChange={
-                        (e) => {
-                            UserSettingsStore.setLocalSetting(setting.id, e.target.checked);
-                            if (setting.fn) setting.fn(e.target.checked);
-                        }
-                   }
+                   onChange={ onChange }
             />
             <label htmlFor={ setting.id }>
                 { _t(setting.label) }
@@ -794,26 +806,27 @@ module.exports = React.createClass({
         if (this.props.enableLabs === false) return null;
         UserSettingsStore.doTranslations();
 
-        const features = UserSettingsStore.LABS_FEATURES.map((feature) => (
-            <div key={feature.id} className="mx_UserSettings_toggle">
-                <input
-                    type="checkbox"
-                    id={feature.id}
-                    name={feature.id}
-                    defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
-                    onChange={(e) => {
-                        if (MatrixClientPeg.get().isGuest()) {
-                            e.target.checked = false;
-                            dis.dispatch({action: 'view_set_mxid'});
-                            return;
-                        }
+        const features = UserSettingsStore.LABS_FEATURES.map((feature) => {
+            // TODO: this ought to be a separate component so that we don't need
+            // to rebind the onChange each time we render
+            const onChange = (e) => {
+                UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked);
+                this.forceUpdate();
+            };
 
-                        UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked);
-                        this.forceUpdate();
-                    }}/>
-                <label htmlFor={feature.id}>{feature.name}</label>
-            </div>
-        ));
+            return (
+                <div key={feature.id} className="mx_UserSettings_toggle">
+                    <input
+                        type="checkbox"
+                        id={feature.id}
+                        name={feature.id}
+                        defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
+                        onChange={ onChange }
+                    />
+                    <label htmlFor={feature.id}>{feature.name}</label>
+                </div>
+            );
+        });
         return (
             <div>
                 <h3>{ _t("Labs") }</h3>
@@ -826,9 +839,6 @@ module.exports = React.createClass({
     },
 
     _renderDeactivateAccount: function() {
-        // We can't deactivate a guest account.
-        if (MatrixClientPeg.get().isGuest()) return null;
-
         return <div>
             <h3>{ _t("Deactivate Account") }</h3>
                 <div className="mx_UserSettings_section">
@@ -880,9 +890,10 @@ module.exports = React.createClass({
         if (!this.state.rejectingInvites) {
             // bind() the invited rooms so any new invites that may come in as this button is clicked
             // don't inadvertently get rejected as well.
+            const onClick = this._onRejectAllInvitesClicked.bind(this, invitedRooms);
             reject = (
                 <AccessibleButton className="mx_UserSettings_button danger"
-                onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
+                onClick={onClick}>
                     {_t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length})}
                 </AccessibleButton>
             );
@@ -900,8 +911,6 @@ module.exports = React.createClass({
         const settings = this.state.electron_settings;
         if (!settings) return;
 
-        const {ipcRenderer} = require('electron');
-
         return <div>
             <h3>{ _t('Desktop specific') }</h3>
             <div className="mx_UserSettings_section">
@@ -909,9 +918,7 @@ module.exports = React.createClass({
                     <input type="checkbox"
                            name="auto-launch"
                            defaultChecked={settings['auto-launch']}
-                           onChange={(e) => {
-                               ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
-                           }}
+                           onChange={this._onAutoLaunchChanged}
                     />
                     <label htmlFor="auto-launch">{_t('Start automatically after system login')}</label>
                 </div>
@@ -919,6 +926,11 @@ module.exports = React.createClass({
         </div>;
     },
 
+    _onAutoLaunchChanged: function(e) {
+        const {ipcRenderer} = require('electron');
+        ipcRenderer.send('settings_set', 'auto-launch', e.target.checked);
+    },
+
     _mapWebRtcDevicesToSpans: function(devices) {
         return devices.map((device) => <span key={device.deviceId}>{device.label}</span>);
     },
@@ -952,16 +964,13 @@ module.exports = React.createClass({
         }
     },
 
-    _renderWebRtcSettings: function() {
+    _renderWebRtcDeviceSettings: function() {
         if (this.state.mediaDevices === false) {
-            return <div>
-                <h3>{_t('VoIP')}</h3>
-                <div className="mx_UserSettings_section">
-                    <p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
-                        {_t('Missing Media Permissions, click here to request.')}
-                    </p>
-                </div>
-            </div>;
+            return (
+                <p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
+                    {_t('Missing Media Permissions, click here to request.')}
+                </p>
+            );
         } else if (!this.state.mediaDevices) return;
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
@@ -1015,10 +1024,17 @@ module.exports = React.createClass({
         }
 
         return <div>
-            <h3>{_t('VoIP')}</h3>
-            <div className="mx_UserSettings_section">
                 {microphoneDropdown}
                 {webcamDropdown}
+        </div>;
+    },
+
+    _renderWebRtcSettings: function() {
+        return <div>
+            <h3>{_t('VoIP')}</h3>
+            <div className="mx_UserSettings_section">
+                { WEBRTC_SETTINGS_LABELS.map(this._renderLocalSetting) }
+                { this._renderWebRtcDeviceSettings() }
             </div>
         </div>;
     },
@@ -1075,6 +1091,9 @@ module.exports = React.createClass({
 
         const threepidsSection = this.state.threepids.map((val, pidIndex) => {
             const id = "3pid-" + val.address;
+            // TODO; make a separate component to avoid having to rebind onClick
+            // each time we render
+            const onRemoveClick = (e) => this.onRemoveThreepidClicked(val);
             return (
                 <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
                     <div className="mx_UserSettings_profileLabelCell">
@@ -1086,7 +1105,8 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") } onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                        <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") }
+                            onClick={onRemoveClick} />
                     </div>
                 </div>
             );
@@ -1094,7 +1114,7 @@ module.exports = React.createClass({
         let addEmailSection;
         if (this.state.email_add_pending) {
             addEmailSection = <Loader key="_email_add_spinner" />;
-        } else if (!MatrixClientPeg.get().isGuest()) {
+        } else {
             addEmailSection = (
                 <div className="mx_UserSettings_profileTableRow" key="_newEmail">
                     <div className="mx_UserSettings_profileLabelCell">
@@ -1122,16 +1142,7 @@ module.exports = React.createClass({
         threepidsSection.push(addEmailSection);
         threepidsSection.push(addMsisdnSection);
 
-        let accountJsx;
-
-        if (MatrixClientPeg.get().isGuest()) {
-            accountJsx = (
-                <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
-                    { _t("Create an account") }
-                </div>
-            );
-        } else {
-            accountJsx = (
+        const accountJsx = (
                 <ChangePassword
                         className="mx_UserSettings_accountTable"
                         rowClassName="mx_UserSettings_profileTableRow"
@@ -1140,10 +1151,10 @@ module.exports = React.createClass({
                         buttonClassName="mx_UserSettings_button mx_UserSettings_changePasswordButton"
                         onError={this.onPasswordChangeError}
                         onFinished={this.onPasswordChanged} />
-            );
-        }
+        );
+
         let notificationArea;
-        if (!MatrixClientPeg.get().isGuest() && this.state.threepids !== undefined) {
+        if (this.state.threepids !== undefined) {
             notificationArea = (<div>
                 <h3>{ _t("Notifications") }</h3>
 
@@ -1165,7 +1176,6 @@ module.exports = React.createClass({
             <div className="mx_UserSettings">
                 <SimpleRoomHeader
                     title={ _t("Settings") }
-                    collapsedRhs={ this.props.collapsedRhs }
                     onCancelClick={ this.props.onClose }
                 />
 
@@ -1237,7 +1247,12 @@ module.exports = React.createClass({
                         { _t("Logged in as:") } {this._me}
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        {_t('Access Token:')} <span className="mx_UserSettings_advanced_spoiler" onClick={this._showSpoiler} data-spoiler={ MatrixClientPeg.get().getAccessToken() }>&lt;{ _t("click to reveal") }&gt;</span>
+                        {_t('Access Token:')}
+                        <span className="mx_UserSettings_advanced_spoiler"
+                                onClick={this._showSpoiler}
+                                data-spoiler={ MatrixClientPeg.get().getAccessToken() }>
+                            &lt;{ _t("click to reveal") }&gt;
+                        </span>
                     </div>
                     <div className="mx_UserSettings_advanced">
                         { _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }

src/components/structures/login/Registration.js

@@ -45,8 +45,6 @@ module.exports = React.createClass({
         brand: React.PropTypes.string,
         email: React.PropTypes.string,
         referrer: React.PropTypes.string,
-        username: React.PropTypes.string,
-        guestAccessToken: React.PropTypes.string,
         teamServerConfig: React.PropTypes.shape({
             // Email address to request new teams
             supportEmail: React.PropTypes.string.isRequired,
@@ -220,29 +218,29 @@ module.exports = React.createClass({
         }
 
         trackPromise.then((teamToken) => {
-            this.props.onLoggedIn({
+            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(() => {
-            return this._setupPushers();
+        }).then((cli) => {
+            return this._setupPushers(cli);
         });
     },
 
-    _setupPushers: function() {
+    _setupPushers: function(matrixClient) {
         if (!this.props.brand) {
             return q();
         }
-        return MatrixClientPeg.get().getPushers().then((resp)=>{
+        return matrixClient.getPushers().then((resp)=>{
             const pushers = resp.pushers;
             for (let i = 0; i < pushers.length; ++i) {
                 if (pushers[i].kind == 'email') {
                     const emailPusher = pushers[i];
                     emailPusher.data = { brand: this.props.brand };
-                    MatrixClientPeg.get().setPusher(emailPusher).done(() => {
+                    matrixClient.setPusher(emailPusher).done(() => {
                         console.log("Set email branding to " + this.props.brand);
                     }, (error) => {
                         console.error("Couldn't set email branding: " + error);
@@ -295,17 +293,6 @@ module.exports = React.createClass({
     },
 
     _makeRegisterRequest: function(auth) {
-        let guestAccessToken = this.props.guestAccessToken;
-
-        if (
-            this.state.formVals.username !== this.props.username ||
-            this.state.hsUrl != this.props.defaultHsUrl
-        ) {
-            // don't try to upgrade if we changed our username
-            // or are registering on a different HS
-            guestAccessToken = null;
-        }
-
         // Only send the bind params if we're sending username / pw params
         // (Since we need to send no params at all to use the ones saved in the
         // session).
@@ -320,7 +307,7 @@ module.exports = React.createClass({
             undefined, // session id: included in the auth dict already
             auth,
             bindThreepids,
-            guestAccessToken,
+            null,
         );
     },
 
@@ -357,10 +344,6 @@ module.exports = React.createClass({
         } else if (this.state.busy || this.state.teamServerBusy) {
             registerBody = <Spinner />;
         } else {
-            let guestUsername = this.props.username;
-            if (this.state.hsUrl != this.props.defaultHsUrl) {
-                guestUsername = null;
-            }
             let errorSection;
             if (this.state.errorText) {
                 errorSection = <div className="mx_Login_error">{this.state.errorText}</div>;
@@ -374,7 +357,6 @@ module.exports = React.createClass({
                         defaultPhoneNumber={this.state.formVals.phoneNumber}
                         defaultPassword={this.state.formVals.password}
                         teamsConfig={this.state.teamsConfig}
-                        guestUsername={guestUsername}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit}

src/components/views/dialogs/ChatInviteDialog.js

@@ -24,6 +24,7 @@ import DMRoomMap from '../../../utils/DMRoomMap';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
 import q from 'q';
+import dis from '../../../dispatcher';
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -102,7 +103,7 @@ module.exports = React.createClass({
                     const ChatCreateOrReuseDialog = sdk.getComponent(
                         "views.dialogs.ChatCreateOrReuseDialog",
                     );
-                    Modal.createDialog(ChatCreateOrReuseDialog, {
+                    const close = Modal.createDialog(ChatCreateOrReuseDialog, {
                         userId: userId,
                         onFinished: (success) => {
                             this.props.onFinished(success);
@@ -112,14 +113,16 @@ module.exports = React.createClass({
                                 action: 'start_chat',
                                 user_id: userId,
                             });
+                            close(true);
                         },
                         onExistingRoomSelected: (roomId) => {
                             dis.dispatch({
                                 action: 'view_room',
-                                user_id: roomId,
+                                room_id: roomId,
                             });
+                            close(true);
                         },
-                    });
+                    }).close;
                 } else {
                     this._startChat(inviteList);
                 }
@@ -238,6 +241,11 @@ module.exports = React.createClass({
         MatrixClientPeg.get().searchUserDirectory({
             term: query,
         }).then((resp) => {
+            // The query might have changed since we sent the request, so ignore
+            // responses for anything other than the latest query.
+            if (this.state.query !== query) {
+                return;
+            }
             this._processResults(resp.results, query);
         }).catch((err) => {
             console.error('Error whilst searching user directory: ', err);

src/components/views/dialogs/KeyShareDialog.js

@@ -0,0 +1,172 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Modal from '../../../Modal';
+import React from 'react';
+import sdk from '../../../index';
+
+import { _t } from '../../../languageHandler';
+
+/**
+ * Dialog which asks the user whether they want to share their keys with
+ * an unverified device.
+ *
+ * onFinished is called with `true` if the key should be shared, `false` if it
+ * should not, and `undefined` if the dialog is cancelled. (In other words:
+ * truthy: do the key share. falsy: don't share the keys).
+ */
+export default React.createClass({
+    propTypes: {
+        matrixClient: React.PropTypes.object.isRequired,
+        userId: React.PropTypes.string.isRequired,
+        deviceId: React.PropTypes.string.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            deviceInfo: null,
+            wasNewDevice: false,
+        };
+    },
+
+    componentDidMount: function() {
+        this._unmounted = false;
+        const userId = this.props.userId;
+        const deviceId = this.props.deviceId;
+
+        // give the client a chance to refresh the device list
+        this.props.matrixClient.downloadKeys([userId], false).then((r) => {
+            if (this._unmounted) { return; }
+
+            const deviceInfo = r[userId][deviceId];
+
+            if(!deviceInfo) {
+                console.warn(`No details found for device ${userId}:${deviceId}`);
+
+                this.props.onFinished(false);
+                return;
+            }
+
+            const wasNewDevice = !deviceInfo.isKnown();
+
+            this.setState({
+                deviceInfo: deviceInfo,
+                wasNewDevice: wasNewDevice,
+            });
+
+            // if the device was new before, it's not any more.
+            if (wasNewDevice) {
+                this.props.matrixClient.setDeviceKnown(
+                    userId,
+                    deviceId,
+                    true,
+                );
+            }
+        }).done();
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+
+    _onVerifyClicked: function() {
+        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+
+        console.log("KeyShareDialog: Starting verify dialog");
+        Modal.createDialog(DeviceVerifyDialog, {
+            userId: this.props.userId,
+            device: this.state.deviceInfo,
+            onFinished: (verified) => {
+                if (verified) {
+                    // can automatically share the keys now.
+                    this.props.onFinished(true);
+                }
+            },
+        });
+    },
+
+    _onShareClicked: function() {
+        console.log("KeyShareDialog: User clicked 'share'");
+        this.props.onFinished(true);
+    },
+
+    _onIgnoreClicked: function() {
+        console.log("KeyShareDialog: User clicked 'ignore'");
+        this.props.onFinished(false);
+    },
+
+    _renderContent: function() {
+        const displayName = this.state.deviceInfo.getDisplayName() ||
+            this.state.deviceInfo.deviceId;
+
+        let text;
+        if (this.state.wasNewDevice) {
+            text = "You added a new device '%(displayName)s', which is"
+                + " requesting encryption keys.";
+        } else {
+            text = "Your unverified device '%(displayName)s' is requesting"
+                + " encryption keys.";
+        }
+        text = _t(text, {displayName: displayName});
+
+        return (
+            <div>
+                <p>{text}</p>
+
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this._onVerifyClicked}>
+                        {_t('Start verification')}
+                    </button>
+                    <button onClick={this._onShareClicked}>
+                        {_t('Share without verifying')}
+                    </button>
+                    <button onClick={this._onIgnoreClicked}>
+                        {_t('Ignore request')}
+                    </button>
+                </div>
+            </div>
+        );
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+
+        let content;
+
+        if (this.state.deviceInfo) {
+            content = this._renderContent();
+        } else {
+            content = (
+                <div>
+                    <p>{_t('Loading device info...')}</p>
+                    <Spinner />
+                </div>
+            );
+        }
+
+        return (
+            <BaseDialog className='mx_KeyShareRequestDialog'
+                onFinished={this.props.onFinished}
+                title={_t('Encryption key request')}
+            >
+                {content}
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/NeedToRegisterDialog.js

@@ -1,72 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/*
- * Usage:
- * Modal.createDialog(NeedToRegisterDialog, {
- *   title: "some text", (default: "Registration required")
- *   description: "some more text",
- *   onFinished: someFunction,
- * });
- */
-
-import React from 'react';
-import dis from '../../../dispatcher';
-import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-
-module.exports = React.createClass({
-    displayName: 'NeedToRegisterDialog',
-    propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
-        ]),
-        onFinished: React.PropTypes.func.isRequired,
-    },
-
-    onRegisterClicked: function() {
-        dis.dispatch({
-            action: "start_upgrade_registration",
-        });
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return (
-            <BaseDialog className="mx_NeedToRegisterDialog"
-                onFinished={this.props.onFinished}
-                title={this.props.title || _t('Registration required')}
-            >
-                <div className="mx_Dialog_content">
-                    {this.props.description || _t('A registered account is required for this action')}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={true}>
-                        {_t("Cancel")}
-                    </button>
-                    <button onClick={this.onRegisterClicked}>
-                        {_t("Register")}
-                    </button>
-                </div>
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/SetEmailDialog.js

@@ -0,0 +1,164 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import Email from '../../../email';
+import AddThreepid from '../../../AddThreepid';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+
+
+/**
+ * Prompt the user to set an email address.
+ *
+ * On success, `onFinished(true)` is called.
+ */
+export default React.createClass({
+    displayName: 'SetEmailDialog',
+    propTypes: {
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            emailAddress: null,
+            emailBusy: false,
+        };
+    },
+
+    componentDidMount: function() {
+    },
+
+    onEmailAddressChanged: function(value) {
+        this.setState({
+            emailAddress: value,
+        });
+    },
+
+    onSubmit: function() {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+        const emailAddress = this.state.emailAddress;
+        if (!Email.looksValid(emailAddress)) {
+            Modal.createDialog(ErrorDialog, {
+                title: _t("Invalid Email Address"),
+                description: _t("This doesn't appear to be a valid email address"),
+            });
+            return;
+        }
+        this._addThreepid = new AddThreepid();
+        // we always bind emails when registering, so let's do the
+        // same here.
+        this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
+            Modal.createDialog(QuestionDialog, {
+                title: _t("Verification Pending"),
+                description: _t(
+                    "Please check your email and click on the link it contains. Once this " +
+                    "is done, click continue.",
+                ),
+                button: _t('Continue'),
+                onFinished: this.onEmailDialogFinished,
+            });
+        }, (err) => {
+            this.setState({emailBusy: false});
+            console.error("Unable to add email address " + emailAddress + " " + err);
+            Modal.createDialog(ErrorDialog, {
+                title: _t("Unable to add email address"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+        this.setState({emailBusy: true});
+    },
+
+    onCancelled: function() {
+        this.props.onFinished(false);
+    },
+
+    onEmailDialogFinished: function(ok) {
+        if (ok) {
+            this.verifyEmailAddress();
+        } else {
+            this.setState({emailBusy: false});
+        }
+    },
+
+    verifyEmailAddress: function() {
+        this._addThreepid.checkEmailLinkClicked().done(() => {
+            this.props.onFinished(true);
+        }, (err) => {
+            this.setState({emailBusy: false});
+            if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                const message = _t("Unable to verify email address.") + " " +
+                    _t("Please check your email and click on the link it contains. Once this is done, click continue.");
+                Modal.createDialog(QuestionDialog, {
+                    title: _t("Verification Pending"),
+                    description: message,
+                    button: _t('Continue'),
+                    onFinished: this.onEmailDialogFinished,
+                });
+            } else {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Unable to verify email address: " + err);
+                Modal.createDialog(ErrorDialog, {
+                    title: _t("Unable to verify email address."),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
+                });
+            }
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('elements.Spinner');
+        const EditableText = sdk.getComponent('elements.EditableText');
+
+        const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
+            className="mx_SetEmailDialog_email_input"
+            placeholder={ _t("Email address") }
+            placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
+            blurToCancel={ false }
+            onValueChanged={ this.onEmailAddressChanged } />;
+
+        return (
+            <BaseDialog className="mx_SetEmailDialog"
+                onFinished={this.onCancelled}
+                title={this.props.title}
+            >
+                <div className="mx_Dialog_content">
+                    <p>
+                        { _t('This will allow you to reset your password and receive notifications.') }
+                    </p>
+                    { emailInput }
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <input className="mx_Dialog_primary"
+                        type="submit"
+                        value={_t("Continue")}
+                        onClick={this.onSubmit}
+                    />
+                    <input
+                        type="submit"
+                        value={_t("Skip")}
+                        onClick={this.onCancelled}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/login/CaptchaForm.js

@@ -46,6 +46,10 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        this._captchaWidgetId = null;
+    },
+
     componentDidMount: function() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
@@ -75,6 +79,10 @@ module.exports = React.createClass({
         }
     },
 
+    componentWillUnmount: function() {
+        this._resetRecaptcha();
+    },
+
     _renderRecaptcha: function(divId) {
         if (!global.grecaptcha) {
             console.error("grecaptcha not loaded!");
@@ -90,12 +98,18 @@ module.exports = React.createClass({
         }
 
         console.log("Rendering to %s", divId);
-        global.grecaptcha.render(divId, {
+        this._captchaWidgetId = global.grecaptcha.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
     },
 
+    _resetRecaptcha: function() {
+        if (this._captchaWidgetId !== null) {
+            global.grecaptcha.reset(this._captchaWidgetId);
+        }
+    },
+
     _onCaptchaLoaded: function() {
         console.log("Loaded recaptcha script.");
         try {

src/components/views/login/RegistrationForm.js

@@ -54,11 +54,6 @@ module.exports = React.createClass({
             })).required,
         }),
 
-        // A username that will be used if no username is entered.
-        // Specifying this param will also warn the user that entering
-        // a different username will cause a fresh account to be generated.
-        guestUsername: React.PropTypes.string,
-
         minPasswordLength: React.PropTypes.number,
         onError: React.PropTypes.func,
         onRegisterClick: React.PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
@@ -123,7 +118,7 @@ module.exports = React.createClass({
     _doSubmit: function(ev) {
         let email = this.refs.email.value.trim();
         var promise = this.props.onRegisterClick({
-            username: this.refs.username.value.trim() || this.props.guestUsername,
+            username: this.refs.username.value.trim(),
             password: this.refs.password.value.trim(),
             email: email,
             phoneCountry: this.state.phoneCountry,
@@ -191,7 +186,7 @@ module.exports = React.createClass({
                 break;
             case FIELD_USERNAME:
                 // XXX: SPEC-1
-                var username = this.refs.username.value.trim() || this.props.guestUsername;
+                var username = this.refs.username.value.trim();
                 if (encodeURIComponent(username) != username) {
                     this.markFieldValid(
                         field_id,
@@ -339,9 +334,6 @@ module.exports = React.createClass({
         );
 
         let placeholderUserName = _t("User name");
-        if (this.props.guestUsername) {
-            placeholderUserName += " " + _t("(default: %(userName)s)", {userName: this.props.guestUsername});
-        }
 
         return (
             <div>
@@ -354,9 +346,6 @@ module.exports = React.createClass({
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_USERNAME);}} />
                     <br />
-                    { this.props.guestUsername ?
-                        <div className="mx_Login_fieldLabel">{_t("Setting a user name will create a fresh account")}</div> : null
-                    }
                     <input type="password" ref="password"
                         className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_PASSWORD);}}

src/components/views/messages/RoomAvatarEvent.js

@@ -62,8 +62,8 @@ module.exports = React.createClass({
         var url = ContentRepo.getHttpUriForMxc(
                     MatrixClientPeg.get().getHomeserverUrl(),
                     ev.getContent().url,
-                    14 * window.devicePixelRatio,
-                    14 * window.devicePixelRatio,
+                    Math.ceil(14 * window.devicePixelRatio),
+                    Math.ceil(14 * window.devicePixelRatio),
                     'crop'
                 );
 

src/components/views/rooms/AuxPanel.js

@@ -89,12 +89,13 @@ module.exports = React.createClass({
 
         var conferenceCallNotification = null;
         if (this.props.displayConfCallNotification) {
-            var supportedText, joinText;
+            let supportedText = '';
+            let joinNode;
             if (!MatrixClientPeg.get().supportsVoip()) {
                 supportedText = _t(" (unsupported)");
             }
             else {
-                joinText = (<span>
+                joinNode = (<span>
                     {_tJsx(
                         "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
                         [/<voiceText>(.*?)<\/voiceText>/, /<videoText>(.*?)<\/videoText>/],
@@ -106,9 +107,13 @@ module.exports = React.createClass({
                 </span>);
 
             }
+            // XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
+            // but there are translations for this in the languages we do have so I'm leaving it for now.
             conferenceCallNotification = (
                 <div className="mx_RoomView_ongoingConfCallNotification">
-                    {_t("Ongoing conference call%(supportedText)s. %(joinText)s", {supportedText: supportedText, joinText: joinText})}
+                    {_t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText})}
+                    &nbsp;
+                    {joinNode}
                 </div>
             );
         }

src/components/views/rooms/ForwardMessage.js

@@ -17,7 +17,6 @@
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
 import KeyCode from '../../../KeyCode';
 
@@ -26,11 +25,6 @@ module.exports = React.createClass({
     displayName: 'ForwardMessage',
 
     propTypes: {
-        currentRoomId: React.PropTypes.string.isRequired,
-
-        /* the MatrixEvent to be forwarded */
-        mxEvent: React.PropTypes.object.isRequired,
-
         onCancelClick: React.PropTypes.func.isRequired,
     },
 
@@ -44,7 +38,6 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener('keydown', this._onKeyDown);
     },
 
@@ -54,30 +47,9 @@ module.exports = React.createClass({
             sideOpacity: 1.0,
             middleOpacity: 1.0,
         });
-        dis.unregister(this.dispatcherRef);
         document.removeEventListener('keydown', this._onKeyDown);
     },
 
-    onAction: function(payload) {
-        if (payload.action === 'view_room') {
-            const event = this.props.mxEvent;
-            const Client = MatrixClientPeg.get();
-            Client.sendEvent(payload.room_id, event.getType(), event.getContent()).done(() => {
-                dis.dispatch({action: 'message_sent'});
-            }, (err) => {
-                if (err.name === "UnknownDeviceError") {
-                    dis.dispatch({
-                        action: 'unknown_device_error',
-                        err: err,
-                        room: Client.getRoom(payload.room_id),
-                    });
-                }
-                dis.dispatch({action: 'message_send_failed'});
-            });
-            if (this.props.currentRoomId === payload.room_id) this.props.onCancelClick();
-        }
-    },
-
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.ESCAPE:

src/components/views/rooms/RoomList.js

@@ -18,7 +18,7 @@ limitations under the License.
 'use strict';
 var React = require("react");
 var ReactDOM = require("react-dom");
-import { _t } from '../../../languageHandler';
+import { _t, _tJsx } from '../../../languageHandler';
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var CallHandler = require('../../../CallHandler');
@@ -33,11 +33,28 @@ var Receipt = require('../../../utils/Receipt');
 
 const HIDE_CONFERENCE_CHANS = true;
 
-const VERBS = {
-    'm.favourite': 'favourite',
-    'im.vector.fake.direct': 'tag direct chat',
-    'im.vector.fake.recent': 'restore',
-    'm.lowpriority': 'demote',
+function phraseForSection(section) {
+    // These would probably be better as individual strings,
+    // but for some reason we have translations for these strings
+    // as-is, so keeping it like this for now.
+    let verb;
+    switch (section) {
+        case 'm.favourite':
+            verb = _t('to favourite');
+            break;
+        case 'im.vector.fake.direct':
+            verb = _t('to tag direct chat');
+            break;
+        case 'im.vector.fake.recent':
+            verb = _t('to restore');
+            break;
+        case 'm.lowpriority':
+            verb = _t('to demote');
+            break;
+        default:
+            return _t('Drop here to tag %(section)s', {section: section});
+    }
+    return _t('Drop here %(toAction)s', {toAction: verb});
 };
 
 module.exports = React.createClass({
@@ -478,17 +495,25 @@ module.exports = React.createClass({
         switch (section) {
             case 'im.vector.fake.direct':
                 return <div className="mx_RoomList_emptySubListTip">
-                    Press
-                    <StartChatButton size="16" callout={true}/>
-                    to start a chat with someone
+                    {_tJsx(
+                        "Press <StartChatButton> to start a chat with someone",
+                        [/<StartChatButton>/],
+                        [
+                            (sub) => <StartChatButton size="16" callout={true}/>
+                        ]
+                    )}
                 </div>;
             case 'im.vector.fake.recent':
                 return <div className="mx_RoomList_emptySubListTip">
-                    You're not in any rooms yet! Press
-                    <CreateRoomButton size="16" callout={true}/>
-                    to make a room or
-                    <RoomDirectoryButton size="16" callout={true}/>
-                    to browse the directory
+                    {_tJsx(
+                        "You're not in any rooms yet! Press <CreateRoomButton> to make a room or"+
+                        " <RoomDirectoryButton> to browse the directory",
+                        [/<CreateRoomButton>/, /<RoomDirectoryButton>/],
+                        [
+                            (sub) => <CreateRoomButton size="16" callout={true}/>,
+                            (sub) => <RoomDirectoryButton size="16" callout={true}/>
+                        ]
+                    )}
                 </div>;
         }
 
@@ -497,7 +522,7 @@ module.exports = React.createClass({
             return null;
         }
 
-        const labelText = 'Drop here to ' + (VERBS[section] || 'tag ' + section);
+        const labelText = phraseForSection(section);
 
         return <RoomDropTarget label={labelText} />;
     },

src/components/views/rooms/RoomSettings.js

@@ -594,7 +594,7 @@ module.exports = React.createClass({
                 <div>
                     <label>
                     { isEncrypted
-                      ? <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-verified.svg" width="10" height="12" />
+                      ? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
                       : <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
                     }
                     { isEncrypted ? _t("Encryption is enabled in this room") : _t("Encryption is not enabled in this room") }.

src/components/views/rooms/SimpleRoomHeader.js

@@ -14,10 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
-import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -45,17 +42,10 @@ export default React.createClass({
         title: React.PropTypes.string,
         onCancelClick: React.PropTypes.func,
 
-        // is the RightPanel collapsed?
-        collapsedRhs: React.PropTypes.bool,
-
         // `src` to a TintableSvg. Optional.
         icon: React.PropTypes.string,
     },
 
-    onShowRhsClick: function(ev) {
-        dis.dispatch({ action: 'show_right_panel' });
-    },
-
     render: function() {
         let cancelButton;
         let icon;
@@ -70,25 +60,12 @@ export default React.createClass({
             />;
         }
 
-        let showRhsButton;
-        /* // don't bother cluttering things up with this for now.
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
-        if (this.props.collapsedRhs) {
-            showRhsButton =
-                <div className="mx_RoomHeader_button" style={{ float: 'right' }} onClick={this.onShowRhsClick} title=">">
-                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </div>
-        }
-        */
-
         return (
             <div className="mx_RoomHeader" >
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_simpleHeader">
                         { icon }
                         { this.props.title }
-                        { showRhsButton }
                         { cancelButton }
                     </div>
                 </div>

src/components/views/settings/ChangePassword.js

@@ -20,6 +20,8 @@ var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 var sdk = require("../../../index");
+
+import q from 'q';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 
@@ -140,7 +142,15 @@ module.exports = React.createClass({
         });
 
         cli.setPassword(authDict, newPassword).then(() => {
-            this.props.onFinished();
+            if (this.props.shouldAskForEmail) {
+                return this._optionallySetEmail().then((confirmed) => {
+                    this.props.onFinished({
+                        didSetEmail: confirmed,
+                    });
+                });
+            } else {
+                this.props.onFinished();
+            }
         }, (err) => {
             this.props.onError(err);
         }).finally(() => {
@@ -150,6 +160,20 @@ module.exports = React.createClass({
         }).done();
     },
 
+    _optionallySetEmail: function() {
+        const deferred = q.defer();
+        // Ask for an email otherwise the user has no way to reset their password
+        const SetEmailDialog = sdk.getComponent("dialogs.SetEmailDialog");
+        Modal.createDialog(SetEmailDialog, {
+            title: _t('Do you want to set an email address?'),
+            onFinished: (confirmed) => {
+                // ignore confirmed, setting an email is optional
+                deferred.resolve(confirmed);
+            },
+        });
+        return deferred.promise;
+    },
+
     _onExportE2eKeysClicked: function() {
         Modal.createDialogAsync(
             (cb) => {
@@ -199,7 +223,7 @@ module.exports = React.createClass({
                 const passwordLabel = this.state.cachedPassword ?
                     _t('Password') : _t('New Password');
                 return (
-                    <div className={this.props.className}>
+                    <form className={this.props.className} onSubmit={this.onClickChange}>
                         { currentPassword }
                         <div className={rowClassName}>
                             <div className={rowLabelClassName}>
@@ -222,7 +246,7 @@ module.exports = React.createClass({
                                 element="button">
                             { _t('Change Password') }
                         </AccessibleButton>
-                    </div>
+                    </form>
                 );
             case this.Phases.Uploading:
                 var Loader = sdk.getComponent("elements.Spinner");