From ab068cc3722db81b644dc4733ee043be53bd9759 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 31 Aug 2015 19:30:24 +0100 Subject: [PATCH 1/3] improve login, including checkbox fix for advanced options, rechecking when you change server, avoiding flickering when you change HS, better error/spinner layout, and trimming whitespace --- skins/base/css/templates/Login.css | 10 ++++++- skins/base/views/templates/Login.js | 41 +++++++++++++------------- skins/base/views/templates/Register.js | 8 ++--- src/controllers/templates/Login.js | 14 ++++++--- 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/skins/base/css/templates/Login.css b/skins/base/css/templates/Login.css index fe5646f9d..49feffbec 100644 --- a/skins/base/css/templates/Login.css +++ b/skins/base/css/templates/Login.css @@ -82,11 +82,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 { diff --git a/skins/base/views/templates/Login.js b/skins/base/views/templates/Login.js index a783296d2..887c7ca79 100644 --- a/skins/base/views/templates/Login.js +++ b/skins/base/views/templates/Login.js @@ -74,14 +74,14 @@ 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(); + this.customHsUrl = this.refs.serverConfig.getHsUrl().trim(); + this.customIsUrl = this.refs.serverConfig.getIsUrl().trim(); MatrixClientPeg.replaceUsingUrls( this.getHsUrl(), this.getIsUrl() @@ -93,23 +93,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);*/ + }, 500); }, componentForStep: function(step) { switch (step) { case 'choose_hs': + case 'fetch_stages': var serverConfigStyle = {}; serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none'; return (
- +


- {this.componentForStep('choose_hs')} + { this.componentForStep('choose_hs') }
@@ -143,20 +144,18 @@ module.exports = React.createClass({ }, loginContent: function() { - if (this.state.busy) { - return ( - - ); - } else { - return ( -
-

Sign in

- {this.componentForStep(this.state.step)} -
{this.state.errorText}
- Create a new account + var loader = this.state.busy ?
: null; + return ( +
+

Sign in

+ {this.componentForStep(this.state.step)} +
+ { loader } + {this.state.errorText}
- ); - } + Create a new account +
+ ); }, render: function() { diff --git a/skins/base/views/templates/Register.js b/skins/base/views/templates/Register.js index 4bfb87271..10d04c83b 100644 --- a/skins/base/views/templates/Register.js +++ b/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() }; }, diff --git a/src/controllers/templates/Login.js b/src/controllers/templates/Login.js index 7a79dbb21..f3528e33a 100644 --- a/src/controllers/templates/Login.js +++ b/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(); From 8214ee8fad439848f60ac2fcfa1cc7909285ef5b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Sep 2015 01:35:47 +0300 Subject: [PATCH 2/3] fix blinking when toggling advanced --- skins/base/views/templates/Login.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/skins/base/views/templates/Login.js b/skins/base/views/templates/Login.js index 887c7ca79..bef13b1d7 100644 --- a/skins/base/views/templates/Login.js +++ b/skins/base/views/templates/Login.js @@ -80,8 +80,19 @@ module.exports = React.createClass({ }, onHsUrlChanged: function() { - this.customHsUrl = this.refs.serverConfig.getHsUrl().trim(); - this.customIsUrl = this.refs.serverConfig.getIsUrl().trim(); + 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() From 027ab6ee997fde9261f659ea1352be01a5ca1e82 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 1 Sep 2015 01:55:13 +0300 Subject: [PATCH 3/3] fix login layout on tall screens; limit dialog box width; wait a full second to re-query new HS details --- skins/base/css/common.css | 1 + skins/base/css/templates/Login.css | 11 ++--------- skins/base/views/templates/Login.js | 2 +- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/skins/base/css/common.css b/skins/base/css/common.css index 32f915e90..d90ce11ac 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -83,6 +83,7 @@ html { font-size: 16px; position: relative; border-radius: 8px; + max-width: 75%; } .mx_ImageView { diff --git a/skins/base/css/templates/Login.css b/skins/base/css/templates/Login.css index 49feffbec..7362ac507 100644 --- a/skins/base/css/templates/Login.css +++ b/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 { diff --git a/skins/base/views/templates/Login.js b/skins/base/views/templates/Login.js index bef13b1d7..57b5fbcd6 100644 --- a/skins/base/views/templates/Login.js +++ b/skins/base/views/templates/Login.js @@ -110,7 +110,7 @@ module.exports = React.createClass({ var self = this; this.updateHsTimeout = setTimeout(function() { self.onHSChosen(); - }, 500); + }, 1000); }, componentForStep: function(step) {