Merge branch 'develop' into skindex-nextgen

package.json

@@ -32,6 +32,7 @@
     "q": "^1.4.1",
     "react": "^0.14.2",
     "react-dom": "^0.14.2",
+    "react-gemini-scrollbar": "^2.0.1",
     "sanitize-html": "^1.11.1",
     "velocity-animate": "^1.2.3"
   },

src/CallHandler.js

@@ -56,12 +56,12 @@ var Modal = require('./Modal');
 var sdk = require('./index');
 var Matrix = require("matrix-js-sdk");
 var dis = require("./dispatcher");
-var Modulator = require("./Modulator");
 
 global.mxCalls = {
     //room_id: MatrixCall
 };
 var calls = global.mxCalls;
+var ConferenceHandler = null;
 
 function play(audioId) {
     // TODO: Attach an invisible element for this instead
@@ -115,7 +115,7 @@ function _setCallListeners(call) {
             _setCallState(call, call.roomId, "busy");
             pause("ringbackAudio");
             play("busyAudio");
-            var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
                 title: "Call Timeout",
                 description: "The remote side failed to pick up."
@@ -173,7 +173,7 @@ function _onAction(payload) {
             console.error("Unknown conf call type: %s", payload.type);
         }
     }
-    var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
     switch (payload.action) {
         case 'place_call':
@@ -202,7 +202,7 @@ function _onAction(payload) {
 
             var members = room.getJoinedMembers();
             if (members.length <= 1) {
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     description: "You cannot place a call with yourself."
                 });
@@ -227,7 +227,7 @@ function _onAction(payload) {
             break;
         case 'place_conference_call':
             console.log("Place conference call in %s", payload.room_id);
-            if (!Modulator.hasConferenceHandler()) {
+            if (!ConferenceHandler) {
                 Modal.createDialog(ErrorDialog, {
                     description: "Conference calls are not supported in this client"
                 });
@@ -239,7 +239,6 @@ function _onAction(payload) {
                 });
             }
             else {
-                var ConferenceHandler = Modulator.getConferenceHandler();
                 ConferenceHandler.createNewMatrixCall(
                     MatrixClientPeg.get(), payload.room_id
                 ).done(function(call) {
@@ -295,8 +294,7 @@ var callHandler = {
         var call = module.exports.getCall(roomId);
         if (call) return call;
 
-        if (Modulator.hasConferenceHandler()) {
+        if (ConferenceHandler) {
-            var ConferenceHandler = Modulator.getConferenceHandler();
             call = ConferenceHandler.getConferenceCallForRoom(roomId);
         }
         if (call) return call;
@@ -317,6 +315,10 @@ var callHandler = {
             }
         }
         return null;
+    },
+
+    setConferenceHandler: function(confHandler) {
+        ConferenceHandler = confHandler;
     }
 };
 // Only things in here which actually need to be global are the

src/DateUtils.js

@@ -0,0 +1,45 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+module.exports = {
+    formatDate: function(date) {
+        // date.toLocaleTimeString is completely system dependent.
+        // just go 24h for now
+        function pad(n) {
+            return (n < 10 ? '0' : '') + n;
+        }
+
+        var now = new Date();
+        if (date.toDateString() === now.toDateString()) {
+            return pad(date.getHours()) + ':' + pad(date.getMinutes());
+        }
+        else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+        }
+        else if (now.getFullYear() === date.getFullYear()) {
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+        }
+        else {
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+        }
+    }
+}
+

src/Modulator.js

@@ -1,111 +0,0 @@
-/*
-Copyright 2015 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.
-*/
-
-/**
- * The modulator stores 'modules': classes that provide
- * functionality and are not React UI components.
- * Modules go into named slots, eg. a conference calling
- * module goes into the 'conference' slot. If two modules
- * that use the same slot are loaded, this is considered
- * to be an error.
- *
- * There are some module slots that the react SDK knows
- * about natively: these have explicit getters.
- *
- * A module must define:
- *  - 'slot' (string): The name of the slot it goes into
- * and may define:
- *  - 'start' (function): Called on module load
- *  - 'stop' (function): Called on module unload
- */
-class Modulator {
-    constructor() {
-        this.modules = {};
-    }
-
-    getModule(name) {
-        var m = this.getModuleOrNull(name);
-        if (m === null) {
-            throw new Error("No such module: "+name);
-        }
-        return m;
-    }
-
-    getModuleOrNull(name) {
-        if (this.modules == {}) {
-            throw new Error(
-                "Attempted to get a module before a skin has been loaded."+
-                "This is probably because a component has called "+
-                "getModule at the root level."
-            );
-        }
-        var module = this.modules[name];
-        if (module) {
-            return module;
-        }
-        return null;
-    }
-
-    hasModule(name) {
-        var m = this.getModuleOrNull(name);
-        return m !== null;
-    }
-
-    loadModule(moduleObject) {
-        if (!moduleObject.slot) {
-            throw new Error(
-                "Attempted to load something that is not a module "+
-                "(does not have a slot name)"
-            );
-        }
-        if (this.modules[moduleObject.slot] !== undefined) {
-            throw new Error(
-                "Cannot load module: slot '"+moduleObject.slot+"' is occupied!"
-            );
-        }
-        this.modules[moduleObject.slot] = moduleObject;
-    }
-
-    reset() {
-        var keys = Object.keys(this.modules);
-        for (var i = 0; i < keys.length; ++i) {
-            var k = keys[i];
-            var m = this.modules[k];
-
-            if (m.stop) m.stop();
-        }
-        this.modules = {};
-    }
-
-    // ***********
-    // known slots
-    // ***********
-
-    getConferenceHandler() {
-        return this.getModule('conference');
-    }
-
-    hasConferenceHandler() {
-        return this.hasModule('conference');
-    }
-}
-
-// Define one Modulator globally (see Skinner.js)
-if (global.mxModulator === undefined) {
-    global.mxModulator = new Modulator();
-}
-module.exports = global.mxModulator;
-

src/Notifier.js

@@ -16,8 +16,10 @@ limitations under the License.
 
 'use strict';
 
-var MatrixClientPeg = require("../../MatrixClientPeg");
+var MatrixClientPeg = require("./MatrixClientPeg");
-var dis = require("../../dispatcher");
+var TextForEvent = require('./TextForEvent');
+var Avatar = require('./Avatar');
+var dis = require("./dispatcher");
 
 /*
  * Dispatches:
@@ -28,10 +30,76 @@ var dis = require("../../dispatcher");
  */
 
 module.exports = {
+
+    notificationMessageForEvent: function(ev) {
+        return TextForEvent.textForEvent(ev);
+    },
+
+    displayNotification: function(ev, room) {
+        if (!global.Notification || global.Notification.permission != 'granted') {
+            return;
+        }
+        if (global.document.hasFocus()) {
+            return;
+        }
+
+        var msg = this.notificationMessageForEvent(ev);
+        if (!msg) return;
+
+        var title;
+        if (!ev.sender ||  room.name == ev.sender.name) {
+            title = room.name;
+            // notificationMessageForEvent includes sender,
+            // but we already have the sender here
+            if (ev.getContent().body) msg = ev.getContent().body;
+        } else if (ev.getType() == 'm.room.member') {
+            // context is all in the message here, we don't need
+            // to display sender info
+            title = room.name;
+        } else if (ev.sender) {
+            title = ev.sender.name + " (" + room.name + ")";
+            // notificationMessageForEvent includes sender,
+            // but we've just out sender in the title
+            if (ev.getContent().body) msg = ev.getContent().body;
+        }
+
+        var avatarUrl = ev.sender ? Avatar.avatarUrlForMember(
+            ev.sender, 40, 40, 'crop'
+        ) : null;
+
+        var notification = new global.Notification(
+            title,
+            {
+                "body": msg,
+                "icon": avatarUrl,
+                "tag": "matrixreactsdk"
+            }
+        );
+
+        notification.onclick = function() {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: room.roomId
+            });
+            global.focus();
+        };
+        
+        /*var audioClip;
+        
+        if (audioNotification) {
+            audioClip = playAudio(audioNotification);
+        }*/
+
+        global.setTimeout(function() {
+            notification.close();
+        }, 5 * 1000);
+        
+    },
+
     start: function() {
         this.boundOnRoomTimeline = this.onRoomTimeline.bind(this);
         MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
-        this.state = { 'toolbarHidden' : false };
+        this.toolbarHidden = false;
     },
 
     stop: function() {
@@ -96,7 +164,7 @@ module.exports = {
     },
 
     setToolbarHidden: function(hidden) {
-        this.state.toolbarHidden = hidden;
+        this.toolbarHidden = hidden;
         dis.dispatch({
             action: "notifier_enabled",
             value: this.isEnabled()
@@ -104,7 +172,7 @@ module.exports = {
     },
 
     isToolbarHidden: function() {
-        return this.state.toolbarHidden;
+        return this.toolbarHidden;
     },
 
     onRoomTimeline: function(ev, room, toStartOfTimeline) {

src/Resend.js

@@ -0,0 +1,24 @@
+var MatrixClientPeg = require('./MatrixClientPeg');
+var dis = require('./dispatcher');
+
+module.exports = {
+    resend: function(event) {
+        MatrixClientPeg.get().resendEvent(
+            event, MatrixClientPeg.get().getRoom(event.getRoomId())
+        ).done(function() {
+            dis.dispatch({
+                action: 'message_sent',
+                event: event
+            });
+        }, function() {
+            dis.dispatch({
+                action: 'message_send_failed',
+                event: event
+            });
+        });
+        dis.dispatch({
+            action: 'message_resend_started',
+            event: event
+        });
+    },
+};

src/components/structures/CreateRoom.js

@@ -0,0 +1,290 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var PresetValues = {
+    PrivateChat: "private_chat",
+    PublicChat: "public_chat",
+    Custom: "custom",
+};
+var q = require('q');
+var encryption = require("../../encryption");
+var sdk = require('../../index');
+
+module.exports = React.createClass({
+    displayName: 'CreateRoom',
+
+    propTypes: {
+        onRoomCreated: React.PropTypes.func,
+    },
+
+    phases: {
+        CONFIG: "CONFIG",  // We're waiting for user to configure and hit create.
+        CREATING: "CREATING",  // We're sending the request.
+        CREATED: "CREATED",  // We successfully created the room.
+        ERROR: "ERROR",  // There was an error while trying to create room.
+    },
+
+    getDefaultProps: function() {
+        return {
+            onRoomCreated: function() {},
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            phase: this.phases.CONFIG,
+            error_string: "",
+            is_private: true,
+            share_history: false,
+            default_preset: PresetValues.PrivateChat,
+            topic: '',
+            room_name: '',
+            invited_users: [],
+        };
+    },
+
+    onCreateRoom: function() {
+        var options = {};
+
+        if (this.state.room_name) {
+            options.name = this.state.room_name;
+        }
+
+        if (this.state.topic) {
+            options.topic = this.state.topic;
+        }
+
+        if (this.state.preset) {
+            if (this.state.preset != PresetValues.Custom) {
+                options.preset = this.state.preset;
+            } else {
+                options.initial_state = [
+                    {
+                        type: "m.room.join_rules",
+                        content: {
+                            "join_rule": this.state.is_private ? "invite" : "public"
+                        }
+                    },
+                    {
+                        type: "m.room.history_visibility",
+                        content: {
+                            "history_visibility": this.state.share_history ? "shared" : "invited"
+                        }
+                    },
+                ];
+            }
+        }
+
+        options.invite = this.state.invited_users;
+
+        var alias = this.getAliasLocalpart();
+        if (alias) {
+            options.room_alias_name = alias;
+        }
+
+        var cli = MatrixClientPeg.get();
+        if (!cli) {
+            // TODO: Error.
+            console.error("Cannot create room: No matrix client.");
+            return;
+        }
+
+        var deferred = cli.createRoom(options);
+
+        var response;
+
+        if (this.state.encrypt) {
+            deferred = deferred.then(function(res) {
+                response = res;
+                return encryption.enableEncryption(
+                    cli, response.room_id, options.invite
+                );
+            }).then(function() {
+                return q(response) }
+            );
+        }
+
+        this.setState({
+            phase: this.phases.CREATING,
+        });
+
+        var self = this;
+
+        deferred.then(function (resp) {
+            self.setState({
+                phase: self.phases.CREATED,
+            });
+            self.props.onRoomCreated(resp.room_id);
+        }, function(err) {
+            self.setState({
+                phase: self.phases.ERROR,
+                error_string: err.toString(),
+            });
+        });
+    },
+
+    getPreset: function() {
+        return this.refs.presets.getPreset();
+    },
+
+    getName: function() {
+        return this.refs.name_textbox.getName();
+    },
+
+    getTopic: function() {
+        return this.refs.topic.getTopic();
+    },
+
+    getAliasLocalpart: function() {
+        return this.refs.alias.getAliasLocalpart();
+    },
+
+    getInvitedUsers: function() {
+        return this.refs.user_selector.getUserIds();
+    },
+
+    onPresetChanged: function(preset) {
+        switch (preset) {
+            case PresetValues.PrivateChat:
+                this.setState({
+                    preset: preset,
+                    is_private: true,
+                    share_history: false,
+                });
+                break;
+            case PresetValues.PublicChat:
+                this.setState({
+                    preset: preset,
+                    is_private: false,
+                    share_history: true,
+                });
+                break;
+            case PresetValues.Custom:
+                this.setState({
+                    preset: preset,
+                });
+                break;
+        }
+    },
+
+    onPrivateChanged: function(ev) {
+        this.setState({
+            preset: PresetValues.Custom,
+            is_private: ev.target.checked,
+        });
+    },
+
+    onShareHistoryChanged: function(ev) {
+        this.setState({
+            preset: PresetValues.Custom,
+            share_history: ev.target.checked,
+        });
+    },
+
+    onTopicChange: function(ev) {
+        this.setState({
+            topic: ev.target.value,
+        });
+    },
+
+    onNameChange: function(ev) {
+        this.setState({
+            room_name: ev.target.value,
+        });
+    },
+
+    onInviteChanged: function(invited_users) {
+        this.setState({
+            invited_users: invited_users,
+        });
+    },
+
+    onAliasChanged: function(alias) {
+        this.setState({
+            alias: alias
+        })
+    },
+
+    onEncryptChanged: function(ev) {
+        this.setState({
+            encrypt: ev.target.checked,
+        });
+    },
+
+    render: function() {
+        var curr_phase = this.state.phase;
+        if (curr_phase == this.phases.CREATING) {
+            var Loader = sdk.getComponent("elements.Spinner");
+            return (
+                <Loader/>
+            );
+        } else {
+            var error_box = "";
+            if (curr_phase == this.phases.ERROR) {
+                error_box = (
+                    <div className="mx_Error">
+                        An error occured: {this.state.error_string}
+                    </div>
+                );
+            }
+
+            var CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
+            var RoomAlias = sdk.getComponent("create_room.RoomAlias");
+            var Presets = sdk.getComponent("create_room.Presets");
+            var UserSelector = sdk.getComponent("elements.UserSelector");
+            var RoomHeader = sdk.getComponent("rooms.RoomHeader");
+
+            return (
+            <div className="mx_CreateRoom">
+                <RoomHeader simpleHeader="Create room" />
+                <div className="mx_CreateRoom_body">
+                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
+                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
+                    <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
+                    <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
+                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
+                    <div>
+                        <label>
+                            <input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/>
+                            Make this room private
+                        </label>
+                    </div>
+                    <div>
+                        <label>
+                            <input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/>
+                            Share message history with new users
+                        </label>
+                    </div>
+                    <div className="mx_CreateRoom_encrypt">
+                        <label>
+                            <input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/>
+                            Encrypt room
+                        </label>
+                    </div>
+                    <div>
+                        <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
+                    </div>
+                    {error_box}
+                </div>
+            </div>
+            );
+        }
+    }
+});

src/components/structures/MatrixChat.js

@@ -13,20 +13,36 @@ 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.
 */
+var React = require('react');
+var Matrix = require("matrix-js-sdk");
+var url = require('url');
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
+var Notifier = require("../../Notifier");
+var ContextualMenu = require("../../ContextualMenu");
 var RoomListSorter = require("../../RoomListSorter");
 var UserActivity = require("../../UserActivity");
 var Presence = require("../../Presence");
 var dis = require("../../dispatcher");
 
+var Login = require("./login/Login");
+var Registration = require("./login/Registration");
+var PostRegistration = require("./login/PostRegistration");
+
 var sdk = require('../../index');
 var MatrixTools = require('../../MatrixTools');
 var linkifyMatrix = require("../../linkify-matrix");
 
-var url = require('url');
+module.exports = React.createClass({
+    displayName: 'MatrixChat',
+
+    propTypes: {
+        config: React.PropTypes.object.isRequired,
+        ConferenceHandler: React.PropTypes.any,
+        onNewScreen: React.PropTypes.func,
+        registrationUrl: React.PropTypes.string
+    },
 
-module.exports = {
     PageTypes: {
         RoomView: "room_view",
         UserSettings: "user_settings",
@@ -44,6 +60,7 @@ module.exports = {
             collapse_lhs: false,
             collapse_rhs: false,
             ready: false,
+            width: 10000
         };
         if (s.logged_in) {
             if (MatrixClientPeg.get().getRooms().length) {
@@ -79,12 +96,16 @@ module.exports = {
         if (this.onUserClick) {
             linkifyMatrix.onUserClick = this.onUserClick;
         }
+
+        window.addEventListener('resize', this.handleResize);
+        this.handleResize();
     },
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
         document.removeEventListener("keydown", this.onKeyDown);
         window.removeEventListener("focus", this.onFocus);
+        window.removeEventListener('resize', this.handleResize);
     },
 
     componentDidUpdate: function() {
@@ -96,7 +117,6 @@ module.exports = {
 
     onAction: function(payload) {
         var roomIndexDelta = 1;
-        var Notifier = sdk.getComponent('organisms.Notifier');
 
         var self = this;
         switch (payload.action) {
@@ -317,7 +337,6 @@ module.exports = {
     },
 
     startMatrixClient: function() {
-        var Notifier = sdk.getComponent('organisms.Notifier');
         var cli = MatrixClientPeg.get();
         var self = this;
         cli.on('sync', function(state) {
@@ -468,5 +487,181 @@ module.exports = {
         if (this.props.onNewScreen) {
             this.props.onNewScreen(screen);
         }
+    },
+
+    onAliasClick: function(event, alias) {
+        event.preventDefault();
+        dis.dispatch({action: 'view_room_alias', room_alias: alias});
+    },
+
+    onUserClick: function(event, userId) {
+        event.preventDefault();
+        var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+        var member = new Matrix.RoomMember(null, userId);
+        ContextualMenu.createMenu(MemberInfo, {
+            member: member,
+            right: window.innerWidth - event.pageX,
+            top: event.pageY
+        });
+    },
+
+    onLogoutClick: function(event) {
+        dis.dispatch({
+            action: 'logout'
+        });
+        event.stopPropagation();
+        event.preventDefault();
+    },
+
+    handleResize: function(e) {
+        var hideLhsThreshold = 1000;
+        var showLhsThreshold = 1000;
+        var hideRhsThreshold = 820;
+        var showRhsThreshold = 820;
+
+        if (this.state.width > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
+            dis.dispatch({ action: 'hide_left_panel' });
+        }
+        if (this.state.width <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
+            dis.dispatch({ action: 'show_left_panel' });
+        }
+        if (this.state.width > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) {
+            dis.dispatch({ action: 'hide_right_panel' });
+        }
+        if (this.state.width <= showRhsThreshold && window.innerWidth > showRhsThreshold) {
+            dis.dispatch({ action: 'show_right_panel' });
+        }
+
+        this.setState({width: window.innerWidth});
+    },
+
+    onRoomCreated: function(room_id) {
+        dis.dispatch({
+            action: "view_room",
+            room_id: room_id,
+        });
+    },
+
+    onRegisterClick: function() {
+        this.showScreen("register");
+    },
+
+    onLoginClick: function() {
+        this.showScreen("login");
+    },
+
+    onRegistered: function(credentials) {
+        this.onLoggedIn(credentials);
+        // do post-registration stuff
+        this.showScreen("post_registration");
+    },
+
+    onFinishPostRegistration: function() {
+        // Don't confuse this with "PageType" which is the middle window to show
+        this.setState({
+            screen: undefined
+        });
+        this.showScreen("settings");
+    },
+
+    render: function() {
+        var LeftPanel = sdk.getComponent('organisms.LeftPanel');
+        var RoomView = sdk.getComponent('structures.RoomView');
+        var RightPanel = sdk.getComponent('organisms.RightPanel');
+        var UserSettings = sdk.getComponent('structures.UserSettings');
+        var CreateRoom = sdk.getComponent('structures.CreateRoom');
+        var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
+        var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
+
+        // needs to be before normal PageTypes as you are logged in technically
+        if (this.state.screen == 'post_registration') {
+            return (
+                <PostRegistration
+                    onComplete={this.onFinishPostRegistration} />
+            );
+        }
+        else if (this.state.logged_in && this.state.ready) {
+            var page_element;
+            var right_panel = "";
+
+            switch (this.state.page_type) {
+                case this.PageTypes.RoomView:
+                    page_element = (
+                        <RoomView
+                            roomId={this.state.currentRoom}
+                            key={this.state.currentRoom}
+                            ConferenceHandler={this.props.ConferenceHandler} />
+                    );
+                    right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
+                    break;
+                case this.PageTypes.UserSettings:
+                    page_element = <UserSettings />
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    break;
+                case this.PageTypes.CreateRoom:
+                    page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    break;
+                case this.PageTypes.RoomDirectory:
+                    page_element = <RoomDirectory />
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    break;
+            }
+
+            // TODO: Fix duplication here and do conditionals like we do above
+            if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
+                return (
+                        <div className="mx_MatrixChat_wrapper">
+                            <MatrixToolbar />
+                            <div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
+                                <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
+                                <main className="mx_MatrixChat_middlePanel">
+                                    {page_element}
+                                </main>
+                                {right_panel}
+                            </div>
+                        </div>
+                );
+            }
+            else {
+                return (
+                        <div className="mx_MatrixChat">
+                            <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
+                            <main className="mx_MatrixChat_middlePanel">
+                                {page_element}
+                            </main>
+                            {right_panel}
+                        </div>
+                );
+            }
+        } else if (this.state.logged_in) {
+            var Spinner = sdk.getComponent('elements.Spinner');
+            return (
+                <div className="mx_MatrixChat_splash">
+                    <Spinner />
+                    <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>Logout</a>
+                </div>
+            );
+        } else if (this.state.screen == 'register') {
+            return (
+                <Registration
+                    clientSecret={this.state.register_client_secret}
+                    sessionId={this.state.register_session_id}
+                    idSid={this.state.register_id_sid}
+                    hsUrl={this.props.config.default_hs_url}
+                    isUrl={this.props.config.default_is_url}
+                    registrationUrl={this.props.registrationUrl}
+                    onLoggedIn={this.onRegistered}
+                    onLoginClick={this.onLoginClick} />
+            );
+        } else {
+            return (
+                <Login
+                    onLoggedIn={this.onLoggedIn}
+                    onRegisterClick={this.onRegisterClick}
+                    homeserverUrl={this.props.config.default_hs_url}
+                    identityServerUrl={this.props.config.default_is_url} />
+            );
+        }
     }
-};
+});

src/components/structures/UserSettings.js

@@ -0,0 +1,162 @@
+/*
+Copyright 2015 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.
+*/
+var React = require('react');
+var sdk = require('../../index');
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Modal = require('../../Modal');
+var q = require('q');
+var version = require('../../../package.json').version;
+
+module.exports = React.createClass({
+    displayName: 'UserSettings',
+    Phases: {
+        Loading: "loading",
+        Display: "display",
+    },
+
+    getInitialState: function() {
+        return {
+            avatarUrl: null,
+            threePids: [],
+            clientVersion: version,
+            phase: this.Phases.Loading,
+        };
+    },
+
+    componentWillMount: function() {
+        var self = this;
+        var cli = MatrixClientPeg.get();
+
+        var profile_d = cli.getProfileInfo(cli.credentials.userId);
+        var threepid_d = cli.getThreePids();
+
+        q.all([profile_d, threepid_d]).then(
+            function(resps) {
+                self.setState({
+                    avatarUrl: resps[0].avatar_url,
+                    threepids: resps[1].threepids,
+                    phase: self.Phases.Display,
+                });
+            },
+            function(err) { console.err(err); }
+        );
+    },
+
+    editAvatar: function() {
+        var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        var avatarDialog = (
+            <div>
+                <ChangeAvatar initialAvatarUrl={url} />
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onAvatarDialogCancel}>Cancel</button>
+                </div>
+            </div>
+        );
+        this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
+    },
+
+    addEmail: function() {
+
+    },
+
+    editDisplayName: function() {
+        this.refs.displayname.edit();
+    },
+
+    changePassword: function() {
+        var ChangePassword = sdk.getComponent('settings.ChangePassword');
+        Modal.createDialog(ChangePassword);
+    },
+
+    onLogoutClicked: function(ev) {
+        var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
+        this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
+    },
+
+    onLogoutPromptCancel: function() {
+        this.logoutModal.closeDialog();
+    },
+
+    onAvatarDialogCancel: function() {
+        this.avatarDialog.close();
+    },
+
+    render: function() {
+        var Loader = sdk.getComponent("elements.Spinner");
+        if (this.state.phase === this.Phases.Loading) {
+            return <Loader />
+        }
+        else if (this.state.phase === this.Phases.Display) {
+            var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
+            var EnableNotificationsButton = sdk.getComponent('settings.EnableNotificationsButton');
+            return (
+            <div className="mx_UserSettings">
+                <div className="mx_UserSettings_User">
+                    <h1>User Settings</h1>
+                    <hr/>
+                    <div className="mx_UserSettings_User_Inner">
+                        <div className="mx_UserSettings_Avatar">
+                            <div className="mx_UserSettings_Avatar_Text">
+                                Profile Photo
+                            </div>
+                            <div className="mx_UserSettings_Avatar_Edit" onClick={this.editAvatar}>
+                                Edit
+                            </div>
+                        </div>
+
+                        <div className="mx_UserSettings_DisplayName">
+                            <ChangeDisplayName ref="displayname" />
+                            <div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>
+                                Edit
+                            </div>
+                        </div>
+
+                        <div className="mx_UserSettings_3pids">
+                            {this.state.threepids.map(function(val) {
+                                return <div key={val.address}>{val.address}</div>;
+                            })}
+                        </div>
+
+                        <div className="mx_UserSettings_Add3pid" onClick={this.addEmail}>
+                            Add email
+                        </div>
+                    </div>
+                </div>
+
+                <div className="mx_UserSettings_Global">
+                    <h1>Global Settings</h1>
+                    <hr/>
+                    <div className="mx_UserSettings_Global_Inner">
+                        <div className="mx_UserSettings_ChangePassword" onClick={this.changePassword}>
+                            Change Password
+                        </div>
+                        <div className="mx_UserSettings_ClientVersion">
+                            Version {this.state.clientVersion}
+                        </div>
+                        <div className="mx_UserSettings_EnableNotifications">
+                            <EnableNotificationsButton />
+                        </div>
+                        <div className="mx_UserSettings_Logout">
+                            <button onClick={this.onLogoutClicked}>Sign Out</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            );
+        }
+    }
+});

src/components/structures/login/Login.js

@@ -0,0 +1,199 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var sdk = require('../../../index');
+var Signup = require("../../../Signup");
+var PasswordLogin = require("../../views/login/PasswordLogin");
+var CasLogin = require("../../views/login/CasLogin");
+var ServerConfig = require("../../views/login/ServerConfig");
+
+/**
+ * A wire component which glues together login UI components and Signup logic
+ */
+module.exports = React.createClass({displayName: 'Login',
+    propTypes: {
+        onLoggedIn: React.PropTypes.func.isRequired,
+        homeserverUrl: React.PropTypes.string,
+        identityServerUrl: React.PropTypes.string,
+        // login shouldn't know or care how registration is done.
+        onRegisterClick: React.PropTypes.func.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            homeserverUrl: 'https://matrix.org/',
+            identityServerUrl: 'https://matrix.org'
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+            errorText: null,
+            enteredHomeserverUrl: this.props.homeserverUrl,
+            enteredIdentityServerUrl: this.props.identityServerUrl
+        };
+    },
+
+    componentWillMount: function() {
+        this._initLoginLogic();
+    },
+
+    onPasswordLogin: function(username, password) {
+        var self = this;
+        self.setState({
+            busy: true
+        });
+
+        this._loginLogic.loginViaPassword(username, password).then(function(data) {
+            self.props.onLoggedIn(data);
+        }, function(error) {
+            self._setErrorTextFromError(error);
+        }).finally(function() {
+            self.setState({
+                busy: false
+            });
+        });
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        this._initLoginLogic(newHsUrl);
+    },
+
+    onIsUrlChanged: function(newIsUrl) {
+        this._initLoginLogic(null, newIsUrl);
+    },
+
+    _initLoginLogic: function(hsUrl, isUrl) {
+        var self = this;
+        hsUrl = hsUrl || this.state.enteredHomeserverUrl;
+        isUrl = isUrl || this.state.enteredIdentityServerUrl;
+
+        var loginLogic = new Signup.Login(hsUrl, isUrl);
+        this._loginLogic = loginLogic;
+
+        loginLogic.getFlows().then(function(flows) {
+            // old behaviour was to always use the first flow without presenting
+            // options. This works in most cases (we don't have a UI for multiple
+            // logins so let's skip that for now).
+            loginLogic.chooseFlow(0);
+        }, function(err) {
+            self._setErrorTextFromError(err);
+        }).finally(function() {
+            self.setState({
+                busy: false
+            });
+        });
+
+        this.setState({
+            enteredHomeserverUrl: hsUrl,
+            enteredIdentityServerUrl: isUrl,
+            busy: true,
+            errorText: null // reset err messages
+        });
+    },
+
+    _getCurrentFlowStep: function() {
+        return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
+    },
+
+    _setErrorTextFromError: function(err) {
+        if (err.friendlyText) {
+            this.setState({
+                errorText: err.friendlyText
+            });
+            return;
+        }
+
+        var errCode = err.errcode;
+        if (!errCode && err.httpStatus) {
+            errCode = "HTTP " + err.httpStatus;
+        }
+        this.setState({
+            errorText: (
+                "Error: Problem communicating with the given homeserver " +
+                (errCode ? "(" + errCode + ")" : "")
+            )
+        });
+    },
+
+    componentForStep: function(step) {
+        switch (step) {
+            case 'm.login.password':
+                return (
+                    <PasswordLogin onSubmit={this.onPasswordLogin} />
+                );
+            case 'm.login.cas':
+                return (
+                    <CasLogin />
+                );
+            default:
+                if (!step) {
+                    return;
+                }
+                return (
+                    <div>
+                    Sorry, this homeserver is using a login which is not
+                    recognised by Vector ({step})
+                    </div>
+                );
+        }
+    },
+
+    render: function() {
+        var Loader = sdk.getComponent("elements.Spinner");
+        var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
+
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <div className="mx_Login_logo">
+                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                    </div>
+                    <div>
+                        <h2>Sign in</h2>
+                        { this.componentForStep(this._getCurrentFlowStep()) }
+                        <ServerConfig ref="serverConfig"
+                            withToggleButton={true}
+                            defaultHsUrl={this.props.homeserverUrl}
+                            defaultIsUrl={this.props.identityServerUrl}
+                            onHsUrlChanged={this.onHsUrlChanged}
+                            onIsUrlChanged={this.onIsUrlChanged}
+                            delayTimeMs={1000}/>
+                        <div className="mx_Login_error">
+                                { loader }
+                                { this.state.errorText }
+                        </div>
+                        <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
+                            Create a new account
+                        </a>
+                        <br/>
+                        <div className="mx_Login_links">
+                            <a href="https://medium.com/@Vector">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://twitter.com/@VectorCo">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                            <a href="https://matrix.org">powered by Matrix</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

src/components/structures/login/PostRegistration.js

@@ -0,0 +1,80 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'PostRegistration',
+
+    propTypes: {
+        onComplete: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        return {
+            avatarUrl: null,
+            errorString: null,
+            busy: false
+        };
+    },
+
+    componentWillMount: function() {
+        // There is some assymetry between ChangeDisplayName and ChangeAvatar,
+        // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
+        // the URL to be passed to you (because it's also used for room avatars).
+        var cli = MatrixClientPeg.get();
+        this.setState({busy: true});
+        var self = this;
+        cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+            self.setState({
+                avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
+                busy: false
+            });
+        }, function(error) {
+            self.setState({
+                errorString: "Failed to fetch avatar URL",
+                busy: false
+            });
+        });
+    },
+
+    render: function() {
+        var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <div className="mx_Login_logo">
+                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                    </div>
+                    <div className="mx_Login_profile">
+                        Set a display name:
+                        <ChangeDisplayName />
+                        Upload an avatar:
+                        <ChangeAvatar
+                            initialAvatarUrl={this.state.avatarUrl} />
+                        <button onClick={this.props.onComplete}>Continue</button>
+                        {this.state.errorString}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

src/components/structures/login/Registration.js

@@ -0,0 +1,248 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var dis = require('../../../dispatcher');
+var Signup = require("../../../Signup");
+var ServerConfig = require("../../views/login/ServerConfig");
+var RegistrationForm = require("../../views/login/RegistrationForm");
+var CaptchaForm = require("../../views/login/CaptchaForm");
+
+var MIN_PASSWORD_LENGTH = 6;
+
+module.exports = React.createClass({
+    displayName: 'Registration',
+
+    propTypes: {
+        onLoggedIn: React.PropTypes.func.isRequired,
+        clientSecret: React.PropTypes.string,
+        sessionId: React.PropTypes.string,
+        registrationUrl: React.PropTypes.string,
+        idSid: React.PropTypes.string,
+        hsUrl: React.PropTypes.string,
+        isUrl: React.PropTypes.string,
+        // registration shouldn't know or care how login is done.
+        onLoginClick: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+            errorText: null,
+            enteredHomeserverUrl: this.props.hsUrl,
+            enteredIdentityServerUrl: this.props.isUrl
+        };
+    },
+
+    componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        // attach this to the instance rather than this.state since it isn't UI
+        this.registerLogic = new Signup.Register(
+            this.props.hsUrl, this.props.isUrl
+        );
+        this.registerLogic.setClientSecret(this.props.clientSecret);
+        this.registerLogic.setSessionId(this.props.sessionId);
+        this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
+        this.registerLogic.setIdSid(this.props.idSid);
+        this.registerLogic.recheckState();
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    componentDidMount: function() {
+        // may have already done an HTTP hit (e.g. redirect from an email) so
+        // check for any pending response
+        var promise = this.registerLogic.getPromise();
+        if (promise) {
+            this.onProcessingRegistration(promise);
+        }
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        this.registerLogic.setHomeserverUrl(newHsUrl);
+    },
+
+    onIsUrlChanged: function(newIsUrl) {
+        this.registerLogic.setIdentityServerUrl(newIsUrl);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== "registration_step_update") {
+            return;
+        }
+        this.forceUpdate(); // registration state has changed.
+    },
+
+    onFormSubmit: function(formVals) {
+        var self = this;
+        this.setState({
+            errorText: "",
+            busy: true
+        });
+        this.onProcessingRegistration(this.registerLogic.register(formVals));
+    },
+
+    // Promise is resolved when the registration process is FULLY COMPLETE
+    onProcessingRegistration: function(promise) {
+        var self = this;
+        promise.done(function(response) {
+            if (!response || !response.access_token) {
+                console.warn(
+                    "FIXME: Register fulfilled without a final response, " +
+                    "did you break the promise chain?"
+                );
+                // no matter, we'll grab it direct
+                response = self.registerLogic.getCredentials();
+            }
+            if (!response || !response.user_id || !response.access_token) {
+                console.error("Final response is missing keys.");
+                self.setState({
+                    errorText: "There was a problem processing the response."
+                });
+                return;
+            }
+            self.props.onLoggedIn({
+                userId: response.user_id,
+                homeserverUrl: self.registerLogic.getHomeserverUrl(),
+                identityServerUrl: self.registerLogic.getIdentityServerUrl(),
+                accessToken: response.access_token
+            });
+            self.setState({
+                busy: false
+            });
+        }, function(err) {
+            if (err.message) {
+                self.setState({
+                    errorText: err.message
+                });
+            }
+            self.setState({
+                busy: false
+            });
+            console.log(err);
+        });
+    },
+
+    onFormValidationFailed: function(errCode) {
+        var errMsg;
+        switch (errCode) {
+            case "RegistrationForm.ERR_PASSWORD_MISSING":
+                errMsg = "Missing password.";
+                break;
+            case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+                errMsg = "Passwords don't match.";
+                break;
+            case "RegistrationForm.ERR_PASSWORD_LENGTH":
+                errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+                break;
+            default:
+                console.error("Unknown error code: %s", errCode);
+                errMsg = "An unknown error occurred.";
+                break;
+        }
+        this.setState({
+            errorText: errMsg
+        });
+    },
+
+    onCaptchaLoaded: function(divIdName) {
+        this.registerLogic.tellStage("m.login.recaptcha", {
+            divId: divIdName
+        });
+        this.setState({
+            busy: false // requires user input
+        });
+    },
+
+    _getRegisterContentJsx: function() {
+        var currStep = this.registerLogic.getStep();
+        var registerStep;
+        switch (currStep) {
+            case "Register.COMPLETE":
+                break; // NOP
+            case "Register.START":
+            case "Register.STEP_m.login.dummy":
+                registerStep = (
+                    <RegistrationForm
+                        showEmail={true}
+                        minPasswordLength={MIN_PASSWORD_LENGTH}
+                        onError={this.onFormValidationFailed}
+                        onRegisterClick={this.onFormSubmit} />
+                );
+                break;
+            case "Register.STEP_m.login.email.identity":
+                registerStep = (
+                    <div>
+                        Please check your email to continue registration.
+                    </div>
+                );
+                break;
+            case "Register.STEP_m.login.recaptcha":
+                registerStep = (
+                    <CaptchaForm onCaptchaLoaded={this.onCaptchaLoaded} />
+                );
+                break;
+            default:
+                console.error("Unknown register state: %s", currStep);
+                break;
+        }
+        var busySpinner;
+        if (this.state.busy) {
+            var Spinner = sdk.getComponent("elements.Spinner");
+            busySpinner = (
+                <Spinner />
+            );
+        }
+        return (
+            <div>
+                <h2>Create an account</h2>
+                {registerStep}
+                <div className="mx_Login_error">{this.state.errorText}</div>
+                {busySpinner}
+                <ServerConfig ref="serverConfig"
+                    withToggleButton={true}
+                    defaultHsUrl={this.state.enteredHomeserverUrl}
+                    defaultIsUrl={this.state.enteredIdentityServerUrl}
+                    onHsUrlChanged={this.onHsUrlChanged}
+                    onIsUrlChanged={this.onIsUrlChanged}
+                    delayTimeMs={1000} />
+                <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                    I already have an account
+                </a>
+            </div>
+        );
+    },
+
+    render: function() {
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <div className="mx_Login_logo">
+                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                    </div>
+                    {this._getRegisterContentJsx()}
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/dialogs/ErrorDialog.js

@@ -14,9 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/*
+ * Usage:
+ * Modal.createDialog(ErrorDialog, {
+ *   title: "some text", (default: "Error")
+ *   description: "some more text",
+ *   button: "Button Text",
+ *   onClose: someFunction,
+ *   focus: true|false (default: true)
+ * });
+ */
+
 var React = require("react");
 
-module.exports = {
+module.exports = React.createClass({
+    displayName: 'ErrorDialog',
     propTypes: {
         title: React.PropTypes.string,
         button: React.PropTypes.string,
@@ -32,4 +44,22 @@ module.exports = {
             focus: true,
         };
     },
-};
+
+    render: function() {
+        return (
+            <div className="mx_ErrorDialog">
+                <div className="mx_ErrorDialogTitle">
+                    {this.props.title}
+                </div>
+                <div className="mx_Dialog_content">
+                    {this.props.description}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.props.onFinished} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/dialogs/LogoutPrompt.js

@@ -13,10 +13,11 @@ 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.
 */
+var React = require('react');
+var dis = require("../../../dispatcher");
 
-var dis = require("../../dispatcher");
+module.exports = React.createClass({
-
+    displayName: 'LogoutPrompt',
-module.exports = {
     logOut: function() {
         dis.dispatch({action: 'logout'});
         if (this.props.onFinished) {
@@ -28,6 +29,20 @@ module.exports = {
         if (this.props.onFinished) {
             this.props.onFinished();
         }
-    }
+    },
-};
+
+    render: function() {
+        return (
+            <div>
+                <div className="mx_Dialog_content">
+                    Sign out?
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.logOut}>Sign Out</button>
+                    <button onClick={this.cancelPrompt}>Cancel</button>
+                </div>
+            </div>
+        );
+    }
+});
 

src/components/views/dialogs/QuestionDialog.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 var React = require("react");
 
-module.exports = {
+module.exports = React.createClass({
+    displayName: 'QuestionDialog',
     propTypes: {
         title: React.PropTypes.string,
         description: React.PropTypes.string,
@@ -33,4 +34,34 @@ module.exports = {
             focus: true,
         };
     },
-};
+
+    onOk: function() {
+        this.props.onFinished(true);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        return (
+            <div className="mx_QuestionDialog">
+                <div className="mx_QuestionDialogTitle">
+                    {this.props.title}
+                </div>
+                <div className="mx_Dialog_content">
+                    {this.props.description}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onOk} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+
+                    <button onClick={this.onCancel}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/login/RegistrationForm.js

@@ -0,0 +1,126 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+    displayName: 'RegistrationForm',
+
+    propTypes: {
+        defaultEmail: React.PropTypes.string,
+        defaultUsername: React.PropTypes.string,
+        showEmail: React.PropTypes.bool,
+        minPasswordLength: React.PropTypes.number,
+        onError: React.PropTypes.func,
+        onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+    },
+
+    getDefaultProps: function() {
+        return {
+            showEmail: false,
+            minPasswordLength: 6,
+            onError: function(e) {
+                console.error(e);
+            }
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            email: this.props.defaultEmail,
+            username: this.props.defaultUsername,
+            password: null,
+            passwordConfirm: null
+        };
+    },
+
+    onSubmit: function(ev) {
+        ev.preventDefault();
+
+        var pwd1 = this.refs.password.value.trim();
+        var pwd2 = this.refs.passwordConfirm.value.trim()
+
+        var errCode;
+        if (!pwd1 || !pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+        }
+        else if (pwd1 !== pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+        }
+        else if (pwd1.length < this.props.minPasswordLength) {
+            errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+        }
+        if (errCode) {
+            this.props.onError(errCode);
+            return;
+        }
+
+        var promise = this.props.onRegisterClick({
+            username: this.refs.username.value.trim(),
+            password: pwd1,
+            email: this.refs.email.value.trim()
+        });
+
+        if (promise) {
+            ev.target.disabled = true;
+            promise.finally(function() {
+                ev.target.disabled = false;
+            });
+        }
+    },
+
+    render: function() {
+        var emailSection, registerButton;
+        if (this.props.showEmail) {
+            emailSection = (
+                <input className="mx_Login_field" type="text" ref="email"
+                    autoFocus={true} placeholder="Email address"
+                    defaultValue={this.state.email} />
+            );
+        }
+        if (this.props.onRegisterClick) {
+            registerButton = (
+                <input className="mx_Login_submit" type="submit" value="Register" />
+            );
+        }
+
+        return (
+            <div>
+                <form onSubmit={this.onSubmit}>
+                    {emailSection}
+                    <br />
+                    <input className="mx_Login_field" type="text" ref="username"
+                        placeholder="User name" defaultValue={this.state.username} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="password"
+                        placeholder="Password" defaultValue={this.state.password} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="passwordConfirm"
+                        placeholder="Confirm password"
+                        defaultValue={this.state.passwordConfirm} />
+                    <br />
+                    {registerButton}
+                </form>
+            </div>
+        );
+    }
+});

src/components/views/login/ServerConfig.js

@@ -0,0 +1,161 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var Modal = require('../../../Modal');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
+module.exports = React.createClass({
+    displayName: 'ServerConfig',
+
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        defaultHsUrl: React.PropTypes.string,
+        defaultIsUrl: React.PropTypes.string,
+        withToggleButton: React.PropTypes.bool,
+        delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+    },
+
+    getDefaultProps: function() {
+        return {
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            withToggleButton: false,
+            delayTimeMs: 0
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hs_url: this.props.defaultHsUrl,
+            is_url: this.props.defaultIsUrl,
+            original_hs_url: this.props.defaultHsUrl,
+            original_is_url: this.props.defaultIsUrl,
+            // no toggle button = show, toggle button = hide
+            configVisible: !this.props.withToggleButton
+        }
+    },
+
+    onHomeserverChanged: function(ev) {
+        this.setState({hs_url: ev.target.value}, function() {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+                this.props.onHsUrlChanged(this.state.hs_url);
+            });
+        });
+    },
+
+    onIdentityServerChanged: function(ev) {
+        this.setState({is_url: ev.target.value}, function() {
+            this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+                this.props.onIsUrlChanged(this.state.is_url);
+            });
+        });
+    },
+
+    _waitThenInvoke: function(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
+    },
+
+    onServerConfigVisibleChange: function(ev) {
+        this.setState({
+            configVisible: ev.target.checked
+        });
+    },
+
+    showHelpPopup: function() {
+        var ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+        Modal.createDialog(ErrorDialog, {
+            title: 'Custom Server Options',
+            description: <span>
+                You can use the custom server options to log into other Matrix
+                servers by specifying a different Home server URL.
+                <br/>
+                This allows you to use Vector with an existing Matrix account on
+                a different Home server.
+                <br/>
+                <br/>
+                You can also set a custom Identity server but this will affect
+                people&#39;s ability to find you if you use a server in a group other
+                than the main Matrix.org group.
+            </span>,
+            button: "Dismiss",
+            focus: true
+        });
+    },
+
+    render: function() {
+        var serverConfigStyle = {};
+        serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
+
+        var toggleButton;
+        if (this.props.withToggleButton) {
+            toggleButton = (
+                <div>
+                    <input className="mx_Login_checkbox" id="advanced" type="checkbox"
+                        checked={this.state.configVisible}
+                        onChange={this.onServerConfigVisibleChange} />
+                    <label className="mx_Login_label" htmlFor="advanced">
+                        Use custom server options (advanced)
+                    </label>
+                </div>
+            );
+        }
+
+        return (
+        <div>
+            {toggleButton}
+            <div style={serverConfigStyle}>
+                <div className="mx_ServerConfig">
+                    <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
+                        Home server URL
+                    </label>
+                    <input className="mx_Login_field" id="hsurl" type="text"
+                        placeholder={this.state.original_hs_url}
+                        value={this.state.hs_url}
+                        onChange={this.onHomeserverChanged} />
+                    <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
+                        Identity server URL
+                    </label>
+                    <input className="mx_Login_field" id="isurl" type="text"
+                        placeholder={this.state.original_is_url}
+                        value={this.state.is_url}
+                        onChange={this.onIdentityServerChanged} />
+                    <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                        What does this mean?
+                    </a>
+                </div>
+            </div>
+        </div>
+        );
+    }
+});

src/components/views/rooms/MemberInfo.js

@@ -49,7 +49,7 @@ module.exports = React.createClass({
     },
 
     onKick: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         MatrixClientPeg.get().kick(roomId, target).done(function() {
@@ -66,7 +66,7 @@ module.exports = React.createClass({
     },
 
     onBan: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         MatrixClientPeg.get().ban(roomId, target).done(function() {
@@ -83,7 +83,7 @@ module.exports = React.createClass({
     },
 
     onMuteToggle: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         var room = MatrixClientPeg.get().getRoom(roomId);
@@ -127,7 +127,7 @@ module.exports = React.createClass({
     },
 
     onModToggle: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
         var target = this.props.member.userId;
         var room = MatrixClientPeg.get().getRoom(roomId);
@@ -224,8 +224,8 @@ module.exports = React.createClass({
     // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
     // Not sure what the right solution to this is.
     onLeaveClick: function() {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         var roomId = this.props.member.roomId;
         Modal.createDialog(QuestionDialog, {

src/components/views/rooms/MemberList.js

@@ -13,14 +13,17 @@ 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.
 */
-
+var React = require('react');
-var MatrixClientPeg = require("../../MatrixClientPeg");
+var classNames = require('classnames');
-var Modal = require("../../Modal");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
-var sdk = require('../../index');
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
+var GeminiScrollbar = require('react-gemini-scrollbar');
 
 var INITIAL_LOAD_NUM_MEMBERS = 50;
 
-module.exports = {
+module.exports = React.createClass({
+    displayName: 'MemberList',
     getInitialState: function() {
         if (!this.props.roomId) return { members: [] };
         var cli = MatrixClientPeg.get();
@@ -113,7 +116,7 @@ module.exports = {
     },
 
     onInvite: function(inputText) {
-        var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var self = this;
         inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
         var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
@@ -195,6 +198,94 @@ module.exports = {
             }
         }
         return to_display;
-    }
+    },
-};
+
+
+
+    memberSort: function(userIdA, userIdB) {
+        var userA = this.memberDict[userIdA].user;
+        var userB = this.memberDict[userIdB].user;
+
+        var presenceMap = {
+            online: 3,
+            unavailable: 2,
+            offline: 1
+        };
+
+        var presenceOrdA = userA ? presenceMap[userA.presence] : 0;
+        var presenceOrdB = userB ? presenceMap[userB.presence] : 0;
+
+        if (presenceOrdA != presenceOrdB) {
+            return presenceOrdB - presenceOrdA;
+        }
+
+        var latA = userA ? (userA.lastPresenceTs - (userA.lastActiveAgo || userA.lastPresenceTs)) : 0;
+        var latB = userB ? (userB.lastPresenceTs - (userB.lastActiveAgo || userB.lastPresenceTs)) : 0;
+
+        return latB - latA;
+    },
+
+    makeMemberTiles: function(membership) {
+        var MemberTile = sdk.getComponent("rooms.MemberTile");
+
+        var self = this;
+        return self.state.members.filter(function(userId) {
+            var m = self.memberDict[userId];
+            return m.membership == membership;
+        }).map(function(userId) {
+            var m = self.memberDict[userId];
+            return (
+                <MemberTile key={userId} member={m} ref={userId} />
+            );
+        });
+    },
+
+    onPopulateInvite: function(e) {
+        this.onInvite(this.refs.invite.value);
+        e.preventDefault();
+    },
+
+    inviteTile: function() {
+        if (this.state.inviting) {
+            var Loader = sdk.getComponent("elements.Spinner");
+            return (
+                <Loader />
+            );
+        } else {
+            return (
+                <form onSubmit={this.onPopulateInvite}>
+                    <input className="mx_MemberList_invite" ref="invite" placeholder="Invite another user"/>
+                </form>
+            );
+        }
+    },
+
+    render: function() {
+        var invitedSection = null;
+        var invitedMemberTiles = this.makeMemberTiles('invite');
+        if (invitedMemberTiles.length > 0) {
+            invitedSection = (
+                <div className="mx_MemberList_invited">
+                    <h2>Invited</h2>
+                    <div className="mx_MemberList_wrapper">
+                        {invitedMemberTiles}
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="mx_MemberList">
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_border">
+                    {this.inviteTile()}
+                    <div>
+                        <div className="mx_MemberList_wrapper">
+                            {this.makeMemberTiles('join')}
+                        </div>
+                    </div>
+                    {invitedSection}
+                </GeminiScrollbar>
+            </div>
+        );
+    }
+});
 

src/components/views/rooms/MemberTile.js

@@ -31,7 +31,7 @@ module.exports = React.createClass({
     },
 
     onLeaveClick: function() {
-        var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
         var roomId = this.props.member.roomId;
         Modal.createDialog(QuestionDialog, {

src/components/views/rooms/MessageComposer.js

@@ -272,7 +272,7 @@ module.exports = React.createClass({
                 this.markdownEnabled = false;
             }
             else {
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Unknown command",
                     description: "Usage: /markdown on|off"
@@ -292,7 +292,7 @@ module.exports = React.createClass({
                     console.log("Command success.");
                 }, function(err) {
                     console.error("Command failure: %s", err);
-                    var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
                         title: "Server error",
                         description: err.message
@@ -301,7 +301,7 @@ module.exports = React.createClass({
             }
             else if (cmd.error) {
                 console.error(cmd.error);
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Command error",
                     description: cmd.error

src/components/views/rooms/RoomList.js

@@ -0,0 +1,303 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+var React = require("react");
+var ReactDOM = require("react-dom");
+var GeminiScrollbar = require('react-gemini-scrollbar');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var RoomListSorter = require("../../../RoomListSorter");
+var dis = require("../../../dispatcher");
+var sdk = require('../../../index');
+
+var HIDE_CONFERENCE_CHANS = true;
+
+module.exports = React.createClass({
+    displayName: 'RoomList',
+
+    propTypes: {
+        ConferenceHandler: React.PropTypes.any, // e.g. VectorConferenceHandler
+        collapsed: React.PropTypes.bool,
+        currentRoom: React.PropTypes.string
+    },
+
+    getInitialState: function() {
+        return {
+            activityMap: null,
+            lists: {},
+        }
+    },
+
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("Room", this.onRoom);
+        cli.on("Room.timeline", this.onRoomTimeline);
+        cli.on("Room.name", this.onRoomName);
+        cli.on("Room.tags", this.onRoomTags);
+        cli.on("RoomState.events", this.onRoomStateEvents);
+        cli.on("RoomMember.name", this.onRoomMemberName);
+
+        var s = this.getRoomLists();
+        s.activityMap = {};
+        this.setState(s);
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'view_tooltip':
+                this.tooltip = payload.tooltip;
+                this._repositionTooltip();
+                if (this.tooltip) this.tooltip.style.display = 'block';
+                break
+        }
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room", this.onRoom);
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.state.activityMap[newProps.selectedRoom] = undefined;
+        this.setState({
+            activityMap: this.state.activityMap
+        });
+    },
+
+    onRoom: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (toStartOfTimeline) return;
+
+        var hl = 0;
+        if (
+            room.roomId != this.props.selectedRoom &&
+            ev.getSender() != MatrixClientPeg.get().credentials.userId)
+        {
+            // don't mark rooms as unread for just member changes
+            if (ev.getType() != "m.room.member") {
+                hl = 1;
+            }
+
+            var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+            if (actions && actions.tweaks && actions.tweaks.highlight) {
+                hl = 2;
+            }
+        }
+
+        if (hl > 0) {
+            var newState = this.getRoomLists();
+
+            // obviously this won't deep copy but this shouldn't be necessary
+            var amap = this.state.activityMap;
+            amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
+
+            newState.activityMap = amap;
+
+            this.setState(newState);
+        }
+    },
+
+    onRoomName: function(room) {
+        this.refreshRoomList();
+    },
+
+    onRoomTags: function(event, room) {
+        this.refreshRoomList();        
+    },
+
+    onRoomStateEvents: function(ev, state) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
+    onRoomMemberName: function(ev, member) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
+    refreshRoomList: function() {
+        // TODO: rather than bluntly regenerating and re-sorting everything
+        // every time we see any kind of room change from the JS SDK
+        // we could do incremental updates on our copy of the state
+        // based on the room which has actually changed.  This would stop
+        // us re-rendering all the sublists every time anything changes anywhere
+        // in the state of the client.
+        this.setState(this.getRoomLists());
+    },
+
+    getRoomLists: function() {
+        var self = this;
+        var s = { lists: {} };
+
+        s.lists["m.invite"] = [];
+        s.lists["m.favourite"] = [];
+        s.lists["m.recent"] = [];
+        s.lists["m.lowpriority"] = [];
+        s.lists["m.archived"] = [];
+
+        MatrixClientPeg.get().getRooms().forEach(function(room) {
+            var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+
+            if (me && me.membership == "invite") {
+                s.lists["m.invite"].push(room);
+            }
+            else {
+                var shouldShowRoom =  (
+                    me && (me.membership == "join")
+                );
+
+                // hiding conf rooms only ever toggles shouldShowRoom to false
+                if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
+                    // we want to hide the 1:1 conf<->user room and not the group chat
+                    var joinedMembers = room.getJoinedMembers();
+                    if (joinedMembers.length === 2) {
+                        var otherMember = joinedMembers.filter(function(m) {
+                            return m.userId !== me.userId
+                        })[0];
+                        var ConfHandler = self.props.ConferenceHandler;
+                        if (ConfHandler && ConfHandler.isConferenceUser(otherMember)) {
+                            // console.log("Hiding conference 1:1 room %s", room.roomId);
+                            shouldShowRoom = false;
+                        }
+                    }
+                }
+
+                if (shouldShowRoom) {
+                    var tagNames = Object.keys(room.tags);
+                    if (tagNames.length) {
+                        for (var i = 0; i < tagNames.length; i++) {
+                            var tagName = tagNames[i];
+                            s.lists[tagName] = s.lists[tagName] || [];
+                            s.lists[tagNames[i]].push(room);
+                        }
+                    }
+                    else {
+                        s.lists["m.recent"].push(room); 
+                    }
+                }
+            }
+        });
+
+        //console.log("calculated new roomLists; m.recent = " + s.lists["m.recent"]);
+
+        // we actually apply the sorting to this when receiving the prop in RoomSubLists.
+
+        return s;
+    },
+
+    _repositionTooltip: function(e) {
+        if (this.tooltip && this.tooltip.parentElement) {
+            var scroll = ReactDOM.findDOMNode(this);
+            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px"; 
+        }
+    },
+
+    onShowClick: function() {
+        dis.dispatch({
+            action: 'show_left_panel',
+        });
+    },
+
+    render: function() {
+        var expandButton = this.props.collapsed ? 
+                           <img className="mx_RoomList_expandButton" onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
+                           null;
+
+        var RoomSubList = sdk.getComponent('organisms.RoomSubList');
+        var self = this;
+
+        return (
+            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={self._repositionTooltip}>
+            <div className="mx_RoomList">
+                { expandButton }
+
+                <RoomSubList list={ self.state.lists['m.invite'] }
+                             label="Invites"
+                             editable={ false }
+                             order="recent"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.favourite'] }
+                             label="Favourites"
+                             tagName="m.favourite"
+                             verb="favourite"
+                             editable={ true }
+                             order="manual"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.recent'] }
+                             label="Conversations"
+                             editable={ true }
+                             verb="restore"
+                             order="recent"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                { Object.keys(self.state.lists).map(function(tagName) {
+                    if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
+                        return <RoomSubList list={ self.state.lists[tagName] }
+                             key={ tagName }
+                             label={ tagName }
+                             tagName={ tagName }
+                             verb={ "tag as " + tagName }
+                             editable={ true }
+                             order="manual"
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                    }
+                }) }
+
+                <RoomSubList list={ self.state.lists['m.lowpriority'] }
+                             label="Low priority"
+                             tagName="m.lowpriority"
+                             verb="demote"
+                             editable={ true }
+                             order="recent"
+                             bottommost={ self.state.lists['m.archived'].length === 0 }
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+
+                <RoomSubList list={ self.state.lists['m.archived'] }
+                             label="Historical"
+                             editable={ false }
+                             order="recent"
+                             bottommost={ true }
+                             activityMap={ self.state.activityMap }
+                             selectedRoom={ self.props.selectedRoom }
+                             collapsed={ self.props.collapsed } />
+            </div>
+            </GeminiScrollbar>
+        );
+    }
+});

src/components/views/settings/EnableNotificationsButton.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 var React = require("react");
+var Notifier = require("../../../Notifier");
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 
@@ -38,12 +39,10 @@ module.exports = React.createClass({
     },
 
     enabled: function() {
-        var Notifier = sdk.getComponent('organisms.Notifier');
         return Notifier.isEnabled();
     },
 
     onClick: function() {
-        var Notifier = sdk.getComponent('organisms.Notifier');
         var self = this;
         if (!Notifier.supportsDesktopNotifications()) {
             return;

src/controllers/organisms/CreateRoom.js

@@ -1,139 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require("react");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var PresetValues = {
-    PrivateChat: "private_chat",
-    PublicChat: "public_chat",
-    Custom: "custom",
-};
-var q = require('q');
-var encryption = require("../../encryption");
-
-module.exports = {
-    propTypes: {
-        onRoomCreated: React.PropTypes.func,
-    },
-
-    phases: {
-        CONFIG: "CONFIG",  // We're waiting for user to configure and hit create.
-        CREATING: "CREATING",  // We're sending the request.
-        CREATED: "CREATED",  // We successfully created the room.
-        ERROR: "ERROR",  // There was an error while trying to create room.
-    },
-
-    getDefaultProps: function() {
-        return {
-            onRoomCreated: function() {},
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            phase: this.phases.CONFIG,
-            error_string: "",
-            is_private: true,
-            share_history: false,
-            default_preset: PresetValues.PrivateChat,
-            topic: '',
-            room_name: '',
-            invited_users: [],
-        };
-    },
-
-    onCreateRoom: function() {
-        var options = {};
-
-        if (this.state.room_name) {
-            options.name = this.state.room_name;
-        }
-
-        if (this.state.topic) {
-            options.topic = this.state.topic;
-        }
-
-        if (this.state.preset) {
-            if (this.state.preset != PresetValues.Custom) {
-                options.preset = this.state.preset;
-            } else {
-                options.initial_state = [
-                    {
-                        type: "m.room.join_rules",
-                        content: {
-                            "join_rule": this.state.is_private ? "invite" : "public"
-                        }
-                    },
-                    {
-                        type: "m.room.history_visibility",
-                        content: {
-                            "history_visibility": this.state.share_history ? "shared" : "invited"
-                        }
-                    },
-                ];
-            }
-        }
-
-        options.invite = this.state.invited_users;
-
-        var alias = this.getAliasLocalpart();
-        if (alias) {
-            options.room_alias_name = alias;
-        }
-
-        var cli = MatrixClientPeg.get();
-        if (!cli) {
-            // TODO: Error.
-            console.error("Cannot create room: No matrix client.");
-            return;
-        }
-
-        var deferred = cli.createRoom(options);
-
-        var response;
-
-        if (this.state.encrypt) {
-            deferred = deferred.then(function(res) {
-                response = res;
-                return encryption.enableEncryption(
-                    cli, response.room_id, options.invite
-                );
-            }).then(function() {
-                return q(response) }
-            );
-        }
-
-        this.setState({
-            phase: this.phases.CREATING,
-        });
-
-        var self = this;
-
-        deferred.then(function (resp) {
-            self.setState({
-                phase: self.phases.CREATED,
-            });
-            self.props.onRoomCreated(resp.room_id);
-        }, function(err) {
-            self.setState({
-                phase: self.phases.ERROR,
-                error_string: err.toString(),
-            });
-        });
-    }
-};

src/controllers/organisms/RoomList.js

@@ -1,129 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require("react");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var RoomListSorter = require("../../RoomListSorter");
-
-var sdk = require('../../index');
-
-module.exports = {
-    componentWillMount: function() {
-        var cli = MatrixClientPeg.get();
-        cli.on("Room", this.onRoom);
-        cli.on("Room.timeline", this.onRoomTimeline);
-        cli.on("Room.name", this.onRoomName);
-        cli.on("RoomState.events", this.onRoomStateEvents);
-        cli.on("RoomMember.name", this.onRoomMemberName);
-
-        var rooms = this.getRoomList();
-        this.setState({
-            roomList: rooms,
-            activityMap: {}
-        });
-    },
-
-    componentWillUnmount: function() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room", this.onRoom);
-            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
-            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
-        }
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        this.state.activityMap[newProps.selectedRoom] = undefined;
-        this.setState({
-            activityMap: this.state.activityMap
-        });
-    },
-
-    onRoom: function(room) {
-        this.refreshRoomList();
-    },
-
-    onRoomTimeline: function(ev, room, toStartOfTimeline) {
-        if (toStartOfTimeline) return;
-
-        var newState = {
-            roomList: this.getRoomList()
-        };
-        if (
-            room.roomId != this.props.selectedRoom &&
-            ev.getSender() != MatrixClientPeg.get().credentials.userId)
-        {
-            var hl = 1;
-
-            var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
-            if (actions && actions.tweaks && actions.tweaks.highlight) {
-                hl = 2;
-            }
-            // obviously this won't deep copy but this shouldn't be necessary
-            var amap = this.state.activityMap;
-            amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
-
-            newState.activityMap = amap;
-        }
-        this.setState(newState);
-    },
-
-    onRoomName: function(room) {
-        this.refreshRoomList();
-    },
-
-    onRoomStateEvents: function(ev, state) {
-        this.refreshRoomList();
-    },
-
-    onRoomMemberName: function(ev, member) {
-        this.refreshRoomList();
-    },
-
-    refreshRoomList: function() {
-        var rooms = this.getRoomList();
-        this.setState({
-            roomList: rooms
-        });
-    },
-
-    getRoomList: function() {
-        return RoomListSorter.mostRecentActivityFirst(
-            MatrixClientPeg.get().getRooms().filter(function(room) {
-                var member = room.getMember(MatrixClientPeg.get().credentials.userId);
-                return member && (member.membership == "join" || member.membership == "invite");
-            })
-        );
-    },
-
-    makeRoomTiles: function() {
-        var RoomTile = sdk.getComponent('molecules.RoomTile');
-        var self = this;
-        return this.state.roomList.map(function(room) {
-            var selected = room.roomId == self.props.selectedRoom;
-            return (
-                <RoomTile
-                    room={room}
-                    key={room.roomId}
-                    selected={selected}
-                    unread={self.state.activityMap[room.roomId] === 1}
-                    highlight={self.state.activityMap[room.roomId] === 2}
-                />
-            );
-        });
-    },
-};

src/controllers/organisms/RoomView.js

@@ -1,504 +0,0 @@
-/*
-Copyright 2015 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.
-*/
-
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var React = require("react");
-var q = require("q");
-var ContentMessages = require("../../ContentMessages");
-var WhoIsTyping = require("../../WhoIsTyping");
-var Modal = require("../../Modal");
-var sdk = require('../../index');
-
-var dis = require("../../dispatcher");
-
-var PAGINATE_SIZE = 20;
-var INITIAL_SIZE = 20;
-
-module.exports = {
-    getInitialState: function() {
-        return {
-            room: this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null,
-            messageCap: INITIAL_SIZE,
-            editingRoomSettings: false,
-            uploadingRoomSettings: false,
-            numUnreadMessages: 0,
-            draggingFile: false,
-        }
-    },
-
-    componentWillMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
-        MatrixClientPeg.get().on("Room.name", this.onRoomName);
-        MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
-        MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
-        this.atBottom = true;
-    },
-
-    componentWillUnmount: function() {
-        if (this.refs.messageWrapper) {
-            var messageWrapper = this.refs.messageWrapper;
-            messageWrapper.removeEventListener('drop', this.onDrop);
-            messageWrapper.removeEventListener('dragover', this.onDragOver);
-            messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
-            messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd);
-        }
-        dis.unregister(this.dispatcherRef);
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
-            MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
-            MatrixClientPeg.get().removeListener("Room.receipt", this.onRoomReceipt);
-            MatrixClientPeg.get().removeListener("RoomMember.typing", this.onRoomMemberTyping);
-        }
-    },
-
-    onAction: function(payload) {
-        switch (payload.action) {
-            case 'message_send_failed':
-            case 'message_sent':
-            case 'message_resend_started':
-                this.setState({
-                    room: MatrixClientPeg.get().getRoom(this.props.roomId)
-                });
-                this.forceUpdate();
-                break;
-            case 'notifier_enabled':
-                this.forceUpdate();
-                break;
-            case 'call_state':
-                if (this.props.roomId !== payload.room_id) {
-                    break;
-                }
-                // scroll to bottom
-                var messageWrapper = this.refs.messageWrapper;
-                if (messageWrapper) {
-                    messageWrapper = messageWrapper;
-                    messageWrapper.scrollTop = messageWrapper.scrollHeight;
-                }
-                break;
-            case 'user_activity':
-                this.sendReadReceipt();
-                break;
-        }
-    },
-
-    // MatrixRoom still showing the messages from the old room?
-    // Set the key to the room_id. Sadly you can no longer get at
-    // the key from inside the component, or we'd check this in code.
-    /*componentWillReceiveProps: function(props) {
-    },*/
-
-    onRoomTimeline: function(ev, room, toStartOfTimeline) {
-        if (!this.isMounted()) return;
-
-        // ignore anything that comes in whilst pagingating: we get one
-        // event for each new matrix event so this would cause a huge
-        // number of UI updates. Just update the UI when the paginate
-        // call returns.
-        if (this.state.paginating) return;
-
-        // no point handling anything while we're waiting for the join to finish:
-        // we'll only be showing a spinner.
-        if (this.state.joining) return;
-        if (room.roomId != this.props.roomId) return;
-
-        if (this.refs.messageWrapper) {
-            var messageWrapper = this.refs.messageWrapper;
-            this.atBottom = (
-                messageWrapper.scrollHeight - messageWrapper.scrollTop <=
-                (messageWrapper.clientHeight + 150)
-            );
-        }
-
-        var currentUnread = this.state.numUnreadMessages;
-        if (!toStartOfTimeline &&
-                (ev.getSender() !== MatrixClientPeg.get().credentials.userId)) {
-            // update unread count when scrolled up
-            if (this.atBottom) {
-                currentUnread = 0;
-            }
-            else {
-                currentUnread += 1;
-            }
-        }
-
-
-        this.setState({
-            room: MatrixClientPeg.get().getRoom(this.props.roomId),
-            numUnreadMessages: currentUnread
-        });
-
-        if (toStartOfTimeline && !this.state.paginating) {
-            this.fillSpace();
-        }
-    },
-
-    onRoomName: function(room) {
-        if (room.roomId == this.props.roomId) {
-            this.setState({
-                room: room
-            });
-        }
-    },
-
-    onRoomReceipt: function(receiptEvent, room) {
-        if (room.roomId == this.props.roomId) {
-            this.forceUpdate();
-        }
-    },
-
-    onRoomMemberTyping: function(ev, member) {
-        this.forceUpdate();
-    },
-
-    componentDidMount: function() {
-        if (this.refs.messageWrapper) {
-            var messageWrapper = this.refs.messageWrapper;
-
-            messageWrapper.addEventListener('drop', this.onDrop);
-            messageWrapper.addEventListener('dragover', this.onDragOver);
-            messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
-            messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
-
-            messageWrapper.scrollTop = messageWrapper.scrollHeight;
-
-            this.sendReadReceipt();
-
-            this.fillSpace();
-        }
-    },
-
-    componentDidUpdate: function() {
-        if (!this.refs.messageWrapper) return;
-
-        var messageWrapper = this.refs.messageWrapper;
-
-        if (this.state.paginating && !this.waiting_for_paginate) {
-            var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
-            messageWrapper.scrollTop += heightGained;
-            this.oldScrollHeight = undefined;
-            if (!this.fillSpace()) {
-                this.setState({paginating: false});
-            }
-        } else if (this.atBottom) {
-            messageWrapper.scrollTop = messageWrapper.scrollHeight;
-            if (this.state.numUnreadMessages !== 0) {
-                this.setState({numUnreadMessages: 0});
-            }
-        }
-    },
-
-    fillSpace: function() {
-        if (!this.refs.messageWrapper) return;
-        var messageWrapper = this.refs.messageWrapper;
-        if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
-            this.setState({paginating: true});
-
-            this.oldScrollHeight = messageWrapper.scrollHeight;
-
-            if (this.state.messageCap < this.state.room.timeline.length) {
-                this.waiting_for_paginate = false;
-                var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
-                this.setState({messageCap: cap, paginating: true});
-            } else {
-                this.waiting_for_paginate = true;
-                var cap = this.state.messageCap + PAGINATE_SIZE;
-                this.setState({messageCap: cap, paginating: true});
-                var self = this;
-                MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() {
-                    self.waiting_for_paginate = false;
-                    if (self.isMounted()) {
-                        self.setState({
-                            room: MatrixClientPeg.get().getRoom(self.props.roomId)
-                        });
-                    }
-                    // wait and set paginating to false when the component updates
-                });
-            }
-
-            return true;
-        }
-        return false;
-    },
-
-    onJoinButtonClicked: function(ev) {
-        var self = this;
-        MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() {
-            self.setState({
-                joining: false,
-                room: MatrixClientPeg.get().getRoom(self.props.roomId)
-            });
-        }, function(error) {
-            self.setState({
-                joining: false,
-                joinError: error
-            });
-        });
-        this.setState({
-            joining: true
-        });
-    },
-
-    onMessageListScroll: function(ev) {
-        if (this.refs.messageWrapper) {
-            var messageWrapper = this.refs.messageWrapper;
-            var wasAtBottom = this.atBottom;
-            this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
-            if (this.atBottom && !wasAtBottom) {
-                this.forceUpdate(); // remove unread msg count
-            }
-        }
-        if (!this.state.paginating) this.fillSpace();
-    },
-
-    onDragOver: function(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-
-        ev.dataTransfer.dropEffect = 'none';
-
-        var items = ev.dataTransfer.items;
-        if (items.length == 1) {
-            if (items[0].kind == 'file') {
-                this.setState({ draggingFile : true });
-                ev.dataTransfer.dropEffect = 'copy';
-            }
-        }
-    },
-
-    onDrop: function(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.setState({ draggingFile : false });
-        var files = ev.dataTransfer.files;
-        if (files.length == 1) {
-            this.uploadFile(files[0]);
-        }
-    },
-
-    onDragLeaveOrEnd: function(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.setState({ draggingFile : false });
-    },
-
-    uploadFile: function(file) {
-        this.setState({
-            upload: {
-                fileName: file.name,
-                uploadedBytes: 0,
-                totalBytes: file.size
-            }
-        });
-        var self = this;
-        ContentMessages.sendContentToRoom(
-            file, this.props.roomId, MatrixClientPeg.get()
-        ).progress(function(ev) {
-            //console.log("Upload: "+ev.loaded+" / "+ev.total);
-            self.setState({
-                upload: {
-                    fileName: file.name,
-                    uploadedBytes: ev.loaded,
-                    totalBytes: ev.total
-                }
-            });
-        }).finally(function() {
-            self.setState({
-                upload: undefined
-            });
-        }).done(undefined, function() {
-            // display error message
-        });
-    },
-
-    getWhoIsTypingString: function() {
-        return WhoIsTyping.whoIsTypingString(this.state.room);
-    },
-
-    getEventTiles: function() {
-        var ret = [];
-        var count = 0;
-
-        var EventTile = sdk.getComponent('molecules.EventTile');
-
-        for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
-            var mxEv = this.state.room.timeline[i];
-
-            if (!EventTile.supportsEventType(mxEv.getType())) {
-                continue;
-            }
-
-            var continuation = false;
-            var last = false;
-            if (i == this.state.room.timeline.length - 1) {
-                last = true;
-            }
-            if (i > 0 && count < this.state.messageCap - 1) {
-                if (this.state.room.timeline[i].sender &&
-                    this.state.room.timeline[i - 1].sender &&
-                    (this.state.room.timeline[i].sender.userId ===
-                        this.state.room.timeline[i - 1].sender.userId) &&
-                    (this.state.room.timeline[i].getType() ==
-                        this.state.room.timeline[i - 1].getType())
-                    )
-                {
-                    continuation = true;
-                }
-            }
-            ret.unshift(
-                <li ref={this._collectEventNode.bind(this, mxEv.getId())} key={mxEv.getId()}><EventTile mxEvent={mxEv} continuation={continuation} last={last}/></li>
-            );
-            ++count;
-        }
-        return ret;
-    },
-
-    uploadNewState: function(new_name, new_topic, new_join_rule, new_history_visibility, new_power_levels) {
-        var old_name = this.state.room.name;
-
-        var old_topic = this.state.room.currentState.getStateEvents('m.room.topic', '');
-        if (old_topic) {
-            old_topic = old_topic.getContent().topic;
-        } else {
-            old_topic = "";
-        }
-
-        var old_join_rule = this.state.room.currentState.getStateEvents('m.room.join_rules', '');
-        if (old_join_rule) {
-            old_join_rule = old_join_rule.getContent().join_rule;
-        } else {
-            old_join_rule = "invite";
-        }
-
-        var old_history_visibility = this.state.room.currentState.getStateEvents('m.room.history_visibility', '');
-        if (old_history_visibility) {
-            old_history_visibility = old_history_visibility.getContent().history_visibility;
-        } else {
-            old_history_visibility = "shared";
-        }
-
-        var deferreds = [];
-
-        if (old_name != new_name && new_name != undefined && new_name) {
-            deferreds.push(
-                MatrixClientPeg.get().setRoomName(this.state.room.roomId, new_name)
-            );
-        }
-
-        if (old_topic != new_topic && new_topic != undefined) {
-            deferreds.push(
-                MatrixClientPeg.get().setRoomTopic(this.state.room.roomId, new_topic)
-            );
-        }
-
-        if (old_join_rule != new_join_rule && new_join_rule != undefined) {
-            deferreds.push(
-                MatrixClientPeg.get().sendStateEvent(
-                    this.state.room.roomId, "m.room.join_rules", {
-                        join_rule: new_join_rule,
-                    }, ""
-                )
-            );
-        }
-
-        if (old_history_visibility != new_history_visibility && new_history_visibility != undefined) {
-            deferreds.push(
-                MatrixClientPeg.get().sendStateEvent(
-                    this.state.room.roomId, "m.room.history_visibility", {
-                        history_visibility: new_history_visibility,
-                    }, ""
-                )
-            );
-        }
-
-        if (new_power_levels) {
-            deferreds.push(
-                MatrixClientPeg.get().sendStateEvent(
-                    this.state.room.roomId, "m.room.power_levels", new_power_levels, ""
-                )
-            );
-        }
-
-        if (deferreds.length) {
-            var self = this;
-            q.all(deferreds).fail(function(err) {
-                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to set state",
-                    description: err.toString()
-                });
-            }).finally(function() {
-                self.setState({
-                    uploadingRoomSettings: false,
-                });
-            });
-        } else {
-            this.setState({
-                editingRoomSettings: false,
-                uploadingRoomSettings: false,
-            });
-        }
-    },
-
-    _collectEventNode: function(eventId, node) {
-        if (this.eventNodes == undefined) this.eventNodes = {};
-        this.eventNodes[eventId] = node;
-    },
-
-    _indexForEventId(evId) {
-        for (var i = 0; i < this.state.room.timeline.length; ++i) {
-            if (evId == this.state.room.timeline[i].getId()) {
-                return i;
-            }
-        }
-        return null;
-    },
-
-    sendReadReceipt: function() {
-        if (!this.state.room) return;
-        var currentReadUpToEventId = this.state.room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId);
-        var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
-
-        var lastReadEventIndex = this._getLastDisplayedEventIndex();
-        if (lastReadEventIndex === null) return;
-
-        if (lastReadEventIndex > currentReadUpToEventIndex) {
-            MatrixClientPeg.get().sendReadReceipt(this.state.room.timeline[lastReadEventIndex]);
-        }
-    },
-
-    _getLastDisplayedEventIndex: function() {
-        if (this.eventNodes === undefined) return null;
-
-        var messageWrapper = this.refs.messageWrapper;
-        if (messageWrapper === undefined) return null;
-        var wrapperRect = messageWrapper.getDOMNode().getBoundingClientRect();
-
-        for (var i = this.state.room.timeline.length-1; i >= 0; --i) {
-            var ev = this.state.room.timeline[i];
-            var node = this.eventNodes[ev.getId()];
-            if (node === undefined) continue;
-
-            var domNode = node.getDOMNode();
-            var boundingRect = domNode.getBoundingClientRect();
-
-            if (boundingRect.bottom < wrapperRect.bottom) {
-                return i;
-            }
-        }
-        return null;
-    }
-};

src/controllers/organisms/UserSettings.js

@@ -1,54 +0,0 @@
-/*
-Copyright 2015 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.
-*/
-
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var q = require('q');
-var version = require('../../../package.json').version;
-
-module.exports = {
-    Phases: {
-        Loading: "loading",
-        Display: "display",
-    },
-
-    getInitialState: function() {
-        return {
-            avatarUrl: null,
-            threePids: [],
-            clientVersion: version,
-            phase: this.Phases.Loading,
-        };
-    },
-
-    componentWillMount: function() {
-        var self = this;
-        var cli = MatrixClientPeg.get();
-
-        var profile_d = cli.getProfileInfo(cli.credentials.userId);
-        var threepid_d = cli.getThreePids();
-
-        q.all([profile_d, threepid_d]).then(
-            function(resps) {
-                self.setState({
-                    avatarUrl: resps[0].avatar_url,
-                    threepids: resps[1].threepids,
-                    phase: self.Phases.Display,
-                });
-            },
-            function(err) { console.err(err); }
-        );
-    }
-}

src/index.js

@@ -15,16 +15,11 @@ limitations under the License.
 */
 
 var Skinner = require('./Skinner');
-var Modulator = require('./Modulator');
 
 module.exports.loadSkin = function(skinObject) {
     Skinner.load(skinObject);
 };
 
-module.exports.loadModule = function(moduleObject) {
-    Modulator.loadModule(moduleObject);
-};
-
 module.exports.resetSkin = function() {
     Skinner.reset();
 };