Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Show loading state for login button

Browse source
This commit is contained in:
navaneeth 2021-05-01 20:32:52 +05:30
parent c80ba3a011
commit 3199c0e015
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/LoginPage/LoginPage.jsx
View file

@ -10,6 +10,10 @@ class LoginPage extends React.Component {
if (authenticationService.currentUserValue) {
this.props.history.push('/');
}
this.state = {
isLoading: false
};
}
handleChange = (event) => {
@ -19,20 +23,26 @@ class LoginPage extends React.Component {
authUser = (e) => {
e.preventDefault();
this.setState({ isLoading: true });
const { email, password } = this.state;
authenticationService.login(email, password).then(
() => {
const { from } = this.props.location.state || { from: { pathname: '/' } };
this.props.history.push(from);
this.setState({ isLoading: false });
},
() => {
toast.error('Invalid username or password', { hideProgressBar: true, position: 'top-center' });
this.setState({ isLoading: false });
}
);
};
render() {
const { isLoading } = this.state;
return (
<div className="page page-center">
<div className="container-tight py-2">
@ -58,7 +68,7 @@ class LoginPage extends React.Component {
<label className="form-label">
Password
<span className="form-label-description">
<a href="/forgot-password">Forgot password</a>
<a tabIndex="-1" href="/forgot-password">Forgot password</a>
</span>
</label>
<div className="input-group input-group-flat">
@ -73,14 +83,8 @@ class LoginPage extends React.Component {
<span className="input-group-text"></span>
</div>
</div>
<div className="mb-2">
<label className="form-check">
<input type="checkbox" className="form-check-input" />
<span className="form-check-label">Remember this device</span>
</label>
</div>
<div className="form-footer">
<button className="btn btn-primary w-100" onClick={this.authUser}>
<button className={`btn btn-primary w-100 ${isLoading ? 'btn-loading' : ''}`} onClick={this.authUser}>
Sign in
</button>
</div>