Wire together checkboxes and presets and use new /createRoom api

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}>
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.state.preset}>
-                <option value="private_chat">Private Chat</option>
+                <option value={this.Presets.PrivateChat}>Private Chat</option>
-                <option value="public_chat">Public Chat</option>
+                <option value={this.Presets.PublicChat}>Public Chat</option>
+                <option value={this.Presets.Custom}>Custom</option>
             </select>
         );
     }

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 ref="topic"/> <br />
-                    <RoomTopic /> <br />
+                    <RoomAlias ref="alias"/> <br />
-                    <RoomAlias /> <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>

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

src/controllers/atoms/create_room/RoomAlias.js

@@ -35,7 +35,15 @@ module.exports = {
         }
     },
 
-    getAlias: function() {
+    getAliasLocalpart: function() {
-        return this.state.room_alias;
+        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;
     },
 };

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) {
+            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.