Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matthew Hodgson 2015-08-31 19:30:24 +01:00
parent 25a4f1fde0
commit ab068cc372
4 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
skins/base/css/templates/Login.css
View File

@ -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 {

41
skins/base/views/templates/Login.js
View File

@ -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 (
<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 +127,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 +144,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() {

8
skins/base/views/templates/Register.js
View File

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

14
src/controllers/templates/Login.js
View File

@ -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();