Merge pull request #148 from vector-im/matthew/login

Fix up various login bugs and nastinesses

skins/base/css/common.css

@@ -83,6 +83,7 @@ html {
     font-size: 16px;
     position: relative;
     border-radius: 8px;
+    max-width: 75%;
 }
 
 .mx_ImageView {

skins/base/css/templates/Login.css

@@ -17,15 +17,6 @@ limitations under the License.
 .mx_Login {
     width: 100%;
     height: 100%;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-justify-content: center;
-    justify-content: center;
 }
 
 .mx_Login h2 {
@@ -37,6 +28,8 @@ limitations under the License.
 
 .mx_Login_box {
     width: 300px;
+    margin: auto;
+    padding-top: 100px;
 }
 
 .mx_Login_logo {
@@ -82,11 +75,19 @@ limitations under the License.
     opacity: 0.8;
 }
 
+.mx_Login_loader {
+    position: absolute;
+    left: 50%;
+    margin-top: 12px;
+}
+
 .mx_Login_error {
     color: #ff2020;
     font-weight: bold;
     text-align: center;
-    margin-bottom: 24px;
+    height: 24px;
+    margin-top: 12px;
+    margin-bottom: 12px;
 }
 
 .mx_Login_create:link {

skins/base/views/templates/Login.js

@@ -74,14 +74,25 @@ module.exports = React.createClass({
      */
     getFormVals: function() {
         return {
-            'username': this.refs.user.getDOMNode().value,
-            'password': this.refs.pass.getDOMNode().value
+            'username': this.refs.user.getDOMNode().value.trim(),
+            'password': this.refs.pass.getDOMNode().value.trim()
         };
     },
 
     onHsUrlChanged: function() {
-        this.customHsUrl = this.refs.serverConfig.getHsUrl();
-        this.customIsUrl = this.refs.serverConfig.getIsUrl();
+        var newHsUrl = this.refs.serverConfig.getHsUrl().trim();
+        var newIsUrl = this.refs.serverConfig.getIsUrl().trim();
+
+        if (newHsUrl == this.customHsUrl &&
+            newIsUrl == this.customIsUrl)
+        {
+            return;
+        }
+        else {
+            this.customHsUrl = newHsUrl;
+            this.customIsUrl = newIsUrl;
+        }
+
         MatrixClientPeg.replaceUsingUrls(
             this.getHsUrl(),
             this.getIsUrl()
@@ -93,23 +104,24 @@ module.exports = React.createClass({
         // XXX: HSes do not have to offer password auth, so we
         // need to update and maybe show a different component
         // when a new HS is entered.
-        /*if (this.updateHsTimeout) {
+        if (this.updateHsTimeout) {
             clearTimeout(this.updateHsTimeout);
         }
         var self = this;
         this.updateHsTimeout = setTimeout(function() {
             self.onHSChosen();
-        }, 500);*/
+        }, 1000);
     },
 
     componentForStep: function(step) {
         switch (step) {
             case 'choose_hs':
+            case 'fetch_stages':
                 var serverConfigStyle = {};
                 serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
                 return (
                     <div>
-                        <input className="mx_Login_checkbox" id="advanced" type="checkbox" value={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
+                        <input className="mx_Login_checkbox" id="advanced" type="checkbox" checked={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
                         <label className="mx_Login_label" htmlFor="advanced">Use custom server options (advanced)</label>
                         <div style={serverConfigStyle}>
                             <ServerConfig ref="serverConfig"
@@ -126,7 +138,7 @@ module.exports = React.createClass({
                         <form onSubmit={this.onUserPassEntered}>
                         <input className="mx_Login_field" ref="user" type="text" value={this.state.username} onChange={this.onUsernameChanged} placeholder="Email or user name" /><br />
                         <input className="mx_Login_field" ref="pass" type="password" value={this.state.password} onChange={this.onPasswordChanged} placeholder="Password" /><br />
-                        {this.componentForStep('choose_hs')}
+                        { this.componentForStep('choose_hs') }
                         <input className="mx_Login_submit" type="submit" value="Log in" />
                         </form>
                     </div>
@@ -143,20 +155,18 @@ module.exports = React.createClass({
     },
 
     loginContent: function() {
-        if (this.state.busy) {
-            return (
-                <Loader />
-            );
-        } else {
-            return (
-                <div>
-                    <h2>Sign in</h2>
-                    {this.componentForStep(this.state.step)}
-                    <div className="mx_Login_error">{this.state.errorText}</div>
-                    <a className="mx_Login_create" onClick={this.showRegister} href="#">Create a new account</a>
+        var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
+        return (
+            <div>
+                <h2>Sign in</h2>
+                {this.componentForStep(this.state.step)}
+                <div className="mx_Login_error">
+                        { loader }
+                        {this.state.errorText}
                 </div>
-            );
-        }
+                <a className="mx_Login_create" onClick={this.showRegister} href="#">Create a new account</a>
+            </div>
+        );
     },
 
     render: function() {

skins/base/views/templates/Register.js

@@ -46,10 +46,10 @@ module.exports = React.createClass({
 
     getRegFormVals: function() {
         return {
-            email: this.refs.email.getDOMNode().value,
-            username: this.refs.username.getDOMNode().value,
-            password: this.refs.password.getDOMNode().value,
-            confirmPassword: this.refs.confirmPassword.getDOMNode().value
+            email: this.refs.email.getDOMNode().value.trim(),
+            username: this.refs.username.getDOMNode().value.trim(),
+            password: this.refs.password.getDOMNode().value.trim(),
+            confirmPassword: this.refs.confirmPassword.getDOMNode().value.trim()
         };
     },
 

src/controllers/templates/Login.js

@@ -35,7 +35,7 @@ module.exports = {
     },
 
     setStep: function(step) {
-        this.setState({ step: step, errorText: '', busy: false });
+        this.setState({ step: step, busy: false });
     },
 
     onHSChosen: function() {
@@ -45,11 +45,14 @@ module.exports = {
         );
         this.setState({
             hs_url: this.getHsUrl(),
-            is_url: this.getIsUrl()
+            is_url: this.getIsUrl(),
         });
         this.setStep("fetch_stages");
         var cli = MatrixClientPeg.get();
-        this.setState({busy: true});
+        this.setState({
+            busy: true,
+            errorText: "",
+        });
         var self = this;
         cli.loginFlows().done(function(result) {
             self.setState({
@@ -66,7 +69,10 @@ module.exports = {
 
     onUserPassEntered: function(ev) {
         ev.preventDefault();
-        this.setState({busy: true});
+        this.setState({
+            busy: true,
+            errorText: "",
+        });
         var self = this;
 
         var formVals = this.getFormVals();