change name to Field, no_federate to switch

also construct room create options in dialog,
instead of MatrixChat, as we'll have more to come

src/components/structures/MatrixChat.js

@@ -962,11 +962,8 @@ export default createReactClass({
         const CreateRoomDialog = sdk.getComponent('dialogs.CreateRoomDialog');
         const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog);
 
-        const [shouldCreate, name, noFederate] = await modal.finished;
+        const [shouldCreate, createOpts] = await modal.finished;
         if (shouldCreate) {
-            const createOpts = {};
-            if (name) createOpts.name = name;
-            if (noFederate) createOpts.creation_content = {'m.federate': false};
             createRoom({createOpts}).done();
         }
     },

src/components/views/dialogs/CreateRoomDialog.js

@@ -19,6 +19,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
+import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 
 export default createReactClass({
@@ -27,47 +28,88 @@ export default createReactClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    getInitialState() {
         const config = SdkConfig.get();
-        // Dialog shows inverse of m.federate (noFederate) strict false check to skip undefined check (default = true)
+        return {
-        this.defaultNoFederate = config.default_federate === false;
+            name: "",
+            noFederate: config.default_federate === false,
+            nameIsValid: false,
+        };
     },
 
-    onOk: function() {
+    _roomCreateOptions() {
-        this.props.onFinished(true, this.refs.textinput.value, this.refs.checkbox.checked);
+        const createOpts = {};
+        createOpts.name = this.state.name;
+        if (this.state.noFederate) {
+            createOpts.creation_content = {'m.federate': false};
+        }
+        return createOpts;
+    },
+
+    componentDidMount() {
+        this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
+    },
+
+    componentWillUnmount() {
+        this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
+    },
+
+    onOk: async function() {
+            this.props.onFinished(true, this._roomCreateOptions());
     },
 
     onCancel: function() {
         this.props.onFinished(false);
     },
 
+    onNameChange(ev) {
+        this.setState({name: ev.target.value});
+    },
+
+
+    onDetailsToggled(ev) {
+        this.setState({detailsOpen: ev.target.open});
+    },
+
+    onNoFederateChange(noFederate) {
+        this.setState({noFederate});
+    },
+
+    collectDetailsRef(ref) {
+        this._detailsRef = ref;
+    },
+
+    async onNameValidate(fieldState) {
+        const result = await this._validateRoomName(fieldState);
+        this.setState({nameIsValid: result.valid});
+        return result;
+    },
+
+    _validateRoomName: withValidation({
+        rules: [
+            {
+                key: "required",
+                test: async ({ value }) => !!value,
+                invalid: () => _t("Please enter a name for the room"),
+            },
+        ],
+    }),
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Field = sdk.getComponent('views.elements.Field');
+        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
                 title={_t('Create Room')}
             >
                 <form onSubmit={this.onOk}>
                     <div className="mx_Dialog_content">
-                        <div className="mx_CreateRoomDialog_label">
+                        <Field id="name" ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                            <label htmlFor="textinput"> { _t('Room name (optional)') } </label>
+                        <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
-                        </div>
+                            <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>
-                        <div className="mx_CreateRoomDialog_input_container">
+                            <LabelledToggleSwitch label={ _t('Block users on other matrix homeservers from joining this room (This setting cannot be changed later!)')} onChange={this.onNoFederateChange} value={this.state.noFederate} />
-                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} />
-                        </div>
-                        <br />
-
-                        <details className="mx_CreateRoomDialog_details">
-                            <summary className="mx_CreateRoomDialog_details_summary">{ _t('Advanced options') }</summary>
-                            <div>
-                                <input type="checkbox" id="checkbox" ref="checkbox" defaultChecked={this.defaultNoFederate} />
-                                <label htmlFor="checkbox">
-                                { _t('Block users on other matrix homeservers from joining this room') }
-                                    <br />
-                                    ({ _t('This setting cannot be changed later!') })
-                                </label>
-                            </div>
                         </details>
                     </div>
                 </form>