Merge branch 'develop' into rav/handle_received_room_key_requests

src/components/structures/CreateRoom.js

@@ -231,7 +231,7 @@ module.exports = React.createClass({
             if (curr_phase == this.phases.ERROR) {
                 error_box = (
                     <div className="mx_Error">
-                        {_t('An error occured: %(error_string)s', {error_string: this.state.error_string})}
+                        {_t('An error occurred: %(error_string)s', {error_string: this.state.error_string})}
                     </div>
                 );
             }

src/components/structures/LoggedInView.js

@@ -223,10 +223,8 @@ export default React.createClass({
                         ref='roomView'
                         autoJoin={this.props.autoJoin}
                         onRegistered={this.props.onRegistered}
-                        eventId={this.props.initialEventId}
                         thirdPartyInvite={this.props.thirdPartyInvite}
                         oobData={this.props.roomOobData}
-                        highlightedEventId={this.props.highlightedEventId}
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
                         opacity={this.props.middleOpacity}
@@ -241,7 +239,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}
@@ -272,7 +269,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,7 +35,7 @@ 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';
 
@@ -44,7 +44,41 @@ 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: {
@@ -60,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
@@ -94,8 +128,10 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         const s = {
-            loading: true,
-            screen: undefined,
+            // the master view we are showing.
+            view: VIEWS.LOADING,
+
+            // a thing to call showScreen with once login completes.
             screenAfterLogin: this.props.initialScreenAfterLogin,
 
             // Stashed guest credentials if the user logs out
@@ -114,8 +150,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 +163,6 @@ module.exports = React.createClass({
             hasNewVersion: false,
             newVersionReleaseNotes: 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 +178,7 @@ module.exports = React.createClass({
             realQueryParams: {},
             startingFragmentQueryParams: {},
             config: {},
-            onLoadCompleted: () => {},
+            onTokenLoginCompleted: () => {},
         };
     },
 
@@ -192,7 +221,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 +298,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 +352,7 @@ module.exports = React.createClass({
         UDEHandler.stopListening();
         window.removeEventListener("focus", this.onFocus);
         window.removeEventListener('resize', this.handleResize);
+        this._roomViewStoreToken.remove();
     },
 
     componentDidUpdate: function() {
@@ -310,20 +362,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");
 
@@ -342,38 +393,19 @@ module.exports = React.createClass({
                         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 +429,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) => {
@@ -467,7 +499,7 @@ module.exports = React.createClass({
                 this.notifyNewScreen('home');
                 break;
             case 'view_set_mxid':
-                this._setMxId();
+                this._setMxId(payload);
                 break;
             case 'view_start_chat_or_reuse':
                 this._chatCreateOrReuse(payload.user_id);
@@ -517,7 +549,10 @@ module.exports = React.createClass({
                 // 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});
+                this.setStateForNewView({
+                    view: VIEWS.LOGGING_IN,
+                    ready: false,
+                });
                 break;
             case 'on_logged_in':
                 this._onLoggedIn(payload.teamToken);
@@ -528,15 +563,15 @@ 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,
                     payload.releaseNotes,
                 );
                 break;
+            case 'send_event':
+                this.onSendEvent(payload.room_id, payload.event);
+                break;
         }
     },
 
@@ -551,8 +586,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
@@ -571,6 +606,15 @@ module.exports = React.createClass({
         const allRooms = RoomListSorter.mostRecentActivityFirst(
             MatrixClientPeg.get().getRooms(),
         );
+        // If there are 0 rooms or 1 room, view the home page because otherwise
+        // if there are 0, we end up trying to index into an empty array, and
+        // if there is 1, we end up viewing the same room.
+        if (allRooms.length < 2) {
+            dis.dispatch({
+                action: 'view_home_page',
+            });
+            return;
+        }
         let roomIndex = -1;
         for (let i = 0; i < allRooms.length; ++i) {
             if (allRooms[i].roomId == this.state.currentRoomId) {
@@ -608,6 +652,8 @@ module.exports = React.createClass({
     // @param {boolean=} roomInfo.show_settings Makes RoomView show the room settings dialog.
     // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the
     //                                    context of that particular event.
+    // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL
+    //                                        and alter the EventTile to appear highlighted.
     // @param {Object=} roomInfo.third_party_invite Object containing data about the third party
     //                                    we received to join the room, if any.
     // @param {string=} roomInfo.third_party_invite.inviteSignUrl 3pid invite sign URL
@@ -619,30 +665,21 @@ module.exports = React.createClass({
         this.focusComposer = true;
 
         const newState = {
-            initialEventId: roomInfo.event_id,
-            highlightedEventId: roomInfo.event_id,
-            initialEventPixelOffset: undefined,
             page_type: PageTypes.RoomView,
             thirdPartyInvite: roomInfo.third_party_invite,
             roomOobData: roomInfo.oob_data,
-            currentRoomAlias: roomInfo.room_alias,
             autoJoin: roomInfo.auto_join,
         };
 
-        if (!roomInfo.room_alias) {
-            newState.currentRoomId = roomInfo.room_id;
-        }
-
-        // if we aren't given an explicit event id, look for one in the
-        // scrollStateMap.
-        //
-        // TODO: do this in RoomView rather than here
-        if (!roomInfo.event_id && this.refs.loggedInView) {
-            const scrollState = this.refs.loggedInView.getScrollStateForRoom(roomInfo.room_id);
-            if (scrollState) {
-                newState.initialEventId = scrollState.focussedEvent;
-                newState.initialEventPixelOffset = scrollState.pixelOffset;
-            }
+        if (roomInfo.room_alias) {
+            console.log(
+                `Switching to room alias ${roomInfo.room_alias} at event ` +
+                roomInfo.event_id,
+            );
+        } else {
+            console.log(`Switching to room id ${roomInfo.room_id} at event ` +
+                roomInfo.event_id,
+            );
         }
 
         // Wait for the first sync to complete so that if a room does have an alias,
@@ -670,7 +707,7 @@ module.exports = React.createClass({
                 }
             }
 
-            if (roomInfo.event_id) {
+            if (roomInfo.event_id && roomInfo.highlighted) {
                 presentedId += "/" + roomInfo.event_id;
             }
             this.notifyNewScreen('room/' + presentedId);
@@ -679,7 +716,7 @@ module.exports = React.createClass({
         });
     },
 
-    _setMxId: function() {
+    _setMxId: function(payload) {
         const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
         const close = Modal.createDialog(SetMxIdDialog, {
             homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
@@ -688,6 +725,11 @@ module.exports = React.createClass({
                     dis.dispatch({
                         action: 'cancel_after_sync_prepared',
                     });
+                    if (payload.go_home_on_cancel) {
+                        dis.dispatch({
+                            action: 'view_home_page',
+                        });
+                    }
                     return;
                 }
                 this.onRegistered(credentials);
@@ -739,8 +781,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();
@@ -768,6 +810,11 @@ module.exports = React.createClass({
             }
             dis.dispatch({
                 action: 'view_set_mxid',
+                // If the set_mxid dialog is cancelled, view /home because if the browser
+                // was pointing at /user/@someone:domain?action=chat, the URL needs to be
+                // reset so that they can revisit /user/.. // (and trigger
+                // `_chatCreateOrReuse` again)
+                go_home_on_cancel: true,
             });
             return;
         }
@@ -848,22 +895,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
      *
@@ -916,9 +947,8 @@ module.exports = React.createClass({
      */
     _onLoggedIn: function(teamToken) {
         this.setState({
+            view: VIEWS.LOGGED_IN,
             guestCreds: null,
-            loggedIn: true,
-            loggingIn: false,
         });
 
         if (teamToken) {
@@ -960,6 +990,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')) {
@@ -978,8 +1009,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,
@@ -1135,6 +1166,10 @@ module.exports = React.createClass({
             const payload = {
                 action: 'view_room',
                 event_id: eventId,
+                // If an event ID is given in the URL hash, notify RoomViewStore to mark
+                // it as highlighted, which will propagate to RoomView and highlight the
+                // associated EventTile.
+                highlighted: Boolean(eventId),
                 third_party_invite: thirdPartyInvite,
                 oob_data: oobData,
             };
@@ -1146,7 +1181,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) {
@@ -1247,6 +1282,8 @@ module.exports = React.createClass({
     onReturnToGuestClick: function() {
         // reanimate our guest login
         if (this.state.guestCreds) {
+            // TODO: this is probably a bit broken - we don't want to be
+            // clearing storage when we reanimate the guest creds.
             Lifecycle.setLoggedIn(this.state.guestCreds);
             this.setState({guestCreds: null});
         }
@@ -1264,7 +1301,7 @@ module.exports = React.createClass({
     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");
     },
@@ -1278,6 +1315,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;
 
@@ -1319,7 +1377,7 @@ module.exports = React.createClass({
             });
         } else {
             dis.dispatch({
-                action: 'view_room_directory',
+                action: 'view_home_page',
             });
         }
     },
@@ -1332,11 +1390,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">
@@ -1346,7 +1402,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
@@ -1354,38 +1410,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
@@ -1394,8 +1454,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}
@@ -1410,7 +1468,10 @@ module.exports = React.createClass({
                     onCancelClick={this.state.guestCreds ? this.onReturnToGuestClick : null}
                     />
             );
-        } else if (this.state.screen == 'forgot_password') {
+        }
+
+
+        if (this.state.view === VIEWS.FORGOT_PASSWORD) {
             const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
             return (
                 <ForgotPassword
@@ -1422,7 +1483,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
@@ -1440,5 +1503,7 @@ module.exports = React.createClass({
                 />
             );
         }
+
+        console.error(`Unknown view ${this.state.view}`);
     },
 });

src/components/structures/RoomView.js

@@ -83,36 +83,8 @@ module.exports = React.createClass({
         //  *                      invited us tovthe room
         oobData: React.PropTypes.object,
 
-        // id of an event to jump to. If not given, will go to the end of the
-        // live timeline.
-        eventId: React.PropTypes.string,
-
-        // where to position the event given by eventId, in pixels from the
-        // bottom of the viewport. If not given, will try to put the event
-        // 1/3 of the way down the viewport.
-        eventPixelOffset: React.PropTypes.number,
-
-        // ID of an event to highlight. If undefined, no event will be highlighted.
-        // Typically this will either be the same as 'eventId', or undefined.
-        highlightedEventId: React.PropTypes.string,
-
         // is the RightPanel collapsed?
         collapsedRhs: React.PropTypes.bool,
-
-        // a map from room id to scroll state, which will be updated on unmount.
-        //
-        // If there is no special scroll state (ie, we are following the live
-        // timeline), the scroll state is null. Otherwise, it is an object with
-        // the following properties:
-        //
-        //    focussedEvent: the ID of the 'focussed' event. Typically this is
-        //        the last event fully visible in the viewport, though if we
-        //        have done an explicit scroll to an explicit event, it will be
-        //        that event.
-        //
-        //    pixelOffset: the number of pixels the window is scrolled down
-        //        from the focussedEvent.
-        scrollStateMap: React.PropTypes.object,
     },
 
     getInitialState: function() {
@@ -121,6 +93,14 @@ module.exports = React.createClass({
             roomId: null,
             roomLoading: true,
             peekLoading: false,
+            shouldPeek: true,
+
+            // The event to be scrolled to initially
+            initialEventId: null,
+            // The offset in pixels from the event with which to scroll vertically
+            initialEventPixelOffset: null,
+            // Whether to highlight the event scrolled to
+            isInitialEventHighlighted: null,
 
             forwardingEvent: null,
             editingRoomSettings: false,
@@ -180,15 +160,59 @@ module.exports = React.createClass({
         if (this.unmounted) {
             return;
         }
-        this.setState({
+        const newState = {
             roomId: RoomViewStore.getRoomId(),
             roomAlias: RoomViewStore.getRoomAlias(),
             roomLoading: RoomViewStore.isRoomLoading(),
             roomLoadError: RoomViewStore.getRoomLoadError(),
             joining: RoomViewStore.isJoining(),
-        }, () => {
-            this._onHaveRoom();
-            this.onRoom(MatrixClientPeg.get().getRoom(this.state.roomId));
+            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) {
+            newState.searchResults = null;
+        }
+
+        // Store the scroll state for the previous room so that we can return to this
+        // position when viewing this room in future.
+        if (this.state.roomId !== newState.roomId) {
+            this._updateScrollMap(this.state.roomId);
+        }
+
+        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.
+            if (initial) {
+                this._onHaveRoom();
+            }
         });
     },
 
@@ -204,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,
                 });
@@ -246,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);
         }
     },
 
@@ -287,13 +307,6 @@ module.exports = React.createClass({
         }
     },
 
-    componentWillReceiveProps: function(newProps) {
-        if (newProps.eventId != this.props.eventId) {
-            // when we change focussed event id, hide the search results.
-            this.setState({searchResults: null});
-        }
-    },
-
     shouldComponentUpdate: function(nextProps, nextState) {
         return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
                 !ObjectUtils.shallowEqual(this.state, nextState));
@@ -319,7 +332,7 @@ module.exports = React.createClass({
         this.unmounted = true;
 
         // update the scroll map before we get unmounted
-        this._updateScrollMap();
+        this._updateScrollMap(this.state.roomId);
 
         if (this.refs.roomView) {
             // disconnect the D&D event listeners from the room view. This
@@ -445,11 +458,6 @@ module.exports = React.createClass({
                     callState: callState
                 });
 
-                break;
-            case 'forward_event':
-                this.setState({
-                    forwardingEvent: payload.content,
-                });
                 break;
         }
     },
@@ -598,12 +606,25 @@ module.exports = React.createClass({
         });
     },
 
+    _updateScrollMap(roomId) {
+        // No point updating scroll state if the room ID hasn't been resolved yet
+        if (!roomId) {
+            return;
+        }
+        dis.dispatch({
+            action: 'update_scroll_state',
+            room_id: roomId,
+            scroll_state: this._getScrollState(),
+        });
+    },
+
     onRoom: function(room) {
         if (!room || room.roomId !== this.state.roomId) {
             return;
         }
         this.setState({
             room: room,
+            waitingForRoom: false,
         }, () => {
             this._onRoomLoaded(room);
         });
@@ -659,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();
+            }
         }
     },
 
@@ -1137,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'});
     },
 
@@ -1240,21 +1273,6 @@ module.exports = React.createClass({
         }
     },
 
-    // update scrollStateMap on unmount
-    _updateScrollMap: function() {
-        if (!this.state.room) {
-            // we were instantiated on a room alias and haven't yet joined the room.
-            return;
-        }
-        if (!this.props.scrollStateMap) return;
-
-        var roomId = this.state.room.roomId;
-
-        var state = this._getScrollState();
-        this.props.scrollStateMap[roomId] = state;
-    },
-
-
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
@@ -1428,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 (
@@ -1447,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"
@@ -1460,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}
@@ -1504,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>
@@ -1560,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}/>;
@@ -1580,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}
@@ -1677,6 +1699,14 @@ module.exports = React.createClass({
             hideMessagePanel = true;
         }
 
+        const shouldHighlight = this.state.isInitialEventHighlighted;
+        let highlightedEventId = null;
+        if (this.state.forwardingEvent) {
+            highlightedEventId = this.state.forwardingEvent.getId();
+        } else if (shouldHighlight) {
+            highlightedEventId = this.state.initialEventId;
+        }
+
         // console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
         var messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
@@ -1684,9 +1714,9 @@ module.exports = React.createClass({
                 manageReadReceipts={!UserSettingsStore.getSyncedSetting('hideReadReceipts', false)}
                 manageReadMarkers={true}
                 hidden={hideMessagePanel}
-                highlightedEventId={this.state.forwardingEvent ? this.state.forwardingEvent.getId() : this.props.highlightedEventId}
-                eventId={this.props.eventId}
-                eventPixelOffset={this.props.eventPixelOffset}
+                highlightedEventId={highlightedEventId}
+                eventId={this.state.initialEventId}
+                eventPixelOffset={this.state.initialEventPixelOffset}
                 onScroll={ this.onMessageListScroll }
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
                 showUrlPreview = { this.state.showUrlPreview }

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

@@ -902,6 +902,9 @@ var TimelinePanel = React.createClass({
 
         var onError = (error) => {
             this.setState({timelineLoading: false});
+            console.error(
+                `Error loading timeline panel at ${eventId}: ${error}`,
+            );
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 

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">
@@ -865,9 +875,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>
             );
@@ -885,8 +896,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">
@@ -894,9 +903,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>
@@ -904,6 +911,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>);
     },
@@ -937,16 +949,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');
@@ -1000,10 +1009,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>;
     },
@@ -1060,6 +1076,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">
@@ -1071,7 +1090,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>
             );
@@ -1079,7 +1099,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">
@@ -1107,16 +1127,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"
@@ -1125,10 +1136,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>
 
@@ -1150,7 +1161,6 @@ module.exports = React.createClass({
             <div className="mx_UserSettings">
                 <SimpleRoomHeader
                     title={ _t("Settings") }
-                    collapsedRhs={ this.props.collapsedRhs }
                     onCancelClick={ this.props.onClose }
                 />
 
@@ -1222,7 +1232,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/Login.js

@@ -87,7 +87,27 @@ module.exports = React.createClass({
         ).then((data) => {
             this.props.onLoggedIn(data);
         }, (error) => {
-            this._setStateFromError(error, true);
+            let errorText;
+
+            // Some error strings only apply for logging in
+            const usingEmail = username.indexOf("@") > 0;
+            if (error.httpStatus == 400 && usingEmail) {
+                errorText = _t('This Home Server does not support login using email address.');
+            } else if (error.httpStatus === 401 || error.httpStatus === 403) {
+                errorText = _t('Incorrect username and/or password.');
+            } else {
+                // other errors, not specific to doing a password login
+                errorText = this._errorTextFromError(error);
+            }
+
+            this.setState({
+                errorText: errorText,
+                // 401 would be the sensible status code for 'incorrect password'
+                // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
+                // mentions this (although the bug is for UI auth which is not this)
+                // We treat both as an incorrect password
+                loginIncorrect: error.httpStatus === 401 || error.httpStatus == 403,
+            });
         }).finally(() => {
             this.setState({
                 busy: false
@@ -110,7 +130,16 @@ module.exports = React.createClass({
         this._loginLogic.loginAsGuest().then(function(data) {
             self.props.onLoggedIn(data);
         }, function(error) {
-            self._setStateFromError(error, true);
+            let errorText;
+            if (error.httpStatus === 403) {
+                errorText = _t("Guest access is disabled on this Home Server.");
+            } else {
+                errorText = self._errorTextFromError(error);
+            }
+            self.setState({
+                errorText: errorText,
+                loginIncorrect: false,
+            });
         }).finally(function() {
             self.setState({
                 busy: false
@@ -183,31 +212,22 @@ module.exports = React.createClass({
                 currentFlow: self._getCurrentFlowStep(),
             });
         }, function(err) {
-            self._setStateFromError(err, false);
+            self.setState({
+                errorText: self._errorTextFromError(err),
+                loginIncorrect: false,
+            });
         }).finally(function() {
             self.setState({
                 busy: false,
             });
-        });
+        }).done();
     },
 
     _getCurrentFlowStep: function() {
         return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
     },
 
-    _setStateFromError: function(err, isLoginAttempt) {
-        this.setState({
-            errorText: this._errorTextFromError(err),
-            // https://matrix.org/jira/browse/SYN-744
-            loginIncorrect: isLoginAttempt && (err.httpStatus == 401 || err.httpStatus == 403)
-        });
-    },
-
     _errorTextFromError(err) {
-        if (err.friendlyText) {
-            return err.friendlyText;
-        }
-
         let errCode = err.errcode;
         if (!errCode && err.httpStatus) {
             errCode = "HTTP " + err.httpStatus;
@@ -219,8 +239,8 @@ module.exports = React.createClass({
         if (err.cors === 'rejected') {
             if (window.location.protocol === 'https:' &&
                 (this.state.enteredHomeserverUrl.startsWith("http:") ||
-                 !this.state.enteredHomeserverUrl.startsWith("http")))
-            {
+                 !this.state.enteredHomeserverUrl.startsWith("http"))
+            ) {
                 errorText = <span>
                     { _tJsx("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
                             "Either use HTTPS or <a>enable unsafe scripts</a>.",
@@ -228,10 +248,9 @@ module.exports = React.createClass({
                       (sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; }
                     )}
                 </span>;
-            }
-            else {
+            } else {
                 errorText = <span>
-                    { _tJsx("Can't connect to homeserver - please check your connectivity and ensure your <a>homeserver's SSL certificate</a> is trusted.",
+                    { _tJsx("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
                       /<a>(.*?)<\/a>/,
                       (sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; }
                     )}

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,
@@ -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/create_room/Presets.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 var Presets = {
     PrivateChat: "private_chat",
@@ -46,9 +47,9 @@ module.exports = React.createClass({
     render: function() {
         return (
             <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
-                <option value={this.Presets.PrivateChat}>Private Chat</option>
-                <option value={this.Presets.PublicChat}>Public Chat</option>
-                <option value={this.Presets.Custom}>Custom</option>
+                <option value={this.Presets.PrivateChat}>{_t("Private Chat")}</option>
+                <option value={this.Presets.PublicChat}>{_t("Public Chat")}</option>
+                <option value={this.Presets.Custom}>{_t("Custom")}</option>
             </select>
         );
     }

src/components/views/create_room/RoomAlias.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'RoomAlias',
@@ -94,7 +95,7 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
+            <input type="text" className="mx_RoomAlias" placeholder={_t("Alias (optional)")}
                 onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
                 value={this.props.alias}/>
         );

src/components/views/dialogs/ChatInviteDialog.js

@@ -24,8 +24,10 @@ 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;
 
 module.exports = React.createClass({
     displayName: "ChatInviteDialog",
@@ -40,13 +42,13 @@ module.exports = React.createClass({
         roomId: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
         return {
             value: "",
-            focus: true
+            focus: true,
         };
     },
 
@@ -54,12 +56,20 @@ module.exports = React.createClass({
         return {
             error: false,
 
-            // List of AddressTile.InviteAddressType objects represeting
+            // List of AddressTile.InviteAddressType objects representing
             // the list of addresses we're going to invite
             inviteList: [],
 
-            // List of AddressTile.InviteAddressType objects represeting
-            // the set of autocompletion results for the current search
+            // Whether a search is ongoing
+            busy: false,
+            // An error message generated during the user directory search
+            searchError: null,
+            // Whether the server supports the user_directory API
+            serverSupportsUserDirectory: true,
+            // The query being searched for
+            query: "",
+            // List of AddressTile.InviteAddressType objects representing
+            // the set of auto-completion results for the current search
             // query.
             queryList: [],
         };
@@ -70,7 +80,6 @@ module.exports = React.createClass({
             // Set the cursor at the end of the text input
             this.refs.textinput.value = this.props.value;
         }
-        this._updateUserList();
     },
 
     onButtonClick: function() {
@@ -94,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);
@@ -104,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);
                 }
@@ -137,15 +148,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.moveSelectionUp();
+            if (this.addressSelector) this.addressSelector.moveSelectionUp();
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.moveSelectionDown();
+            if (this.addressSelector) this.addressSelector.moveSelectionDown();
         } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.chooseSelection();
+            if (this.addressSelector) this.addressSelector.chooseSelection();
         } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
@@ -168,74 +179,36 @@ module.exports = React.createClass({
 
     onQueryChanged: function(ev) {
         const query = ev.target.value.toLowerCase();
-        let queryList = [];
-
-        if (query.length < 2) {
-            return;
-        }
-
         if (this.queryChangedDebouncer) {
             clearTimeout(this.queryChangedDebouncer);
         }
-        this.queryChangedDebouncer = setTimeout(() => {
-            // Only do search if there is something to search
-            if (query.length > 0 && query != '@') {
-                this._userList.forEach((user) => {
-                    if (user.userId.toLowerCase().indexOf(query) === -1 &&
-                        user.displayName.toLowerCase().indexOf(query) === -1
-                    ) {
-                        return;
-                    }
-
-                    // Return objects, structure of which is defined
-                    // by InviteAddressType
-                    queryList.push({
-                        addressType: 'mx',
-                        address: user.userId,
-                        displayName: user.displayName,
-                        avatarMxc: user.avatarUrl,
-                        isKnown: true,
-                        order: user.getLastActiveTs(),
-                    });
-                });
-
-                queryList = queryList.sort((a,b) => {
-                    return a.order < b.order;
-                });
-
-                // If the query is a valid address, add an entry for that
-                // This is important, otherwise there's no way to invite
-                // a perfectly valid address if there are close matches.
-                const addrType = getAddressType(query);
-                if (addrType !== null) {
-                    queryList.unshift({
-                        addressType: addrType,
-                        address: query,
-                        isKnown: false,
-                    });
-                    if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-                    if (addrType == 'email') {
-                        this._lookupThreepid(addrType, query).done();
-                    }
+        // Only do search if there is something to search
+        if (query.length > 0 && query != '@' && query.length >= 2) {
+            this.queryChangedDebouncer = setTimeout(() => {
+                if (this.state.serverSupportsUserDirectory) {
+                    this._doUserDirectorySearch(query);
+                } else {
+                    this._doLocalSearch(query);
                 }
-            }
+            }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
+        } else {
             this.setState({
-                queryList: queryList,
-                error: false,
-            }, () => {
-                this.addressSelector.moveSelectionTop();
+                queryList: [],
+                query: "",
+                searchError: null,
             });
-        }, 200);
+        }
     },
 
     onDismissed: function(index) {
         var self = this;
-        return function() {
+        return () => {
             var inviteList = self.state.inviteList.slice();
             inviteList.splice(index, 1);
             self.setState({
                 inviteList: inviteList,
                 queryList: [],
+                query: "",
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         };
@@ -254,10 +227,108 @@ module.exports = React.createClass({
         this.setState({
             inviteList: inviteList,
             queryList: [],
+            query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
+    _doUserDirectorySearch: function(query) {
+        this.setState({
+            busy: true,
+            query,
+            searchError: null,
+        });
+        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);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+            if (err.errcode === 'M_UNRECOGNIZED') {
+                this.setState({
+                    serverSupportsUserDirectory: false,
+                });
+                // Do a local search immediately
+                this._doLocalSearch(query);
+            }
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    _doLocalSearch: function(query) {
+        this.setState({
+            query,
+            searchError: null,
+        });
+        const results = [];
+        MatrixClientPeg.get().getUsers().forEach((user) => {
+            if (user.userId.toLowerCase().indexOf(query) === -1 &&
+                user.displayName.toLowerCase().indexOf(query) === -1
+            ) {
+                return;
+            }
+
+            // Put results in the format of the new API
+            results.push({
+                user_id: user.userId,
+                display_name: user.displayName,
+                avatar_url: user.avatarUrl,
+            });
+        });
+        this._processResults(results, query);
+    },
+
+    _processResults: function(results, query) {
+        const queryList = [];
+        results.forEach((user) => {
+            if (user.user_id === MatrixClientPeg.get().credentials.userId) {
+                return;
+            }
+            // Return objects, structure of which is defined
+            // by InviteAddressType
+            queryList.push({
+                addressType: 'mx',
+                address: user.user_id,
+                displayName: user.display_name,
+                avatarMxc: user.avatar_url,
+                isKnown: true,
+            });
+        });
+
+        // If the query is a valid address, add an entry for that
+        // This is important, otherwise there's no way to invite
+        // a perfectly valid address if there are close matches.
+        const addrType = getAddressType(query);
+        if (addrType !== null) {
+            queryList.unshift({
+                addressType: addrType,
+                address: query,
+                isKnown: false,
+            });
+            if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+            if (addrType == 'email') {
+                this._lookupThreepid(addrType, query).done();
+            }
+        }
+        this.setState({
+            queryList,
+            error: false,
+        }, () => {
+            if (this.addressSelector) this.addressSelector.moveSelectionTop();
+        });
+    },
+
     _getDirectMessageRooms: function(addr) {
         const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
         const dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
@@ -342,16 +413,6 @@ module.exports = React.createClass({
         this.props.onFinished(true, addrTexts);
     },
 
-    _updateUserList: function() {
-        // Get all the users
-        this._userList = MatrixClientPeg.get().getUsers();
-        // Remove current user
-        const meIx = this._userList.findIndex((u) => {
-            return u.userId === MatrixClientPeg.get().credentials.userId;
-        });
-        this._userList.splice(meIx, 1);
-    },
-
     _isOnInviteList: function(uid) {
         for (let i = 0; i < this.state.inviteList.length; i++) {
             if (
@@ -419,6 +480,7 @@ module.exports = React.createClass({
         this.setState({
             inviteList: inviteList,
             queryList: [],
+            query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         return inviteList;
@@ -454,7 +516,7 @@ module.exports = React.createClass({
                     displayName: res.displayname,
                     avatarMxc: res.avatar_url,
                     isKnown: true,
-                }]
+                }],
             });
         });
     },
@@ -486,23 +548,27 @@ module.exports = React.createClass({
                 placeholder={this.props.placeholder}
                 defaultValue={this.props.value}
                 autoFocus={this.props.focus}>
-            </textarea>
+            </textarea>,
         );
 
-        var error;
-        var addressSelector;
+        let error;
+        let addressSelector;
         if (this.state.error) {
             error = <div className="mx_ChatInviteDialog_error">{_t("You have entered an invalid contact. Try using their Matrix ID or email address.")}</div>;
+        } else if (this.state.searchError) {
+            error = <div className="mx_ChatInviteDialog_error">{this.state.searchError}</div>;
+        } else if (
+            this.state.query.length > 0 &&
+            this.state.queryList.length === 0 &&
+            !this.state.busy
+        ) {
+            error = <div className="mx_ChatInviteDialog_error">{_t("No results")}</div>;
         } else {
-            const addressSelectorHeader = <div className="mx_ChatInviteDialog_addressSelectHeader">
-                Searching known users
-            </div>;
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
                     addressList={ this.state.queryList }
                     onSelected={ this.onSelected }
                     truncateAt={ TRUNCATE_QUERY_LIST }
-                    header={ addressSelectorHeader }
                 />
             );
         }

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -86,7 +86,7 @@ export default class DeactivateAccountDialog extends React.Component {
             passwordBoxClass = 'error';
         }
 
-        const okLabel = this.state.busy ? <Loader /> : 'Deactivate Account';
+        const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
         const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
 
         let cancelButton = null;

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -78,7 +78,7 @@ export default React.createClass({
                     <AccessibleButton onClick={this._onDismissClick}
                         className="mx_UserSettings_button"
                     >
-                        Dismiss
+                        {_t("Dismiss")}
                     </AccessibleButton>
                 </div>
             );

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

@@ -18,7 +18,7 @@ import React from 'react';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
+import { _t, _tJsx } from '../../../languageHandler';
 
 
 export default React.createClass({
@@ -44,8 +44,11 @@ export default React.createClass({
 
         if (SdkConfig.get().bug_report_endpoint_url) {
             bugreport = (
-                <p>Otherwise, <a onClick={this._sendBugReport} href='#'>
-                   click here</a> to send a bug report.
+                <p>
+                {_tJsx(
+                    "Otherwise, <a>click here</a> to send a bug report.",
+                    /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{sub}</a>,
+                )}
                 </p>
             );
         }

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("Cancel")}
+                        onClick={this.onCancelled}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/SetMxIdDialog.js

@@ -125,7 +125,7 @@ export default React.createClass({
                         break;
                     case "M_INVALID_USERNAME":
                         newState.usernameError = _t(
-                            'Username invalid: %(errMessage)',
+                            'Username invalid: %(errMessage)s',
                             { errMessage: err.message},
                         );
                         break;
@@ -139,8 +139,8 @@ export default React.createClass({
                         break;
                     default:
                         newState.usernameError = _t(
-                            'An error occurred: %(errMessage)',
-                            { errMessage: err.message },
+                            'An error occurred: %(error_string)s',
+                            { error_string: err.message },
                         );
                         break;
                 }

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -145,7 +145,7 @@ export default React.createClass({
                             console.log("UnknownDeviceDialog closed by escape");
                             this.props.onFinished();
                 }}
-                title='Room contains unknown devices'
+                title={_t('Room contains unknown devices')}
             >
                 <GeminiScrollbar autoshow={false} className="mx_Dialog_content">
                     <h4>
@@ -162,7 +162,7 @@ export default React.createClass({
                                 this.props.onFinished();
                                 Resend.resendUnsentEvents(this.props.room);
                             }}>
-                        Send anyway
+                        {_t("Send anyway")}
                     </button>
                     <button className="mx_Dialog_primary" autoFocus={ true }
                             onClick={() => {

src/components/views/elements/HomeButton.js

@@ -23,7 +23,7 @@ const HomeButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_home_page"
-            label={ _t("Welcome page") }
+            label={ _t("Home") }
             iconPath="img/icons-home.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/MemberEventListSummary.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import sdk from '../../../index';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
 import { _t } from '../../../languageHandler';
 
@@ -111,9 +112,13 @@ module.exports = React.createClass({
             return null;
         }
 
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                {summaries.join(", ")}
+                <EmojiText>
+                    {summaries.join(", ")}
+                </EmojiText>
             </span>
         );
     },
@@ -222,8 +227,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)sjoined", { severalUsers: "" })
                         : _t("%(oneUser)sjoined", { oneUser: "" });
                 }
-
-            break;
+                break;
             case "left":
                 if (repeats > 1) {
                     res = (plural)
@@ -233,7 +237,8 @@ module.exports = React.createClass({
                     res = (plural)
                         ? _t("%(severalUsers)sleft", { severalUsers: "" })
                         : _t("%(oneUser)sleft", { oneUser: "" });
-                }            break;
+                }
+               break;
             case "joined_and_left":
                 if (repeats > 1) {
                     res = (plural)
@@ -244,7 +249,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)sjoined and left", { severalUsers: "" })
                         : _t("%(oneUser)sjoined and left", { oneUser: "" });
                 }
-            break;
+                break;
             case "left_and_joined":
                 if (repeats > 1) {
                     res = (plural)
@@ -254,8 +259,8 @@ module.exports = React.createClass({
                     res = (plural)
                         ? _t("%(severalUsers)sleft and rejoined", { severalUsers: "" })
                         : _t("%(oneUser)sleft and rejoined", { oneUser: "" });
-                }            break;
-            break;
+                }
+                break;
             case "invite_reject":
                 if (repeats > 1) {
                     res = (plural)
@@ -266,7 +271,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)srejected their invitations", { severalUsers: "" })
                         : _t("%(oneUser)srejected their invitation", { oneUser: "" });
                 }
-            break;
+                break;
             case "invite_withdrawal":
                 if (repeats > 1) {
                     res = (plural)
@@ -277,7 +282,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)shad their invitations withdrawn", { severalUsers: "" })
                         : _t("%(oneUser)shad their invitation withdrawn", { oneUser: "" });
                 }
-            break;
+                break;
             case "invited":
                 if (repeats > 1) {
                     res = (plural)
@@ -288,7 +293,7 @@ module.exports = React.createClass({
                         ? _t("were invited")
                         : _t("was invited");
                 }
-            break;
+                break;
             case "banned":
                 if (repeats > 1) {
                     res = (plural)
@@ -299,7 +304,7 @@ module.exports = React.createClass({
                         ? _t("were banned")
                         : _t("was banned");
                 }
-            break;
+                break;
             case "unbanned":
                 if (repeats > 1) {
                     res = (plural)
@@ -310,7 +315,7 @@ module.exports = React.createClass({
                         ? _t("were unbanned")
                         : _t("was unbanned");
                 }
-            break;
+                break;
             case "kicked":
                 if (repeats > 1) {
                     res = (plural)
@@ -321,7 +326,7 @@ module.exports = React.createClass({
                         ? _t("were kicked")
                         : _t("was kicked");
                 }
-            break;
+                break;
             case "changed_name":
                 if (repeats > 1) {
                     res = (plural)
@@ -332,7 +337,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)schanged their name", { severalUsers: "" })
                         : _t("%(oneUser)schanged their name", { oneUser: "" });
                 }
-            break;
+                break;
             case "changed_avatar":
                 if (repeats > 1) {
                     res = (plural)
@@ -343,7 +348,7 @@ module.exports = React.createClass({
                         ? _t("%(severalUsers)schanged their avatar", { severalUsers: "" })
                         : _t("%(oneUser)schanged their avatar", { oneUser: "" });
                 }
-            break;
+                break;
         }
 
         return res;

src/components/views/elements/TruncatedList.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'TruncatedList',
@@ -33,7 +34,7 @@ module.exports = React.createClass({
             truncateAt: 2,
             createOverflowElement: function(overflowCount, totalCount) {
                 return (
-                    <div>And {overflowCount} more...</div>
+                    <div>{_t("And %(count)s more...", {count: overflowCount})}</div>
                 );
             }
         };

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

@@ -440,7 +440,7 @@ export const FallbackAuthEntry = React.createClass({
     render: function() {
         return (
             <div>
-                <a onClick={this._onShowFallbackClick}>Start authentication</a>
+                <a onClick={this._onShowFallbackClick}>{_t("Start authentication")}</a>
                 <div className="error">
                     {this.props.errorText}
                 </div>

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
@@ -101,7 +96,7 @@ module.exports = React.createClass({
             if (this.refs.email.value == '') {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 Modal.createDialog(QuestionDialog, {
-                    title: "Warning!",
+                    title: _t("Warning!"),
                     description:
                         <div>
                             {_t("If you don't specify an email address, you won't be able to reset your password. " +
@@ -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,
@@ -335,13 +330,10 @@ module.exports = React.createClass({
         );
 
         const registerButton = (
-            <input className="mx_Login_submit" type="submit" value="Register" />
+            <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
 
         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/messages/SenderProfile.js

@@ -30,7 +30,7 @@ export default function SenderProfile(props) {
     }
 
     return (
-        <EmojiText className="mx_SenderProfile"
+        <EmojiText className="mx_SenderProfile" dir="auto"
               onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
     );
 }

src/components/views/messages/TextualBody.js

@@ -63,6 +63,19 @@ module.exports = React.createClass({
         };
     },
 
+    copyToClipboard: function(text) {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            const successful = document.execCommand('copy');
+        } catch (err) {
+            console.log('Unable to copy');
+        }
+        document.body.removeChild(textArea);
+    },
+
     componentDidMount: function() {
         this._unmounted = false;
 
@@ -81,6 +94,14 @@ module.exports = React.createClass({
                     }
                 }, 10);
             }
+            // add event handlers to the 'copy code' buttons
+            const buttons = ReactDOM.findDOMNode(this).getElementsByClassName("mx_EventTile_copyButton");
+            for (let i = 0; i < buttons.length; i++) {
+                buttons[i].onclick = (e) => {
+                    const copyCode = buttons[i].parentNode.getElementsByTagName("code")[0];
+                    this.copyToClipboard(copyCode.textContent);
+                };
+            }
         }
     },
 

src/components/views/rooms/AuxPanel.js

@@ -19,7 +19,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import sdk from '../../../index';
 import dis from "../../../dispatcher";
 import ObjectUtils from '../../../ObjectUtils';
-import  { _t } from '../../../languageHandler';
+import  { _t, _tJsx} from '../../../languageHandler';
 
 
 module.exports = React.createClass({
@@ -78,7 +78,7 @@ module.exports = React.createClass({
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
                     <div className="mx_RoomView_fileDropTargetLabel"
-                      title="Drop File Here">
+                      title={_t("Drop File Here")}>
                         <TintableSvg src="img/upload-big.svg" width="45" height="59"/>
                         <br/>
                         {_t("Drop file here to upload")}
@@ -89,21 +89,31 @@ 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>
-                    Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}}
-                               href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video'); }}
-                               href="#">video</a>.
+                joinNode = (<span>
+                    {_tJsx(
+                        "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
+                        [/<voiceText>(.*?)<\/voiceText>/, /<videoText>(.*?)<\/videoText>/],
+                        [
+                            (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{sub}</a>,
+                            (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{sub}</a>,
+                        ]
+                    )}
                 </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/EntityTile.js

@@ -21,6 +21,7 @@ var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 import AccessibleButton from '../elements/AccessibleButton';
+import { _t } from '../../../languageHandler';
 
 
 var PRESENCE_CLASS = {
@@ -115,7 +116,7 @@ module.exports = React.createClass({
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
-                    <EmojiText element="div" className="mx_EntityTile_name_hover">{name}</EmojiText>
+                    <EmojiText element="div" className="mx_EntityTile_name_hover" dir="auto">{name}</EmojiText>
                     <PresenceLabel activeAgo={ activeAgo }
                         currentlyActive={this.props.presenceCurrentlyActive}
                         presenceState={this.props.presenceState} />
@@ -124,7 +125,7 @@ module.exports = React.createClass({
         }
         else {
             nameEl = (
-                <EmojiText element="div" className="mx_EntityTile_name">{name}</EmojiText>
+                <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{name}</EmojiText>
             );
         }
 
@@ -140,10 +141,10 @@ module.exports = React.createClass({
         var power;
         var powerLevel = this.props.powerLevel;
         if (powerLevel >= 50 && powerLevel < 99) {
-            power = <img src="img/mod.svg" className="mx_EntityTile_power" width="16" height="17" alt="Mod"/>;
+            power = <img src="img/mod.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Moderator")}/>;
         }
         if (powerLevel >= 99) {
-            power = <img src="img/admin.svg" className="mx_EntityTile_power" width="16" height="17" alt="Admin"/>;
+            power = <img src="img/admin.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Admin")}/>;
         }
 
 

src/components/views/rooms/EventTile.js

@@ -381,6 +381,7 @@ module.exports = WithMatrixClient(React.createClass({
         dis.dispatch({
             action: 'view_room',
             event_id: this.props.mxEvent.getId(),
+            highlighted: true,
             room_id: this.props.mxEvent.getRoomId(),
         });
     },
@@ -487,22 +488,22 @@ module.exports = WithMatrixClient(React.createClass({
         let e2e;
         // cosmetic padlocks:
         if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') {
-            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" alt="Encrypted by verified device" src="img/e2e-verified.svg" width="10" height="12" />;
+            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12" />;
         }
         // real padlocks
         else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) {
             if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Undecryptable" src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Undecryptable")} src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
             }
             else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Encrypted by verified device" src="img/e2e-verified.svg" width="10" height="12"/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12"/>;
             }
             else {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Encrypted by unverified device" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by an unverified device")} src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
             }
         }
         else if (e2eEnabled) {
-            e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Unencrypted message" src="img/e2e-unencrypted.svg" width="12" height="12"/>;
+            e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Unencrypted message")} src="img/e2e-unencrypted.svg" width="12" height="12"/>;
         }
         const timestamp = this.props.mxEvent.getTs() ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;

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

@@ -26,19 +26,19 @@ export default class MemberDeviceInfo extends React.Component {
         if (this.props.device.isBlocked()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_blacklisted">
-                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blacklisted"/>
+                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")}/>
                     </div>
             );
         } else if (this.props.device.isVerified()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_verified">
-                    <img src="img/e2e-verified.svg" width="10" height="12" alt="Verified"/>
+                    <img src="img/e2e-verified.svg" width="10" height="12" alt={_t("Verified")}/>
                     </div>
             );
         } else {
             indicator = (
                     <div className="mx_MemberDeviceInfo_unverified">
-                    <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Unverified"/>
+                    <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")}/>
                     </div>
             );
         }

src/components/views/rooms/MemberInfo.js

@@ -38,6 +38,8 @@ import Unread from '../../../Unread';
 import { findReadReceiptFromUserId } from '../../../utils/Receipt';
 import WithMatrixClient from '../../../wrappers/WithMatrixClient';
 import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
 
 module.exports = WithMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -432,7 +434,7 @@ module.exports = WithMatrixClient(React.createClass({
                     title: _t("Warning!"),
                     description:
                         <div>
-                            { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself") }.<br/>
+                            { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }<br/>
                             { _t("Are you sure?") }
                         </div>,
                     button: _t("Continue"),
@@ -701,7 +703,7 @@ module.exports = WithMatrixClient(React.createClass({
         if (kickButton || banButton || muteButton || giveModButton) {
             adminTools =
                 <div>
-                    <h3>Admin tools</h3>
+                    <h3>{_t("Admin tools")}</h3>
 
                     <div className="mx_MemberInfo_buttons">
                         {muteButton}
@@ -727,34 +729,36 @@ module.exports = WithMatrixClient(React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
-                <div className="mx_MemberInfo_avatar">
-                    <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
-                </div>
-
-                <EmojiText element="h2">{memberName}</EmojiText>
-
-                <div className="mx_MemberInfo_profile">
-                    <div className="mx_MemberInfo_profileField">
-                        { this.props.member.userId }
+                <GeminiScrollbar autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                     </div>
-                    <div className="mx_MemberInfo_profileField">
-                        { _t("Level") }: <b><PowerSelector controlled={true} value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
+
+                    <EmojiText element="h2">{memberName}</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.member.userId }
+                        </div>
+                        <div className="mx_MemberInfo_profileField">
+                            { _t("Level:") } <b><PowerSelector controlled={true} value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
+                        </div>
+                        <div className="mx_MemberInfo_profileField">
+                            <PresenceLabel activeAgo={ presenceLastActiveAgo }
+                                currentlyActive={ presenceCurrentlyActive }
+                                presenceState={ presenceState } />
+                        </div>
                     </div>
-                    <div className="mx_MemberInfo_profileField">
-                        <PresenceLabel activeAgo={ presenceLastActiveAgo }
-                            currentlyActive={ presenceCurrentlyActive }
-                            presenceState={ presenceState } />
-                    </div>
-                </div>
 
-                { adminTools }
+                    { adminTools }
 
-                { startChat }
+                    { startChat }
 
-                { this._renderDevices() }
+                    { this._renderDevices() }
 
-                { spinner }
+                    { spinner }
+                </GeminiScrollbar>
             </div>
         );
     }

src/components/views/rooms/MemberTile.js

@@ -22,6 +22,7 @@ var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 var dis = require('../../../dispatcher');
 var Modal = require("../../../Modal");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MemberTile',
@@ -63,7 +64,7 @@ module.exports = React.createClass({
     },
 
     getPowerLabel: function() {
-        return this.props.member.userId + " (power " + this.props.member.powerLevel + ")";
+        return _t("%(userName)s (power %(powerLevelNumber)s)", {userName: this.props.member.userId, powerLevelNumber: this.props.member.powerLevel});
     },
 
     render: function() {

src/components/views/rooms/MessageComposer.js

@@ -109,7 +109,7 @@ export default class MessageComposer extends React.Component {
         let fileList = [];
         for (let i=0; i<files.length; i++) {
             fileList.push(<li key={i}>
-                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name || 'Attachment'}
+                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name || _t('Attachment')}
             </li>);
         }
 
@@ -287,7 +287,7 @@ export default class MessageComposer extends React.Component {
 
             const formattingButton = (
                 <img className="mx_MessageComposer_formatting"
-                     title="Show Text Formatting Toolbar"
+                     title={_t("Show Text Formatting Toolbar")}
                      src="img/button-text-formatting.svg"
                      onClick={this.onToggleFormattingClicked}
                      style={{visibility: this.state.showFormatting ||

src/components/views/rooms/MessageComposerInput.js

@@ -721,6 +721,7 @@ export default class MessageComposerInput extends React.Component {
                          title={ this.state.isRichtextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
                          src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
                     <Editor ref="editor"
+                            dir="auto"
                             placeholder={this.props.placeholder}
                             editorState={this.state.editorState}
                             onChange={this.onEditorContentChanged}

src/components/views/rooms/MessageComposerInputOld.js

@@ -461,7 +461,7 @@ export default React.createClass({
     render: function() {
         return (
             <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
-                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder={this.props.placeholder}
+                <textarea dir="auto" autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder={this.props.placeholder}
                     onPaste={this._onPaste}
                 />
             </div>

src/components/views/rooms/ReadReceiptMarker.js

@@ -23,6 +23,7 @@ var sdk = require('../../../index');
 
 var Velociraptor = require('../../../Velociraptor');
 require('../../../VelocityBounce');
+import { _t } from '../../../languageHandler';
 
 import DateUtils from '../../../DateUtils';
 
@@ -169,8 +170,10 @@ module.exports = React.createClass({
 
         let title;
         if (this.props.timestamp) {
-            title = "Seen by " + this.props.member.userId + " at " + 
-                    DateUtils.formatDate(new Date(this.props.timestamp));
+            title = _t(
+                "Seen by %(userName)s at %(dateTime)s",
+                {userName: this.props.member.userId, dateTime: DateUtils.formatDate(new Date(this.props.timestamp))}
+            );
         }
 
         return (

src/components/views/rooms/RoomHeader.js

@@ -213,7 +213,7 @@ module.exports = React.createClass({
             // don't display the search count until the search completes and
             // gives us a valid (possibly zero) searchCount.
             if (this.props.searchInfo && this.props.searchInfo.searchCount !== undefined && this.props.searchInfo.searchCount !== null) {
-                searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;{ _t("(~%(searchCount)s results)", { searchCount: this.props.searchInfo.searchCount }) }</div>;
+                searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;{ _t("(~%(count)s results)", { count: this.props.searchInfo.searchCount }) }</div>;
             }
 
             // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
@@ -238,7 +238,7 @@ module.exports = React.createClass({
             const emojiTextClasses = classNames('mx_RoomHeader_nametext', { mx_RoomHeader_settingsHint: settingsHint });
             name =
                 <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                    <EmojiText element="div" className={emojiTextClasses} title={roomName}>{ roomName }</EmojiText>
+                    <EmojiText dir="auto" element="div" className={emojiTextClasses} title={roomName}>{ roomName }</EmojiText>
                     { searchStatus }
                 </div>;
         }
@@ -255,7 +255,7 @@ module.exports = React.createClass({
                 }
             }
             if (topic) {
-                topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic }>{ topic }</div>;
+                topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic } dir="auto">{ topic }</div>;
             }
         }
 
@@ -288,7 +288,7 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
                 </AccessibleButton>;
         }

src/components/views/rooms/RoomList.js

@@ -578,7 +578,7 @@ module.exports = React.createClass({
                              onHeaderClick={ self.onSubListHeaderClick }
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
-                { Object.keys(self.state.lists).map(function(tagName) {
+                { Object.keys(self.state.lists).map((tagName) => {
                     if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
                         return <RoomSubList list={ self.state.lists[tagName] }
                              key={ tagName }

src/components/views/rooms/RoomNameEditor.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('../../../index');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'RoomNameEditor',
@@ -35,8 +36,8 @@ module.exports = React.createClass({
 
         this._initialName = name ? name.getContent().name : '';
 
-        this._placeholderName = "Unnamed Room";
-        if (defaultName && defaultName !== 'Empty room') {
+        this._placeholderName = _t("Unnamed Room");
+        if (defaultName && defaultName !== 'Empty room') { // default name from JS SDK, needs no translation as we don't ever show it.
             this._placeholderName += " (" + defaultName + ")";
         }
     },
@@ -55,9 +56,9 @@ module.exports = React.createClass({
                          placeholderClassName="mx_RoomHeader_placeholder"
                          placeholder={ this._placeholderName }
                          blurToCancel={ false }
-                         initialValue={ this._initialName }/>
+                         initialValue={ this._initialName }
+                         dir="auto" />
                 </div>
         );
     },
 });
-

src/components/views/rooms/RoomPreviewBar.js

@@ -21,7 +21,7 @@ var React = require('react');
 var sdk = require('../../../index');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
-import { _t } from '../../../languageHandler';
+import { _t, _tJsx } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'RoomPreviewBar',
@@ -84,7 +84,7 @@ module.exports = React.createClass({
     },
 
     _roomNameElement: function(fallback) {
-        fallback = fallback || 'a room';
+        fallback = fallback || _t('a room');
         const name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
         return name ? name : fallback;
     },
@@ -114,8 +114,7 @@ module.exports = React.createClass({
             if (this.props.invitedEmail) {
                 if (this.state.threePidFetchError) {
                     emailMatchBlock = <div className="error">
-                        Unable to ascertain that the address this invite was
-                        sent to matches one associated with your account.
+                        {_t("Unable to ascertain that the address this invite was sent to matches one associated with your account.")}
                     </div>;
                 } else if (this.state.invitedEmailMxid != MatrixClientPeg.get().credentials.userId) {
                     emailMatchBlock =
@@ -124,28 +123,35 @@ module.exports = React.createClass({
                                 <img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
                             </div>
                             <div className="mx_RoomPreviewBar_warningText">
-                                This invitation was sent to <b><span className="email">{this.props.invitedEmail}</span></b>, which is not associated with this account.<br/>
-                                You may wish to login with a different account, or add this email to this account.
+                                {_t("This invitation was sent to an email address which is not associated with this account:")}
+                                <b><span className="email">{this.props.invitedEmail}</span></b>
+                                <br/>
+                                {_t("You may wish to login with a different account, or add this email to this account.")}
                             </div>
                         </div>;
                 }
             }
-            // TODO: find a way to respect HTML in counterpart!
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_invite_text">
                         { _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) }
                     </div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        { _t('Would you like to') } <a onClick={ this.props.onJoinClick }>{ _t('accept') }</a> { _t('or') } <a onClick={ this.props.onRejectClick }>{ _t('decline') }</a> { _t('this invitation?') }
+                        { _tJsx(
+                            'Would you like to <acceptText>accept</acceptText> or <declineText>decline</declineText> this invitation?',
+                            [/<acceptText>(.*?)<\/acceptText>/, /<declineText>(.*?)<\/declineText>/],
+                            [
+                                (sub) => <a onClick={ this.props.onJoinClick }>{sub}</a>,
+                                (sub) => <a onClick={ this.props.onRejectClick }>{sub}</a>
+                            ]
+                        )}
                     </div>
                     {emailMatchBlock}
                 </div>
             );
 
         } else if (kicked || banned) {
-            const verb = kicked ? 'kicked' : 'banned';
-            const roomName = this._roomNameElement('this room');
+            const roomName = this._roomNameElement(_t('This room'));
             const kickerMember = this.props.room.currentState.getMember(
                 myMember.events.member.getSender()
             );
@@ -153,29 +159,39 @@ module.exports = React.createClass({
                 kickerMember.name : myMember.events.member.getSender();
             let reason;
             if (myMember.events.member.getContent().reason) {
-                reason = <div>Reason: {myMember.events.member.getContent().reason}</div>
+                reason = <div>{_t("Reason: %(reasonText)s", {reasonText: myMember.events.member.getContent().reason})}</div>
             }
             let rejoinBlock;
             if (!banned) {
-                rejoinBlock = <div><a onClick={ this.props.onJoinClick }><b>Rejoin</b></a></div>;
+                rejoinBlock = <div><a onClick={ this.props.onJoinClick }><b>{_t("Rejoin")}</b></a></div>;
             }
+
+            let actionText;
+            if (kicked) {
+                actionText = _t("You have been kicked from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+            }
+            else if (banned) {
+                actionText = _t("You have been banned from %(roomName)s by %(userName)s.", {roomName: roomName, userName: kickerName});
+            } // no other options possible due to the kicked || banned check above.
+
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        You have been {verb} from {roomName} by {kickerName}.<br />
+                        {actionText}
+                        <br />
                         {reason}
                         {rejoinBlock}
-                        <a onClick={ this.props.onForgetClick }><b>Forget</b></a>
+                        <a onClick={ this.props.onForgetClick }><b>{_t("Forget room")}</b></a>
                     </div>
                 </div>
             );
         } else if (this.props.error) {
-            var name = this.props.roomAlias || "This room";
+            var name = this.props.roomAlias || _t("This room");
             var error;
             if (this.props.error.errcode == 'M_NOT_FOUND') {
-                error = name + " does not exist";
+                error = _t("%(roomName)s does not exist.", {roomName: name});
             } else {
-                error = name + " is not accessible at this time";
+                error = _t("%(roomName)s is not accessible at this time.", {roomName: name});
             }
             joinBlock = (
                 <div>
@@ -189,8 +205,12 @@ module.exports = React.createClass({
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        { _t('You are trying to access %(roomName)s', {roomName: name}) }.<br/>
-                        <a onClick={ this.props.onJoinClick }><b>{ _t('Click here') }</b></a> { _t('to join the discussion') }!
+                        { _t('You are trying to access %(roomName)s.', {roomName: name}) }
+                        <br/>
+                        { _tJsx("<a>Click here</a> to join the discussion!",
+                            /<a>(.*?)<\/a>/,
+                            (sub) => <a onClick={ this.props.onJoinClick }><b>{sub}</b></a>
+                        )}
                     </div>
                 </div>
             );

src/components/views/rooms/RoomSettings.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import q from 'q';
 import React from 'react';
-import { _t } from '../../../languageHandler';
+import { _t, _tJsx } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import SdkConfig from '../../../SdkConfig';
 import sdk from '../../../index';
@@ -40,13 +40,14 @@ function parseIntWithDefault(val, def) {
 const BannedUser = React.createClass({
     propTypes: {
         member: React.PropTypes.object.isRequired, // js-sdk RoomMember
+        reason: React.PropTypes.string,
     },
 
     _onUnbanClick: function() {
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         Modal.createDialog(ConfirmUserActionDialog, {
             member: this.props.member,
-            action: 'Unban',
+            action: _t('Unban'),
             danger: false,
             onFinished: (proceed) => {
                 if (!proceed) return;
@@ -73,10 +74,11 @@ const BannedUser = React.createClass({
                 >
                     { _t('Unban') }
                 </AccessibleButton>
-                {this.props.member.userId}
+                <strong>{this.props.member.name}</strong> {this.props.member.userId}
+                {this.props.reason ? " " +_t('Reason') + ": " + this.props.reason : ""}
             </li>
         );
-    }
+    },
 });
 
 module.exports = React.createClass({
@@ -576,28 +578,26 @@ module.exports = React.createClass({
                 { _t('Never send encrypted messages to unverified devices in this room from this device') }.
             </label>;
 
-        if (!isEncrypted &&
-                roomState.mayClientSendStateEvent("m.room.encryption", cli)) {
+        if (!isEncrypted && roomState.mayClientSendStateEvent("m.room.encryption", cli)) {
             return (
                 <div>
                     <label>
                         <input type="checkbox" ref="encrypt" onClick={ this.onEnableEncryptionClick }/>
-                        <img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
+                        <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
                         { _t('Enable encryption') } { _t('(warning: cannot be disabled again!)') }
                     </label>
                     { settings }
                 </div>
             );
-        }
-        else {
+        } else {
             return (
                 <div>
                     <label>
                     { isEncrypted
                       ? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
-                      : <img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
+                      : <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
                     }
-                    { isEncrypted ? "Encryption is enabled in this room" : "Encryption is not enabled in this room" }.
+                    { isEncrypted ? _t("Encryption is enabled in this room") : _t("Encryption is not enabled in this room") }.
                     </label>
                     { settings }
                 </div>
@@ -653,7 +653,7 @@ module.exports = React.createClass({
                         {Object.keys(user_levels).map(function(user, i) {
                             return (
                                 <li className="mx_RoomSettings_userLevel" key={user}>
-                                    { user } { _t('is a') } <PowerSelector value={ user_levels[user] } disabled={true}/>
+                                    { _t("%(user)s is a", {user: user}) } <PowerSelector value={ user_levels[user] } disabled={true}/>
                                 </li>
                             );
                         })}
@@ -664,16 +664,17 @@ module.exports = React.createClass({
             userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
         }
 
-        var banned = this.props.room.getMembersWithMembership("ban");
-        var bannedUsersSection;
+        const banned = this.props.room.getMembersWithMembership("ban");
+        let bannedUsersSection;
         if (banned.length) {
             bannedUsersSection =
                 <div>
                     <h3>{ _t('Banned users') }</h3>
                     <ul className="mx_RoomSettings_banned">
                         {banned.map(function(member) {
+                            const banEvent = member.events.member.getContent();
                             return (
-                                <BannedUser key={member.userId} member={member} />
+                                <BannedUser key={member.userId} member={member} reason={banEvent.reason} />
                             );
                         })}
                     </ul>
@@ -754,7 +755,11 @@ module.exports = React.createClass({
         if (this.state.join_rule === "public" && aliasCount == 0) {
             addressWarning =
                 <div className="mx_RoomSettings_warning">
-                		{ _t('To link to a room it must have') } <a href="#addresses"> { _t('an address') }</a>.
+                        { _tJsx(
+                            'To link to a room it must have <a>an address</a>.',
+                            /<a>(.*?)<\/a>/,
+                            (sub) => <a href="#addresses">{sub}</a>
+                        )}
                 </div>;
         }
 

src/components/views/rooms/RoomTile.js

@@ -224,13 +224,13 @@ module.exports = React.createClass({
             if (this.props.selected) {
                 let nameSelected = <EmojiText>{name}</EmojiText>;
 
-                label = <div title={ name } className={ nameClasses }>{ nameSelected }</div>;
+                label = <div title={ name } className={ nameClasses } dir="auto">{ nameSelected }</div>;
             } else {
-                label = <EmojiText element="div" title={ name } className={ nameClasses }>{name}</EmojiText>;
+                label = <EmojiText element="div" title={ name } className={ nameClasses } dir="auto">{name}</EmojiText>;
             }
         } else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" room={this.props.room} />;
+            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" room={this.props.room} dir="auto" />;
         }
 
         //var incomingCallBox;

src/components/views/rooms/RoomTopicEditor.js

@@ -46,7 +46,8 @@ module.exports = React.createClass({
                      placeholderClassName="mx_RoomHeader_placeholder"
                      placeholder={_t("Add a topic")}
                      blurToCancel={ false }
-                     initialValue={ this._initialTopic }/>
+                     initialValue={ this._initialTopic }
+                     dir="auto" />
         );
     },
 });

src/components/views/rooms/SimpleRoomHeader.js

@@ -14,12 +14,10 @@ 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';
 
 // cancel button which is shared between room header and simple room header
 export function CancelButton(props) {
@@ -28,7 +26,7 @@ export function CancelButton(props) {
     return (
         <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
             <img src="img/cancel.svg" className='mx_filterFlipColor'
-                width="18" height="18" alt="Cancel"/>
+                width="18" height="18" alt={_t("Cancel")}/>
         </AccessibleButton>
     );
 }
@@ -44,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;
@@ -69,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/rooms/TopUnreadMessagesBar.js

@@ -41,7 +41,7 @@ module.exports = React.createClass({
                 </div>
                 <img className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
                     src="img/cancel.svg" width="18" height="18"
-                    alt="Close" title="Close"
+                    alt={_t("Close")} title={_t("Close")}
                     onClick={this.props.onCloseClick} />
             </div>
         );

src/components/views/settings/AddPhoneNumber.js

@@ -165,7 +165,7 @@ export default WithMatrixClient(React.createClass({
                     </div>
                 </div>
                 <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                     <input type="image" value="Add" src="img/plus.svg" width="14" height="14" />
+                     <input type="image" value={_t("Add")} src="img/plus.svg" width="14" height="14" />
                 </div>
             </form>
         );

src/components/views/settings/ChangeAvatar.js

@@ -17,6 +17,7 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var sdk = require('../../../index');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'ChangeAvatar',
@@ -105,7 +106,7 @@ module.exports = React.createClass({
 
     onError: function(error) {
         this.setState({
-            errorText: "Failed to upload profile picture!"
+            errorText: _t("Failed to upload profile picture!")
         });
     },
 
@@ -127,7 +128,7 @@ module.exports = React.createClass({
         if (this.props.showUploadSection) {
             uploadSection = (
                 <div className={this.props.className}>
-                    Upload new:
+                    {_t("Upload new:")}
                     <input type="file" accept="image/*" onChange={this.onFileSelected}/>
                     {this.state.errorText}
                 </div>

src/components/views/settings/ChangeDisplayName.js

@@ -18,6 +18,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('../../../index');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'ChangeDisplayName',
@@ -52,7 +53,7 @@ module.exports = React.createClass({
         return (
             <EditableTextContainer
                 getInitialValue={this._getDisplayName}
-                placeholder="No display name"
+                placeholder={_t("No display name")}
                 blurToSubmit={true}
                 onSubmit={this._changeDisplayName} />
         );

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';
 
@@ -53,7 +55,7 @@ module.exports = React.createClass({
             onCheckPassword: function(oldPass, newPass, confirmPass) {
                 if (newPass !== confirmPass) {
                     return {
-                        error: _t("New passwords don't match") + "."
+                        error: _t("New passwords don't match")
                     };
                 } else if (!newPass || newPass.length === 0) {
                     return {
@@ -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");

src/components/views/settings/DevicesPanel.js

@@ -19,6 +19,7 @@ import classNames from 'classnames';
 
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import { _t } from '../../../languageHandler';
 
 
 export default class DevicesPanel extends React.Component {
@@ -54,10 +55,10 @@ export default class DevicesPanel extends React.Component {
                 var errtxt;
                 if (error.httpStatus == 404) {
                     // 404 probably means the HS doesn't yet support the API.
-                    errtxt = "Your home server does not support device management.";
+                    errtxt = _t("Your home server does not support device management.");
                 } else {
                     console.error("Error loading devices:", error);
-                    errtxt = "Unable to load device list.";
+                    errtxt = _t("Unable to load device list");
                 }
                 this.setState({deviceLoadError: errtxt});
             }
@@ -127,9 +128,9 @@ export default class DevicesPanel extends React.Component {
         return (
             <div className={classes}>
                 <div className="mx_DevicesPanel_header">
-                    <div className="mx_DevicesPanel_deviceId">ID</div>
-                    <div className="mx_DevicesPanel_deviceName">Name</div>
-                    <div className="mx_DevicesPanel_deviceLastSeen">Last seen</div>
+                    <div className="mx_DevicesPanel_deviceId">{_t("Device ID")}</div>
+                    <div className="mx_DevicesPanel_deviceName">{_t("Device Name")}</div>
+                    <div className="mx_DevicesPanel_deviceLastSeen">{_t("Last seen")}</div>
                     <div className="mx_DevicesPanel_deviceButtons"></div>
                 </div>
                 {devices.map(this._renderDevice)}

src/components/views/settings/EnableNotificationsButton.js

@@ -18,6 +18,7 @@ limitations under the License.
 var React = require("react");
 var Notifier = require("../../../Notifier");
 var dis = require("../../../dispatcher");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'EnableNotificationsButton',
@@ -60,13 +61,13 @@ module.exports = React.createClass({
         if (this.enabled()) {
             return (
                 <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    Disable Notifications
+                    {_t("Disable Notifications")}
                 </button>
             );
         } else {
             return (
                 <button className="mx_EnableNotificationsButton" onClick={this.onClick}>
-                    Enable Notifications
+                    {_t("Enable Notifications")}
                 </button>
             );
         }

src/components/views/voip/CallView.js

@@ -18,6 +18,7 @@ var dis = require("../../../dispatcher");
 var CallHandler = require("../../../CallHandler");
 var sdk = require('../../../index');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CallView',
@@ -130,7 +131,11 @@ module.exports = React.createClass({
         var voice;
         if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
             var callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
-            voice = <div className="mx_CallView_voice" onClick={ this.props.onClick }>Active call ({ callRoom.name })</div>;
+            voice = (
+                <div className="mx_CallView_voice" onClick={ this.props.onClick }>
+                {_t("Active call (%(roomName)s)", {roomName: callRoom.name})}
+                </div>
+            );
         }
 
         return (

src/components/views/voip/IncomingCallBox.js

@@ -17,6 +17,7 @@ var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var dis = require("../../../dispatcher");
 var CallHandler = require("../../../CallHandler");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'IncomingCallBox',
@@ -45,23 +46,36 @@ module.exports = React.createClass({
             room = MatrixClientPeg.get().getRoom(this.props.incomingCall.roomId);
         }
 
-        var caller = room ? room.name : "unknown";
+        var caller = room ? room.name : _t("unknown caller");
+
+        let incomingCallText = null;
+        if (this.props.incomingCall) {
+            if (this.props.incomingCall.type === "voice") {
+                incomingCallText = _t("Incoming voice call from %(name)s", {name: caller});
+            }
+            else if (this.props.incomingCall.type === "video") {
+                incomingCallText = _t("Incoming video call from %(name)s", {name: caller});
+            }
+            else {
+                incomingCallText = _t("Incoming call from %(name)s", {name: caller});
+            }
+        }
 
         return (
             <div className="mx_IncomingCallBox" id="incomingCallBox">
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
                 <div className="mx_IncomingCallBox_title">
-                    Incoming { this.props.incomingCall ? this.props.incomingCall.type : '' } call from { caller }
+                    {incomingCallText}
                 </div>
                 <div className="mx_IncomingCallBox_buttons">
                     <div className="mx_IncomingCallBox_buttons_cell">
                         <div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
-                            Decline
+                            {_t("Decline")}
                         </div>
                     </div>
                     <div className="mx_IncomingCallBox_buttons_cell">
                         <div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
-                            Accept
+                            {_t("Accept")}
                         </div>
                     </div>
                 </div>