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

.gitignore

@@ -12,3 +12,5 @@ npm-debug.log
 
 /.idea
 /src/component-index.js
+
+.DS_Store

CHANGELOG.md

@@ -1,3 +1,10 @@
+Changes in [0.9.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.2) (2017-06-06)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.1...v0.9.2)
+
+ * Hotfix: Allow password reset when logged in
+   [\#1044](https://github.com/matrix-org/matrix-react-sdk/pull/1044)
+
 Changes in [0.9.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.9.1) (2017-06-02)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.9.0...v0.9.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -66,6 +66,7 @@
     "lodash": "^4.13.1",
     "matrix-js-sdk": "0.7.10",
     "optimist": "^0.6.1",
+    "prop-types": "^15.5.8",
     "q": "^1.4.1",
     "react": "^15.4.0",
     "react-addons-css-transition-group": "15.3.2",

src/CallMediaHandler.js

@@ -16,7 +16,6 @@
 
 import UserSettingsStore from './UserSettingsStore';
 import * as Matrix from 'matrix-js-sdk';
-import q from 'q';
 
 export default {
     getDevices: function() {

src/KeyCode.js

@@ -32,4 +32,5 @@ module.exports = {
     DELETE: 46,
     KEY_D: 68,
     KEY_E: 69,
+    KEY_M: 77,
 };

src/Lifecycle.js

@@ -187,6 +187,14 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
 
 // returns a promise which resolves to true if a session is found in
 // localstorage
+//
+// N.B. Lifecycle.js should not maintain any further localStorage state, we
+//      are moving towards using SessionStore to keep track of state related
+//      to the current session (which is typically backed by localStorage).
+//
+//      The plan is to gradually move the localStorage access done here into
+//      SessionStore to avoid bugs where the view becomes out-of-sync with
+//      localStorage (e.g. teamToken, isGuest etc.)
 function _restoreFromLocalStorage() {
     if (!localStorage) {
         return q(false);
@@ -237,7 +245,7 @@ function _handleRestoreFailure(e) {
             + ' This is a once off; sorry for the inconvenience.',
         );
 
-        _clearStorage();
+        _clearLocalStorage();
 
         return q.reject(new Error(
             _t('Unable to restore previous session') + ': ' + msg,
@@ -258,7 +266,7 @@ function _handleRestoreFailure(e) {
     return def.promise.then((success) => {
         if (success) {
             // user clicked continue.
-            _clearStorage();
+            _clearLocalStorage();
             return false;
         }
 
@@ -314,6 +322,16 @@ export function setLoggedIn(credentials) {
                 localStorage.setItem("mx_device_id", credentials.deviceId);
             }
 
+            // The user registered as a PWLU (PassWord-Less User), the generated password
+            // is cached here such that the user can change it at a later time.
+            if (credentials.password) {
+                // Update SessionStore
+                dis.dispatch({
+                    action: 'cached_password',
+                    cachedPassword: credentials.password,
+                });
+            }
+
             console.log("Session persisted for %s", credentials.userId);
         } catch (e) {
             console.warn("Error using local storage: can't persist session!", e);
@@ -332,10 +350,6 @@ export function setLoggedIn(credentials) {
     }
 
     // stop any running clients before we create a new one with these new credentials
-    //
-    // XXX: why do we have any running clients here? Maybe on sign-in after
-    // initial use as a guest? but what about our persistent storage? we need to
-    // be careful not to leak e2e data created as one user into another session.
     stopMatrixClient();
 
     MatrixClientPeg.replaceUsingCreds(credentials);
@@ -406,19 +420,13 @@ export function startMatrixClient() {
  * a session has been logged out / ended.
  */
 export function onLoggedOut() {
-    stopMatrixClient(true);
+    _clearLocalStorage();
+    stopMatrixClient();
     dis.dispatch({action: 'on_logged_out'});
 }
 
-function _clearStorage() {
+function _clearLocalStorage() {
     Analytics.logout();
-
-    const cli = MatrixClientPeg.get();
-    if (cli) {
-        // TODO: *really* ought to wait for the promise to complete
-        cli.clearStores().done();
-    }
-
     if (!window.localStorage) {
         return;
     }
@@ -435,13 +443,9 @@ function _clearStorage() {
 }
 
 /**
- * Stop all the background processes related to the current client.
+ * Stop all the background processes related to the current client
- *
- * Optionally clears persistent stores.
- *
- * @param {boolean} clearStores true to clear the persistent stores.
  */
-export function stopMatrixClient(clearStores) {
+export function stopMatrixClient() {
     Notifier.stop();
     UserActivity.stop();
     Presence.stop();
@@ -450,13 +454,7 @@ export function stopMatrixClient(clearStores) {
     if (cli) {
         cli.stopClient();
         cli.removeAllListeners();
+        cli.store.deleteAllData();
+        MatrixClientPeg.unset();
     }
-
-    if (clearStores) {
-        // note that we have to do this *after* stopping the client, but
-        // *before* clearing the MatrixClientPeg.
-        _clearStorage();
-    }
-
-    MatrixClientPeg.unset();
 }

src/MatrixClientPeg.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 'use strict';
 
-import q from "q";
 import Matrix from 'matrix-js-sdk';
 import utils from 'matrix-js-sdk/lib/utils';
 import EventTimeline from 'matrix-js-sdk/lib/models/event-timeline';

src/Rooms.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
-import DMRoomMap from './utils/DMRoomMap';
 import q from 'q';
 
 /**

src/ScalarMessaging.js

@@ -94,6 +94,22 @@ Example:
     }
 }
 
+get_membership_count
+--------------------
+Get the number of joined users in the room.
+
+Request:
+ - room_id is the room to get the count in.
+Response:
+78
+Example:
+{
+    action: "get_membership_count",
+    room_id: "!foo:bar",
+    response: 78
+}
+
+
 membership_state AND bot_options
 --------------------------------
 Get the content of the "m.room.member" or "m.room.bot.options" state event respectively.
@@ -256,6 +272,21 @@ function botOptions(event, roomId, userId) {
     returnStateEvent(event, roomId, "m.room.bot.options", "_" + userId);
 }
 
+function getMembershipCount(event, roomId) {
+    const client = MatrixClientPeg.get();
+    if (!client) {
+        sendError(event, _t('You need to be logged in.'));
+        return;
+    }
+    const room = client.getRoom(roomId);
+    if (!room) {
+        sendError(event, _t('This room is not recognised.'));
+        return;
+    }
+    const count = room.getJoinedMembers().length;
+    sendResponse(event, count);
+}
+
 function returnStateEvent(event, roomId, eventType, stateKey) {
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -343,6 +374,9 @@ const onMessage = function(event) {
         } else if (event.data.action === "set_plumbing_state") {
             setPlumbingState(event, roomId, event.data.status);
             return;
+        } else if (event.data.action === "get_membership_count") {
+            getMembershipCount(event, roomId);
+            return;
         }
 
         if (!userId) {

src/autocomplete/Components.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
 /* These were earlier stateless functional components but had to be converted

src/autocomplete/UserProvider.js

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import Q from 'q';
 import Fuse from 'fuse.js';
 import {PillCompletion} from './Components';
 import sdk from '../index';

src/components/structures/CreateRoom.js

@@ -17,7 +17,6 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import q from 'q';
 import { _t } from '../../languageHandler';
 import sdk from '../../index';
 import MatrixClientPeg from '../../MatrixClientPeg';
@@ -247,7 +246,7 @@ module.exports = React.createClass({
 
             return (
             <div className="mx_CreateRoom">
-                <SimpleRoomHeader title="CreateRoom" collapsedRhs={ this.props.collapsedRhs }/>
+                <SimpleRoomHeader title={_t("Create Room")} collapsedRhs={ this.props.collapsedRhs }/>
                 <div className="mx_CreateRoom_body">
                     <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder={_t('Name')}/> <br />
                     <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder={_t('Topic')}/> <br />

src/components/structures/FilePanel.js

@@ -19,7 +19,7 @@ import React from 'react';
 import Matrix from 'matrix-js-sdk';
 import sdk from '../../index';
 import MatrixClientPeg from '../../MatrixClientPeg';
-import { _t } from '../../languageHandler';
+import { _t, _tJsx } from '../../languageHandler';
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -91,7 +91,9 @@ var FilePanel = React.createClass({
     render: function() {
         if (MatrixClientPeg.get().isGuest()) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
-                <div className="mx_RoomView_empty">You must <a href="#/register">register</a> to use this functionality</div>
+                <div className="mx_RoomView_empty">
+                {_tJsx("You must <a>register</a> to use this functionality", /<a>(.*?)<\/a>/, (sub) => <a href="#/register" key="sub">{sub}</a>)}
+                </div>
             </div>;
         } else if (this.noRoom) {
             return <div className="mx_FilePanel mx_RoomView_messageListWrapper">

src/components/structures/InteractiveAuth.js

@@ -19,8 +19,6 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 
 import React from 'react';
 
-import sdk from '../../index';
-
 import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
 
 export default React.createClass({

src/components/structures/LoggedInView.js

@@ -25,6 +25,8 @@ import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import sessionStore from '../../stores/SessionStore';
+import MatrixClientPeg from '../../MatrixClientPeg';
 
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
@@ -41,10 +43,13 @@ export default React.createClass({
     propTypes: {
         matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
         page_type: React.PropTypes.string.isRequired,
-        onRoomIdResolved: React.PropTypes.func,
         onRoomCreated: React.PropTypes.func,
         onUserSettingsClose: React.PropTypes.func,
 
+        // Called with the credentials of a registered user (if they were a ROU that
+        // transitioned to PWLU)
+        onRegistered: React.PropTypes.func,
+
         teamToken: React.PropTypes.string,
 
         // and lots and lots of other stuff.
@@ -83,12 +88,32 @@ export default React.createClass({
         CallMediaHandler.loadDevices();
 
         document.addEventListener('keydown', this._onKeyDown);
+
+        this._sessionStore = sessionStore;
+        this._sessionStoreToken = this._sessionStore.addListener(
+            this._setStateFromSessionStore,
+        );
+        this._setStateFromSessionStore();
+
         this._matrixClient.on("accountData", this.onAccountData);
     },
 
     componentWillUnmount: function() {
         document.removeEventListener('keydown', this._onKeyDown);
         this._matrixClient.removeListener("accountData", this.onAccountData);
+        if (this._sessionStoreToken) {
+            this._sessionStoreToken.remove();
+        }
+    },
+
+    // Child components assume that the client peg will not be null, so give them some
+    // sort of assurance here by only allowing a re-render if the client is truthy.
+    //
+    // This is required because `LoggedInView` maintains its own state and if this state
+    // updates after the client peg has been made null (during logout), then it will
+    // attempt to re-render and the children will throw errors.
+    shouldComponentUpdate: function() {
+        return Boolean(MatrixClientPeg.get());
     },
 
     getScrollStateForRoom: function(roomId) {
@@ -102,10 +127,16 @@ export default React.createClass({
         return this.refs.roomView.canResetTimeline();
     },
 
+    _setStateFromSessionStore() {
+        this.setState({
+            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
+        });
+    },
+
     onAccountData: function(event) {
         if (event.getType() === "im.vector.web.settings") {
             this.setState({
-                useCompactLayout: event.getContent().useCompactLayout
+                useCompactLayout: event.getContent().useCompactLayout,
             });
         }
     },
@@ -180,8 +211,8 @@ export default React.createClass({
         const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         const HomePage = sdk.getComponent('structures.HomePage');
         const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
-        const GuestWarningBar = sdk.getComponent('globals.GuestWarningBar');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
+        const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
 
         let page_element;
         let right_panel = '';
@@ -190,15 +221,14 @@ export default React.createClass({
             case PageTypes.RoomView:
                 page_element = <RoomView
                         ref='roomView'
-                        roomAddress={this.props.currentRoomAlias || this.props.currentRoomId}
                         autoJoin={this.props.autoJoin}
-                        onRoomIdResolved={this.props.onRoomIdResolved}
+                        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.currentRoomAlias || this.props.currentRoomId}
+                        key={this.props.currentRoomId || 'roomview'}
                         opacity={this.props.middleOpacity}
                         collapsedRhs={this.props.collapse_rhs}
                         ConferenceHandler={this.props.ConferenceHandler}
@@ -235,12 +265,18 @@ export default React.createClass({
                 break;
 
             case PageTypes.HomePage:
+                // If team server config is present, pass the teamServerURL. props.teamToken
+                // must also be set for the team page to be displayed, otherwise the
+                // welcomePageUrl is used (which might be undefined).
+                const teamServerUrl = this.props.config.teamServerConfig ?
+                    this.props.config.teamServerConfig.teamServerURL : null;
+
                 page_element = <HomePage
                     collapsedRhs={this.props.collapse_rhs}
-                    teamServerUrl={this.props.config.teamServerConfig.teamServerURL}
+                    teamServerUrl={teamServerUrl}
                     teamToken={this.props.teamToken}
-                />
+                    homePageUrl={this.props.config.welcomePageUrl}
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>
+                />;
                 break;
 
             case PageTypes.UserView:
@@ -249,16 +285,15 @@ export default React.createClass({
                 break;
         }
 
+        const isGuest = this.props.matrixClient.isGuest();
         var topBar;
         if (this.props.hasNewVersion) {
             topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
                 releaseNotes={this.props.newVersionReleaseNotes}
             />;
-        }
+        } else if (this.state.userHasGeneratedPassword) {
-        else if (this.props.matrixClient.isGuest()) {
+            topBar = <PasswordNagBar />;
-            topBar = <GuestWarningBar />;
+        } else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
-        }
-        else if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
             topBar = <MatrixToolbar />;
         }
 
@@ -278,7 +313,6 @@ export default React.createClass({
                         selectedRoom={this.props.currentRoomId}
                         collapsed={this.props.collapse_lhs || false}
                         opacity={this.props.leftOpacity}
-                        teamToken={this.props.teamToken}
                     />
                     <main className='mx_MatrixChat_middlePanel'>
                         {page_element}

src/components/structures/MatrixChat.js

@@ -34,6 +34,9 @@ import sdk from '../../index';
 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';
+import RoomViewStore from '../../stores/RoomViewStore';
 import PageTypes from '../../PageTypes';
 
 import createRoom from "../../createRoom";
@@ -103,9 +106,6 @@ module.exports = React.createClass({
             // What the LoggedInView would be showing if visible
             page_type: null,
 
-            // If we are viewing a room by alias, this contains the alias
-            currentRoomAlias: null,
-
             // The ID of the room we're viewing. This is either populated directly
             // in the case where we view a room by ID or by RoomView when it resolves
             // what ID an alias points at.
@@ -192,6 +192,9 @@ module.exports = React.createClass({
     componentWillMount: function() {
         SdkConfig.put(this.props.config);
 
+        RoomViewStore.addListener(this._onRoomViewStoreUpdated);
+        this._onRoomViewStoreUpdated();
+
         if (!UserSettingsStore.getLocalSetting('analyticsOptOut', false)) Analytics.enable();
 
         // Used by _viewRoom before getting state from sync
@@ -293,7 +296,7 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        Lifecycle.stopMatrixClient(false);
+        Lifecycle.stopMatrixClient();
         dis.unregister(this.dispatcherRef);
         UDEHandler.stopListening();
         window.removeEventListener("focus", this.onFocus);
@@ -323,7 +326,6 @@ module.exports = React.createClass({
     onAction: function(payload) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
 
         switch (payload.action) {
             case 'logout':
@@ -365,17 +367,21 @@ module.exports = React.createClass({
                 // 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(false);
+                Lifecycle.stopMatrixClient();
 
                 this.notifyNewScreen('register');
                 break;
             case 'start_password_recovery':
-                if (this.state.loggedIn) return;
                 this.setStateForNewScreen({
                     screen: 'forgot_password',
                 });
                 this.notifyNewScreen('forgot_password');
                 break;
+            case 'start_chat':
+                createRoom({
+                    dmUserId: payload.user_id,
+                });
+                break;
             case 'leave_room':
                 this._leaveRoom(payload.room_id);
                 break;
@@ -436,37 +442,36 @@ module.exports = React.createClass({
                 this._viewIndexedRoom(payload.roomIndex);
                 break;
             case 'view_user_settings':
+                if (MatrixClientPeg.get().isGuest()) {
+                    dis.dispatch({
+                        action: 'do_after_sync_prepared',
+                        deferred_action: {
+                            action: 'view_user_settings',
+                        },
+                    });
+                    dis.dispatch({action: 'view_set_mxid'});
+                    break;
+                }
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
             case 'view_create_room':
-                //this._setPage(PageTypes.CreateRoom);
+                this._createRoom();
-                //this.notifyNewScreen('new');
-                Modal.createDialog(TextInputDialog, {
-                    title: _t('Create Room'),
-                    description: _t('Room name (optional)'),
-                    button: _t('Create Room'),
-                    onFinished: (shouldCreate, name) => {
-                        if (shouldCreate) {
-                            const createOpts = {};
-                            if (name) createOpts.name = name;
-                            createRoom({createOpts}).done();
-                        }
-                    },
-                });
                 break;
             case 'view_room_directory':
                 this._setPage(PageTypes.RoomDirectory);
                 this.notifyNewScreen('directory');
                 break;
             case 'view_home_page':
-                if (!this._teamToken) {
-                    dis.dispatch({action: 'view_room_directory'});
-                    return;
-                }
                 this._setPage(PageTypes.HomePage);
                 this.notifyNewScreen('home');
                 break;
+            case 'view_set_mxid':
+                this._setMxId();
+                break;
+            case 'view_start_chat_or_reuse':
+                this._chatCreateOrReuse(payload.user_id);
+                break;
             case 'view_create_chat':
                 this._createChat();
                 break;
@@ -508,7 +513,11 @@ module.exports = React.createClass({
                 this._onSetTheme(payload.value);
                 break;
             case 'on_logging_in':
-                this.setState({loggingIn: true});
+                // We are now logging in, so set the state to reflect that
+                // and also that we're not ready (we'll be marked as logged
+                // in once the login completes, then ready once the sync
+                // completes).
+                this.setState({loggingIn: true, ready: false});
                 break;
             case 'on_logged_in':
                 this._onLoggedIn(payload.teamToken);
@@ -531,6 +540,10 @@ module.exports = React.createClass({
         }
     },
 
+    _onRoomViewStoreUpdated: function() {
+        this.setState({ currentRoomId: RoomViewStore.getRoomId() });
+    },
+
     _setPage: function(pageType) {
         this.setState({
             page_type: pageType,
@@ -553,6 +566,7 @@ module.exports = React.createClass({
         this.notifyNewScreen('register');
     },
 
+    // TODO: Move to RoomViewStore
     _viewNextRoom: function(roomIndexDelta) {
         const allRooms = RoomListSorter.mostRecentActivityFirst(
             MatrixClientPeg.get().getRooms(),
@@ -566,15 +580,22 @@ module.exports = React.createClass({
         }
         roomIndex = (roomIndex + roomIndexDelta) % allRooms.length;
         if (roomIndex < 0) roomIndex = allRooms.length - 1;
-        this._viewRoom({ room_id: allRooms[roomIndex].roomId });
+        dis.dispatch({
+            action: 'view_room',
+            room_id: allRooms[roomIndex].roomId,
+        });
     },
 
+    // TODO: Move to RoomViewStore
     _viewIndexedRoom: function(roomIndex) {
         const allRooms = RoomListSorter.mostRecentActivityFirst(
             MatrixClientPeg.get().getRooms(),
         );
         if (allRooms[roomIndex]) {
-            this._viewRoom({ room_id: allRooms[roomIndex].roomId });
+            dis.dispatch({
+                action: 'view_room',
+                room_id: allRooms[roomIndex].roomId,
+            });
         }
     },
 
@@ -658,7 +679,41 @@ module.exports = React.createClass({
         });
     },
 
+    _setMxId: function() {
+        const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
+        const close = Modal.createDialog(SetMxIdDialog, {
+            homeserverUrl: MatrixClientPeg.get().getHomeserverUrl(),
+            onFinished: (submitted, credentials) => {
+                if (!submitted) {
+                    dis.dispatch({
+                        action: 'cancel_after_sync_prepared',
+                    });
+                    return;
+                }
+                this.onRegistered(credentials);
+            },
+            onDifferentServerClicked: (ev) => {
+                dis.dispatch({action: 'start_registration'});
+                close();
+            },
+            onLoginClick: (ev) => {
+                dis.dispatch({action: 'start_login'});
+                close();
+            },
+        }).close;
+    },
+
     _createChat: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            dis.dispatch({
+                action: 'do_after_sync_prepared',
+                deferred_action: {
+                    action: 'view_create_chat',
+                },
+            });
+            dis.dispatch({action: 'view_set_mxid'});
+            return;
+        }
         const ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
             title: _t('Start a chat'),
@@ -668,6 +723,81 @@ module.exports = React.createClass({
         });
     },
 
+    _createRoom: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            dis.dispatch({
+                action: 'do_after_sync_prepared',
+                deferred_action: {
+                    action: 'view_create_room',
+                },
+            });
+            dis.dispatch({action: 'view_set_mxid'});
+            return;
+        }
+        const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        Modal.createDialog(TextInputDialog, {
+            title: _t('Create Room'),
+            description: _t('Room name (optional)'),
+            button: _t('Create Room'),
+            onFinished: (should_create, name) => {
+                if (should_create) {
+                    const createOpts = {};
+                    if (name) createOpts.name = name;
+                    createRoom({createOpts}).done();
+                }
+            },
+        });
+    },
+
+    _chatCreateOrReuse: function(userId) {
+        const ChatCreateOrReuseDialog = sdk.getComponent(
+            'views.dialogs.ChatCreateOrReuseDialog',
+        );
+        // Use a deferred action to reshow the dialog once the user has registered
+        if (MatrixClientPeg.get().isGuest()) {
+            // No point in making 2 DMs with welcome bot. This assumes view_set_mxid will
+            // result in a new DM with the welcome user.
+            if (userId !== this.props.config.welcomeUserId) {
+                dis.dispatch({
+                    action: 'do_after_sync_prepared',
+                    deferred_action: {
+                        action: 'view_start_chat_or_reuse',
+                        user_id: userId,
+                    },
+                });
+            }
+            dis.dispatch({
+                action: 'view_set_mxid',
+            });
+            return;
+        }
+
+        const close = Modal.createDialog(ChatCreateOrReuseDialog, {
+            userId: userId,
+            onFinished: (success) => {
+                if (!success) {
+                    // Dialog cancelled, default to home
+                    dis.dispatch({ action: 'view_home_page' });
+                }
+            },
+            onNewDMClick: () => {
+                dis.dispatch({
+                    action: 'start_chat',
+                    user_id: userId,
+                });
+                // Close the dialog, indicate success (calls onFinished(true))
+                close(true);
+            },
+            onExistingRoomSelected: (roomId) => {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: roomId,
+                });
+                close(true);
+            },
+        }).close;
+    },
+
     _invite: function(roomId) {
         const ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
@@ -701,7 +831,7 @@ module.exports = React.createClass({
 
                     d.then(() => {
                         modal.close();
-                        if (this.currentRoomId === roomId) {
+                        if (this.state.currentRoomId === roomId) {
                             dis.dispatch({action: 'view_next_room'});
                         }
                     }, (err) => {
@@ -796,12 +926,27 @@ module.exports = React.createClass({
             this._teamToken = teamToken;
             dis.dispatch({action: 'view_home_page'});
         } else if (this._is_registered) {
+            this._is_registered = false;
+            // reset the 'have completed first sync' flag,
+            // since we've just logged in and will be about to sync
+            this.firstSyncComplete = false;
+            this.firstSyncPromise = q.defer();
+
+            // Set the display name = user ID localpart
+            MatrixClientPeg.get().setDisplayName(
+                MatrixClientPeg.get().getUserIdLocalpart(),
+            );
+
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
-                createRoom({dmUserId: this.props.config.welcomeUserId});
+                createRoom({
+                    dmUserId: this.props.config.welcomeUserId,
+                    // Only view the welcome user if we're NOT looking at a room
+                    andView: !this.state.currentRoomId,
+                });
                 return;
             }
             // The user has just logged in after registering
-            dis.dispatch({action: 'view_room_directory'});
+            dis.dispatch({action: 'view_home_page'});
         } else {
             this._showScreenAfterLogin();
         }
@@ -823,12 +968,8 @@ module.exports = React.createClass({
                 action: 'view_room',
                 room_id: localStorage.getItem('mx_last_room_id'),
             });
-        } else if (this._teamToken) {
-            // Team token might be set if we're a guest.
-            // Guests do not call _onLoggedIn with a teamToken
-            dis.dispatch({action: 'view_home_page'});
         } else {
-            dis.dispatch({action: 'view_room_directory'});
+            dis.dispatch({action: 'view_home_page'});
         }
     },
 
@@ -842,7 +983,6 @@ module.exports = React.createClass({
             ready: false,
             collapse_lhs: false,
             collapse_rhs: false,
-            currentRoomAlias: null,
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });
@@ -880,6 +1020,12 @@ module.exports = React.createClass({
         });
 
         cli.on('sync', function(state, prevState) {
+            // LifecycleStore and others cannot directly subscribe to matrix client for
+            // events because flux only allows store state changes during flux dispatches.
+            // So dispatch directly from here. Ideally we'd use a SyncStateStore that
+            // would do this dispatch and expose the sync state itself (by listening to
+            // its own dispatch).
+            dis.dispatch({action: 'sync_state', prevState, state});
             self.updateStatusIndicator(state, prevState);
             if (state === "SYNCING" && prevState === "SYNCING") {
                 return;
@@ -957,6 +1103,11 @@ module.exports = React.createClass({
             dis.dispatch({
                 action: 'view_home_page',
             });
+        } else if (screen == 'start') {
+            this.showScreen('home');
+            dis.dispatch({
+                action: 'view_set_mxid',
+            });
         } else if (screen == 'directory') {
             dis.dispatch({
                 action: 'view_room_directory',
@@ -1000,6 +1151,12 @@ module.exports = React.createClass({
             }
         } else if (screen.indexOf('user/') == 0) {
             const userId = screen.substring(5);
+
+            if (params.action === 'chat') {
+                this._chatCreateOrReuse(userId);
+                return;
+            }
+
             this.setState({ viewUserId: userId });
             this._setPage(PageTypes.UserView);
             this.notifyNewScreen('user/' + userId);
@@ -1096,6 +1253,8 @@ module.exports = React.createClass({
     },
 
     onRegistered: function(credentials, teamToken) {
+        // XXX: These both should be in state or ideally store(s) because we risk not
+        //      rendering the most up-to-date view of state otherwise.
         // teamToken may not be truthy
         this._teamToken = teamToken;
         this._is_registered = true;
@@ -1139,7 +1298,15 @@ module.exports = React.createClass({
             PlatformPeg.get().setNotificationCount(notifCount);
         }
 
-        document.title = `Riot ${state === "ERROR" ? " [offline]" : ""}${notifCount > 0 ? ` [${notifCount}]` : ""}`;
+        let title = "Riot ";
+        if (state === "ERROR") {
+            title += `[${_t("Offline")}] `;
+        }
+        if (notifCount > 0) {
+            title += `[${notifCount}]`;
+        }
+
+        document.title = title;
     },
 
     onUserSettingsClose: function() {
@@ -1157,13 +1324,6 @@ module.exports = React.createClass({
         }
     },
 
-    onRoomIdResolved: function(roomId) {
-        // It's the RoomView's resposibility to look up room aliases, but we need the
-        // ID to pass into things like the Member List, so the Room View tells us when
-        // its done that resolution so we can display things that take a room ID.
-        this.setState({currentRoomId: roomId});
-    },
-
     _makeRegistrationUrl: function(params) {
         if (this.props.startingFragmentQueryParams.referrer) {
             params.referrer = this.props.startingFragmentQueryParams.referrer;
@@ -1205,9 +1365,10 @@ module.exports = React.createClass({
             const LoggedInView = sdk.getComponent('structures.LoggedInView');
             return (
                <LoggedInView ref="loggedInView" matrixClient={MatrixClientPeg.get()}
-                    onRoomIdResolved={this.onRoomIdResolved}
                     onRoomCreated={this.onRoomCreated}
                     onUserSettingsClose={this.onUserSettingsClose}
+                    onRegistered={this.onRegistered}
+                    currentRoomId={this.state.currentRoomId}
                     teamToken={this._teamToken}
                     {...this.props}
                     {...this.state}

src/components/structures/RoomStatusBar.js

@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t } from '../../languageHandler';
+import { _t, _tJsx } from '../../languageHandler';
 import sdk from '../../index';
-import dis from '../../dispatcher';
 import WhoIsTyping from '../../WhoIsTyping';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import MemberAvatar from '../views/avatars/MemberAvatar';
@@ -282,14 +281,13 @@ module.exports = React.createClass({
                         { this.props.unsentMessageError }
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                        <a className="mx_RoomStatusBar_resend_link"
+                    {_tJsx("<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.",
-                          onClick={ this.props.onResendAllClick }>
+                        [/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/],
-                            {_t('Resend all')}
+                        [
-                        </a> {_t('or')} <a
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={ this.props.onResendAllClick }>{sub}</a>,
-                          className="mx_RoomStatusBar_resend_link"
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={ this.props.onCancelAllClick }>{sub}</a>,
-                          onClick={ this.props.onCancelAllClick }>
+                        ]
-                            {_t('cancel all')}
+                    )}
-                        </a> {_t('now. You can also select individual messages to resend or cancel.')}
                     </div>
                 </div>
             );
@@ -298,8 +296,8 @@ module.exports = React.createClass({
         // unread count trumps who is typing since the unread count is only
         // set when you've scrolled up
         if (this.props.numUnreadMessages) {
-            var unreadMsgs = this.props.numUnreadMessages + " new message" +
+            // MUST use var name "count" for pluralization to kick in
-                (this.props.numUnreadMessages > 1 ? "s" : "");
+            var unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
 
             return (
                 <div className="mx_RoomStatusBar_unreadMessagesBar"

src/components/structures/RoomView.js

@@ -45,6 +45,8 @@ import KeyCode from '../../KeyCode';
 
 import UserProvider from '../../autocomplete/UserProvider';
 
+import RoomViewStore from '../../stores/RoomViewStore';
+
 var DEBUG = false;
 
 if (DEBUG) {
@@ -59,16 +61,9 @@ module.exports = React.createClass({
     propTypes: {
         ConferenceHandler: React.PropTypes.any,
 
-        // Either a room ID or room alias for the room to display.
+        // Called with the credentials of a registered user (if they were a ROU that
-        // If the room is being displayed as a result of the user clicking
+        // transitioned to PWLU)
-        // on a room alias, the alias should be supplied. Otherwise, a room
+        onRegistered: React.PropTypes.func,
-        // ID should be supplied.
-        roomAddress: React.PropTypes.string.isRequired,
-
-        // If a room alias is passed to roomAddress, a function can be
-        // provided here that will be called with the ID of the room
-        // once it has been resolved.
-        onRoomIdResolved: React.PropTypes.func,
 
         // An object representing a third party invite to join this room
         // Fields:
@@ -125,6 +120,7 @@ module.exports = React.createClass({
             room: null,
             roomId: null,
             roomLoading: true,
+            peekLoading: false,
 
             forwardingEvent: null,
             editingRoomSettings: false,
@@ -172,40 +168,28 @@ module.exports = React.createClass({
             onClickCompletes: true,
             onStateChange: (isCompleting) => {
                 this.forceUpdate();
-            }
+            },
         });
 
-        if (this.props.roomAddress[0] == '#') {
+        // Start listening for RoomViewStore updates
-            // we always look up the alias from the directory server:
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
-            // we want the room that the given alias is pointing to
+        this._onRoomViewStoreUpdate(true);
-            // right now. We may have joined that alias before but there's
+    },
-            // no guarantee the alias hasn't subsequently been remapped.
+
-            MatrixClientPeg.get().getRoomIdForAlias(this.props.roomAddress).done((result) => {
+    _onRoomViewStoreUpdate: function(initial) {
-                if (this.props.onRoomIdResolved) {
+        if (this.unmounted) {
-                    this.props.onRoomIdResolved(result.room_id);
+            return;
-                }
-                var room = MatrixClientPeg.get().getRoom(result.room_id);
-                this.setState({
-                    room: room,
-                    roomId: result.room_id,
-                    roomLoading: !room,
-                    unsentMessageError: this._getUnsentMessageError(room),
-                }, this._onHaveRoom);
-            }, (err) => {
-                this.setState({
-                    roomLoading: false,
-                    roomLoadError: err,
-                });
-            });
-        } else {
-            var room = MatrixClientPeg.get().getRoom(this.props.roomAddress);
-            this.setState({
-                roomId: this.props.roomAddress,
-                room: room,
-                roomLoading: !room,
-                unsentMessageError: this._getUnsentMessageError(room),
-            }, this._onHaveRoom);
         }
+        this.setState({
+            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));
+        });
     },
 
     _onHaveRoom: function() {
@@ -223,26 +207,29 @@ module.exports = React.createClass({
         // 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).
-        var user_is_in_room = null;
+        const room = MatrixClientPeg.get().getRoom(this.state.roomId);
-        if (this.state.room) {
+        let isUserJoined = null;
-            user_is_in_room = this.state.room.hasMembershipState(
+        if (room) {
-                MatrixClientPeg.get().credentials.userId, 'join'
+            isUserJoined = room.hasMembershipState(
+                MatrixClientPeg.get().credentials.userId, 'join',
             );
 
-            this._updateAutoComplete();
+            this._updateAutoComplete(room);
-            this.tabComplete.loadEntries(this.state.room);
+            this.tabComplete.loadEntries(room);
         }
-
+        if (!isUserJoined && !this.state.joining && this.state.roomId) {
-        if (!user_is_in_room && this.state.roomId) {
             if (this.props.autoJoin) {
                 this.onJoinButtonClicked();
             } else if (this.state.roomId) {
                 console.log("Attempting to peek into room %s", this.state.roomId);
 
+                this.setState({
+                    peekLoading: true,
+                });
                 MatrixClientPeg.get().peekInRoom(this.state.roomId).then((room) => {
                     this.setState({
                         room: room,
-                        roomLoading: false,
+                        peekLoading: false,
                     });
                     this._onRoomLoaded(room);
                 }, (err) => {
@@ -252,16 +239,19 @@ module.exports = React.createClass({
                     if (err.errcode == "M_GUEST_ACCESS_FORBIDDEN") {
                         // This is fine: the room just isn't peekable (we assume).
                         this.setState({
-                            roomLoading: false,
+                            peekLoading: false,
                         });
                     } else {
                         throw err;
                     }
                 }).done();
             }
-        } else if (user_is_in_room) {
+        } else if (isUserJoined) {
             MatrixClientPeg.get().stopPeeking();
-            this._onRoomLoaded(this.state.room);
+            this.setState({
+                unsentMessageError: this._getUnsentMessageError(room),
+            });
+            this._onRoomLoaded(room);
         }
     },
 
@@ -298,10 +288,6 @@ module.exports = React.createClass({
     },
 
     componentWillReceiveProps: function(newProps) {
-        if (newProps.roomAddress != this.props.roomAddress) {
-            throw new Error(_t("changing room on a RoomView is not supported"));
-        }
-
         if (newProps.eventId != this.props.eventId) {
             // when we change focussed event id, hide the search results.
             this.setState({searchResults: null});
@@ -362,6 +348,11 @@ module.exports = React.createClass({
 
         document.removeEventListener("keydown", this.onKeyDown);
 
+        // Remove RoomStore listener
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
+
         // cancel any pending calls to the rate_limited_funcs
         this._updateRoomMembers.cancelPendingCall();
 
@@ -527,7 +518,7 @@ module.exports = React.createClass({
         this._updatePreviewUrlVisibility(room);
     },
 
-    _warnAboutEncryption: function (room) {
+    _warnAboutEncryption: function(room) {
         if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
             return;
         }
@@ -608,20 +599,14 @@ module.exports = React.createClass({
     },
 
     onRoom: function(room) {
-        // This event is fired when the room is 'stored' by the JS SDK, which
+        if (!room || room.roomId !== this.state.roomId) {
-        // means it's now a fully-fledged room object ready to be used, so
+            return;
-        // set it in our state and start using it (ie. init the timeline)
-        // This will happen if we start off viewing a room we're not joined,
-        // then join it whilst RoomView is looking at that room.
-        if (!this.state.room && room.roomId == this._joiningRoomId) {
-            this._joiningRoomId = undefined;
-            this.setState({
-                room: room,
-                joining: false,
-            });
-
-            this._onRoomLoaded(room);
         }
+        this.setState({
+            room: room,
+        }, () => {
+            this._onRoomLoaded(room);
+        });
     },
 
     updateTint: function() {
@@ -687,7 +672,7 @@ module.exports = React.createClass({
 
         // refresh the tab complete list
         this.tabComplete.loadEntries(this.state.room);
-        this._updateAutoComplete();
+        this._updateAutoComplete(this.state.room);
 
         // if we are now a member of the room, where we were not before, that
         // means we have finished joining a room we were previously peeking
@@ -704,10 +689,6 @@ module.exports = React.createClass({
                 // compatability workaround, let's not bother.
                 Rooms.setDMRoom(this.state.room.roomId, me.events.member.getSender()).done();
             }
-
-            this.setState({
-                joining: false
-            });
         }
     }, 500),
 
@@ -716,7 +697,7 @@ module.exports = React.createClass({
         if (!unsentMessages.length) return "";
         for (const event of unsentMessages) {
             if (!event.error || event.error.name !== "UnknownDeviceError") {
-                return _t("Some of your messages have not been sent") + ".";
+                return _t("Some of your messages have not been sent.");
             }
         }
         return _t("Message not sent due to unknown devices being present");
@@ -782,41 +763,62 @@ module.exports = React.createClass({
     },
 
     onJoinButtonClicked: function(ev) {
-        var self = this;
+        const cli = MatrixClientPeg.get();
 
-        var cli = MatrixClientPeg.get();
+        // If the user is a ROU, allow them to transition to a PWLU
-        var display_name_promise = q();
+        if (cli && cli.isGuest()) {
-        // if this is the first room we're joining, check the user has a display name
+            // Join this room once the user has registered and logged in
-        // and if they don't, prompt them to set one.
+            const signUrl = this.props.thirdPartyInvite ?
-        // NB. This unfortunately does not re-use the ChangeDisplayName component because
+                this.props.thirdPartyInvite.inviteSignUrl : undefined;
-        // it doesn't behave quite as desired here (we want an input field here rather than
+            dis.dispatch({
-        // content-editable, and we want a default).
+                action: 'do_after_sync_prepared',
-        if (cli.getRooms().filter((r) => {
+                deferred_action: {
-            return r.hasMembershipState(cli.credentials.userId, "join");
+                    action: 'join_room',
-        })) {
+                    opts: { inviteSignUrl: signUrl },
-            display_name_promise = cli.getProfileInfo(cli.credentials.userId).then((result) => {
+                },
-                if (!result.displayname) {
-                    var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
-                    var dialog_defer = q.defer();
-                    Modal.createDialog(SetDisplayNameDialog, {
-                        currentDisplayName: result.displayname,
-                        onFinished: (submitted, newDisplayName) => {
-                            if (submitted) {
-                                cli.setDisplayName(newDisplayName).done(() => {
-                                    dialog_defer.resolve();
-                                });
-                            }
-                            else {
-                                dialog_defer.reject();
-                            }
-                        }
-                    });
-                    return dialog_defer.promise;
-                }
             });
+
+            // Don't peek whilst registering otherwise getPendingEventList complains
+            // Do this by indicating our intention to join
+            dis.dispatch({
+                action: 'will_join',
+            });
+
+            const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
+            const close = Modal.createDialog(SetMxIdDialog, {
+                homeserverUrl: cli.getHomeserverUrl(),
+                onFinished: (submitted, credentials) => {
+                    if (submitted) {
+                        this.props.onRegistered(credentials);
+                    } else {
+                        dis.dispatch({
+                            action: 'cancel_after_sync_prepared',
+                        });
+                        dis.dispatch({
+                            action: 'cancel_join',
+                        });
+                    }
+                },
+                onDifferentServerClicked: (ev) => {
+                    dis.dispatch({action: 'start_registration'});
+                    close();
+                },
+                onLoginClick: (ev) => {
+                    dis.dispatch({action: 'start_login'});
+                    close();
+                },
+            }).close;
+            return;
         }
 
-        display_name_promise.then(() => {
+        q().then(() => {
+            const signUrl = this.props.thirdPartyInvite ?
+                this.props.thirdPartyInvite.inviteSignUrl : undefined;
+            dis.dispatch({
+                action: 'join_room',
+                opts: { inviteSignUrl: signUrl },
+            });
+
             // if this is an invite and has the 'direct' hint set, mark it as a DM room now.
             if (this.state.room) {
                 const me = this.state.room.getMember(MatrixClientPeg.get().credentials.userId);
@@ -828,72 +830,7 @@ module.exports = React.createClass({
                     }
                 }
             }
-
             return q();
-        }).then(() => {
-            var sign_url = this.props.thirdPartyInvite ? this.props.thirdPartyInvite.inviteSignUrl : undefined;
-            return MatrixClientPeg.get().joinRoom(this.props.roomAddress,
-                                                  { inviteSignUrl: sign_url } );
-        }).then(function(resp) {
-            var roomId = resp.roomId;
-
-            // It is possible that there is no Room yet if state hasn't come down
-            // from /sync - joinRoom will resolve when the HTTP request to join succeeds,
-            // NOT when it comes down /sync. If there is no room, we'll keep the
-            // joining flag set until we see it.
-
-            // We'll need to initialise the timeline when joining, but due to
-            // the above, we can't do it here: we do it in onRoom instead,
-            // once we have a useable room object.
-            var room = MatrixClientPeg.get().getRoom(roomId);
-            if (!room) {
-                // wait for the room to turn up in onRoom.
-                self._joiningRoomId = roomId;
-            } else {
-                // we've got a valid room, but that might also just mean that
-                // it was peekable (so we had one before anyway).  If we are
-                // not yet a member of the room, we will need to wait for that
-                // to happen, in onRoomStateMember.
-                var me = MatrixClientPeg.get().credentials.userId;
-                self.setState({
-                    joining: !room.hasMembershipState(me, "join"),
-                    room: room
-                });
-            }
-        }).catch(function(error) {
-            self.setState({
-                joining: false,
-                joinError: error
-            });
-
-            if (!error) return;
-
-            // https://matrix.org/jira/browse/SYN-659
-            // Need specific error message if joining a room is refused because the user is a guest and guest access is not allowed
-            if (
-                error.errcode == 'M_GUEST_ACCESS_FORBIDDEN' ||
-                (
-                    error.errcode == 'M_FORBIDDEN' &&
-                    MatrixClientPeg.get().isGuest()
-                )
-            ) {
-                var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-                Modal.createDialog(NeedToRegisterDialog, {
-                    title: _t("Failed to join the room"),
-                    description: _t("This room is private or inaccessible to guests. You may be able to join if you register") + "."
-                });
-            } else {
-                var msg = error.message ? error.message : JSON.stringify(error);
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: _t("Failed to join room"),
-                    description: msg,
-                });
-            }
-        }).done();
-
-        this.setState({
-            joining: true
         });
     },
 
@@ -945,11 +882,7 @@ module.exports = React.createClass({
 
     uploadFile: function(file) {
         if (MatrixClientPeg.get().isGuest()) {
-            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            dis.dispatch({action: 'view_set_mxid'});
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: _t("Please Register"),
-                description: _t("Guest users can't upload files. Please register to upload") + "."
-            });
             return;
         }
 
@@ -1474,9 +1407,9 @@ module.exports = React.createClass({
         }
     },
 
-    _updateAutoComplete: function() {
+    _updateAutoComplete: function(room) {
         const myUserId = MatrixClientPeg.get().credentials.userId;
-        const members = this.state.room.getJoinedMembers().filter(function(member) {
+        const members = room.getJoinedMembers().filter(function(member) {
             if (member.userId !== myUserId) return true;
         });
         UserProvider.getInstance().setUserList(members);
@@ -1496,7 +1429,7 @@ module.exports = React.createClass({
         const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
 
         if (!this.state.room) {
-            if (this.state.roomLoading) {
+            if (this.state.roomLoading || this.state.peekLoading) {
                 return (
                     <div className="mx_RoomView">
                         <Loader />
@@ -1514,7 +1447,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.props.roomAddress[0] == '#' ? this.props.roomAddress : null;
+                var room_alias = this.state.room_alias;
                 return (
                     <div className="mx_RoomView">
                         <RoomHeader ref="header"

src/components/structures/TimelinePanel.js

@@ -921,8 +921,8 @@ var TimelinePanel = React.createClass({
                 };
             }
             var message = (error.errcode == 'M_FORBIDDEN')
-            	? _t("Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question") + "."
+            	? _t("Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.")
-                : _t("Tried to load a specific point in this room's timeline, but was unable to find it") + ".";
+                : _t("Tried to load a specific point in this room's timeline, but was unable to find it.");
             Modal.createDialog(ErrorDialog, {
                 title: _t("Failed to load timeline position"),
                 description: message,

src/components/structures/UploadBar.js

@@ -18,6 +18,7 @@ var React = require('react');
 var ContentMessages = require('../../ContentMessages');
 var dis = require('../../dispatcher');
 var filesize = require('filesize');
+import { _t } from '../../languageHandler';
 
 module.exports = React.createClass({displayName: 'UploadBar',
     propTypes: {
@@ -81,10 +82,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
             uploadedSize = uploadedSize.replace(/ .*/, '');
         }
 
-        var others;
+        // MUST use var name 'count' for pluralization to kick in
-        if (uploads.length > 1) {
+        var uploadText = _t("Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)});
-            others = ' and ' + (uploads.length - 1) + ' other' + (uploads.length > 2 ? 's' : '');
-        }
 
         return (
             <div className="mx_UploadBar">
@@ -98,7 +97,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
                 <div className="mx_UploadBar_uploadBytes">
                     { uploadedSize } / { totalSize }
                 </div>
-                <div className="mx_UploadBar_uploadFilename">Uploading {upload.fileName}{others}</div>
+                <div className="mx_UploadBar_uploadFilename">{uploadText}</div>
             </div>
         );
     }

src/components/structures/UserSettings.js

@@ -88,6 +88,10 @@ const SETTINGS_LABELS = [
         id: 'hideRedactions',
         label: 'Hide removed messages',
     },
+    {
+        id: 'disableMarkdown',
+        label: 'Disable markdown formatting',
+    },
 /*
     {
         id: 'useFixedWidthFont',
@@ -307,11 +311,7 @@ module.exports = React.createClass({
 
     onAvatarPickerClick: function(ev) {
         if (MatrixClientPeg.get().isGuest()) {
-            const NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            dis.dispatch({action: 'view_set_mxid'});
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: _t("Please Register"),
-                description: _t("Guests can't set avatars. Please register."),
-            });
             return;
         }
 
@@ -391,6 +391,7 @@ module.exports = React.createClass({
             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") + ".",
         });
+        dis.dispatch({action: 'password_changed'});
     },
 
     onUpgradeClicked: function() {
@@ -753,7 +754,7 @@ module.exports = React.createClass({
         const DevicesPanel = sdk.getComponent('settings.DevicesPanel');
         return (
             <div>
-                <h3>Devices</h3>
+                <h3>{_t("Devices")}</h3>
                 <DevicesPanel className="mx_UserSettings_section"/>
             </div>
         );
@@ -803,11 +804,7 @@ module.exports = React.createClass({
                     onChange={(e) => {
                         if (MatrixClientPeg.get().isGuest()) {
                             e.target.checked = false;
-                            const NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+                            dis.dispatch({action: 'view_set_mxid'});
-                            Modal.createDialog(NeedToRegisterDialog, {
-                                title: _t("Please Register"),
-                                description: _t("Guests can't use labs features. Please register."),
-                            });
                             return;
                         }
 
@@ -1098,7 +1095,7 @@ module.exports = React.createClass({
                             onValueChanged={ this._onAddEmailEditFinished } />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={this._addEmail} />
+                         <img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
                     </div>
                 </div>
             );

src/components/structures/login/Login.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 import React from 'react';
 import { _t, _tJsx } from '../../../languageHandler';
-import ReactDOM from 'react-dom';
 import sdk from '../../../index';
 import Login from '../../../Login';
 
@@ -130,7 +129,7 @@ module.exports = React.createClass({
     onPhoneNumberChanged: function(phoneNumber) {
         // Validate the phone number entered
         if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
-            this.setState({ errorText: 'The phone number entered looks invalid' });
+            this.setState({ errorText: _t('The phone number entered looks invalid') });
             return;
         }
 
@@ -214,8 +213,8 @@ module.exports = React.createClass({
             errCode = "HTTP " + err.httpStatus;
         }
 
-        let errorText = "Error: Problem communicating with the given homeserver " +
+        let errorText = _t("Error: Problem communicating with the given homeserver.") +
-                (errCode ? "(" + errCode + ")" : "");
+                (errCode ? " (" + errCode + ")" : "");
 
         if (err.cors === 'rejected') {
             if (window.location.protocol === 'https:' &&

src/components/structures/login/PostRegistration.js

@@ -50,7 +50,7 @@ module.exports = React.createClass({
             });
         }, function(error) {
             self.setState({
-                errorString: "Failed to fetch avatar URL",
+                errorString: _t("Failed to fetch avatar URL"),
                 busy: false
             });
         });

src/components/structures/login/Registration.js

@@ -21,11 +21,9 @@ import q from 'q';
 import React from 'react';
 
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import ServerConfig from '../../views/login/ServerConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
-import CaptchaForm from '../../views/login/CaptchaForm';
 import RtsClient from '../../../RtsClient';
 import { _t } from '../../../languageHandler';
 
@@ -99,7 +97,7 @@ module.exports = React.createClass({
             this.props.teamServerConfig.teamServerURL &&
             !this._rtsClient
         ) {
-            this._rtsClient = new RtsClient(this.props.teamServerConfig.teamServerURL);
+            this._rtsClient = this.props.rtsClient || new RtsClient(this.props.teamServerConfig.teamServerURL);
 
             this.setState({
                 teamServerBusy: true,
@@ -222,7 +220,6 @@ module.exports = React.createClass({
         }
 
         trackPromise.then((teamToken) => {
-            console.info('Team token promise',teamToken);
             this.props.onLoggedIn({
                 userId: response.user_id,
                 deviceId: response.device_id,

src/components/views/avatars/BaseAvatar.js

@@ -32,6 +32,7 @@ module.exports = React.createClass({
         urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
         width: React.PropTypes.number,
         height: React.PropTypes.number,
+        // XXX resizeMethod not actually used.
         resizeMethod: React.PropTypes.string,
         defaultToInitialLetter: React.PropTypes.bool // true to add default url
     },

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -16,37 +16,30 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import Unread from '../../../Unread';
 import classNames from 'classnames';
-import createRoom from '../../../createRoom';
 
 export default class ChatCreateOrReuseDialog extends React.Component {
 
     constructor(props) {
         super(props);
-        this.onNewDMClick = this.onNewDMClick.bind(this);
         this.onRoomTileClick = this.onRoomTileClick.bind(this);
+
+        this.state = {
+            tiles: [],
+            profile: {
+                displayName: null,
+                avatarUrl: null,
+            },
+            profileError: null,
+        };
     }
 
-    onNewDMClick() {
+    componentWillMount() {
-        createRoom({dmUserId: this.props.userId});
-        this.props.onFinished(true);
-    }
-
-    onRoomTileClick(roomId) {
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
-        });
-        this.props.onFinished(true);
-    }
-
-    render() {
         const client = MatrixClientPeg.get();
 
         const dmRoomMap = new DMRoomMap(client);
@@ -71,40 +64,123 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                         highlight={highlight}
                         isInvite={me.membership == "invite"}
                         onClick={this.onRoomTileClick}
-                    />
+                    />,
                 );
             }
         }
 
-        const labelClasses = classNames({
+        this.setState({
-            mx_MemberInfo_createRoom_label: true,
+            tiles: tiles,
-            mx_RoomTile_name: true,
         });
-        const startNewChat = <AccessibleButton
+
-            className="mx_MemberInfo_createRoom"
+        if (tiles.length === 0) {
-            onClick={this.onNewDMClick}
+            this.setState({
-        >
+                busyProfile: true,
-            <div className="mx_RoomTile_avatar">
+            });
-                <img src="img/create-big.svg" width="26" height="26" />
+            MatrixClientPeg.get().getProfileInfo(this.props.userId).done((resp) => {
-            </div>
+                const profile = {
-            <div className={labelClasses}><i>{_t("Start new chat")}</i></div>
+                    displayName: resp.displayname,
-        </AccessibleButton>;
+                    avatarUrl: null,
+                };
+                if (resp.avatar_url) {
+                    profile.avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(
+                        resp.avatar_url, 48, 48, "crop",
+                    );
+                }
+                this.setState({
+                    busyProfile: false,
+                    profile: profile,
+                });
+            }, (err) => {
+                console.error(
+                    'Unable to get profile for user ' + this.props.userId + ':',
+                    err,
+                );
+                this.setState({
+                    busyProfile: false,
+                    profileError: err,
+                });
+            });
+        }
+    }
+
+    onRoomTileClick(roomId) {
+        this.props.onExistingRoomSelected(roomId);
+    }
+
+    render() {
+        let title = '';
+        let content = null;
+        if (this.state.tiles.length > 0) {
+            // Show the existing rooms with a "+" to add a new dm
+            title = _t('Create a new chat or reuse an existing one');
+            const labelClasses = classNames({
+                mx_MemberInfo_createRoom_label: true,
+                mx_RoomTile_name: true,
+            });
+            const startNewChat = <AccessibleButton
+                className="mx_MemberInfo_createRoom"
+                onClick={this.props.onNewDMClick}
+            >
+                <div className="mx_RoomTile_avatar">
+                    <img src="img/create-big.svg" width="26" height="26" />
+                </div>
+                <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
+            </AccessibleButton>;
+            content = <div className="mx_Dialog_content">
+                { _t('You already have existing direct chats with this user:') }
+                <div className="mx_ChatCreateOrReuseDialog_tiles">
+                    { this.state.tiles }
+                    { startNewChat }
+                </div>
+            </div>;
+        } else {
+            // Show the avatar, name and a button to confirm that a new chat is requested
+            const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+            const Spinner = sdk.getComponent('elements.Spinner');
+            title = _t('Start chatting');
+
+            let profile = null;
+            if (this.state.busyProfile) {
+                profile = <Spinner />;
+            } else if (this.state.profileError) {
+                profile = <div className="error">
+                    Unable to load profile information for { this.props.userId }
+                </div>;
+            } else {
+                profile = <div className="mx_ChatCreateOrReuseDialog_profile">
+                    <BaseAvatar
+                        name={this.state.profile.displayName || this.props.userId}
+                        url={this.state.profile.avatarUrl}
+                        width={48} height={48}
+                    />
+                    <div className="mx_ChatCreateOrReuseDialog_profile_name">
+                        {this.state.profile.displayName || this.props.userId}
+                    </div>
+                </div>;
+            }
+            content = <div>
+                <div className="mx_Dialog_content">
+                    <p>
+                        { _t('Click on the button below to start chatting!') }
+                    </p>
+                    { profile }
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick}>
+                        { _t('Start Chatting') }
+                    </button>
+                </div>
+            </div>;
+        }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className='mx_ChatCreateOrReuseDialog'
-                onFinished={() => {
+                onFinished={ this.props.onFinished.bind(false) }
-                    this.props.onFinished(false)
+                title={title}
-                }}
-                title='Create a new chat or reuse an existing one'
             >
-                <div className="mx_Dialog_content">
+                { content }
-                    You already have existing direct chats with this user:
-                    <div className="mx_ChatCreateOrReuseDialog_tiles">
-                        {tiles}
-                        {startNewChat}
-                    </div>
-                </div>
             </BaseDialog>
         );
     }
@@ -112,5 +188,8 @@ export default class ChatCreateOrReuseDialog extends React.Component {
 
 ChatCreateOrReuseDialog.propTyps = {
     userId: React.PropTypes.string.isRequired,
+    // Called when clicking outside of the dialog
     onFinished: React.PropTypes.func.isRequired,
+    onNewDMClick: React.PropTypes.func.isRequired,
+    onExistingRoomSelected: React.PropTypes.func.isRequired,
 };

src/components/views/dialogs/ChatInviteDialog.js

@@ -15,15 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import { getAddressType, inviteMultipleToRoom } from '../../../Invite';
 import createRoom from '../../../createRoom';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
-import rate_limited_func from '../../../ratelimitedfunc';
-import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
 import q from 'q';
@@ -95,16 +92,25 @@ module.exports = React.createClass({
                     // A Direct Message room already exists for this user, so select a
                     // room from a list that is similar to the one in MemberInfo panel
                     const ChatCreateOrReuseDialog = sdk.getComponent(
-                        "views.dialogs.ChatCreateOrReuseDialog"
+                        "views.dialogs.ChatCreateOrReuseDialog",
                     );
                     Modal.createDialog(ChatCreateOrReuseDialog, {
                         userId: userId,
                         onFinished: (success) => {
-                            if (success) {
+                            this.props.onFinished(success);
-                                this.props.onFinished(true, inviteList[0]);
+                        },
-                            }
+                        onNewDMClick: () => {
-                            // else show this ChatInviteDialog again
+                            dis.dispatch({
-                        }
+                                action: 'start_chat',
+                                user_id: userId,
+                            });
+                        },
+                        onExistingRoomSelected: (roomId) => {
+                            dis.dispatch({
+                                action: 'view_room',
+                                user_id: roomId,
+                            });
+                        },
                     });
                 } else {
                     this._startChat(inviteList);
@@ -270,11 +276,7 @@ module.exports = React.createClass({
 
     _startChat: function(addrs) {
         if (MatrixClientPeg.get().isGuest()) {
-            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            dis.dispatch({action: 'view_set_mxid'});
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: _t("Please Register"),
-                description: _t("Guest users can't invite users. Please register."),
-            });
             return;
         }
 

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
-
 import React from 'react';
 
 import sdk from '../../../index';

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -1,89 +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.
-*/
-
-import React from 'react';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-
-import { _t } from '../../../languageHandler';
-
-/**
- * Prompt the user to set a display name.
- *
- * On success, `onFinished(true, newDisplayName)` is called.
- */
-export default React.createClass({
-    displayName: 'SetDisplayNameDialog',
-    propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
-        currentDisplayName: React.PropTypes.string,
-    },
-
-    getInitialState: function() {
-        if (this.props.currentDisplayName) {
-            return { value: this.props.currentDisplayName };
-        }
-
-        if (MatrixClientPeg.get().isGuest()) {
-            return { value : "Guest " + MatrixClientPeg.get().getUserIdLocalpart() };
-        }
-        else {
-            return { value : MatrixClientPeg.get().getUserIdLocalpart() };
-        }
-    },
-
-    componentDidMount: function() {
-        this.refs.input_value.select();
-    },
-
-    onValueChange: function(ev) {
-        this.setState({
-            value: ev.target.value
-        });
-    },
-
-    onFormSubmit: function(ev) {
-        ev.preventDefault();
-        this.props.onFinished(true, this.state.value);
-        return false;
-    },
-
-    render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return (
-            <BaseDialog className="mx_SetDisplayNameDialog"
-                onFinished={this.props.onFinished}
-                title={_t("Set a Display Name")}
-            >
-                <div className="mx_Dialog_content">
-                    {_t("Your display name is how you'll appear to others when you speak in rooms. " +
-                    "What would you like it to be?")}
-                </div>
-                <form onSubmit={this.onFormSubmit}>
-                    <div className="mx_Dialog_content">
-                        <input type="text" ref="input_value" value={this.state.value}
-                            autoFocus={true} onChange={this.onValueChange} size="30"
-                            className="mx_SetDisplayNameDialog_input"
-                        />
-                    </div>
-                    <div className="mx_Dialog_buttons">
-                        <input className="mx_Dialog_primary" type="submit" value="Set" />
-                    </div>
-                </form>
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/SetMxIdDialog.js

@@ -0,0 +1,294 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import q from 'q';
+import React from 'react';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import classnames from 'classnames';
+import KeyCode from '../../../KeyCode';
+import { _t, _tJsx } from '../../../languageHandler';
+
+// The amount of time to wait for further changes to the input username before
+// sending a request to the server
+const USERNAME_CHECK_DEBOUNCE_MS = 250;
+
+/**
+ * Prompt the user to set a display name.
+ *
+ * On success, `onFinished(true, newDisplayName)` is called.
+ */
+export default React.createClass({
+    displayName: 'SetMxIdDialog',
+    propTypes: {
+        onFinished: React.PropTypes.func.isRequired,
+        // Called when the user requests to register with a different homeserver
+        onDifferentServerClicked: React.PropTypes.func.isRequired,
+        // Called if the user wants to switch to login instead
+        onLoginClick: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            // The entered username
+            username: '',
+            // Indicate ongoing work on the username
+            usernameBusy: false,
+            // Indicate error with username
+            usernameError: '',
+            // Assume the homeserver supports username checking until "M_UNRECOGNIZED"
+            usernameCheckSupport: true,
+
+            // Whether the auth UI is currently being used
+            doingUIAuth: false,
+            // Indicate error with auth
+            authError: '',
+        };
+    },
+
+    componentDidMount: function() {
+        this.refs.input_value.select();
+
+        this._matrixClient = MatrixClientPeg.get();
+    },
+
+    onValueChange: function(ev) {
+        this.setState({
+            username: ev.target.value,
+            usernameBusy: true,
+            usernameError: '',
+        }, () => {
+            if (!this.state.username || !this.state.usernameCheckSupport) {
+                this.setState({
+                    usernameBusy: false,
+                });
+                return;
+            }
+
+            // Debounce the username check to limit number of requests sent
+            if (this._usernameCheckTimeout) {
+                clearTimeout(this._usernameCheckTimeout);
+            }
+            this._usernameCheckTimeout = setTimeout(() => {
+                this._doUsernameCheck().finally(() => {
+                    this.setState({
+                        usernameBusy: false,
+                    });
+                });
+            }, USERNAME_CHECK_DEBOUNCE_MS);
+        });
+    },
+
+    onKeyUp: function(ev) {
+        if (ev.keyCode === KeyCode.ENTER) {
+            this.onSubmit();
+        }
+    },
+
+    onSubmit: function(ev) {
+        this.setState({
+            doingUIAuth: true,
+        });
+    },
+
+    _doUsernameCheck: function() {
+        // Check if username is available
+        return this._matrixClient.isUsernameAvailable(this.state.username).then(
+            (isAvailable) => {
+                if (isAvailable) {
+                    this.setState({usernameError: ''});
+                }
+            },
+            (err) => {
+                // Indicate whether the homeserver supports username checking
+                const newState = {
+                    usernameCheckSupport: err.errcode !== "M_UNRECOGNIZED",
+                };
+                console.error('Error whilst checking username availability: ', err);
+                switch (err.errcode) {
+                    case "M_USER_IN_USE":
+                        newState.usernameError = _t('Username not available');
+                        break;
+                    case "M_INVALID_USERNAME":
+                        newState.usernameError = _t(
+                            'Username invalid: %(errMessage)',
+                            { errMessage: err.message},
+                        );
+                        break;
+                    case "M_UNRECOGNIZED":
+                        // This homeserver doesn't support username checking, assume it's
+                        // fine and rely on the error appearing in registration step.
+                        newState.usernameError = '';
+                        break;
+                    case undefined:
+                        newState.usernameError = _t('Something went wrong!');
+                        break;
+                    default:
+                        newState.usernameError = _t(
+                            'An error occurred: %(errMessage)',
+                            { errMessage: err.message },
+                        );
+                        break;
+                }
+                this.setState(newState);
+            },
+        );
+    },
+
+    _generatePassword: function() {
+        return Math.random().toString(36).slice(2);
+    },
+
+    _makeRegisterRequest: function(auth) {
+        // Not upgrading - changing mxids
+        const guestAccessToken = null;
+        if (!this._generatedPassword) {
+            this._generatedPassword = this._generatePassword();
+        }
+        return this._matrixClient.register(
+            this.state.username,
+            this._generatedPassword,
+            undefined, // session id: included in the auth dict already
+            auth,
+            {},
+            guestAccessToken,
+        );
+    },
+
+    _onUIAuthFinished: function(success, response) {
+        this.setState({
+            doingUIAuth: false,
+        });
+
+        if (!success) {
+            this.setState({ authError: response.message });
+            return;
+        }
+
+        // XXX Implement RTS /register here
+        const teamToken = null;
+
+        this.props.onFinished(true, {
+            userId: response.user_id,
+            deviceId: response.device_id,
+            homeserverUrl: this._matrixClient.getHomeserverUrl(),
+            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
+            accessToken: response.access_token,
+            password: this._generatedPassword,
+            teamToken: teamToken,
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
+        const Spinner = sdk.getComponent('elements.Spinner');
+
+        let auth;
+        if (this.state.doingUIAuth) {
+            auth = <InteractiveAuth
+                matrixClient={this._matrixClient}
+                makeRequest={this._makeRegisterRequest}
+                onAuthFinished={this._onUIAuthFinished}
+                inputs={{}}
+                poll={true}
+            />;
+        }
+        const inputClasses = classnames({
+            "mx_SetMxIdDialog_input": true,
+            "error": Boolean(this.state.usernameError),
+        });
+
+        let usernameIndicator = null;
+        let usernameBusyIndicator = null;
+        if (this.state.usernameBusy) {
+            usernameBusyIndicator = <Spinner w="24" h="24"/>;
+        } else {
+            const usernameAvailable = this.state.username &&
+                this.state.usernameCheckSupport && !this.state.usernameError;
+            const usernameIndicatorClasses = classnames({
+                "error": Boolean(this.state.usernameError),
+                "success": usernameAvailable,
+            });
+            usernameIndicator = <div className={usernameIndicatorClasses}>
+                { usernameAvailable ? _t('Username available') : this.state.usernameError }
+            </div>;
+        }
+
+        let authErrorIndicator = null;
+        if (this.state.authError) {
+            authErrorIndicator = <div className="error">
+                { this.state.authError }
+            </div>;
+        }
+        const canContinue = this.state.username &&
+            !this.state.usernameError &&
+            !this.state.usernameBusy;
+
+        return (
+            <BaseDialog className="mx_SetMxIdDialog"
+                onFinished={this.props.onFinished}
+                title="To get started, please pick a username!"
+            >
+                <div className="mx_Dialog_content">
+                    <div className="mx_SetMxIdDialog_input_group">
+                        <input type="text" ref="input_value" value={this.state.username}
+                            autoFocus={true}
+                            onChange={this.onValueChange}
+                            onKeyUp={this.onKeyUp}
+                            size="30"
+                            className={inputClasses}
+                        />
+                        { usernameBusyIndicator }
+                    </div>
+                    { usernameIndicator }
+                    <p>
+                        { _tJsx(
+                            'This will be your account name on the <span></span> ' +
+                            'homeserver, or you can pick a <a>different server</a>.',
+                            [
+                                /<span><\/span>/,
+                                /<a>(.*?)<\/a>/,
+                            ],
+                            [
+                                (sub) => <span>{this.props.homeserverUrl}</span>,
+                                (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{sub}</a>,
+                            ],
+                        )}
+                    </p>
+                    <p>
+                        { _tJsx(
+                            'If you already have a Matrix account you can <a>log in</a> instead.',
+                            /<a>(.*?)<\/a>/,
+                            [(sub) => <a href="#" onClick={this.props.onLoginClick}>{sub}</a>],
+                        )}
+                    </p>
+                    { auth }
+                    { authErrorIndicator }
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <input className="mx_Dialog_primary"
+                        type="submit"
+                        value={_t("Continue")}
+                        onClick={this.onSubmit}
+                        disabled={!canContinue}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import Resend from '../../../Resend';

src/components/views/elements/ActionButton.js

@@ -0,0 +1,84 @@
+/*
+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 PropTypes from 'prop-types';
+import AccessibleButton from './AccessibleButton';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+
+export default React.createClass({
+    displayName: 'RoleButton',
+
+    propTypes: {
+        size: PropTypes.string,
+        tooltip: PropTypes.bool,
+        action: PropTypes.string.isRequired,
+        mouseOverAction: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        iconPath: PropTypes.string.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            size: "25",
+            tooltip: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            showTooltip: false,
+        };
+    },
+
+    _onClick: function(ev) {
+        ev.stopPropagation();
+        dis.dispatch({action: this.props.action});
+    },
+
+    _onMouseEnter: function() {
+        if (this.props.tooltip) this.setState({showTooltip: true});
+        if (this.props.mouseOverAction) {
+            dis.dispatch({action: this.props.mouseOverAction});
+        }
+    },
+
+    _onMouseLeave: function() {
+        this.setState({showTooltip: false});
+    },
+
+    render: function() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let tooltip;
+        if (this.state.showTooltip) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
+        }
+
+        return (
+            <AccessibleButton className="mx_RoleButton"
+                onClick={this._onClick}
+                onMouseEnter={this._onMouseEnter}
+                onMouseLeave={this._onMouseLeave}
+            >
+                <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
+                {tooltip}
+            </AccessibleButton>
+        );
+    }
+});

src/components/views/elements/AddressTile.js

@@ -19,9 +19,7 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import sdk from "../../../index";
-import Invite from "../../../Invite";
 import MatrixClientPeg from "../../../MatrixClientPeg";
-import Avatar from '../../../Avatar';
 import { _t } from '../../../languageHandler';
 
 // React PropType definition for an object describing

src/components/views/elements/CreateRoomButton.js

@@ -0,0 +1,40 @@
+/*
+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 PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const CreateRoomButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_create_room"
+            mouseOverAction={props.callout ? "callout_create_room" : null}
+            label={ _t("Create new room") }
+            iconPath="img/icons-create-room.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+CreateRoomButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default CreateRoomButton;

src/components/views/elements/HomeButton.js

@@ -0,0 +1,39 @@
+/*
+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 PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const HomeButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_home_page"
+            label={ _t("Welcome page") }
+            iconPath="img/icons-home.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+HomeButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default HomeButton;

src/components/views/elements/LanguageDropdown.js

@@ -19,7 +19,6 @@ import React from 'react';
 
 import sdk from '../../../index';
 import UserSettingsStore from '../../../UserSettingsStore';
-import { _t } from '../../../languageHandler';
 import * as languageHandler from '../../../languageHandler';
 
 function languageMatchesSearchQuery(query, language) {

src/components/views/elements/RoomDirectoryButton.js

@@ -0,0 +1,40 @@
+/*
+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 PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const RoomDirectoryButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_room_directory"
+            mouseOverAction={props.callout ? "callout_room_directory" : null}
+            label={ _t("Room directory") }
+            iconPath="img/icons-directory.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+RoomDirectoryButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default RoomDirectoryButton;

src/components/views/elements/SettingsButton.js

@@ -0,0 +1,39 @@
+/*
+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 PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const SettingsButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_user_settings"
+            label={ _t("Settings") }
+            iconPath="img/icons-settings.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+SettingsButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default SettingsButton;

src/components/views/elements/StartChatButton.js

@@ -0,0 +1,40 @@
+/*
+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 PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const StartChatButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_create_chat"
+            mouseOverAction={props.callout ? "callout_start_chat" : null}
+            label={ _t("Start chat") }
+            iconPath="img/icons-people.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+StartChatButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default StartChatButton;

src/components/views/login/LoginFooter.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 
+import { _t } from '../../../languageHandler';
 import React from 'react';
 
 module.exports = React.createClass({
@@ -27,5 +28,5 @@ module.exports = React.createClass({
                 <a href="https://matrix.org">{_t("powered by Matrix")}</a>
             </div>
         );
-    }
+    },
 });

src/components/views/login/PasswordLogin.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';

src/components/views/login/RegistrationForm.js

@@ -110,18 +110,17 @@ module.exports = React.createClass({
                     button: _t("Continue"),
                     onFinished: function(confirmed) {
                         if (confirmed) {
-                            self._doSubmit();
+                            self._doSubmit(ev);
                         }
                     },
                 });
-            }
+            } else {
-            else {
+                self._doSubmit(ev);
-                self._doSubmit();
             }
         }
     },
 
-    _doSubmit: function() {
+    _doSubmit: function(ev) {
         let email = this.refs.email.value.trim();
         var promise = this.props.onRegisterClick({
             username: this.refs.username.value.trim() || this.props.guestUsername,

src/components/views/messages/MAudioBody.js

@@ -20,7 +20,6 @@ import React from 'react';
 import MFileBody from './MFileBody';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
 

src/components/views/messages/MFileBody.js

@@ -24,7 +24,6 @@ import { _t } from '../../../languageHandler';
 import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
 import request from 'browser-request';
-import q from 'q';
 import Modal from '../../../Modal';
 
 

src/components/views/messages/MVideoBody.js

@@ -19,8 +19,6 @@ limitations under the License.
 import React from 'react';
 import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import Model from '../../../Modal';
-import sdk from '../../../index';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
 import q from 'q';
 import UserSettingsStore from '../../../UserSettingsStore';

src/components/views/room_settings/ColorSettings.js

@@ -21,6 +21,8 @@ var Tinter = require('../../../Tinter');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 
+import dis from '../../../dispatcher';
+
 var ROOM_COLORS = [
     // magic room default values courtesy of Ribot
     ["#76cfa6", "#eaf5f0"],
@@ -86,11 +88,7 @@ module.exports = React.createClass({
                 }
             ).catch(function(err) {
                 if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
-                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+                    dis.dispatch({action: 'view_set_mxid'});
-                    Modal.createDialog(NeedToRegisterDialog, {
-                        title: "Please Register",
-                        description: "Saving room color settings is only available to registered users"
-                    });
                 }
             });
         }

src/components/views/rooms/Autocomplete.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import isEqual from 'lodash/isEqual';
 import sdk from '../../../index';
-import type {Completion, SelectionRange} from '../../../autocomplete/Autocompleter';
+import type {Completion} from '../../../autocomplete/Autocompleter';
 import Q from 'q';
 
 import {getCompletions} from '../../../autocomplete/Autocompleter';

src/components/views/rooms/MemberInfo.js

@@ -375,11 +375,7 @@ module.exports = WithMatrixClient(React.createClass({
                 console.log("Mod toggle success");
             }, function(err) {
                 if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
-                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+                    dis.dispatch({action: 'view_set_mxid'});
-                    Modal.createDialog(NeedToRegisterDialog, {
-                        title: _t("Please Register"),
-                        description: _t("This action cannot be performed by a guest user. Please register to be able to do this") + ".",
-                    });
                 } else {
                     console.error("Toggle moderator error:" + err);
                     Modal.createDialog(ErrorDialog, {

src/components/views/rooms/MessageComposer.js

@@ -91,11 +91,7 @@ export default class MessageComposer extends React.Component {
 
     onUploadClick(ev) {
         if (MatrixClientPeg.get().isGuest()) {
-            let NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            dis.dispatch({action: 'view_set_mxid'});
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: _t('Please Register'),
-                description: _t('Guest users can\'t upload files. Please register to upload') + '.',
-            });
             return;
         }
 

src/components/views/rooms/MessageComposerInput.js

@@ -28,12 +28,12 @@ import Q from 'q';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
 import SlashCommands from '../../../SlashCommands';
+import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import dis from '../../../dispatcher';
-import KeyCode from '../../../KeyCode';
 import UserSettingsStore from '../../../UserSettingsStore';
 
 import * as RichText from '../../../RichText';
@@ -45,8 +45,6 @@ import {onSendMessageFailed} from './MessageComposerInputOld';
 
 const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000;
 
-const KEY_M = 77;
-
 const ZWS_CODE = 8203;
 const ZWS = String.fromCharCode(ZWS_CODE); // zero width space
 function stateToMarkdown(state) {
@@ -62,7 +60,7 @@ function stateToMarkdown(state) {
 export default class MessageComposerInput extends React.Component {
     static getKeyBinding(e: SyntheticKeyboardEvent): string {
         // C-m => Toggles between rich text and markdown modes
-        if (e.keyCode === KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
+        if (e.keyCode === KeyCode.KEY_M && KeyBindingUtil.isCtrlKeyCommand(e)) {
             return 'toggle-mode';
         }
 

src/components/views/rooms/MessageComposerInputOld.js

@@ -29,7 +29,6 @@ var Markdown = require("../../../Markdown");
 
 var TYPING_USER_TIMEOUT = 10000;
 var TYPING_SERVER_TIMEOUT = 30000;
-var MARKDOWN_ENABLED = true;
 
 export function onSendMessageFailed(err, room) {
     // XXX: temporary logging to try to diagnose
@@ -77,7 +76,8 @@ export default React.createClass({
 
     componentWillMount: function() {
         this.oldScrollHeight = 0;
-        this.markdownEnabled = MARKDOWN_ENABLED;
+        this.markdownEnabled = !UserSettingsStore.getSyncedSetting('disableMarkdown', false);
+
         var self = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent

src/components/views/rooms/PresenceLabel.js

@@ -18,8 +18,6 @@ limitations under the License.
 
 import React from 'react';
 
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 

src/components/views/rooms/RoomList.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -30,7 +31,14 @@ var Rooms = require('../../../Rooms');
 import DMRoomMap from '../../../utils/DMRoomMap';
 var Receipt = require('../../../utils/Receipt');
 
-var HIDE_CONFERENCE_CHANS = true;
+const HIDE_CONFERENCE_CHANS = true;
+
+const VERBS = {
+    'm.favourite': 'favourite',
+    'im.vector.fake.direct': 'tag direct chat',
+    'im.vector.fake.recent': 'restore',
+    'm.lowpriority': 'demote',
+};
 
 module.exports = React.createClass({
     displayName: 'RoomList',
@@ -45,6 +53,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             isLoadingLeftRooms: false,
+            totalRoomCount: null,
             lists: {},
             incomingCall: null,
         };
@@ -64,8 +73,14 @@ module.exports = React.createClass({
         cli.on("RoomMember.name", this.onRoomMemberName);
         cli.on("accountData", this.onAccountData);
 
-        var s = this.getRoomLists();
+        this.refreshRoomList();
-        this.setState(s);
+
+        // order of the sublists
+        //this.listOrder = [];
+
+        // loop count to stop a stack overflow if the user keeps waggling the
+        // mouse for >30s in a row, or if running under mocha
+        this._delayedRefreshRoomListLoopCount = 0
     },
 
     componentDidMount: function() {
@@ -203,31 +218,33 @@ module.exports = React.createClass({
     }, 500),
 
     refreshRoomList: function() {
-        // console.log("DEBUG: Refresh room list delta=%s ms",
+        // TODO: ideally we'd calculate this once at start, and then maintain
-        //     (!this._lastRefreshRoomListTs ? "-" : (Date.now() - this._lastRefreshRoomListTs))
+        // any changes to it incrementally, updating the appropriate sublists
-        // );
+        // as needed.
-
+        // Alternatively we'd do something magical with Immutable.js or similar.
-        // TODO: rather than bluntly regenerating and re-sorting everything
+        const lists = this.getRoomLists();
-        // every time we see any kind of room change from the JS SDK
+        let totalRooms = 0;
-        // we could do incremental updates on our copy of the state
+        for (const l of Object.values(lists)) {
-        // based on the room which has actually changed.  This would stop
+            totalRooms += l.length;
-        // us re-rendering all the sublists every time anything changes anywhere
+        }
-        // in the state of the client.
+        this.setState({
-        this.setState(this.getRoomLists());
+            lists: this.getRoomLists(),
+            totalRoomCount: totalRooms,
+        });
 
         // this._lastRefreshRoomListTs = Date.now();
     },
 
     getRoomLists: function() {
         var self = this;
-        var s = { lists: {} };
+        const lists = {};
 
-        s.lists["im.vector.fake.invite"] = [];
+        lists["im.vector.fake.invite"] = [];
-        s.lists["m.favourite"] = [];
+        lists["m.favourite"] = [];
-        s.lists["im.vector.fake.recent"] = [];
+        lists["im.vector.fake.recent"] = [];
-        s.lists["im.vector.fake.direct"] = [];
+        lists["im.vector.fake.direct"] = [];
-        s.lists["m.lowpriority"] = [];
+        lists["m.lowpriority"] = [];
-        s.lists["im.vector.fake.archived"] = [];
+        lists["im.vector.fake.archived"] = [];
 
         const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
 
@@ -241,7 +258,7 @@ module.exports = React.createClass({
             //             ", prevMembership = " + me.events.member.getPrevContent().membership);
 
             if (me.membership == "invite") {
-                s.lists["im.vector.fake.invite"].push(room);
+                lists["im.vector.fake.invite"].push(room);
             }
             else if (HIDE_CONFERENCE_CHANS && Rooms.isConfCallRoom(room, me, self.props.ConferenceHandler)) {
                 // skip past this room & don't put it in any lists
@@ -255,66 +272,44 @@ module.exports = React.createClass({
                 if (tagNames.length) {
                     for (var i = 0; i < tagNames.length; i++) {
                         var tagName = tagNames[i];
-                        s.lists[tagName] = s.lists[tagName] || [];
+                        lists[tagName] = lists[tagName] || [];
-                        s.lists[tagNames[i]].push(room);
+                        lists[tagName].push(room);
                     }
                 }
                 else if (dmRoomMap.getUserIdForRoomId(room.roomId)) {
                     // "Direct Message" rooms (that we're still in and that aren't otherwise tagged)
-                    s.lists["im.vector.fake.direct"].push(room);
+                    lists["im.vector.fake.direct"].push(room);
                 }
                 else {
-                    s.lists["im.vector.fake.recent"].push(room);
+                    lists["im.vector.fake.recent"].push(room);
                 }
             }
             else if (me.membership === "leave") {
-                s.lists["im.vector.fake.archived"].push(room);
+                lists["im.vector.fake.archived"].push(room);
             }
             else {
                 console.error("unrecognised membership: " + me.membership + " - this should never happen");
             }
         });
 
-        if (s.lists["im.vector.fake.direct"].length == 0 &&
-            MatrixClientPeg.get().getAccountData('m.direct') === undefined &&
-            !MatrixClientPeg.get().isGuest())
-        {
-            // scan through the 'recents' list for any rooms which look like DM rooms
-            // and make them DM rooms
-            const oldRecents = s.lists["im.vector.fake.recent"];
-            s.lists["im.vector.fake.recent"] = [];
-
-            for (const room of oldRecents) {
-                const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-
-                if (me && Rooms.looksLikeDirectMessageRoom(room, me)) {
-                    s.lists["im.vector.fake.direct"].push(room);
-                } else {
-                    s.lists["im.vector.fake.recent"].push(room);
-                }
-            }
-
-            // save these new guessed DM rooms into the account data
-            const newMDirectEvent = {};
-            for (const room of s.lists["im.vector.fake.direct"]) {
-                const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-                const otherPerson = Rooms.getOnlyOtherMember(room, me);
-                if (!otherPerson) continue;
-
-                const roomList = newMDirectEvent[otherPerson.userId] || [];
-                roomList.push(room.roomId);
-                newMDirectEvent[otherPerson.userId] = roomList;
-            }
-
-            // if this fails, fine, we'll just do the same thing next time we get the room lists
-            MatrixClientPeg.get().setAccountData('m.direct', newMDirectEvent).done();
-        }
-
-        //console.log("calculated new roomLists; im.vector.fake.recent = " + s.lists["im.vector.fake.recent"]);
-
         // we actually apply the sorting to this when receiving the prop in RoomSubLists.
 
-        return s;
+        // we'll need this when we get to iterating through lists programatically - e.g. ctrl-shift-up/down
+/*
+        this.listOrder = [
+            "im.vector.fake.invite",
+            "m.favourite",
+            "im.vector.fake.recent",
+            "im.vector.fake.direct",
+            Object.keys(otherTagNames).filter(tagName=>{
+                return (!tagName.match(/^m\.(favourite|lowpriority)$/));
+            }).sort(),
+            "m.lowpriority",
+            "im.vector.fake.archived"
+        ];
+*/
+
+        return lists;
     },
 
     _getScrollNode: function() {
@@ -468,6 +463,62 @@ module.exports = React.createClass({
         this.refs.gemscroll.forceUpdate();
     },
 
+    _getEmptyContent: function(section) {
+        const RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
+
+        if (this.props.collapsed) {
+            return <RoomDropTarget label="" />;
+        }
+
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+
+        const TintableSvg = sdk.getComponent('elements.TintableSvg');
+        switch (section) {
+            case 'im.vector.fake.direct':
+                return <div className="mx_RoomList_emptySubListTip">
+                    Press
+                    <StartChatButton size="16" callout={true}/>
+                    to start a chat with someone
+                </div>;
+            case 'im.vector.fake.recent':
+                return <div className="mx_RoomList_emptySubListTip">
+                    You're not in any rooms yet! Press
+                    <CreateRoomButton size="16" callout={true}/>
+                    to make a room or
+                    <RoomDirectoryButton size="16" callout={true}/>
+                    to browse the directory
+                </div>;
+        }
+
+        // We don't want to display drop targets if there are no room tiles to drag'n'drop
+        if (this.state.totalRoomCount === 0) {
+            return null;
+        }
+
+        const labelText = 'Drop here to ' + (VERBS[section] || 'tag ' + section);
+
+        return <RoomDropTarget label={labelText} />;
+    },
+
+    _getHeaderItems: function(section) {
+        const StartChatButton = sdk.getComponent('elements.StartChatButton');
+        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
+        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
+        switch (section) {
+            case 'im.vector.fake.direct':
+                return <span className="mx_RoomList_headerButtons">
+                    <StartChatButton size="16" />
+                </span>;
+            case 'im.vector.fake.recent':
+                return <span className="mx_RoomList_headerButtons">
+                    <RoomDirectoryButton size="16" />
+                    <CreateRoomButton size="16" />
+                </span>;
+        }
+    },
+
     render: function() {
         var RoomSubList = sdk.getComponent('structures.RoomSubList');
         var self = this;
@@ -489,7 +540,7 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['m.favourite'] }
                              label={ _t('Favourites') }
                              tagName="m.favourite"
-                             verb={ _t('to favourite') }
+                             emptyContent={this._getEmptyContent('m.favourite')}
                              editable={ true }
                              order="manual"
                              selectedRoom={ self.props.selectedRoom }
@@ -502,7 +553,8 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['im.vector.fake.direct'] }
                              label={ _t('People') }
                              tagName="im.vector.fake.direct"
-                             verb={ _t('to tag direct chat') }
+                             emptyContent={this._getEmptyContent('im.vector.fake.direct')}
+                             headerItems={this._getHeaderItems('im.vector.fake.direct')}
                              editable={ true }
                              order="recent"
                              selectedRoom={ self.props.selectedRoom }
@@ -516,7 +568,8 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
                              label={ _t('Rooms') }
                              editable={ true }
-                             verb={ _t('to restore') }
+                             emptyContent={this._getEmptyContent('im.vector.fake.recent')}
+                             headerItems={this._getHeaderItems('im.vector.fake.recent')}
                              order="recent"
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
@@ -531,7 +584,7 @@ module.exports = React.createClass({
                              key={ tagName }
                              label={ tagName }
                              tagName={ tagName }
-                             verb={ _t('to tag as %(tagName)s', {tagName: tagName}) }
+                             emptyContent={this._getEmptyContent(tagName)}
                              editable={ true }
                              order="manual"
                              selectedRoom={ self.props.selectedRoom }
@@ -547,7 +600,7 @@ module.exports = React.createClass({
                 <RoomSubList list={ self.state.lists['m.lowpriority'] }
                              label={ _t('Low priority') }
                              tagName="m.lowpriority"
-                             verb={ _t('to demote') }
+                             emptyContent={this._getEmptyContent('m.lowpriority')}
                              editable={ true }
                              order="recent"
                              selectedRoom={ self.props.selectedRoom }

src/components/views/settings/ChangePassword.js

@@ -23,6 +23,8 @@ var sdk = require("../../../index");
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 
+import sessionStore from '../../../stores/SessionStore';
+
 module.exports = React.createClass({
     displayName: 'ChangePassword',
     propTypes: {
@@ -32,7 +34,10 @@ module.exports = React.createClass({
         rowClassName: React.PropTypes.string,
         rowLabelClassName: React.PropTypes.string,
         rowInputClassName: React.PropTypes.string,
-        buttonClassName: React.PropTypes.string
+        buttonClassName: React.PropTypes.string,
+        confirm: React.PropTypes.bool,
+        // Whether to autoFocus the new password input
+        autoFocusNewPasswordInput: React.PropTypes.bool,
     },
 
     Phases: {
@@ -55,20 +60,48 @@ module.exports = React.createClass({
                         error: _t("Passwords can't be empty")
                     };
                 }
-            }
+            },
+            confirm: true,
         };
     },
 
     getInitialState: function() {
         return {
-            phase: this.Phases.Edit
+            phase: this.Phases.Edit,
+            cachedPassword: null,
         };
     },
 
-    changePassword: function(old_password, new_password) {
+    componentWillMount: function() {
-        var cli = MatrixClientPeg.get();
+        this._sessionStore = sessionStore;
+        this._sessionStoreToken = this._sessionStore.addListener(
+            this._setStateFromSessionStore,
+        );
 
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        this._setStateFromSessionStore();
+    },
+
+    componentWillUnmount: function() {
+        if (this._sessionStoreToken) {
+            this._sessionStoreToken.remove();
+        }
+    },
+
+    _setStateFromSessionStore: function() {
+        this.setState({
+            cachedPassword: this._sessionStore.getCachedPassword(),
+        });
+    },
+
+    changePassword: function(oldPassword, newPassword) {
+        const cli = MatrixClientPeg.get();
+
+        if (!this.props.confirm) {
+            this._changePassword(cli, oldPassword, newPassword);
+            return;
+        }
+
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
             title: _t("Warning!"),
             description:
@@ -89,31 +122,34 @@ module.exports = React.createClass({
             ],
             onFinished: (confirmed) => {
                 if (confirmed) {
-                    var authDict = {
+                    this._changePassword(cli, oldPassword, newPassword);
-                        type: 'm.login.password',
-                        user: cli.credentials.userId,
-                        password: old_password
-                    };
-
-                    this.setState({
-                        phase: this.Phases.Uploading
-                    });
-
-                    var self = this;
-                    cli.setPassword(authDict, new_password).then(function() {
-                        self.props.onFinished();
-                    }, function(err) {
-                        self.props.onError(err);
-                    }).finally(function() {
-                        self.setState({
-                            phase: self.Phases.Edit
-                        });
-                    }).done();
                 }
             },
         });
     },
 
+    _changePassword: function(cli, oldPassword, newPassword) {
+        const authDict = {
+            type: 'm.login.password',
+            user: cli.credentials.userId,
+            password: oldPassword,
+        };
+
+        this.setState({
+            phase: this.Phases.Uploading,
+        });
+
+        cli.setPassword(authDict, newPassword).then(() => {
+            this.props.onFinished();
+        }, (err) => {
+            this.props.onError(err);
+        }).finally(() => {
+            this.setState({
+                phase: this.Phases.Edit,
+            });
+        }).done();
+    },
+
     _onExportE2eKeysClicked: function() {
         Modal.createDialogAsync(
             (cb) => {
@@ -124,47 +160,53 @@ module.exports = React.createClass({
                 matrixClient: MatrixClientPeg.get(),
             }
         );
-    },    
+    },
 
     onClickChange: function() {
-        var old_password = this.refs.old_input.value;
+        const oldPassword = this.state.cachedPassword || this.refs.old_input.value;
-        var new_password = this.refs.new_input.value;
+        const newPassword = this.refs.new_input.value;
-        var confirm_password = this.refs.confirm_input.value;
+        const confirmPassword = this.refs.confirm_input.value;
-        var err = this.props.onCheckPassword(
+        const err = this.props.onCheckPassword(
-            old_password, new_password, confirm_password
+            oldPassword, newPassword, confirmPassword,
         );
         if (err) {
             this.props.onError(err);
-        }
+        } else {
-        else {
+            this.changePassword(oldPassword, newPassword);
-            this.changePassword(old_password, new_password);
         }
     },
 
     render: function() {
-        var rowClassName = this.props.rowClassName;
+        const rowClassName = this.props.rowClassName;
-        var rowLabelClassName = this.props.rowLabelClassName;
+        const rowLabelClassName = this.props.rowLabelClassName;
-        var rowInputClassName = this.props.rowInputClassName;
+        const rowInputClassName = this.props.rowInputClassName;
-        var buttonClassName = this.props.buttonClassName;
+        const buttonClassName = this.props.buttonClassName;
+
+        let currentPassword = null;
+        if (!this.state.cachedPassword) {
+            currentPassword = <div className={rowClassName}>
+                <div className={rowLabelClassName}>
+                    <label htmlFor="passwordold">Current password</label>
+                </div>
+                <div className={rowInputClassName}>
+                    <input id="passwordold" type="password" ref="old_input" />
+                </div>
+            </div>;
+        }
 
         switch (this.state.phase) {
             case this.Phases.Edit:
+                const passwordLabel = this.state.cachedPassword ?
+                    _t('Password') : _t('New Password');
                 return (
                     <div className={this.props.className}>
+                        { currentPassword }
                         <div className={rowClassName}>
                             <div className={rowLabelClassName}>
-                                <label htmlFor="passwordold">{ _t('Current password') }</label>
+                                <label htmlFor="password1">{ passwordLabel }</label>
                             </div>
                             <div className={rowInputClassName}>
-                                <input id="passwordold" type="password" ref="old_input" />
+                                <input id="password1" type="password" ref="new_input" autoFocus={this.props.autoFocusNewPasswordInput} />
-                            </div>
-                        </div>
-                        <div className={rowClassName}>
-                            <div className={rowLabelClassName}>
-                                <label htmlFor="password1">{ _t('New password') }</label>
-                            </div>
-                            <div className={rowInputClassName}>
-                                <input id="password1" type="password" ref="new_input" />
                             </div>
                         </div>
                         <div className={rowClassName}>
@@ -176,7 +218,8 @@ module.exports = React.createClass({
                             </div>
                         </div>
                         <AccessibleButton className={buttonClassName}
-                                onClick={this.onClickChange}>
+                                onClick={this.onClickChange}
+                                element="button">
                             { _t('Change Password') }
                         </AccessibleButton>
                     </div>

src/createRoom.js

@@ -37,17 +37,11 @@ function createRoom(opts) {
     opts = opts || {};
 
     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-    const NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
     const Loader = sdk.getComponent("elements.Spinner");
 
     const client = MatrixClientPeg.get();
     if (client.isGuest()) {
-        setTimeout(()=>{
+        dis.dispatch({action: 'view_set_mxid'});
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: _t('Please Register'),
-                description: _t('Guest users can\'t create new rooms. Please register to create room and start a chat.')
-            });
-        }, 0);
         return q(null);
     }
 
@@ -64,6 +58,11 @@ function createRoom(opts) {
         createOpts.is_direct = true;
     }
 
+    // By default, view the room after creating it
+    if (opts.andView === undefined) {
+        opts.andView = true;
+    }
+
     // Allow guests by default since the room is private and they'd
     // need an invite. This means clicking on a 3pid invite email can
     // actually drop you right in to a chat.
@@ -97,10 +96,12 @@ function createRoom(opts) {
         // room has been created, so we race here with the client knowing that
         // the room exists, causing things like
         // https://github.com/vector-im/vector-web/issues/1813
-        dis.dispatch({
+        if (opts.andView) {
-            action: 'view_room',
+            dis.dispatch({
-            room_id: roomId
+                action: 'view_room',
-        });
+                room_id: roomId,
+            });
+        }
         return roomId;
     }, function(err) {
         console.error("Failed to create room " + roomId + " " + err);

src/i18n/strings/de_DE.json

@@ -46,8 +46,8 @@
     "Return to app": "Zurück zur Anwendung",
     "Sign in": "Anmelden",
     "Create a new account": "Erstelle einen neuen Benutzer",
-    "Send an encrypted message": "Eine verschlüsselte Nachricht senden",
+    "Send an encrypted message": "Verschlüsselte Nachricht senden",
-    "Send a message (unencrypted)": "Sende eine Nachricht (unverschlüsselt)",
+    "Send a message (unencrypted)": "Nachricht senden (unverschlüsselt)",
     "Warning!": "Warnung!",
     "Direct Chat": "Privater Chat",
     "Error": "Fehler",
@@ -191,7 +191,7 @@
     "Return to login screen": "Zur Anmeldemaske zurückkehren",
     "Room Colour": "Raumfarbe",
     "Room name (optional)": "Raumname (optional)",
-    "Scroll to unread messages": "Scrolle zu ungelesenen Nachrichten",
+    "Scroll to unread messages": "Zu den ungelesenen Nachrichten scrollen",
     "Send Invites": "Einladungen senden",
     "Send Reset Email": "E-Mail für das Zurücksetzen senden",
     "sent an image": "hat ein Bild gesendet",
@@ -342,7 +342,7 @@
     "An error occured: %(error_string)s": "Ein Fehler trat auf: %(error_string)s",
     "Topic": "Thema",
     "Make this room private": "Mache diesen Raum privat",
-    "Share message history with new users": "Nachrichtenhistorie mit neuen Nutzern teilen",
+    "Share message history with new users": "Bisherigen Chatverlauf mit neuen Nutzern teilen",
     "Encrypt room": "Raum verschlüsseln",
     "To send events of type": "Zum Senden von Ereignissen mit Typ",
     "%(names)s and %(lastPerson)s are typing": "%(names)s und %(lastPerson)s schreiben",
@@ -770,7 +770,7 @@
     "You can also set a custom identity server but this will typically prevent interaction with users based on email address.": "Du kannst auch einen angepassten Idantitätsserver angeben aber dies wird typischerweise Interaktionen mit anderen Nutzern auf Basis der E-Mail-Adresse verhindern.",
     "Please check your email to continue registration.": "Bitte prüfe deine E-Mail um mit der Registrierung fortzufahren.",
     "Token incorrect": "Token inkorrekt",
-    "A text message has been sent to": "Eine Textnachricht wurde gesandt an",
+    "A text message has been sent to": "Eine Textnachricht wurde gesendet an",
     "Please enter the code it contains:": "Bitte gebe den Code ein, den sie enthält:",
     "powered by Matrix": "betrieben mit Matrix",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "Wenn du keine E-Mail-Adresse angibst, wirst du nicht in der Lage sein, dein Passwort zurückzusetzen. Bist du sicher?",
@@ -834,7 +834,7 @@
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s hat das Raum-Bild entfernt.",
     "VoIP": "VoIP",
     "No Webcams detected": "Keine Webcam erkannt",
-    "Missing Media Permissions, click here to request.": "Fehlende Medienberechtigungen. Klicke hier um anzufragen.",
+    "Missing Media Permissions, click here to request.": "Fehlende Medienberechtigungen. Hier klicken, um Berechtigungen zu beantragen.",
     "No Microphones detected": "Keine Mikrofone erkannt",
     "No media permissions": "Keine Medienberechtigungen",
     "You may need to manually permit Riot to access your microphone/webcam": "Gegebenenfalls kann es notwendig sein, dass du Riot manuell den Zugriff auf dein Mikrofon bzw. deine Webcam gewähren musst",
@@ -888,5 +888,6 @@
     "Your email address does not appear to be associated with a Matrix ID on this Homeserver.": "Deine E-Mail-Adresse scheint nicht mit einer Matrix-ID auf diesem Heimserver verbunden zu sein.",
     "$senderDisplayName changed the room avatar to <img/>": "$senderDisplayName hat das Raum-Bild geändert zu <img/>",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s hat das Raum-Bild für %(roomName)s geändert",
-    "Hide removed messages": "Gelöschte Nachrichten verbergen"
+    "Hide removed messages": "Gelöschte Nachrichten verbergen",
+    "Start new chat": "Neuen Chat starten"
 }

src/i18n/strings/en_EN.json

@@ -126,6 +126,7 @@
   "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
   "Account": "Account",
   "Access Token:": "Access Token:",
+  "Add": "Add",
   "Add a topic": "Add a topic",
   "Add email address": "Add email address",
   "Add phone number": "Add phone number",
@@ -213,6 +214,10 @@
   "Confirm your new password": "Confirm your new password",
   "Continue": "Continue",
   "Could not connect to the integration server": "Could not connect to the integration server",
+  "%(count)s new messages": {
+    "one": "%(count)s new message",
+    "other": "%(count)s new messages"
+  },
   "Create an account": "Create an account",
   "Create Room": "Create Room",
   "Cryptography": "Cryptography",
@@ -241,6 +246,7 @@
   "Direct chats": "Direct chats",
   "disabled": "disabled",
   "Disable inline URL previews by default": "Disable inline URL previews by default",
+  "Disable markdown formatting": "Disable markdown formatting",
   "Disinvite": "Disinvite",
   "Display name": "Display name",
   "Displays action": "Displays action",
@@ -264,6 +270,7 @@
   "Enter Code": "Enter Code",
   "Error": "Error",
   "Error decrypting attachment": "Error decrypting attachment",
+  "Error: Problem communicating with the given homeserver.": "Error: Problem communicating with the given homeserver.",
   "Event information": "Event information",
   "Existing Call": "Existing Call",
   "Export": "Export",
@@ -272,6 +279,7 @@
   "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
   "Failed to change power level": "Failed to change power level",
   "Failed to delete device": "Failed to delete device",
+  "Failed to fetch avatar URL": "Failed to fetch avatar URL",
   "Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s",
   "Failed to join room": "Failed to join room",
   "Failed to join the room": "Failed to join the room",
@@ -308,7 +316,7 @@
   "Guest access is disabled on this Home Server.": "Guest access is disabled on this Home Server.",
   "Guests can't set avatars. Please register.": "Guests can't set avatars. Please register.",
   "Guest users can't create new rooms. Please register to create room and start a chat.": "Guest users can't create new rooms. Please register to create room and start a chat.",
-  "Guest users can't upload files. Please register to upload": "Guest users can't upload files. Please register to upload",
+  "Guest users can't upload files. Please register to upload.": "Guest users can't upload files. Please register to upload.",
   "Guests can't use labs features. Please register.": "Guests can't use labs features. Please register.",
   "Guests cannot join this room even if explicitly invited.": "Guests cannot join this room even if explicitly invited.",
   "had": "had",
@@ -476,7 +484,7 @@
   "since the point in time of selecting this option": "since the point in time of selecting this option",
   "since they joined": "since they joined",
   "since they were invited": "since they were invited",
-  "Some of your messages have not been sent": "Some of your messages have not been sent",
+  "Some of your messages have not been sent.": "Some of your messages have not been sent.",
   "Someone": "Someone",
   "Sorry, this homeserver is using a login which is not recognised ": "Sorry, this homeserver is using a login which is not recognised ",
   "Start a chat": "Start a chat",
@@ -488,6 +496,7 @@
   "Tagged as: ": "Tagged as: ",
   "The default role for new room members is": "The default role for new room members is",
   "The main address for this room is": "The main address for this room is",
+  "The phone number entered looks invalid": "The phone number entered looks invalid",
   "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.",
   "This action cannot be performed by a guest user. Please register to be able to do this": "This action cannot be performed by a guest user. Please register to be able to do this",
   "This email address is already in use": "This email address is already in use",
@@ -501,7 +510,7 @@
   "There was a problem logging in.": "There was a problem logging in.",
   "This room has no local addresses": "This room has no local addresses",
   "This room is not recognised.": "This room is not recognised.",
-  "This room is private or inaccessible to guests. You may be able to join if you register": "This room is private or inaccessible to guests. You may be able to join if you register",
+  "This room is private or inaccessible to guests. You may be able to join if you register.": "This room is private or inaccessible to guests. You may be able to join if you register.",
   "These are experimental features that may break in unexpected ways": "These are experimental features that may break in unexpected ways",
   "The visibility of existing history will be unchanged": "The visibility of existing history will be unchanged",
   "This doesn't appear to be a valid email address": "This doesn't appear to be a valid email address",
@@ -530,8 +539,8 @@
   "to tag as %(tagName)s": "to tag as %(tagName)s",
   "to tag direct chat": "to tag direct chat",
   "To use it, just wait for autocomplete results to load and tab through them.": "To use it, just wait for autocomplete results to load and tab through them.",
-  "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question",
+  "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
-  "Tried to load a specific point in this room's timeline, but was unable to find it": "Tried to load a specific point in this room's timeline, but was unable to find it",
+  "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
   "Turn Markdown off": "Turn Markdown off",
   "Turn Markdown on": "Turn Markdown on",
   "%(senderName)s turned on end-to-end encryption (algorithm %(algorithm)s).": "%(senderName)s turned on end-to-end encryption (algorithm %(algorithm)s).",
@@ -555,6 +564,11 @@
   "Unmute": "Unmute",
   "Unrecognised command:": "Unrecognised command:",
   "Unrecognised room alias:": "Unrecognised room alias:",
+  "Uploading %(filename)s and %(count)s others": {
+    "zero": "Uploading %(filename)s",
+    "one": "Uploading %(filename)s and %(count)s other",
+    "other": "Uploading %(filename)s and %(count)s others"
+  },
   "uploaded a file": "uploaded a file",
   "Upload avatar": "Upload avatar",
   "Upload Failed": "Upload Failed",
@@ -600,6 +614,7 @@
   "You have entered an invalid contact. Try using their Matrix ID or email address.": "You have entered an invalid contact. Try using their Matrix ID or email address.",
   "You have no visible notifications": "You have no visible notifications",
   "you must be a": "you must be a",
+  "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
   "You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
   "You need to be logged in.": "You need to be logged in.",
   "You need to enter a user name.": "You need to enter a user name.",
@@ -656,12 +671,10 @@
   "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",
   "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
   "Auto-complete": "Auto-complete",
-  "Resend all": "Resend all",
+  "<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.": "<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.",
   "(~%(searchCount)s results)": "(~%(searchCount)s results)",
   "Cancel": "Cancel",
-  "cancel all": "cancel all",
   "or": "or",
-  "now. You can also select individual messages to resend or cancel.": "now. You can also select individual messages to resend or cancel.",
   "Active call": "Active call",
   "Monday": "Monday",
   "Tuesday": "Tuesday",
@@ -727,6 +740,11 @@
   "%(severalUsers)schanged their avatar": "%(severalUsers)schanged their avatar",
   "%(oneUser)schanged their avatar": "%(oneUser)schanged their avatar",
   "Please select the destination room for this message": "Please select the destination room for this message",
+  "Create new room": "Create new room",
+  "Welcome page": "Welcome page",
+  "Room directory": "Room directory",
+  "Start chat": "Start chat",
+  "New Password": "New Password",
   "Start automatically after system login": "Start automatically after system login",
   "Desktop specific": "Desktop specific",
   "Analytics": "Analytics",
@@ -736,7 +754,6 @@
   "Passphrases must match": "Passphrases must match",
   "Passphrase must not be empty": "Passphrase must not be empty",
   "Export room keys": "Export room keys",
-  "Enter passphrase": "Enter passphrase",
   "Confirm passphrase": "Confirm passphrase",
   "Import room keys": "Import room keys",
   "File to import": "File to import",
@@ -745,6 +762,7 @@
   "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.",
   "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
   "You must join the room to see its files": "You must join the room to see its files",
+  "Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
   "Reject all %(invitedRooms)s invites": "Reject all %(invitedRooms)s invites",
   "Start new chat": "Start new chat",
   "Guest users can't invite users. Please register.": "Guest users can't invite users. Please register.",
@@ -809,6 +827,7 @@
   "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?",
   "Removed or unknown message type": "Removed or unknown message type",
   "Disable URL previews by default for participants in this room": "Disable URL previews by default for participants in this room",
+  "Disable URL previews for this room (affects only you)": "Disable URL previews for this room (affects only you)",
   "URL previews are %(globalDisableUrlPreview)s by default for participants in this room.": "URL previews are %(globalDisableUrlPreview)s by default for participants in this room.",
   "URL Previews": "URL Previews",
   "Enable URL previews for this room (affects only you)": "Enable URL previews for this room (affects only you)",
@@ -822,15 +841,27 @@
   "Online": "Online",
   "Idle": "Idle",
   "Offline": "Offline",
+  "disabled": "disabled",
+  "enabled": "enabled",
+  "Start chatting": "Start chatting",
+  "Start Chatting": "Start Chatting",
+  "Click on the button below to start chatting!": "Click on the button below to start chatting!",
+  "Create a new chat or reuse an existing one": "Create a new chat or reuse an existing one",
+  "You already have existing direct chats with this user:": "You already have existing direct chats with this user:",
+  "Start new chat": "Start new chat",
   "Disable URL previews for this room (affects only you)": "Disable URL previews for this room (affects only you)",
   "$senderDisplayName changed the room avatar to <img/>": "$senderDisplayName changed the room avatar to <img/>",
   "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
   "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
+  "Username available": "Username available",
+  "Username not available": "Username not available",
+  "Something went wrong!": "Something went wrong!",
+  "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.": "This will be your account name on the <span></span> homeserver, or you can pick a <a>different server</a>.",
+  "If you already have a Matrix account you can <a>log in</a> instead.": "If you already have a Matrix account you can <a>log in</a> instead.",
   "Start verification": "Start verification",
   "Share without verifying": "Share without verifying",
   "Ignore request": "Ignore request",
   "You added a new device '%(displayName)s', which is requesting encryption keys.": "You added a new device '%(displayName)s', which is requesting encryption keys.",
   "Your unverified device '%(displayName)s' is requesting encryption keys.": "Your unverified device '%(displayName)s' is requesting encryption keys.",
   "Encryption key request": "Encryption key request"
-
 }

src/i18n/strings/hu.json

@@ -1 +1,3 @@
-{}
+{
+    "Cancel": "Mégse"
+}

src/i18n/strings/ru.json

@@ -670,5 +670,8 @@
     "Analytics": "Аналитика",
     "Riot collects anonymous analytics to allow us to improve the application.": "Riot собирет анонимные данные, чтобы улутшыть эту програму.",
     "Opt out of analytics": "Подтвердить отказ передачи аналитических данных",
-    "Logged in as:": "Зарегестрирован как:"
+    "Logged in as:": "Зарегестрирован как:",
+    "Default Device": "Стандартное устройство",
+    "No Webcams detected": "Веб-камера не обнаружена",
+    "VoIP": "VoIP"
 }

src/i18n/strings/sv.json

@@ -176,5 +176,120 @@
     "Banned users": "Bannade användare",
     "Bans user with given id": "Bannar användaren med givet ID",
     "Ban": "Banna",
-    "Attachment": "Bilaga"
+    "Attachment": "Bilaga",
+    "Call Timeout": "Samtalstimeout",
+    "Can't connect to homeserver - please check your connectivity and ensure your <a>homeserver's SSL certificate</a> is trusted.": "Det gick inte att ansluta till hemservern - kontrollera anslutningen och att <a>hemserverns TLS-certifikat</a> är pålitat.",
+    "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>.": "Det går inte att ansluta till en hemserver via HTTP då adressen i webbläsaren är HTTPS. Använd HTTPS, eller <a>sätt på osäkra skript</a>.",
+    "Can't load user settings": "Det gick inte att ladda användarinställningar",
+    "Change Password": "Byt lösenord",
+    "%(senderName)s changed their display name from %(oldDisplayName)s to %(displayName)s.": "%(senderName)s bytte namn från %(oldDisplayName)s till %(displayName)s.",
+    "%(senderName)s changed their profile picture.": "%(senderName)s bytte sin profilbild.",
+    "%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s bytte rummets namn till %(roomName)s.",
+    "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s tog bort rummets namn.",
+    "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s bytte rummets ämne till \"%(topic)s\".",
+    "Changes to who can read history will only apply to future messages in this room": "Ändringar till vem som kan läsa meddelandehistorik tillämpas endast till framtida meddelanden i det här rummet",
+    "Changes your display nickname": "Byter ditt synliga namn",
+    "Changing password will currently reset any end-to-end encryption keys on all devices, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.": "Om du byter lösenord kommer för tillfället alla krypteringsnycklar på alla enheter att nollställas, vilket gör all krypterad meddelandehistorik omöjligt att läsa, om du inte först exporterar rumsnycklarna och sedan importerar dem efteråt. I framtiden kommer det här att förbättras.",
+    "Claimed Ed25519 fingerprint key": "Påstådd Ed25519-fingeravtrycksnyckel",
+    "Clear Cache and Reload": "Töm cache och ladda om",
+    "Clear Cache": "Töm cache",
+    "Click here": "Klicka här",
+    "Click here to fix": "Klicka här för att fixa",
+    "Click to mute audio": "Klicka för att dämpa ljud",
+    "Click to mute video": "Klicka för att stänga av video",
+    "click to reveal": "klicka för att avslöja",
+    "Click to unmute video": "Klicka för att sätta på video",
+    "Click to unmute audio": "Klicka för att sätta på ljud",
+    "Command error": "Kommandofel",
+    "Commands": "Kommandon",
+    "Conference call failed.": "Konferenssamtal misslyckades.",
+    "Conference calling is in development and may not be reliable.": "Konferenssamtal är under utveckling och är inte nödvändigtvis pålitliga.",
+    "Conference calls are not supported in encrypted rooms": "Konferenssamtal stöds inte i krypterade rum",
+    "Conference calls are not supported in this client": "Konferenssamtal stöds inte i den här klienten",
+    "Confirm password": "Bekräfta lösenord",
+    "Confirm your new password": "Bekräfta ditt nya lösenord",
+    "Continue": "Fortsätt",
+    "Could not connect to the integration server": "Det gick inte att ansluta till integrationsservern",
+    "Create an account": "Skapa ett konto",
+    "Create Room": "Skapa ett rum",
+    "Cryptography": "Kryptografi",
+    "Current password": "Nuvarande lösenord",
+    "Curve25519 identity key": "Curve25519 -identitetsnyckel",
+    "Custom level": "Egen nivå",
+    "/ddg is not a command": "/ddg är inte ett kommando",
+    "Deactivate Account": "Deaktivera konto",
+    "Deactivate my account": "Deaktivera mitt konto",
+    "decline": "avböj",
+    "Decrypt %(text)s": "Dekryptera %(text)s",
+    "Decryption error": "Dekrypteringsfel",
+    "(default: %(userName)s)": "(standard: %(userName)s)",
+    "Delete": "Radera",
+    "demote": "degradera",
+    "Deops user with given id": "Degraderar användaren med givet id",
+    "Default": "Standard",
+    "Device already verified!": "Enheten är redan verifierad!",
+    "Device ID": "Enhets-ID",
+    "Device ID:": "Enhets-ID:",
+    "device id: ": "enhets-id: ",
+    "Device key:": "Enhetsnyckel:",
+    "Devices": "Enheter",
+    "Devices will not yet be able to decrypt history from before they joined the room": "Enheter kan inte ännu dekryptera meddelandehistorik från före de gick med i rummet",
+    "Direct Chat": "Direkt-chatt",
+    "Direct chats": "Direkta chattar",
+    "disabled": "avstängd",
+    "Disable inline URL previews by default": "Stäng av inline-URL-förhandsvisningar som standard",
+    "Disinvite": "Häv inbjudan",
+    "Display name": "Namn",
+    "Displays action": "Visar handling",
+    "Don't send typing notifications": "Sänd inte \"skriver\"-status",
+    "Download %(text)s": "Ladda ner %(text)s",
+    "Drop here %(toAction)s": "Dra hit för att %(toAction)s",
+    "Drop here to tag %(section)s": "Dra hit för att tagga %(section)s",
+    "Ed25519 fingerprint": "Ed25519-fingeravtryck",
+    "Email": "Epost",
+    "Email address": "Epostadress",
+    "Email address (optional)": "Epostadress (valfri)",
+    "Email, name or matrix ID": "Epostadress, namn, eller Matrix-ID",
+    "Emoji": "Emoji",
+    "Enable encryption": "Sätt på kryptering",
+    "enabled": "aktiverat",
+    "Encrypted messages will not be visible on clients that do not yet implement encryption": "Krypterade meddelanden syns inte på klienter som inte ännu stöder kryptering",
+    "Encrypted room": "Krypterat rum",
+    "%(senderName)s ended the call.": "%(senderName)s avslutade samtalet.",
+    "End-to-end encryption information": "Krypteringsinformation",
+    "End-to-end encryption is in beta and may not be reliable": "Kryptering är i beta och är inte nödvändigtvis pålitligt",
+    "Enter Code": "Skriv in kod",
+    "Error": "Fel",
+    "Error decrypting attachment": "Det gick inte att dekryptera bilagan",
+    "Event information": "Händelseinformation",
+    "Existing Call": "Existerande samtal",
+    "Export": "Exportera",
+    "Export E2E room keys": "Exportera krypteringsrumsnycklar",
+    "Failed to ban user": "Det gick inte att banna användaren",
+    "Failed to change password. Is your password correct?": "Det gick inte att byta lösenord. Är lösenordet rätt?",
+    "Failed to change power level": "Det gick inte att ändra maktnivå",
+    "Failed to delete device": "Det gick inte att radera enhet",
+    "Failed to forget room %(errCode)s": "Det gick inte att glömma bort rummet %(errCode)s",
+    "Failed to join room": "Det gick inte att gå med i rummet",
+    "Failed to join the room": "Det gick inte att gå med i rummet",
+    "Failed to kick": "Det gick inte att kicka",
+    "Failed to leave room": "Det gick inte att lämna rummet",
+    "Failed to load timeline position": "Det gick inte att hämta positionen på tidslinjen",
+    "Failed to lookup current room": "Det gick inte att hämta det nuvarande rummet",
+    "Failed to mute user": "Det gick inte att dämpa användaren",
+    "Failed to register as guest:": "Det gick inte att registrera som gästanvändare:",
+    "Failed to reject invite": "Det gick inte att avböja inbjudan",
+    "Failed to reject invitation": "Det gick inte att avböja inbjudan",
+    "Failed to save settings": "Det gick inte att spara inställningarna",
+    "Failed to send email": "Det gick inte att skicka epost",
+    "Failed to send request.": "Det gick inte att sända begäran.",
+    "Failed to set avatar.": "Det gick inte att sätta profilbilden.",
+    "Failed to set display name": "Det gick inte att sätta namnet",
+    "Failed to set up conference call": "Det gick inte att starta konferenssamtalet",
+    "Failed to toggle moderator status": "Det gick inte att växla moderator-status",
+    "Failed to unban": "Det gick inte att avbanna",
+    "Failed to upload file": "Det gick inte att ladda upp filen",
+    "Failed to verify email address: make sure you clicked the link in the email": "Det gick inte att bekräfta epostadressen, klicka på länken i epostmeddelandet",
+    "Favourite": "Favorit",
+    "favourite": "favorit"
 }

src/i18n/strings/th.json

@@ -20,5 +20,308 @@
     "Bug Report": "รายงานจุดบกพร่อง",
     "Change Password": "เปลี่ยนรหัสผ่าน",
     "Create Room": "สรัางห้อง",
-    "Delete": "ลบ"
+    "Delete": "ลบ",
+    "Default": "ค่าเริ่มต้น",
+    "(default: %(userName)s)": "(ค่าเริ่มต้น: %(userName)s)",
+    "Default Device": "อุปกรณ์เริ่มต้น",
+    "%(senderName)s banned %(targetName)s.": "%(senderName)s แบน %(targetName)s แล้ว",
+    "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s เปลี่ยนหัวข้อเป็น \"%(topic)s\" แล้ว",
+    "Decrypt %(text)s": "ถอดรหัส %(text)s",
+    "Device ID": "ID อุปกรณ์",
+    "Device ID:": "ID อุปกรณ์:",
+    "device id: ": "id อุปกรณ์: ",
+    "Devices": "อุปกรณ์",
+    "Direct Chat": "แชทโดยตรง",
+    "Download %(text)s": "ดาวน์โหลด %(text)s",
+    "Emoji": "อีโมจิ",
+    "Enable encryption": "เปิดใช้งานการเข้ารหัส",
+    "enabled": "เปิดใช้งานแล้ว",
+    "Error": "ข้อผิดพลาด",
+    "Found a bug?": "พบจุดบกพร่อง?",
+    "is a": "เป็น",
+    "%(displayName)s is typing": "%(displayName)s กำลังพิมพ์",
+    "Kick": "เตะ",
+    "Low priority": "ความสำคัญต่ำ",
+    "matrix-react-sdk version:": "เวอร์ชัน matrix-react-sdk:",
+    "Members only": "สมาชิกเท่านั้น",
+    "Mobile phone number": "หมายเลขโทรศัพท์",
+    "Mobile phone number (optional)": "หมายเลขโทรศัพท์ (เลือกหรือไม่ก็ได้)",
+    "Name": "ชื่อ",
+    "OK": "ตกลง",
+    "Password": "รหัสผ่าน",
+    "Password:": "รหัสผ่าน:",
+    "Please Register": "กรุณาลงทะเบียน",
+    "Profile": "โปรไฟล์",
+    "Reason": "เหตุผล",
+    "Register": "ลงทะเบียน",
+    "Results from DuckDuckGo": "ผลจาก DuckDuckGo",
+    "Return to app": "กลับไปยังแอป",
+    "riot-web version:": "เวอร์ชัน riot-web:",
+    "Cancel": "ยกเลิก",
+    "Dismiss": "ไม่สนใจ",
+    "Mute": "เงียบ",
+    "Notifications": "การแจ้งเตือน",
+    "Operation failed": "การดำเนินการล้มเหลว",
+    "powered by Matrix": "ใช้เทคโนโลยี Matrix",
+    "Search": "ค้นหา",
+    "Settings": "การตั้งค่า",
+    "unknown error code": "รหัสข้อผิดพลาดที่ไม่รู้จัก",
+    "Sunday": "วันอาทิตย์",
+    "Monday": "วันจันทร์",
+    "Tuesday": "วันอังคาร",
+    "Wednesday": "วันพุธ",
+    "Thursday": "วันพฤหัสบดี",
+    "Friday": "วันศุกร์",
+    "Saturday": "วันเสาร์",
+    "olm version:": "เวอร์ชัน olm:",
+    "Report it": "รายงานเลย",
+    "Remove": "ลบ",
+    "Custom Server Options": "กำหนดเซิร์ฟเวอร์เอง",
+    "Failed to join the room": "การเข้าร่วมห้องล้มเหลว",
+    "Drop here %(toAction)s": "ปล่อยที่นี่ %(toAction)s",
+    "Favourite": "รายการโปรด",
+    "Failed to forget room %(errCode)s": "การลืมห้องล้มเหลว %(errCode)s",
+    "%(targetName)s accepted an invitation.": "%(targetName)s ตอบรับคำเชิญแล้ว",
+    "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s ตอบรับคำเชิญสำหรับ %(displayName)s แล้ว",
+    "Add a topic": "เพิ่มหัวข้อ",
+    "Add email address": "เพิ่มที่อยู่อีเมล",
+    "Admin": "ผู้ดูแล",
+    "No Webcams detected": "ไม่พบกล้องเว็บแคม",
+    "No media permissions": "ไม่มีสิทธิ์เข้าถึงสื่อ",
+    "You may need to manually permit Riot to access your microphone/webcam": "คุณอาจต้องให้สิทธิ์ Riot เข้าถึงไมค์โครโฟนไมค์โครโฟน/กล้องเว็บแคม ด้วยตัวเอง",
+    "Algorithm": "อัลกอริทึม",
+    "Hide removed messages": "ซ่อนข้อความที่ถูกลบแล้ว",
+    "Authentication": "การยืนยันตัวตน",
+    "all room members": "สมาชิกทั้งหมด",
+    "all room members, from the point they are invited": "สมาชิกทั้งหมด นับตั้งแต่เมื่อได้รับคำเชิญ",
+    "all room members, from the point they joined": "สมาชิกทั้งหมด นับตั้งแต่เมื่อเข้าร่วมห้อง",
+    "an address": "ที่อยู่",
+    "%(items)s and %(remaining)s others": "%(items)s และอีก %(remaining)s อย่าง",
+    "%(items)s and one other": "%(items)s และอีกหนึ่งอย่าง",
+    "%(items)s and %(lastItem)s": "%(items)s และ %(lastItem)s",
+    "and %(overflowCount)s others...": "และอีก %(overflowCount)s ผู้ใช้...",
+    "and one other...": "และอีกหนึ่งผู้ใช้...",
+    "%(names)s and %(lastPerson)s are typing": "%(names)s และ %(lastPerson)s กำลังพิมพ์",
+    "%(names)s and one other are typing": "%(names)s และอีกหนึ่งคนกำลังพิมพ์",
+    "%(names)s and %(count)s others are typing": "%(names)s และอีก %(count)s คนกำลังพิมพ์",
+    "%(senderName)s answered the call.": "%(senderName)s รับสายแล้ว",
+    "anyone": "ทุกคน",
+    "An error has occurred.": "เกิดข้อผิดพลาด",
+    "Anyone": "ทุกคน",
+    "Anyone who knows the room's link, apart from guests": "ทุกคนที่มีลิงก์ ยกเว้นแขก",
+    "Anyone who knows the room's link, including guests": "ทุกคนที่มีลิงก์ รวมถึงแขก",
+    "Are you sure?": "คุณแน่ใจหรือไม่?",
+    "Are you sure you want to leave the room '%(roomName)s'?": "คุณแน่ใจหรือว่าต้องการจะออกจากห้อง '%(roomName)s'?",
+    "Are you sure you want to reject the invitation?": "คุณแน่ใจหรือว่าต้องการจะปฏิเสธคำเชิญ?",
+    "Are you sure you want to upload the following files?": "คุณแน่ใจหรือว่าต้องการอัปโหลดไฟล์ต่อไปนี้?",
+    "Attachment": "ไฟล์แนบ",
+    "Autoplay GIFs and videos": "เล่น GIF และวิดิโออัตโนมัติ",
+    "Banned users": "ผู้ใช้ที่ถูกแบน",
+    "Bans user with given id": "ผู้ใช้และ id ที่ถูกแบน",
+    "Blacklisted": "ขึ้นบัญชีดำ",
+    "Can't load user settings": "ไม่สามารถโหลดการตั้งค่าผู้ใช้ได้",
+    "%(senderName)s changed their display name from %(oldDisplayName)s to %(displayName)s.": "%(senderName)s ได้เปลี่ยนชื่อที่แสดงจาก %(oldDisplayName)s ไปเป็น %(displayName)s",
+    "%(senderName)s changed their profile picture.": "%(senderName)s เปลี่ยนรูปโปรไฟล์ของเขา",
+    "%(senderDisplayName)s changed the room name to %(roomName)s.": "%(senderDisplayName)s เปลี่ยนชื่อห้องไปเป็น %(roomName)s",
+    "%(senderDisplayName)s removed the room name.": "%(senderDisplayName)s ลบชื่อห้อง",
+    "Changes your display nickname": "เปลี่ยนชื่อเล่นที่แสดงของคุณ",
+    "changing room on a RoomView is not supported": "ไม่รองรับการเปลี่ยนห้องใน RoomView",
+    "Clear Cache and Reload": "ล้างแคชแล้วโหลดใหม่",
+    "Clear Cache": "ล้างแคช",
+    "Click here": "คลิกที่นี่",
+    "Click here to fix": "คลิกที่นี่เพื่อแก้ไข",
+    "Click to mute audio": "คลิกที่นี่เพื่อปิดเสียง",
+    "Click to mute video": "คลิกที่นี่เพื่อปิดกล้อง",
+    "click to reveal": "คลิกเพื่อแสดง",
+    "Click to unmute video": "คลิกเพื่อเปิดกล้อง",
+    "Click to unmute audio": "คลิกเพื่อเปิดเสียง",
+    "Command error": "คำสั่งผิดพลาด",
+    "Commands": "คำสั่ง",
+    "Conference call failed.": "การโทรประชุมล้มเหลว",
+    "Conference calling is in development and may not be reliable.": "การโทรประชุมอยู่ระหว่างการพัฒนาและอาจพึ่งพาไม่ได้",
+    "Conference calls are not supported in encrypted rooms": "การโทรประชุมไม่รองรับห้องที่ถูกเข้ารหัส",
+    "Conference calls are not supported in this client": "ไคลเอนต์นี้ไม่รองรับการโทรประชุม",
+    "Confirm password": "ยืนยันรหัสผ่าน",
+    "Confirm your new password": "ยืนยันรหัสผ่านใหม่",
+    "Continue": "ดำเนินการต่อ",
+    "Create an account": "สร้างบัญชี",
+    "Cryptography": "วิทยาการเข้ารหัส",
+    "Current password": "รหัสผ่านปัจจุบัน",
+    "/ddg is not a command": "/ddg ไม่ใช่คำสั่ง",
+    "Deactivate Account": "ปิดการใช้งานบัญชี",
+    "Deactivate my account": "ปิดการใช้งานบัญชีของฉัน",
+    "decline": "ปฏิเสธ",
+    "Decryption error": "การถอดรหัสผิดพลาด",
+    "demote": "ลดขั้น",
+    "Device already verified!": "ยืนยันอุปกรณ์แล้ว!",
+    "Device key:": "Key อุปกรณ์:",
+    "Devices will not yet be able to decrypt history from before they joined the room": "อุปกรณ์จะยังไม่สามารถถอดรหัสประวัติแชทก่อนจะเข้าร่วมห้องได้",
+    "Direct chats": "แชทตรง",
+    "disabled": "ถูกปิดใช้งาน",
+    "Disinvite": "ถอนคำเชิญ",
+    "Display name": "ชื่อที่แสดง",
+    "Don't send typing notifications": "ไม่แจ้งว่ากำลังพิมพ์",
+    "Drop here to tag %(section)s": "ปล่อยที่นี่เพื่อแท็กว่า %(section)s",
+    "Ed25519 fingerprint": "ลายนิ้วมือ Ed25519",
+    "Email": "อีเมล",
+    "Email address": "ที่อยู่อีเมล",
+    "Email address (optional)": "ที่อยู่อีเมล (เลือกหรือไม่ก็ได้)",
+    "Email, name or matrix ID": "อีเมล ชื่อ หรือ ID matrix",
+    "Encrypted room": "ห้องที่ถูกเข้ารหัส",
+    "%(senderName)s ended the call.": "%(senderName)s จบการโทร",
+    "Enter Code": "กรอกรหัส",
+    "Error decrypting attachment": "การถอดรหัสไฟล์แนบผิดพลาด",
+    "Export": "ส่งออก",
+    "Failed to ban user": "การแบนผู้ใช้ล้มเหลว",
+    "Failed to change password. Is your password correct?": "การเปลี่ยนรหัสผ่านล้มเหลว รหัสผ่านของคุณถูกต้องหรือไม่?",
+    "Failed to delete device": "การลบอุปกรณ์ล้มเหลว",
+    "Failed to join room": "การเข้าร่วมห้องล้มเหลว",
+    "Failed to kick": "การเตะล้มเหลว",
+    "Failed to leave room": "การออกจากห้องล้มเหลว",
+    "Failed to lookup current room": "การหาห้องปัจจุบันล้มเหลว",
+    "Failed to register as guest:": "การลงทะเบียนในฐานะแขกล้มเหลว:",
+    "Failed to reject invite": "การปฏิเสธคำเชิญล้มเหลว",
+    "Failed to reject invitation": "การปฏิเสธคำเชิญล้มเหลว",
+    "Failed to save settings": "การบันทึกการตั้งค่าล้มเหลว",
+    "Failed to send email": "การส่งอีเมลล้มเหลว",
+    "Failed to send request.": "การส่งคำขอล้มเหลว",
+    "Failed to set display name": "การตั้งชื่อที่แสดงล้มเหลว",
+    "Failed to toggle moderator status": "การสลับสถานะผู้ช่วยดูแลล้มเหลว",
+    "Failed to unban": "การถอนแบนล้มเหลว",
+    "Failed to upload file": "การอัปโหลดไฟล์ล้มเหลว",
+    "Failed to verify email address: make sure you clicked the link in the email": "การยืนยันอีเมลล้มเหลว: กรุณาตรวจสอบว่าคุณคลิกลิงก์ในอีเมลแล้ว",
+    "Failure to create room": "การสร้างห้องล้มเหลว",
+    "favourite": "รายการโปรด",
+    "Favourites": "รายการโปรด",
+    "Filter room members": "กรองสมาชิกห้อง",
+    "Forget room": "ลืมห้อง",
+    "Forgot your password?": "ลิมรหัสผ่าน?",
+    "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s จาก %(fromPowerLevel)s ไปเป็น %(toPowerLevel)s",
+    "had": "เคยมี",
+    "Hangup": "วางสาย",
+    "Historical": "ประวัติแชทเก่า",
+    "Homeserver is": "เซิร์ฟเวอร์บ้านคือ",
+    "Identity Server is": "เซิร์ฟเวอร์ยืนยันตัวตนคือ",
+    "I have verified my email address": "ฉันยืนยันที่อยู่อีเมลแล้ว",
+    "Import": "นำเข้า",
+    "Incorrect username and/or password.": "ชื่อผู้ใช้และ/หรือรหัสผ่านไม่ถูกต้อง",
+    "Incorrect verification code": "รหัสยืนยันไม่ถูกต้อง",
+    "Interface Language": "ภาษาอินเตอร์เฟส",
+    "Invalid alias format": "รูปแบบนามแฝงไม่ถูกต้อง",
+    "Invalid address format": "รูปแบบที่อยู่ไม่ถูกต้อง",
+    "Invalid Email Address": "ที่อยู่อีเมลไม่ถูกต้อง",
+    "Invalid file%(extra)s": "ไฟล์ %(extra)s ไม่ถูกต้อง",
+    "%(senderName)s invited %(targetName)s.": "%(senderName)s เชิญ %(targetName)s แล้ว",
+    "Invite new room members": "เชิญสมาชิกใหม่",
+    "Invited": "เชิญแล้ว",
+    "Invites": "คำเชิญ",
+    "Invites user with given id to current room": "เชิญผู้ใช้ พร้อม id ของห้องปัจจุบัน",
+    "'%(alias)s' is not a valid format for an address": "'%(alias)s' ไม่ใช่รูปแบบที่ถูกต้องสำหรับที่อยู่",
+    "'%(alias)s' is not a valid format for an alias": "'%(alias)s' ไม่ใช่รูปแบบที่ถูกต้องสำหรับนามแฝง",
+    "Sign in with": "เข้าสู่ระบบด้วย",
+    "Join Room": "เข้าร่วมห้อง",
+    "joined and left": "เข้าร่วมแล้วออกจากห้อง",
+    "joined": "เข้าร่วมแล้ว",
+    "%(targetName)s joined the room.": "%(targetName)s เข้าร่วมห้องแล้ว",
+    "Jump to first unread message.": "ข้ามไปยังข้อความแรกที่ยังไม่ได้อ่าน",
+    "%(senderName)s kicked %(targetName)s.": "%(senderName)s เตะ %(targetName)s แล้ว",
+    "Labs": "ห้องทดลอง",
+    "Leave room": "ออกจากห้อง",
+    "left and rejoined": "ออกแล้วกลับเข้าร่วมอีกครั้ง",
+    "left": "ออกไปแล้ว",
+    "%(targetName)s left the room.": "%(targetName)s ออกจากห้องไปแล้ว",
+    "List this room in %(domain)s's room directory?": "แสดงห้องนี้ในไดเรกทอรีห้องของ %(domain)s?",
+    "Logged in as:": "เข้าสู่ระบบในชื่อ:",
+    "Login as guest": "เข้าสู่ระบบในฐานะแขก",
+    "Logout": "ออกจากระบบ",
+    "Markdown is disabled": "ปิดใช้งาน Markdown แล้ว",
+    "Markdown is enabled": "เปิดใช้งาน Markdown แล้ว",
+    "Missing user_id in request": "ไม่พบ user_id ในคำขอ",
+    "Moderator": "ผู้ช่วยดูแล",
+    "my Matrix ID": "Matrix ID ของฉัน",
+    "New address (e.g. #foo:%(localDomain)s)": "ที่อยู่ใหม่ (เช่น #foo:%(localDomain)s)",
+    "New password": "รหัสผ่านใหม่",
+    "New passwords don't match": "รหัสผ่านใหม่ไม่ตรงกัน",
+    "New passwords must match each other.": "รหัสผ่านใหม่ทั้งสองช่องต้องตรงกัน",
+    "none": "ไม่มี",
+    "not set": "ไม่ได้ตั้ง",
+    "not specified": "ไม่ได้ระบุ",
+    "(not supported by this browser)": "(เบราว์เซอร์นี้ไม่รองรับ)",
+    "<not supported>": "<ไม่รองรับ>",
+    "NOT verified": "ยังไม่ได้ยืนยัน",
+    "No more results": "ไม่มีผลลัพธ์อื่น",
+    "No results": "ไม่มีผลลัพธ์",
+    "Once you&#39;ve followed the link it contains, click below": "หลังจากคุณเปิดลิงก์ข้างในแล้ว คลิกข้างล่าง",
+    "Passwords can't be empty": "รหัสผ่านต้องไม่ว่าง",
+    "People": "บุคคล",
+    "Permissions": "สิทธิ์",
+    "Phone": "โทรศัพท์",
+    "%(senderName)s placed a %(callType)s call.": "%(senderName)s ได้เริ่มการโทรแบบ%(callType)s",
+    "Please check your email and click on the link it contains. Once this is done, click continue.": "กรุณาเช็คอีเมลและคลิกลิงก์ข้างใน หลังจากนั้น คลิกดำเนินการต่อ",
+    "Privacy warning": "คำเตือนเกี่ยวกับความเป็นส่วนตัว",
+    "Privileged Users": "ผู้ใช้ที่มีสิทธิพิเศษ",
+    "Revoke Moderator": "เพิกถอนผู้ช่วยดูแล",
+    "Refer a friend to Riot:": "แนะนำเพื่อนให้รู้จัก Riot:",
+    "Registration required": "ต้องลงทะเบียนก่อน",
+    "rejected": "ปฏิเสธแล้ว",
+    "%(targetName)s rejected the invitation.": "%(targetName)s ปฏิเสธคำเชิญแล้ว",
+    "Reject invitation": "ปฏิเสธคำเชิญ",
+    "%(senderName)s removed their display name (%(oldDisplayName)s).": "%(senderName)s ลบชื่อที่แสดงแล้ว (%(oldDisplayName)s)",
+    "%(senderName)s removed their profile picture.": "%(senderName)s ลบรูปโปรไฟล์ของเขาแล้ว",
+    "Remove %(threePid)s?": "ลบ %(threePid)s?",
+    "restore": "กู้คืน",
+    "Return to login screen": "กลับไปยังหน้าลงชื่อเข้าใช้",
+    "Riot does not have permission to send you notifications - please check your browser settings": "Riot ไม่มีสิทธิ์ส่งการแจ้งเตือน - กรุณาตรวจสอบการตั้งค่าเบราว์เซอร์ของคุณ",
+    "Riot was not given permission to send notifications - please try again": "Riot ไม่ได้รับสิทธิ์ส่งการแจ้งเตือน - กรุณาลองใหม่อีกครั้ง",
+    "Room Colour": "สีห้อง",
+    "Room name (optional)": "ชื้อห้อง (เลือกหรือไม่ก็ได้)",
+    "Rooms": "ห้องสนทนา",
+    "Save": "บันทึก",
+    "Scroll to bottom of page": "เลื่อนลงไปล่างสุด",
+    "Scroll to unread messages": "เลี่ยนไปที่ข้อความที่ยังไม่ได้อ่าน",
+    "Search failed": "การค้นหาล้มเหลว",
+    "Searches DuckDuckGo for results": "ค้นหาบน DuckDuckGo",
+    "Send a message (unencrypted)": "ส่งข้อความ (ไม่เข้ารหัส)",
+    "Send an encrypted message": "ส่งข้อความที่เข้ารหัสแล้ว",
+    "Send Invites": "ส่งคำเชิญ",
+    "sent an image": "ส่งรูป",
+    "%(senderDisplayName)s sent an image.": "%(senderDisplayName)s ได้ส่งรูป",
+    "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.": "%(senderName)s ได้ส่งคำเชิญให้ %(targetDisplayName)s เข้าร่วมห้อง",
+    "sent a video": "ส่งวิดิโอ",
+    "Server error": "เซิร์ฟเวอร์ผิดพลาด",
+    "Server may be unavailable or overloaded": "เซิร์ฟเวอร์อาจไม่พร้อมใช้งานหรือทำงานหนักเกินไป",
+    "Server may be unavailable, overloaded, or search timed out :(": "เซิร์ฟเวอร์อาจไม่พร้อมใช้งาน ทำงานหนักเกินไป หรือการค้นหาหมดเวลา :(",
+    "Server may be unavailable, overloaded, or the file too big": "เซิร์ฟเวอร์อาจไม่พร้อมใช้งาน ทำงานหนักเกินไป หรือไฟล์ใหญ่เกินไป",
+    "Server may be unavailable, overloaded, or you hit a bug.": "เซิร์ฟเวอร์อาจไม่พร้อมใช้งาน ทำงานหนักเกินไป หรือเจอจุดบกพร่อง",
+    "Server unavailable, overloaded, or something else went wrong.": "เซิร์ฟเวอร์อาจไม่พร้อมใช้งาน ทำงานหนักเกินไป หรือบางอย่างผิดปกติ",
+    "%(senderName)s set a profile picture.": "%(senderName)s ตั้งรูปโปรไฟล์",
+    "%(senderName)s set their display name to %(displayName)s.": "%(senderName)s ตั้งชื่อที่แสดงเป็น %(displayName)s",
+    "Setting a user name will create a fresh account": "การตั้งชื่อผู้ใช้จะสร้างบัญชีใหม่",
+    "Show panel": "แสดงหน้าต่าง",
+    "Signed Out": "ออกจากระบบแล้ว",
+    "Sign in": "เข้าสู่ระบบ",
+    "Sign out": "ออกจากระบบ",
+    "Someone": "ใครบางคน",
+    "Always show message timestamps": "แสดงเวลาในแชทเสมอ",
+    "Show timestamps in 12 hour format (e.g. 2:30pm)": "แสดงเวลาในแชทในรูปแบบ 12 ชั่วโมง (เช่น 2:30pm)",
+    "Start a chat": "เริ่มแชท",
+    "Start Chat": "เริ่มแชท",
+    "Submit": "ส่ง",
+    "Success": "สำเร็จ",
+    "tag as %(tagName)s": "แท็กว่า %(tagName)s",
+    "tag direct chat": "แท็กว่าแชทตรง",
+    "Tagged as: ": "แท็กไว้ว่า: ",
+    "The main address for this room is": "ที่อยู่หลักของห้องนี้คือ",
+    "This email address is already in use": "ที่อยู่อีเมลถูกใช้แล้ว",
+    "This email address was not found": "ไม่พบที่อยู่อีเมล",
+    "%(actionVerb)s this person?": "%(actionVerb)s บุคคลนี้?",
+    "The file '%(fileName)s' failed to upload": "การอัปโหลดไฟล์ '%(fileName)s' ล้มเหลว",
+    "This Home Server does not support login using email address.": "เซิร์ฟเวอร์บ้านนี้ไม่รองรับการลงชื่อเข้าใช้ด้วยที่อยู่อีเมล",
+    "There was a problem logging in.": "มีปัญหาในการลงชื่อเข้าใช้",
+    "This room is private or inaccessible to guests. You may be able to join if you register": "ห้องนี้เป็นส่วนตัวหรือไม่อนุญาตให้แขกเข้าถึง คุณอาจเข้าร่วมได้หากคุณลงทะเบียน",
+    "this invitation?": "คำเชิญนี้?",
+    "This is a preview of this room. Room interactions have been disabled": "นี่คือตัวอย่างของห้อง การตอบสนองภายในห้องถูกปิดใช้งาน",
+    "This phone number is already in use": "หมายเลขโทรศัพท์นี้ถูกใช้งานแล้ว",
+    "This room's internal ID is": "ID ภายในของห้องนี้คือ",
+    "times": "เวลา"
 }

src/index.js

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 import Skinner from './Skinner';
-import request from 'browser-request';
-import UserSettingsStore from './UserSettingsStore';
 
 module.exports.loadSkin = function(skinObject) {
     Skinner.load(skinObject);

src/languageHandler.js

@@ -18,7 +18,6 @@ limitations under the License.
 import request from 'browser-request';
 import counterpart from 'counterpart';
 import q from 'q';
-import sanitizeHtml from "sanitize-html";
 
 import UserSettingsStore from './UserSettingsStore';
 
@@ -35,6 +34,25 @@ counterpart.setFallbackLocale('en');
 // just import counterpart and use it directly, we end up using a different
 // instance.
 export function _t(...args) {
+    // Horrible hack to avoid https://github.com/vector-im/riot-web/issues/4191
+    // The interpolation library that counterpart uses does not support undefined/null
+    // values and instead will throw an error. This is a problem since everywhere else
+    // in JS land passing undefined/null will simply stringify instead, and when converting
+    // valid ES6 template strings to i18n strings it's extremely easy to pass undefined/null
+    // if there are no existing null guards. To avoid this making the app completely inoperable,
+    // we'll check all the values for undefined/null and stringify them here.
+    if (args[1] && typeof args[1] === 'object') {
+        Object.keys(args[1]).forEach((k) => {
+            if (args[1][k] === undefined) {
+                console.warn("_t called with undefined interpolation name: " + k);
+                args[1][k] = 'undefined';
+            }
+            if (args[1][k] === null) {
+                console.warn("_t called with null interpolation name: " + k);
+                args[1][k] = 'null';
+            }
+        });
+    }
     return counterpart.translate(...args);
 }
 

src/stores/LifecycleStore.js

@@ -0,0 +1,79 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import dis from '../dispatcher';
+import {Store} from 'flux/utils';
+
+const INITIAL_STATE = {
+    deferred_action: null,
+};
+
+/**
+ * A class for storing application state to do with login/registration. This is a simple
+ * flux store that listens for actions and updates its state accordingly, informing any
+ * listeners (views) of state changes.
+ */
+class LifecycleStore extends Store {
+    constructor() {
+        super(dis);
+
+        // Initialise state
+        this._state = INITIAL_STATE;
+    }
+
+    _setState(newState) {
+        this._state = Object.assign(this._state, newState);
+        this.__emitChange();
+    }
+
+    __onDispatch(payload) {
+        switch (payload.action) {
+            case 'do_after_sync_prepared':
+                this._setState({
+                    deferred_action: payload.deferred_action,
+                });
+                break;
+            case 'cancel_after_sync_prepared':
+                this._setState({
+                    deferred_action: null,
+                });
+                break;
+            case 'sync_state':
+                if (payload.state !== 'PREPARED') {
+                    break;
+                }
+                if (!this._state.deferred_action) break;
+                const deferredAction = Object.assign({}, this._state.deferred_action);
+                this._setState({
+                    deferred_action: null,
+                });
+                dis.dispatch(deferredAction);
+                break;
+            case 'on_logged_out':
+                this.reset();
+                break;
+        }
+    }
+
+    reset() {
+        this._state = Object.assign({}, INITIAL_STATE);
+    }
+}
+
+let singletonLifecycleStore = null;
+if (!singletonLifecycleStore) {
+    singletonLifecycleStore = new LifecycleStore();
+}
+module.exports = singletonLifecycleStore;

src/stores/RoomViewStore.js

@@ -0,0 +1,205 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import dis from '../dispatcher';
+import {Store} from 'flux/utils';
+import MatrixClientPeg from '../MatrixClientPeg';
+import sdk from '../index';
+import Modal from '../Modal';
+import { _t } from '../languageHandler';
+
+const INITIAL_STATE = {
+    // Whether we're joining the currently viewed room
+    joining: false,
+    // Any error occurred during joining
+    joinError: null,
+    // The room ID of the room
+    roomId: null,
+    // The room alias of the room (or null if not originally specified in view_room)
+    roomAlias: null,
+    // Whether the current room is loading
+    roomLoading: false,
+    // Any error that has occurred during loading
+    roomLoadError: null,
+};
+
+/**
+ * A class for storing application state for RoomView. This is the RoomView's interface
+*  with a subset of the js-sdk.
+ *  ```
+ */
+class RoomViewStore extends Store {
+    constructor() {
+        super(dis);
+
+        // Initialise state
+        this._state = INITIAL_STATE;
+    }
+
+    _setState(newState) {
+        this._state = Object.assign(this._state, newState);
+        this.__emitChange();
+    }
+
+    __onDispatch(payload) {
+        switch (payload.action) {
+            // view_room:
+            //      - room_alias: '#somealias:matrix.org'
+            //      - room_id:    '!roomid123:matrix.org'
+            case 'view_room':
+                this._viewRoom(payload);
+                break;
+            case 'view_room_error':
+                this._viewRoomError(payload);
+                break;
+            case 'will_join':
+                this._setState({
+                    joining: true,
+                });
+                break;
+            case 'cancel_join':
+                this._setState({
+                    joining: false,
+                });
+                break;
+            // join_room:
+            //      - opts: options for joinRoom
+            case 'join_room':
+                this._joinRoom(payload);
+                break;
+            case 'joined_room':
+                this._joinedRoom(payload);
+                break;
+            case 'join_room_error':
+                this._joinRoomError(payload);
+                break;
+            case 'on_logged_out':
+                this.reset();
+                break;
+        }
+    }
+
+    _viewRoom(payload) {
+        // Always set the room ID if present
+        if (payload.room_id) {
+            this._setState({
+                roomId: payload.room_id,
+                roomLoading: false,
+                roomLoadError: null,
+            });
+        } else if (payload.room_alias) {
+            this._setState({
+                roomId: null,
+                roomAlias: payload.room_alias,
+                roomLoading: true,
+                roomLoadError: null,
+            });
+            MatrixClientPeg.get().getRoomIdForAlias(payload.room_alias).done(
+            (result) => {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: result.room_id,
+                    room_alias: payload.room_alias,
+                });
+            }, (err) => {
+                dis.dispatch({
+                    action: 'view_room_error',
+                    room_id: null,
+                    room_alias: payload.room_alias,
+                    err: err,
+                });
+            });
+        }
+    }
+
+    _viewRoomError(payload) {
+        this._setState({
+            roomId: payload.room_id,
+            roomAlias: payload.room_alias,
+            roomLoading: false,
+            roomLoadError: payload.err,
+        });
+    }
+
+    _joinRoom(payload) {
+        this._setState({
+            joining: true,
+        });
+        MatrixClientPeg.get().joinRoom(this._state.roomId, payload.opts).done(() => {
+            dis.dispatch({
+                action: 'joined_room',
+            });
+        }, (err) => {
+            dis.dispatch({
+                action: 'join_room_error',
+                err: err,
+            });
+            const msg = err.message ? err.message : JSON.stringify(err);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: _t("Failed to join room"),
+                description: msg,
+            });
+        });
+    }
+
+    _joinedRoom(payload) {
+        this._setState({
+            joining: false,
+        });
+    }
+
+    _joinRoomError(payload) {
+        this._setState({
+            joining: false,
+            joinError: payload.err,
+        });
+    }
+
+    reset() {
+        this._state = Object.assign({}, INITIAL_STATE);
+    }
+
+    getRoomId() {
+        return this._state.roomId;
+    }
+
+    getRoomAlias() {
+        return this._state.roomAlias;
+    }
+
+    isRoomLoading() {
+        return this._state.roomLoading;
+    }
+
+    getRoomLoadError() {
+        return this._state.roomLoadError;
+    }
+
+    isJoining() {
+        return this._state.joining;
+    }
+
+    getJoinError() {
+        return this._state.joinError;
+    }
+
+}
+
+let singletonRoomViewStore = null;
+if (!singletonRoomViewStore) {
+    singletonRoomViewStore = new RoomViewStore();
+}
+module.exports = singletonRoomViewStore;

src/stores/SessionStore.js

@@ -0,0 +1,88 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import dis from '../dispatcher';
+import {Store} from 'flux/utils';
+
+const INITIAL_STATE = {
+    cachedPassword: localStorage.getItem('mx_pass'),
+};
+
+/**
+ * A class for storing application state to do with the session. This is a simple flux
+ * store that listens for actions and updates its state accordingly, informing any
+ * listeners (views) of state changes.
+ *
+ * Usage:
+ *  ```
+ *  sessionStore.addListener(() => {
+ *   this.setState({ cachedPassword: sessionStore.getCachedPassword() })
+ *  })
+ *  ```
+ */
+class SessionStore extends Store {
+    constructor() {
+        super(dis);
+
+        // Initialise state
+        this._state = INITIAL_STATE;
+    }
+
+    _update() {
+        // Persist state to localStorage
+        if (this._state.cachedPassword) {
+            localStorage.setItem('mx_pass', this._state.cachedPassword);
+        } else {
+            localStorage.removeItem('mx_pass', this._state.cachedPassword);
+        }
+
+        this.__emitChange();
+    }
+
+    _setState(newState) {
+        this._state = Object.assign(this._state, newState);
+        this._update();
+    }
+
+    __onDispatch(payload) {
+        switch (payload.action) {
+            case 'cached_password':
+                this._setState({
+                    cachedPassword: payload.cachedPassword,
+                });
+                break;
+            case 'password_changed':
+                this._setState({
+                    cachedPassword: null,
+                });
+                break;
+            case 'on_logged_out':
+                this._setState({
+                    cachedPassword: null,
+                });
+                break;
+        }
+    }
+
+    getCachedPassword() {
+        return this._state.cachedPassword;
+    }
+}
+
+let singletonSessionStore = null;
+if (!singletonSessionStore) {
+    singletonSessionStore = new SessionStore();
+}
+module.exports = singletonSessionStore;

test/components/structures/RoomView-test.js

@@ -1,67 +0,0 @@
-var React = require('react');
-var expect = require('expect');
-var sinon = require('sinon');
-var ReactDOM = require("react-dom");
-
-var sdk = require('matrix-react-sdk');
-var RoomView = sdk.getComponent('structures.RoomView');
-var peg = require('../../../src/MatrixClientPeg');
-
-var test_utils = require('../../test-utils');
-var q = require('q');
-
-var Skinner = require("../../../src/Skinner");
-var stubComponent = require('../../components/stub-component.js');
-
-describe('RoomView', function () {
-    var sandbox;
-    var parentDiv;
-
-    beforeEach(function() {
-        test_utils.beforeEach(this);
-        sandbox = test_utils.stubClient();
-        parentDiv = document.createElement('div');
-
-        this.oldTimelinePanel = Skinner.getComponent('structures.TimelinePanel');
-        this.oldRoomHeader = Skinner.getComponent('views.rooms.RoomHeader');
-        Skinner.addComponent('structures.TimelinePanel', stubComponent());
-        Skinner.addComponent('views.rooms.RoomHeader', stubComponent());
-
-        peg.get().credentials = { userId: "@test:example.com" };
-    });
-
-    afterEach(function() {
-        sandbox.restore();
-
-        ReactDOM.unmountComponentAtNode(parentDiv);
-
-        Skinner.addComponent('structures.TimelinePanel', this.oldTimelinePanel);
-        Skinner.addComponent('views.rooms.RoomHeader', this.oldRoomHeader);
-    });
-
-    it('resolves a room alias to a room id', function (done) {
-        peg.get().getRoomIdForAlias.returns(q({room_id: "!randomcharacters:aser.ver"}));
-
-        function onRoomIdResolved(room_id) {
-            expect(room_id).toEqual("!randomcharacters:aser.ver");
-            done();
-        }
-
-        ReactDOM.render(<RoomView roomAddress="#alias:ser.ver" onRoomIdResolved={onRoomIdResolved} />, parentDiv);
-    });
-
-    it('joins by alias if given an alias', function (done) {
-        peg.get().getRoomIdForAlias.returns(q({room_id: "!randomcharacters:aser.ver"}));
-        peg.get().getProfileInfo.returns(q({displayname: "foo"}));
-        var roomView = ReactDOM.render(<RoomView roomAddress="#alias:ser.ver" />, parentDiv);
-
-        peg.get().joinRoom = function(x) {
-            expect(x).toEqual('#alias:ser.ver');
-            done();
-        };
-
-        process.nextTick(function() {
-            roomView.onJoinButtonClicked();
-        });
-    });
-});

test/components/structures/login/Registration-test.js

@@ -0,0 +1,105 @@
+/*
+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.
+*/
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactTestUtils = require('react-addons-test-utils');
+const expect = require('expect');
+
+const testUtils = require('test-utils');
+
+const sdk = require('matrix-react-sdk');
+const Registration = sdk.getComponent('structures.login.Registration');
+
+let rtsClient;
+let client;
+
+const TEAM_CONFIG = {
+    supportEmail: 'support@some.domain',
+    teamServerURL: 'http://someteamserver.bla',
+};
+
+const CREDENTIALS = {userId: '@me:here'};
+const MOCK_REG_RESPONSE = {
+    user_id: CREDENTIALS.userId,
+    device_id: 'mydevice',
+    access_token: '2234569864534231',
+};
+
+describe('Registration', function() {
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+        client = testUtils.createTestClient();
+        client.credentials = CREDENTIALS;
+
+        // Mock an RTS client that supports one team and naively returns team tokens when
+        // tracking by mapping email SIDs to team tokens. This is fine because we only
+        // want to assert the client behaviour such that a user recognised by the
+        // rtsClient (which would normally talk to the RTS server) as a team member is
+        // correctly logged in as one (and other such assertions).
+        rtsClient = testUtils.createTestRtsClient(
+            {
+                'myawesometeam123': {
+                    name: 'Team Awesome',
+                    domain: 'team.awesome.net',
+                },
+            },
+            {'someEmailSid1234': 'myawesometeam123'},
+        );
+    });
+
+    it('should track a referral following successful registration of a team member', function(done) {
+        const expectedCreds = {
+            userId: MOCK_REG_RESPONSE.user_id,
+            deviceId: MOCK_REG_RESPONSE.device_id,
+            homeserverUrl: client.getHomeserverUrl(),
+            identityServerUrl: client.getIdentityServerUrl(),
+            accessToken: MOCK_REG_RESPONSE.access_token,
+        };
+        const onLoggedIn = function(creds, teamToken) {
+            expect(creds).toEqual(expectedCreds);
+            expect(teamToken).toBe('myawesometeam123');
+            done();
+        };
+
+        const res = ReactTestUtils.renderIntoDocument(
+            <Registration
+                teamServerConfig={TEAM_CONFIG}
+                onLoggedIn={onLoggedIn}
+                rtsClient={rtsClient}
+            />,
+        );
+
+        res._onUIAuthFinished(true, MOCK_REG_RESPONSE, {emailSid: 'someEmailSid1234'});
+    });
+
+    it('should NOT track a referral following successful registration of a non-team member', function(done) {
+        const onLoggedIn = expect.createSpy().andCall(function(creds, teamToken) {
+            expect(teamToken).toNotExist();
+            done();
+        });
+
+        const res = ReactTestUtils.renderIntoDocument(
+            <Registration
+                teamServerConfig={TEAM_CONFIG}
+                onLoggedIn={onLoggedIn}
+                rtsClient={rtsClient}
+            />,
+        );
+
+        res._onUIAuthFinished(true, MOCK_REG_RESPONSE, {emailSid: 'someOtherEmailSid11'});
+    });
+});

test/components/views/login/RegistrationForm-test.js

@@ -0,0 +1,86 @@
+/*
+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.
+*/
+
+const React = require('react');
+const ReactDOM = require("react-dom");
+const ReactTestUtils = require('react-addons-test-utils');
+const expect = require('expect');
+
+const testUtils = require('test-utils');
+
+const sdk = require('matrix-react-sdk');
+const RegistrationForm = sdk.getComponent('views.login.RegistrationForm');
+
+const TEAM_CONFIG = {
+    supportEmail: "support@some.domain",
+    teams: [
+        { name: "The Team Org.", domain: "team.ac.uk" },
+        { name: "The Super Team", domain: "superteam.ac.uk" },
+    ],
+};
+
+function doInputEmail(inputEmail, onTeamSelected) {
+    const res = ReactTestUtils.renderIntoDocument(
+        <RegistrationForm
+            teamsConfig={TEAM_CONFIG}
+            onTeamSelected={onTeamSelected}
+        />,
+    );
+
+    const teamInput = res.refs.email;
+    teamInput.value = inputEmail;
+
+    ReactTestUtils.Simulate.change(teamInput);
+    ReactTestUtils.Simulate.blur(teamInput);
+
+    return res;
+}
+
+function expectTeamSelectedFromEmailInput(inputEmail, expectedTeam) {
+    const onTeamSelected = expect.createSpy();
+    doInputEmail(inputEmail, onTeamSelected);
+
+    expect(onTeamSelected).toHaveBeenCalledWith(expectedTeam);
+}
+
+function expectSupportFromEmailInput(inputEmail, isSupportShown) {
+    const onTeamSelected = expect.createSpy();
+    const res = doInputEmail(inputEmail, onTeamSelected);
+
+    expect(res.state.showSupportEmail).toBe(isSupportShown);
+}
+
+describe('RegistrationForm', function() {
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+    });
+
+    it('should select a team when a team email is entered', function() {
+        expectTeamSelectedFromEmailInput("member@team.ac.uk", TEAM_CONFIG.teams[0]);
+    });
+
+    it('should not select a team when an unrecognised team email is entered', function() {
+        expectTeamSelectedFromEmailInput("member@someunknownteam.ac.uk", null);
+    });
+
+    it('should show support when an unrecognised team email is entered', function() {
+        expectSupportFromEmailInput("member@someunknownteam.ac.uk", true);
+    });
+
+    it('should NOT show support when an unrecognised non-team email is entered', function() {
+        expectSupportFromEmailInput("someone@yahoo.com", false);
+    });
+});

test/stores/RoomViewStore-test.js

@@ -0,0 +1,59 @@
+import expect from 'expect';
+
+import dis from '../../src/dispatcher';
+import RoomViewStore from '../../src/stores/RoomViewStore';
+
+
+import peg from '../../src/MatrixClientPeg';
+
+import * as testUtils from '../test-utils';
+import q from 'q';
+
+const dispatch = testUtils.getDispatchForStore(RoomViewStore);
+
+describe('RoomViewStore', function() {
+    let sandbox;
+
+    beforeEach(function() {
+        testUtils.beforeEach(this);
+        sandbox = testUtils.stubClient();
+        peg.get().credentials = { userId: "@test:example.com" };
+
+        // Reset the state of the store
+        RoomViewStore.reset();
+    });
+
+    afterEach(function() {
+        sandbox.restore();
+    });
+
+    it('can be used to view a room by ID and join', function(done) {
+        peg.get().joinRoom = (roomId) => {
+            expect(roomId).toBe("!randomcharacters:aser.ver");
+            done();
+        };
+
+        dispatch({ action: 'view_room', room_id: '!randomcharacters:aser.ver' });
+        dispatch({ action: 'join_room' });
+        expect(RoomViewStore.isJoining()).toBe(true);
+    });
+
+    it('can be used to view a room by alias and join', function(done) {
+        peg.get().getRoomIdForAlias.returns(q({room_id: "!randomcharacters:aser.ver"}));
+        peg.get().joinRoom = (roomId) => {
+            expect(roomId).toBe("!randomcharacters:aser.ver");
+            done();
+        };
+
+        RoomViewStore.addListener(() => {
+            // Wait until the room alias has resolved and the room ID is
+            if (!RoomViewStore.isRoomLoading()) {
+                expect(RoomViewStore.getRoomId()).toBe("!randomcharacters:aser.ver");
+                dispatch({ action: 'join_room' });
+                expect(RoomViewStore.isJoining()).toBe(true);
+            }
+        });
+
+        dispatch({ action: 'view_room', room_alias: '#somealias2:aser.ver' });
+    });
+});

test/test-utils.js

@@ -4,7 +4,8 @@ import sinon from 'sinon';
 import q from 'q';
 import ReactTestUtils from 'react-addons-test-utils';
 
-import peg from '../src/MatrixClientPeg.js';
+import peg from '../src/MatrixClientPeg';
+import dis from '../src/dispatcher';
 import jssdk from 'matrix-js-sdk';
 const MatrixEvent = jssdk.MatrixEvent;
 
@@ -133,6 +134,21 @@ export function createTestClient() {
         sendHtmlMessage: () => q({}),
         getSyncState: () => "SYNCING",
         generateClientSecret: () => "t35tcl1Ent5ECr3T",
+        isGuest: () => false,
+    };
+}
+
+export function createTestRtsClient(teamMap, sidMap) {
+    return {
+        getTeamsConfig() {
+            return q(Object.keys(teamMap).map((token) => teamMap[token]));
+        },
+        trackReferral(referrer, emailSid, clientSecret) {
+            return q({team_token: sidMap[emailSid]});
+        },
+        getTeam(teamToken) {
+            return q(teamMap[teamToken]);
+        },
     };
 }
 
@@ -275,3 +291,13 @@ export function mkStubRoom(roomId = null) {
         },
     };
 }
+
+export function getDispatchForStore(store) {
+    // Mock the dispatcher by gut-wrenching. Stores can only __emitChange whilst a
+    // dispatcher `_isDispatching` is true.
+    return (payload) => {
+        dis._isDispatching = true;
+        dis._callbacks[store._dispatchToken](payload);
+        dis._isDispatching = false;
+    };
+}