From c708976635805b216834f0dd5d05fb5e690db899 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 13:49:34 +0100
Subject: [PATCH 01/11] Wire up CreateRoom to UI.

---
 .../base/views/atoms/create_room/RoomAlias.js | 72 +++++++++++++++++++
 .../atoms/create_room/RoomNameTextbox.js      |  2 +-
 .../base/views/atoms/create_room/RoomTopic.js | 37 ++++++++++
 skins/base/views/molecules/DirectoryMenu.js   |  6 +-
 skins/base/views/organisms/CreateRoom.js      | 12 ++--
 skins/base/views/pages/MatrixChat.js          | 26 +++++--
 src/ComponentBroker.js                        |  2 +
 .../atoms/create_room/RoomAlias.js            | 41 +++++++++++
 .../atoms/create_room/RoomTopic.js            | 41 +++++++++++
 src/controllers/organisms/CreateRoom.js       |  4 +-
 src/controllers/pages/MatrixChat.js           | 11 +++
 11 files changed, 241 insertions(+), 13 deletions(-)
 create mode 100644 skins/base/views/atoms/create_room/RoomAlias.js
 create mode 100644 skins/base/views/atoms/create_room/RoomTopic.js
 create mode 100644 src/controllers/atoms/create_room/RoomAlias.js
 create mode 100644 src/controllers/atoms/create_room/RoomTopic.js

diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js
new file mode 100644
index 0000000000..f60ec6b329
--- /dev/null
+++ b/skins/base/views/atoms/create_room/RoomAlias.js
@@ -0,0 +1,72 @@
+/*
+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 RoomAliasController = require("../../../../../src/controllers/atoms/create_room/RoomAlias");
+
+module.exports = React.createClass({
+    displayName: 'RoomAlias',
+    mixins: [RoomAliasController],
+
+    onValueChanged: function(ev) {
+        this.setState({room_alias: ev.target.value})
+    },
+
+    onFocus: function(ev) {
+        var target = ev.target;
+        var curr_val = ev.target.value;
+
+        if (curr_val == "") {
+            target.value = "#:example.com";
+            setTimeout(function() {
+                target.setSelectionRange(1, 1);
+            }, 0);
+        } else {
+            setTimeout(function() {
+                target.setSelectionRange(
+                    curr_val.startsWith("#") ? 1 : 0,
+                    curr_val.endsWith(":example.com") ? (target.value.length - ":example.com".length) : target.value.length
+                );
+            }, 0);
+        }
+    },
+
+    onBlur: function(ev) {
+        var curr_val = ev.target.value;
+
+        if (curr_val == "#:example.com") {
+            ev.target.value = "";
+            return;
+        }
+
+        if (curr_val != "") {
+            var new_val = ev.target.value;
+            if (!curr_val.startsWith("#")) new_val = "#" + new_val;
+            if (!curr_val.endsWith(":example.com")) new_val = new_val + ":example.com";
+            ev.target.value = new_val;
+        }
+    },
+
+    render: function() {
+        return (
+            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
+                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}/>
+        );
+    }
+});
diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js
index c358a14cb3..038d39a93a 100644
--- a/skins/base/views/atoms/create_room/RoomNameTextbox.js
+++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js
@@ -30,7 +30,7 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <input type="text" className="mx_RoomNameTextbox" placeholder="ex. MyNewRoom" onChange={this.onValueChanged}/>
+            <input type="text" className="mx_RoomNameTextbox" placeholder="Name" onChange={this.onValueChanged}/>
         );
     }
 });
diff --git a/skins/base/views/atoms/create_room/RoomTopic.js b/skins/base/views/atoms/create_room/RoomTopic.js
new file mode 100644
index 0000000000..134833f905
--- /dev/null
+++ b/skins/base/views/atoms/create_room/RoomTopic.js
@@ -0,0 +1,37 @@
+/*
+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 RoomTopicController = require("../../../../../src/controllers/atoms/create_room/RoomTopic");
+
+module.exports = React.createClass({
+    displayName: 'RoomTopic',
+    mixins: [RoomTopicController],
+
+    onValueChanged: function(ev) {
+        this.setState({room_topic: ev.target.value})
+    },
+
+    render: function() {
+        return (
+            <textarea className="mx_RoomTopic" placeholder="Description" onChange={this.onValueChanged}>
+            </textarea>
+        );
+    }
+});
diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js
index f3b9e592b9..60b5542d4b 100644
--- a/skins/base/views/molecules/DirectoryMenu.js
+++ b/skins/base/views/molecules/DirectoryMenu.js
@@ -33,11 +33,15 @@ module.exports = React.createClass({
         dis.dispatch({action: 'view_user_settings'});
     },
 
+    onCreateRoomClick: function() {
+        dis.dispatch({action: 'view_create_room'});
+    },
+
     render: function() {
         return (
             <div className="mx_DirectoryMenu">
                 <div className="mx_DirectoryMenu_options">
-                    <div className="mx_RoomTile">
+                    <div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
                         <div className="mx_RoomTile_avatar">
                             <img src="img/create-big.png" width="42" height="42"/>
                         </div>
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index 36f6e466e5..d7e84cccd6 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -24,6 +24,8 @@ var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
 var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox");
+var RoomTopic = ComponentBroker.get("atoms/create_room/RoomTopic");
+var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
 var Presets = ComponentBroker.get("atoms/create_room/Presets");
 var UserSelector = ComponentBroker.get("molecules/UserSelector");
 
@@ -61,10 +63,12 @@ module.exports = React.createClass({
             }
             return (
                 <div className="mx_CreateRoom">
-                    <label>Room Name <RoomNameTextbox ref="name_textbox" /></label>
-                    <Presets ref="presets"/>
-                    <UserSelector ref="user_selector"/>
-                    <CreateRoomButton onCreateRoom={this.onCreateRoom} />
+                    <RoomNameTextbox ref="name_textbox" /> <br />
+                    <Presets ref="presets"/> <br />
+                    <RoomTopic /> <br />
+                    <RoomAlias /> <br />
+                    <UserSelector ref="user_selector"/> <br />
+                    <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
                     {error_box}
                 </div>
             );
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index 27d1a1151a..4ab0e6492b 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/skins/base/views/pages/MatrixChat.js
@@ -25,28 +25,44 @@ var RightPanel = ComponentBroker.get('organisms/RightPanel');
 var Login = ComponentBroker.get('templates/Login');
 var UserSettings = ComponentBroker.get('organisms/UserSettings');
 var Register = ComponentBroker.get('templates/Register');
+var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
 
 var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
 
 // should be atomised
 var Loader = require("react-loader");
 
+var dis = require("../../../../src/dispatcher");
+
 
 module.exports = React.createClass({
     displayName: 'MatrixChat',
     mixins: [MatrixChatController],
 
+    onRoomCreated: function(room_id) {
+        dis.dispatch({
+            action: "view_room",
+            room_id: room_id,
+        });
+    },
+
     render: function() {
         if (this.state.logged_in && this.state.ready) {
 
             var page_element;
             var right_panel = "";
 
-            if (this.state.page_type == this.PageTypes.RoomView) {
-                page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
-                right_panel = <RightPanel roomId={this.state.currentRoom} />
-            } else if (this.state.page_type == this.PageTypes.UserSettings) {
-                page_element = <UserSettings />
+            switch (this.state.page_type) {
+                case this.PageTypes.RoomView:
+                    page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
+                    right_panel = <RightPanel roomId={this.state.currentRoom} />
+                    break;
+                case this.PageTypes.UserSettings:
+                    page_element = <UserSettings />
+                    break;
+                case this.PageTypes.CreateRoom:
+                    page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
+                    break;
             }
 
             return (
diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js
index dfbcf2e217..58e8f2eef9 100644
--- a/src/ComponentBroker.js
+++ b/src/ComponentBroker.js
@@ -63,6 +63,8 @@ require('../skins/base/views/atoms/EnableNotificationsButton');
 require('../skins/base/views/atoms/MessageTimestamp');
 require('../skins/base/views/atoms/create_room/CreateRoomButton');
 require('../skins/base/views/atoms/create_room/RoomNameTextbox');
+require('../skins/base/views/atoms/create_room/RoomTopic');
+require('../skins/base/views/atoms/create_room/RoomAlias');
 require('../skins/base/views/atoms/create_room/Presets');
 require('../skins/base/views/atoms/EditableText');
 require('../skins/base/views/molecules/MatrixToolbar');
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
new file mode 100644
index 0000000000..804b0b29e1
--- /dev/null
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -0,0 +1,41 @@
+/*
+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');
+
+module.exports = {
+    propTypes: {
+        default_alias: React.PropTypes.string
+    },
+
+    getDefaultProps: function() {
+        return {
+            default_alias: '',
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            room_alias: this.props.default_alias,
+        }
+    },
+
+    getAlias: function() {
+        return this.state.room_alias;
+    },
+};
diff --git a/src/controllers/atoms/create_room/RoomTopic.js b/src/controllers/atoms/create_room/RoomTopic.js
new file mode 100644
index 0000000000..cbd21b9b8e
--- /dev/null
+++ b/src/controllers/atoms/create_room/RoomTopic.js
@@ -0,0 +1,41 @@
+/*
+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');
+
+module.exports = {
+    propTypes: {
+        default_topic: React.PropTypes.string
+    },
+
+    getDefaultProps: function() {
+        return {
+            default_topic: '',
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            room_topic: this.props.default_topic,
+        }
+    },
+
+    getTopic: function() {
+        return this.state.room_topic;
+    },
+};
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
index c2112ce58f..048f367950 100644
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -77,11 +77,11 @@ module.exports = {
 
         var self = this;
 
-        deferred.then(function () {
+        deferred.then(function (resp) {
             self.setState({
                 phase: self.phases.CREATED,
             });
-            self.props.onRoomCreated();
+            self.props.onRoomCreated(resp.room_id);
         }, function(err) {
             self.setState({
                 phase: self.phases.ERROR,
diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js
index 9367872b2a..26bc6cf62b 100644
--- a/src/controllers/pages/MatrixChat.js
+++ b/src/controllers/pages/MatrixChat.js
@@ -32,6 +32,11 @@ module.exports = {
     PageTypes: {
         RoomView: "room_view",
         UserSettings: "user_settings",
+        CreateRoom: "create_room",
+    },
+
+    AuxPanel: {
+        RoomSettings: "room_settings",
     },
 
     getInitialState: function() {
@@ -39,6 +44,7 @@ module.exports = {
             logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials),
             ready: false,
             page_type: this.PageTypes.RoomView,
+            aux_panel: null,
         };
     },
 
@@ -143,6 +149,11 @@ module.exports = {
                     page_type: this.PageTypes.UserSettings,
                 });
                 break;
+            case 'view_create_room':
+                this.setState({
+                    page_type: this.PageTypes.CreateRoom,
+                });
+                break;
         }
     },
 

From cd26d1323f9f7f13b7ef2d2763ae515d63e56891 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 15:55:46 +0100
Subject: [PATCH 02/11] Wire together checkboxes and presets and use new
 /createRoom api

---
 skins/base/views/atoms/create_room/Presets.js |  9 +--
 skins/base/views/organisms/CreateRoom.js      | 58 ++++++++++++++++++-
 src/controllers/atoms/create_room/Presets.js  | 25 +++++++-
 .../atoms/create_room/RoomAlias.js            | 12 +++-
 src/controllers/organisms/CreateRoom.js       | 33 ++++++++++-
 5 files changed, 124 insertions(+), 13 deletions(-)

diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js
index 83fe61bdbb..04e7d34d78 100644
--- a/skins/base/views/atoms/create_room/Presets.js
+++ b/skins/base/views/atoms/create_room/Presets.js
@@ -25,14 +25,15 @@ module.exports = React.createClass({
     mixins: [PresetsController],
 
     onValueChanged: function(ev) {
-        this.setState({preset: ev.target.value})
+        this.setState({preset: ev.target.value}, this.props.onChange);
     },
 
     render: function() {
         return (
-            <select className="mx_Presets" onChange={this.onValueChanged} defaultValue={this.state.preset}>
-                <option value="private_chat">Private Chat</option>
-                <option value="public_chat">Public Chat</option>
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.state.preset}>
+                <option value={this.Presets.PrivateChat}>Private Chat</option>
+                <option value={this.Presets.PublicChat}>Public Chat</option>
+                <option value={this.Presets.Custom}>Custom</option>
             </select>
         );
     }
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index d7e84cccd6..ce12630bea 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -22,6 +22,8 @@ var CreateRoomController = require("../../../../src/controllers/organisms/Create
 
 var ComponentBroker = require('../../../../src/ComponentBroker');
 
+var PresetValues = require('../../../../src/controllers/atoms/create_room/Presets').Presets;
+
 var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
 var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox");
 var RoomTopic = ComponentBroker.get("atoms/create_room/RoomTopic");
@@ -42,10 +44,57 @@ module.exports = React.createClass({
         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() {
+        var preset = this.refs.presets.getPreset();
+        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,
+        });
+    },
+
     render: function() {
         var curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
@@ -64,10 +113,13 @@ module.exports = React.createClass({
             return (
                 <div className="mx_CreateRoom">
                     <RoomNameTextbox ref="name_textbox" /> <br />
-                    <Presets ref="presets"/> <br />
-                    <RoomTopic /> <br />
-                    <RoomAlias /> <br />
+                    <RoomTopic ref="topic"/> <br />
+                    <RoomAlias ref="alias"/> <br />
                     <UserSelector ref="user_selector"/> <br />
+                    <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
+                    <label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
+                    <label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
+                    <label><input type="checkbox"/> Encrypt room</label>
                     <CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
                     {error_box}
                 </div>
diff --git a/src/controllers/atoms/create_room/Presets.js b/src/controllers/atoms/create_room/Presets.js
index 5ff7327e5a..976c88db13 100644
--- a/src/controllers/atoms/create_room/Presets.js
+++ b/src/controllers/atoms/create_room/Presets.js
@@ -18,20 +18,39 @@ limitations under the License.
 
 var React = require('react');
 
+var Presets = {
+    PrivateChat: "private_chat",
+    PublicChat: "public_chat",
+    Custom: "custom",
+};
+
 module.exports = {
     propTypes: {
-        default_preset: React.PropTypes.string
+        onChange: React.PropTypes.func,
+        default_preset: React.PropTypes.string,
+        preset: React.PropTypes.string
     },
 
+    Presets: Presets,
+
     getDefaultProps: function() {
         return {
-            default_preset: 'private_chat',
+            onChange: function() {},
+            default_preset: Presets.PrivateChat,
         };
     },
 
     getInitialState: function() {
         return {
-            preset: this.props.default_preset,
+            preset: this.props.preset || this.props.default_preset,
+        }
+    },
+
+    componentWillReceiveProps: function(new_props) {
+        if (new_props.preset) {
+            this.setState({
+                preset: new_props.preset
+            });
         }
     },
 
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
index 804b0b29e1..7e3e38a5da 100644
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -35,7 +35,15 @@ module.exports = {
         }
     },
 
-    getAlias: function() {
-        return this.state.room_alias;
+    getAliasLocalpart: function() {
+        var room_alias = this.state.room_alias;
+
+        if (room_alias) {
+            if (room_alias.startsWith("#") && room_alias.endsWith("example.com")) {
+                room_alias = room_alias.slice(1, -":example.com".length);
+            }
+        }
+
+        return room_alias;
     },
 };
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
index 048f367950..6ea2c6004e 100644
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require("react");
 var MatrixClientPeg = require("../../MatrixClientPeg");
+var PresetValues = require('../atoms/create_room/Presets').Presets;
 
 module.exports = {
     propTypes: {
@@ -41,6 +42,9 @@ module.exports = {
         return {
             phase: this.phases.CONFIG,
             error_string: "",
+            is_private: true,
+            share_history: false,
+            default_preset: PresetValues.PrivateChat
         };
     },
 
@@ -52,9 +56,31 @@ module.exports = {
             options.name = room_name;
         }
 
+        var room_topic = this.getTopic();
+        if (room_name) {
+            options.topic = room_topic;
+        }
+
         var preset = this.getPreset();
         if (preset) {
-            options.preset = preset;
+            if (preset != PresetValues.Custom) {
+                options.preset = preset;
+            } else {
+                options.initial_state = [
+                    {
+                        type: "m.room.join_rules",
+                        content: {
+                            "join_rules": this.state.is_private ? "invite" : "public"
+                        }
+                    },
+                    {
+                        type: "m.room.history_visibility",
+                        content: {
+                            "history_visibility": this.state.share_history ? "shared" : "invited"
+                        }
+                    },
+                ];
+            }
         }
 
         var invited_users = this.getInvitedUsers();
@@ -62,6 +88,11 @@ module.exports = {
             options.invite = invited_users;
         }
 
+        var alias = this.getAliasLocalpart();
+        if (alias) {
+            options.room_alias_name = alias;
+        }
+
         var cli = MatrixClientPeg.get();
         if (!cli) {
             // TODO: Error.

From 95968bf619e0783cc195d932c2be843bfc66ba3a Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 16:14:55 +0100
Subject: [PATCH 03/11] Make server_name magix in RoomAlias optional

---
 .../base/views/atoms/create_room/RoomAlias.js | 48 +++++++++++--------
 .../atoms/create_room/RoomAlias.js            |  8 ++--
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js
index f60ec6b329..fd0789b99c 100644
--- a/skins/base/views/atoms/create_room/RoomAlias.js
+++ b/skins/base/views/atoms/create_room/RoomAlias.js
@@ -32,34 +32,40 @@ module.exports = React.createClass({
         var target = ev.target;
         var curr_val = ev.target.value;
 
-        if (curr_val == "") {
-            target.value = "#:example.com";
-            setTimeout(function() {
-                target.setSelectionRange(1, 1);
-            }, 0);
-        } else {
-            setTimeout(function() {
-                target.setSelectionRange(
-                    curr_val.startsWith("#") ? 1 : 0,
-                    curr_val.endsWith(":example.com") ? (target.value.length - ":example.com".length) : target.value.length
-                );
-            }, 0);
+        if (this.props.homeserver) {
+            if (curr_val == "") {
+                setTimeout(function() {
+                    target.value = "#:" + this.props.homeserver;
+                    target.setSelectionRange(1, 1);
+                }, 0);
+            } else {
+                var suffix = ":" + this.props.homeserver;
+                setTimeout(function() {
+                    target.setSelectionRange(
+                        curr_val.startsWith("#") ? 1 : 0,
+                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
+                    );
+                }, 0);
+            }
         }
     },
 
     onBlur: function(ev) {
         var curr_val = ev.target.value;
 
-        if (curr_val == "#:example.com") {
-            ev.target.value = "";
-            return;
-        }
+        if (this.props.homeserver) {
+            if (curr_val == "#:" + this.props.homeserver) {
+                ev.target.value = "";
+                return;
+            }
 
-        if (curr_val != "") {
-            var new_val = ev.target.value;
-            if (!curr_val.startsWith("#")) new_val = "#" + new_val;
-            if (!curr_val.endsWith(":example.com")) new_val = new_val + ":example.com";
-            ev.target.value = new_val;
+            if (curr_val != "") {
+                var new_val = ev.target.value;
+                var suffix = ":" + this.props.homeserver;
+                if (!curr_val.startsWith("#")) new_val = "#" + new_val;
+                if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
+                ev.target.value = new_val;
+            }
         }
     },
 
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
index 7e3e38a5da..6aff89479d 100644
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -20,6 +20,7 @@ var React = require('react');
 
 module.exports = {
     propTypes: {
+        homeserver: React.PropTypes.string,
         default_alias: React.PropTypes.string
     },
 
@@ -38,9 +39,10 @@ module.exports = {
     getAliasLocalpart: function() {
         var room_alias = this.state.room_alias;
 
-        if (room_alias) {
-            if (room_alias.startsWith("#") && room_alias.endsWith("example.com")) {
-                room_alias = room_alias.slice(1, -":example.com".length);
+        if (room_alias && this.props.homeserver) {
+            var suffix = ":" + this.props.homeserver;
+            if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
+                room_alias = room_alias.slice(1, -suffix.length);
             }
         }
 

From ebedf0b907a92163509759367f7a3bce96741f13 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 16:17:29 +0100
Subject: [PATCH 04/11] Add comment about RoomAlias magic

---
 src/controllers/atoms/create_room/RoomAlias.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
index 6aff89479d..2496179a8d 100644
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -20,6 +20,8 @@ var React = require('react');
 
 module.exports = {
     propTypes: {
+        // Specifying a homeserver will make magical things happen when you,
+        // e.g. start typing in the room alias box.
         homeserver: React.PropTypes.string,
         default_alias: React.PropTypes.string
     },

From 47f4c0dfff712624f783c5cc3090a0c7f2b03be8 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 16:20:00 +0100
Subject: [PATCH 05/11] Use Loader

---
 skins/base/views/organisms/CreateRoom.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index ce12630bea..7d2e35498a 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -31,6 +31,8 @@ var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
 var Presets = ComponentBroker.get("atoms/create_room/Presets");
 var UserSelector = ComponentBroker.get("molecules/UserSelector");
 
+var Loader = require("react-loader");
+
 
 module.exports = React.createClass({
     displayName: 'CreateRoom',
@@ -99,7 +101,7 @@ module.exports = React.createClass({
         var curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
             return (
-                <div>Creating...</div>
+                <Loader/>
             );
         } else {
             var error_box = "";

From 9b6060a3631a2d3559d617c67acbd2742a919e37 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 16 Jul 2015 16:49:40 +0100
Subject: [PATCH 06/11] Decouple login view & controller

---
 skins/base/views/templates/Login.js | 18 ++++++++++++++++++
 src/controllers/templates/Login.js  | 15 +++++++++------
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/skins/base/views/templates/Login.js b/skins/base/views/templates/Login.js
index 49dd05f5fb..f71e307068 100644
--- a/skins/base/views/templates/Login.js
+++ b/skins/base/views/templates/Login.js
@@ -31,6 +31,24 @@ module.exports = React.createClass({
     displayName: 'Login',
     mixins: [LoginController],
 
+    getHsUrl: function() {
+        return this.refs.serverConfig.getHsUrl();
+    },
+
+    getIsUrl: function() {
+        return this.refs.serverConfig.getIsUrl();
+    },
+
+    /**
+     * Gets the form field values for the current login stage
+     */
+    getFormVals: function() {
+        return {
+            'username': this.refs.user.getDOMNode().value,
+            'password': this.refs.pass.getDOMNode().value
+        };
+    },
+
     componentForStep: function(step) {
         switch (step) {
             case 'choose_hs':
diff --git a/src/controllers/templates/Login.js b/src/controllers/templates/Login.js
index 2719436ebd..5543fbcf80 100644
--- a/src/controllers/templates/Login.js
+++ b/src/controllers/templates/Login.js
@@ -41,12 +41,12 @@ module.exports = {
     onHSChosen: function(ev) {
         ev.preventDefault();
         MatrixClientPeg.replaceUsingUrls(
-            this.refs.serverConfig.getHsUrl(),
-            this.refs.serverConfig.getIsUrl()
+            this.getHsUrl(),
+            this.getIsUrl()
         );
         this.setState({
-            hs_url: this.refs.serverConfig.getHsUrl(),
-            is_url: this.refs.serverConfig.getIsUrl()
+            hs_url: this.getHsUrl(),
+            is_url: this.getIsUrl()
         });
         this.setStep("fetch_stages");
         var cli = MatrixClientPeg.get();
@@ -69,9 +69,12 @@ module.exports = {
         ev.preventDefault();
         this.setState({busy: true});
         var that = this;
+
+        var formVals = this.getFormVals();
+
         MatrixClientPeg.get().login('m.login.password', {
-            'user': that.refs.user.getDOMNode().value,
-            'password': that.refs.pass.getDOMNode().value
+            'user': formVals.username,
+            'password': formVals.password
         }).then(function(data) {
             // XXX: we assume this means we're logged in, but there could be a next stage
             MatrixClientPeg.replace(Matrix.createClient({

From e6260987cc8d093131488de42985017575effc79 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 16 Jul 2015 16:53:08 +0100
Subject: [PATCH 07/11] some s/then/done/

---
 src/controllers/templates/Login.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/templates/Login.js b/src/controllers/templates/Login.js
index 5543fbcf80..07ace740d5 100644
--- a/src/controllers/templates/Login.js
+++ b/src/controllers/templates/Login.js
@@ -52,7 +52,7 @@ module.exports = {
         var cli = MatrixClientPeg.get();
         this.setState({busy: true});
         var that = this;
-        cli.loginFlows().then(function(result) {
+        cli.loginFlows().done(function(result) {
             that.setState({
                 flows: result.flows,
                 currentStep: 1,
@@ -75,7 +75,7 @@ module.exports = {
         MatrixClientPeg.get().login('m.login.password', {
             'user': formVals.username,
             'password': formVals.password
-        }).then(function(data) {
+        }).done(function(data) {
             // XXX: we assume this means we're logged in, but there could be a next stage
             MatrixClientPeg.replace(Matrix.createClient({
                 baseUrl: that.state.hs_url,

From aa1b763518036c6a5cd611cf8d7300791ec22ae7 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 17:20:03 +0100
Subject: [PATCH 08/11] Make CreateRoom remember what the values of its fields
 were. Remove some fairly pointless atoms

---
 .../base/views/atoms/create_room/RoomAlias.js |  5 ++-
 .../atoms/create_room/RoomNameTextbox.js      | 36 ----------------
 .../base/views/atoms/create_room/RoomTopic.js | 37 -----------------
 skins/base/views/molecules/UserSelector.js    |  2 +-
 skins/base/views/organisms/CreateRoom.js      | 32 +++++++++++++--
 .../atoms/create_room/RoomAlias.js            | 14 +++----
 .../atoms/create_room/RoomNameTextbox.js      | 41 -------------------
 .../atoms/create_room/RoomTopic.js            | 41 -------------------
 src/controllers/molecules/UserSelector.js     | 30 ++++----------
 src/controllers/organisms/CreateRoom.js       | 20 ++++-----
 10 files changed, 55 insertions(+), 203 deletions(-)
 delete mode 100644 skins/base/views/atoms/create_room/RoomNameTextbox.js
 delete mode 100644 skins/base/views/atoms/create_room/RoomTopic.js
 delete mode 100644 src/controllers/atoms/create_room/RoomNameTextbox.js
 delete mode 100644 src/controllers/atoms/create_room/RoomTopic.js

diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js
index fd0789b99c..a59a8e69ad 100644
--- a/skins/base/views/atoms/create_room/RoomAlias.js
+++ b/skins/base/views/atoms/create_room/RoomAlias.js
@@ -25,7 +25,7 @@ module.exports = React.createClass({
     mixins: [RoomAliasController],
 
     onValueChanged: function(ev) {
-        this.setState({room_alias: ev.target.value})
+        this.props.onChange(ev.target.value);
     },
 
     onFocus: function(ev) {
@@ -72,7 +72,8 @@ module.exports = React.createClass({
     render: function() {
         return (
             <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
-                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}/>
+                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
+                value={this.props.alias}/>
         );
     }
 });
diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js
deleted file mode 100644
index 038d39a93a..0000000000
--- a/skins/base/views/atoms/create_room/RoomNameTextbox.js
+++ /dev/null
@@ -1,36 +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 RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox");
-
-module.exports = React.createClass({
-    displayName: 'RoomNameTextbox',
-    mixins: [RoomNameTextboxController],
-
-    onValueChanged: function(ev) {
-        this.setState({room_name: ev.target.value})
-    },
-
-    render: function() {
-        return (
-            <input type="text" className="mx_RoomNameTextbox" placeholder="Name" onChange={this.onValueChanged}/>
-        );
-    }
-});
diff --git a/skins/base/views/atoms/create_room/RoomTopic.js b/skins/base/views/atoms/create_room/RoomTopic.js
deleted file mode 100644
index 134833f905..0000000000
--- a/skins/base/views/atoms/create_room/RoomTopic.js
+++ /dev/null
@@ -1,37 +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 RoomTopicController = require("../../../../../src/controllers/atoms/create_room/RoomTopic");
-
-module.exports = React.createClass({
-    displayName: 'RoomTopic',
-    mixins: [RoomTopicController],
-
-    onValueChanged: function(ev) {
-        this.setState({room_topic: ev.target.value})
-    },
-
-    render: function() {
-        return (
-            <textarea className="mx_RoomTopic" placeholder="Description" onChange={this.onValueChanged}>
-            </textarea>
-        );
-    }
-});
diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js
index 7517e29d0f..81afa5f4e6 100644
--- a/skins/base/views/molecules/UserSelector.js
+++ b/skins/base/views/molecules/UserSelector.js
@@ -32,7 +32,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
-                    {this.state.selected_users.map(function(user_id, i) {
+                    {this.props.selected_users.map(function(user_id, i) {
                         return <li key={user_id}>{user_id}</li>
                     })}
                 </ul>
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index 7d2e35498a..fa6d55f257 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -97,6 +97,30 @@ module.exports = React.createClass({
         });
     },
 
+    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
+        })
+    },
+
     render: function() {
         var curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
@@ -114,10 +138,10 @@ module.exports = React.createClass({
             }
             return (
                 <div className="mx_CreateRoom">
-                    <RoomNameTextbox ref="name_textbox" /> <br />
-                    <RoomTopic ref="topic"/> <br />
-                    <RoomAlias ref="alias"/> <br />
-                    <UserSelector ref="user_selector"/> <br />
+                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
+                    <textarea ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Description"/> <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 />
                     <label><input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/> Make this room private</label>
                     <label><input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/> Share message history with new users</label>
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
index 2496179a8d..4b268e9024 100644
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ b/src/controllers/atoms/create_room/RoomAlias.js
@@ -23,23 +23,19 @@ module.exports = {
         // Specifying a homeserver will make magical things happen when you,
         // e.g. start typing in the room alias box.
         homeserver: React.PropTypes.string,
-        default_alias: React.PropTypes.string
+        alias: React.PropTypes.string,
+        onChange: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
         return {
-            default_alias: '',
+            onChange: function() {},
+            alias: '',
         };
     },
 
-    getInitialState: function() {
-        return {
-            room_alias: this.props.default_alias,
-        }
-    },
-
     getAliasLocalpart: function() {
-        var room_alias = this.state.room_alias;
+        var room_alias = this.props.alias;
 
         if (room_alias && this.props.homeserver) {
             var suffix = ":" + this.props.homeserver;
diff --git a/src/controllers/atoms/create_room/RoomNameTextbox.js b/src/controllers/atoms/create_room/RoomNameTextbox.js
deleted file mode 100644
index e78692d992..0000000000
--- a/src/controllers/atoms/create_room/RoomNameTextbox.js
+++ /dev/null
@@ -1,41 +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');
-
-module.exports = {
-    propTypes: {
-        default_name: React.PropTypes.string
-    },
-
-    getDefaultProps: function() {
-        return {
-            default_name: '',
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            room_name: this.props.default_name,
-        }
-    },
-
-    getName: function() {
-        return this.state.room_name;
-    },
-};
diff --git a/src/controllers/atoms/create_room/RoomTopic.js b/src/controllers/atoms/create_room/RoomTopic.js
deleted file mode 100644
index cbd21b9b8e..0000000000
--- a/src/controllers/atoms/create_room/RoomTopic.js
+++ /dev/null
@@ -1,41 +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');
-
-module.exports = {
-    propTypes: {
-        default_topic: React.PropTypes.string
-    },
-
-    getDefaultProps: function() {
-        return {
-            default_topic: '',
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            room_topic: this.props.default_topic,
-        }
-    },
-
-    getTopic: function() {
-        return this.state.room_topic;
-    },
-};
diff --git a/src/controllers/molecules/UserSelector.js b/src/controllers/molecules/UserSelector.js
index e7e0509690..b3a604402a 100644
--- a/src/controllers/molecules/UserSelector.js
+++ b/src/controllers/molecules/UserSelector.js
@@ -20,38 +20,26 @@ var React = require('react');
 
 module.exports = {
     propTypes: {
-        initially_selected: React.PropTypes.arrayOf(React.PropTypes.string),
+        onChange: React.PropTypes.func,
+        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
     },
 
     getDefaultProps: function() {
         return {
-            initially_selected: [],
+            onChange: function() {},
+            selected: [],
         };
     },
 
-    getInitialState: function() {
-        return {
-            selected_users: this.props.initially_selected,
-        }
-    },
-
     addUser: function(user_id) {
-        if (this.state.selected_users.indexOf(user_id == -1)) {
-            this.setState({
-                selected_users: this.state.selected_users.concat([user_id]),
-            });
+        if (this.props.selected_users.indexOf(user_id == -1)) {
+            this.props.onChange(this.props.selected_users.concat([user_id]));
         }
     },
 
     removeUser: function(user_id) {
-        this.setState({
-            selected_users: this.state.selected_users.filter(function(e) {
-                return e != user_id;
-            }),
-        });
+        this.props.onChange(this.state.selected_users.filter(function(e) {
+            return e != user_id;
+        }));
     },
-
-    getUserIds: function() {
-        return this.state.selected_users;
-    }
 };
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
index 6ea2c6004e..6ba8247fd8 100644
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -44,21 +44,22 @@ module.exports = {
             error_string: "",
             is_private: true,
             share_history: false,
-            default_preset: PresetValues.PrivateChat
+            default_preset: PresetValues.PrivateChat,
+            topic: '',
+            room_name: '',
+            invited_users: [],
         };
     },
 
     onCreateRoom: function() {
         var options = {};
 
-        var room_name = this.getName();
-        if (room_name) {
-            options.name = room_name;
+        if (this.state.room_name) {
+            options.name = this.state.room_name;
         }
 
-        var room_topic = this.getTopic();
-        if (room_name) {
-            options.topic = room_topic;
+        if (this.state.topic) {
+            options.topic = this.state.topic;
         }
 
         var preset = this.getPreset();
@@ -83,10 +84,7 @@ module.exports = {
             }
         }
 
-        var invited_users = this.getInvitedUsers();
-        if (invited_users) {
-            options.invite = invited_users;
-        }
+        options.invite = this.state.invited_users;
 
         var alias = this.getAliasLocalpart();
         if (alias) {

From 68d60aadd16ed48ebe701130a6360bbbcdcfb3c4 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 17:24:33 +0100
Subject: [PATCH 09/11] Make Presets stateless

---
 skins/base/views/atoms/create_room/Presets.js |  4 ++--
 skins/base/views/organisms/CreateRoom.js      |  3 +--
 src/controllers/atoms/create_room/Presets.js  | 20 -------------------
 src/controllers/organisms/CreateRoom.js       |  7 +++----
 4 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js
index 04e7d34d78..271702b18a 100644
--- a/skins/base/views/atoms/create_room/Presets.js
+++ b/skins/base/views/atoms/create_room/Presets.js
@@ -25,12 +25,12 @@ module.exports = React.createClass({
     mixins: [PresetsController],
 
     onValueChanged: function(ev) {
-        this.setState({preset: ev.target.value}, this.props.onChange);
+        this.props.onChange(ev.target.value)
     },
 
     render: function() {
         return (
-            <select className="mx_Presets" onChange={this.onValueChanged} value={this.state.preset}>
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
                 <option value={this.Presets.PrivateChat}>Private Chat</option>
                 <option value={this.Presets.PublicChat}>Public Chat</option>
                 <option value={this.Presets.Custom}>Custom</option>
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js
index fa6d55f257..ae250db95f 100644
--- a/skins/base/views/organisms/CreateRoom.js
+++ b/skins/base/views/organisms/CreateRoom.js
@@ -58,8 +58,7 @@ module.exports = React.createClass({
         return this.refs.user_selector.getUserIds();
     },
 
-    onPresetChanged: function() {
-        var preset = this.refs.presets.getPreset();
+    onPresetChanged: function(preset) {
         switch (preset) {
             case PresetValues.PrivateChat:
                 this.setState({
diff --git a/src/controllers/atoms/create_room/Presets.js b/src/controllers/atoms/create_room/Presets.js
index 976c88db13..bcc2f51481 100644
--- a/src/controllers/atoms/create_room/Presets.js
+++ b/src/controllers/atoms/create_room/Presets.js
@@ -27,7 +27,6 @@ var Presets = {
 module.exports = {
     propTypes: {
         onChange: React.PropTypes.func,
-        default_preset: React.PropTypes.string,
         preset: React.PropTypes.string
     },
 
@@ -36,25 +35,6 @@ module.exports = {
     getDefaultProps: function() {
         return {
             onChange: function() {},
-            default_preset: Presets.PrivateChat,
         };
     },
-
-    getInitialState: function() {
-        return {
-            preset: this.props.preset || this.props.default_preset,
-        }
-    },
-
-    componentWillReceiveProps: function(new_props) {
-        if (new_props.preset) {
-            this.setState({
-                preset: new_props.preset
-            });
-        }
-    },
-
-    getPreset: function() {
-        return this.state.preset;
-    },
 };
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
index 6ba8247fd8..107e94b357 100644
--- a/src/controllers/organisms/CreateRoom.js
+++ b/src/controllers/organisms/CreateRoom.js
@@ -62,10 +62,9 @@ module.exports = {
             options.topic = this.state.topic;
         }
 
-        var preset = this.getPreset();
-        if (preset) {
-            if (preset != PresetValues.Custom) {
-                options.preset = preset;
+        if (this.state.preset) {
+            if (this.state.preset != PresetValues.Custom) {
+                options.preset = this.state.preset;
             } else {
                 options.initial_state = [
                     {

From 98160c3947b838fd1ccdc876404ceb9f62449e2e Mon Sep 17 00:00:00 2001
From: Erik Johnston <erikj@matrix.org>
Date: Thu, 16 Jul 2015 17:30:10 +0100
Subject: [PATCH 10/11] Add ability to remove people from invite list

---
 skins/base/views/molecules/UserSelector.js | 6 ++++--
 src/controllers/molecules/UserSelector.js  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js
index 81afa5f4e6..8ec0086670 100644
--- a/skins/base/views/molecules/UserSelector.js
+++ b/skins/base/views/molecules/UserSelector.js
@@ -26,17 +26,19 @@ module.exports = React.createClass({
 
     onAddUserId: function() {
         this.addUser(this.refs.user_id_input.getDOMNode().value);
+        this.refs.user_id_input.getDOMNode().value = "";
     },
 
     render: function() {
+        var self = this;
         return (
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
                     {this.props.selected_users.map(function(user_id, i) {
-                        return <li key={user_id}>{user_id}</li>
+                        return <li key={user_id}>{user_id} - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>
                     })}
                 </ul>
-                <input type="text" ref="user_id_input" className="mx_UserSelector_userIdInput" placeholder="ex. @bob:example.com"/>
+                <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder="ex. @bob:example.com"/>
                 <button onClick={this.onAddUserId} className="mx_UserSelector_AddUserId">Add User</button>
             </div>
         );
diff --git a/src/controllers/molecules/UserSelector.js b/src/controllers/molecules/UserSelector.js
index b3a604402a..67a56163fa 100644
--- a/src/controllers/molecules/UserSelector.js
+++ b/src/controllers/molecules/UserSelector.js
@@ -38,7 +38,7 @@ module.exports = {
     },
 
     removeUser: function(user_id) {
-        this.props.onChange(this.state.selected_users.filter(function(e) {
+        this.props.onChange(this.props.selected_users.filter(function(e) {
             return e != user_id;
         }));
     },

From 59ca26ee933ee18369a0606834776a3c5cd3523f Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 16 Jul 2015 17:37:35 +0100
Subject: [PATCH 11/11] Use target not sender when displaying member text.

---
 skins/base/views/molecules/MRoomMemberTile.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/skins/base/views/molecules/MRoomMemberTile.js b/skins/base/views/molecules/MRoomMemberTile.js
index 79c8346c21..92b6b119e3 100644
--- a/skins/base/views/molecules/MRoomMemberTile.js
+++ b/skins/base/views/molecules/MRoomMemberTile.js
@@ -32,13 +32,14 @@ module.exports = React.createClass({
         var ev = this.props.mxEvent;
         // XXX: SYJS-16
         var senderName = ev.sender ? ev.sender.name : "Someone";
+        var targetName = ev.target ? ev.target.name : "Someone";
         switch (ev.getContent().membership) {
             case 'invite':
-                return senderName + " invited " + ev.target.name + ".";
+                return senderName + " invited " + targetName + ".";
             case 'join':
-                return senderName + " joined the room.";
+                return targetName + " joined the room.";
             case 'leave':
-                return senderName + " left the room.";
+                return targetName + " left the room.";
         }
     },
 
@@ -47,7 +48,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MessageTile">
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                    <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40"/>
                 </div>            
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <span className="mx_SenderProfile"></span>