Fix custom server or registration & do some of new login UI

skins/base/views/templates/Login.js

@@ -28,15 +28,44 @@ var LoginController = require("../../../../src/controllers/templates/Login");
 var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
 
 module.exports = React.createClass({
+    DEFAULT_HS_URL: 'https://matrix.org',
+    DEFAULT_IS_URL: 'https://matrix.org',
+
     displayName: 'Login',
     mixins: [LoginController],
 
+    getInitialState: function() {
+        return {
+            serverConfigVisible: false
+        };
+    },
+
+    componentWillMount: function() {
+        this.onHSChosen();
+        this.customHsUrl = this.DEFAULT_HS_URL;
+        this.customIsUrl = this.DEFAULT_IS_URL;
+    },
+
     getHsUrl: function() {
+        if (this.state.serverConfigVisible) {
             return this.refs.serverConfig.getHsUrl();
+        } else {
+            return this.DEFAULT_HS_URL;
+        }
     },
 
     getIsUrl: function() {
+        if (this.state.serverConfigVisible) {
             return this.refs.serverConfig.getIsUrl();
+        } else {
+            return this.DEFAULT_IS_URL;
+        }
+    },
+
+    onServerConfigVisibleChange: function(ev) {
+        this.setState({
+            serverConfigVisible: ev.target.checked
+        });
     },
 
     /**
@@ -49,15 +78,35 @@ module.exports = React.createClass({
         };
     },
 
+    onHsUrlChanged: function() {
+        this.customHsUrl = this.getHsUrl();
+        this.customIsUrl = this.getIsUrl();
+        if (this.updateHsTimeout) {
+            clearTimeout(this.updateHsTimeout);
+        }
+        /*var self = this;
+        this.updateHsTimeout = setTimeout(function() {
+            self.onHSChosen();
+        }, 500);*/
+    },
+
     componentForStep: function(step) {
         switch (step) {
             case 'choose_hs':
+                var serverConfigStyle = {};
+                if (!this.state.serverConfigVisible) {
+                    serverConfigStyle.display = 'none';
+                }
                 return (
                     <div>
-                        <form onSubmit={this.onHSChosen}>
-                        <ServerConfig ref="serverConfig" />
-                        <input type="submit" value="Continue" />
-                        </form>
+                        <input type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
+                        Use custom server options (advanced)
+                        <div style={serverConfigStyle}>
+                        <ServerConfig ref="serverConfig"
+                            defaultHsUrl={this.customHsUrl} defaultIsUrl={this.customIsUrl}
+                            onHsUrlChanged={this.onHsUrlChanged}
+                        />
+                        </div>
                     </div>
                 );
             // XXX: clearly these should be separate organisms
@@ -67,6 +116,7 @@ module.exports = React.createClass({
                         <form onSubmit={this.onUserPassEntered}>
                         <input ref="user" type="text" placeholder="username" /><br />
                         <input ref="pass" type="password" placeholder="password" /><br />
+                        {this.componentForStep('choose_hs')}
                         <input type="submit" value="Log in" />
                         </form>
                     </div>
@@ -94,7 +144,6 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login">
-            <ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
             {this.loginContent()}
             </div>
         );

skins/base/views/templates/Register.js

@@ -39,6 +39,11 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        this.customHsUrl = this.DEFAULT_HS_URL;
+        this.customIsUrl = this.DEFAULT_IS_URL;
+    },
+
     getRegFormVals: function() {
         return {
             email: this.refs.email.getDOMNode().value,
@@ -50,7 +55,7 @@ module.exports = React.createClass({
 
     getHsUrl: function() {
         if (this.state.serverConfigVisible) {
-            return this.refs.serverConfig.getHsUrl();
+            return this.customHsUrl;
         } else {
             return this.DEFAULT_HS_URL;
         }
@@ -58,7 +63,7 @@ module.exports = React.createClass({
 
     getIsUrl: function() {
         if (this.state.serverConfigVisible) {
-            return this.refs.serverConfig.getIsUrl();
+            return this.customIsUrl;
         } else {
             return this.DEFAULT_IS_URL;
         }
@@ -82,6 +87,8 @@ module.exports = React.createClass({
     },
 
     onServerUrlChanged: function(newUrl) {
+        this.customHsUrl = this.refs.serverConfig.getHsUrl();
+        this.customIsUrl = this.refs.serverConfig.getIsUrl();
         this.forceUpdate();
     },
 
@@ -104,7 +111,7 @@ module.exports = React.createClass({
                         Use custom server options (advanced)
                         <div style={serverConfigStyle}>
                         <ServerConfig ref="serverConfig"
-                            defaultHsUrl={this.default_hs_url} defaultIsUrl={this.DEFAULT_IS_URL}
+                            defaultHsUrl={this.customHsUrl} defaultIsUrl={this.customIsUrl}
                             onHsUrlChanged={this.onServerUrlChanged} onIsUrlChanged={this.onServerUrlChanged} />
                         </div>
                         <br />

src/controllers/templates/Login.js

@@ -38,8 +38,7 @@ module.exports = {
         this.setState({ step: step, errorText: '', busy: false });
     },
 
-    onHSChosen: function(ev) {
-        ev.preventDefault();
+    onHSChosen: function() {
         MatrixClientPeg.replaceUsingUrls(
             this.getHsUrl(),
             this.getIsUrl()