Merge pull request #937 from matrix-org/new-guest-access

New guest access

.gitignore

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

package.json

@@ -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/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);
@@ -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);

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";
@@ -102,9 +105,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.
@@ -191,6 +191,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
@@ -322,7 +325,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':
@@ -374,6 +376,11 @@ module.exports = React.createClass({
                 });
                 this.notifyNewScreen('forgot_password');
                 break;
+            case 'start_chat':
+                createRoom({
+                    dmUserId: payload.user_id,
+                });
+                break;
             case 'leave_room':
                 this._leaveRoom(payload.room_id);
                 break;
@@ -434,37 +441,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;
@@ -533,6 +539,10 @@ module.exports = React.createClass({
         }
     },
 
+    _onRoomViewStoreUpdated: function() {
+        this.setState({ currentRoomId: RoomViewStore.getRoomId() });
+    },
+
     _setPage: function(pageType) {
         this.setState({
             page_type: pageType,
@@ -555,6 +565,7 @@ module.exports = React.createClass({
         this.notifyNewScreen('register');
     },
 
+    // TODO: Move to RoomViewStore
     _viewNextRoom: function(roomIndexDelta) {
         const allRooms = RoomListSorter.mostRecentActivityFirst(
             MatrixClientPeg.get().getRooms(),
@@ -568,15 +579,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,
+            });
         }
     },
 
@@ -660,7 +678,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'),
@@ -670,6 +722,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, {
@@ -703,7 +830,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) => {
@@ -798,12 +925,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();
         }
@@ -825,12 +967,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'});
         }
     },
 
@@ -844,7 +982,6 @@ module.exports = React.createClass({
             ready: false,
             collapse_lhs: false,
             collapse_rhs: false,
-            currentRoomAlias: null,
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });
@@ -882,6 +1019,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;
@@ -951,6 +1094,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',
@@ -994,6 +1142,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);
@@ -1090,6 +1244,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;
@@ -1159,13 +1315,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;
@@ -1207,9 +1356,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/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: RoomViewStore.getRoomId(),
-                    roomId: result.room_id,
+            roomAlias: RoomViewStore.getRoomAlias(),
-                    roomLoading: !room,
+            roomLoading: RoomViewStore.isRoomLoading(),
-                    unsentMessageError: this._getUnsentMessageError(room),
+            roomLoadError: RoomViewStore.getRoomLoadError(),
-                }, this._onHaveRoom);
+            joining: RoomViewStore.isJoining(),
-            }, (err) => {
+        }, () => {
-                this.setState({
+            this._onHaveRoom();
-                    roomLoading: false,
+            this.onRoom(MatrixClientPeg.get().getRoom(this.state.roomId));
-                    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);
-        }
     },
 
     _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);
-        }
+        });
     },
 
     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),
 
@@ -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();
+            // Don't peek whilst registering otherwise getPendingEventList complains
-                    Modal.createDialog(SetDisplayNameDialog, {
+            // Do this by indicating our intention to join
-                        currentDisplayName: result.displayname,
+            dis.dispatch({
-                        onFinished: (submitted, newDisplayName) => {
+                action: 'will_join',
+            });
+
+            const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
+            const close = Modal.createDialog(SetMxIdDialog, {
+                homeserverUrl: cli.getHomeserverUrl(),
+                onFinished: (submitted, credentials) => {
                     if (submitted) {
-                                cli.setDisplayName(newDisplayName).done(() => {
+                        this.props.onRegistered(credentials);
-                                    dialog_defer.resolve();
+                    } else {
+                        dis.dispatch({
+                            action: 'cancel_after_sync_prepared',
+                        });
+                        dis.dispatch({
+                            action: 'cancel_join',
                         });
                     }
-                            else {
+                },
-                                dialog_defer.reject();
+                onDifferentServerClicked: (ev) => {
-                            }
+                    dis.dispatch({action: 'start_registration'});
-                        }
+                    close();
-                    });
+                },
-                    return dialog_defer.promise;
+                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/UserSettings.js

@@ -311,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;
         }
 
@@ -395,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() {
@@ -807,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;
                         }
 

src/components/structures/login/Registration.js

@@ -97,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,
@@ -220,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}
-                    />
+                    />,
                 );
             }
         }
 
+        this.setState({
+            tiles: tiles,
+        });
+
+        if (tiles.length === 0) {
+            this.setState({
+                busyProfile: true,
+            });
+            MatrixClientPeg.get().getProfileInfo(this.props.userId).done((resp) => {
+                const profile = {
+                    displayName: resp.displayname,
+                    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.onNewDMClick}
+                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>
+                <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

@@ -92,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);
@@ -267,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/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/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/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/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/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/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/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,20 +272,20 @@ 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");
@@ -277,7 +294,22 @@ module.exports = React.createClass({
 
         // 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() {
@@ -431,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;
@@ -452,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 }
@@ -465,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 }
@@ -479,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 }
@@ -494,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 }
@@ -510,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) => {
@@ -127,44 +163,50 @@ module.exports = React.createClass({
     },
 
     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;
 
-        switch (this.state.phase) {
+        let currentPassword = null;
-            case this.Phases.Edit:
+        if (!this.state.cachedPassword) {
-                return (
+            currentPassword = <div className={rowClassName}>
-                    <div className={this.props.className}>
-                        <div className={rowClassName}>
                 <div className={rowLabelClassName}>
-                                <label htmlFor="passwordold">{ _t('Current password') }</label>
+                    <label htmlFor="passwordold">Current password</label>
                 </div>
                 <div className={rowInputClassName}>
                     <input id="passwordold" type="password" ref="old_input" />
                 </div>
-                        </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="password1">{ _t('New password') }</label>
+                                <label htmlFor="password1">{ passwordLabel }</label>
                             </div>
                             <div className={rowInputClassName}>
-                                <input id="password1" type="password" ref="new_input" />
+                                <input id="password1" type="password" ref="new_input" autoFocus={this.props.autoFocusNewPasswordInput} />
                             </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
+        if (opts.andView) {
             dis.dispatch({
                 action: 'view_room',
-            room_id: roomId
+                room_id: roomId,
             });
+        }
         return roomId;
     }, function(err) {
         console.error("Failed to create room " + roomId + " " + err);

src/i18n/strings/en_EN.json

@@ -740,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",
@@ -749,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",
@@ -758,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.",
@@ -822,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)",
@@ -835,8 +841,21 @@
   "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"
+  "%(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."
 }

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;
+    };
+}