Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Add loaders to log in/sign up buttons

This commit is contained in:
Robbie Antenesse 2018-06-24 23:18:34 -06:00
parent 095b8051be
commit 07ca94fc3c
2 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/management/AccountManager/LoginForm.jsx
View File

@ -10,7 +10,9 @@ export class LoginForm extends Component {
PropTypes.checkPropTypes({
logIn: PropTypes.func.isRequired,
logInLoading: PropTypes.bool,
signUp: PropTypes.func.isRequired,
signUpLoading: PropTypes.bool,
}, props, 'prop', 'LoginForm');
this.state = {
@ -233,7 +235,7 @@ export class LoginForm extends Component {
</div>
</div>
<div className='field'>
<button className='button is-success'
<button className={`button is-success ${this.props.logInLoading ? 'is-loading' : ''}`}
onClick={this.logIn.bind(this)}>
Log In
</button>
@ -354,7 +356,7 @@ export class LoginForm extends Component {
<div className='field'>
<div className='control'>
<button className='button is-success'
<button className={`button is-success ${this.props.signUpLoading ? 'is-loading' : ''}`}
onClick={this.createAccount.bind(this)}>
Create Account
</button>

62
src/components/management/AccountManager/index.jsx
View File

@ -23,6 +23,8 @@ export class AccountManager extends Component {
this.state = {
isLoggedIn: false,
logInLoading: false,
signUpLoading: false,
userData: {
email: userData && userData.hasOwnProperty('email') ? userData.email : DEFAULT_USER_DATA.email,
publicName: userData && userData.hasOwnProperty('publicName') ? userData.publicName : DEFAULT_USER_DATA.publicName,
@ -35,16 +37,18 @@ export class AccountManager extends Component {
}
logIn (email, password) {
return request('login', { email, password }, response => this.handleResponse(response, userData => {
const nameGreeting = userData.hasOwnProperty('publicName') && userData.publicName !== '' ? ', ' + userData.publicName : '';
swal({
title: `Welcome back${nameGreeting}!`,
text: 'You have been logged in successfully.',
type: 'success',
confirmButtonClass: 'button',
buttonsStyling: false,
});
}));
this.setState({ logInLoading: true }, () => {
request('login', { email, password }, response => this.handleResponse(response, userData => {
const nameGreeting = userData.hasOwnProperty('publicName') && userData.publicName !== '' ? ', ' + userData.publicName : '';
swal({
title: `Welcome back${nameGreeting}!`,
text: 'You have been logged in successfully.',
type: 'success',
confirmButtonClass: 'button',
buttonsStyling: false,
});
}));
})
}
logOut () {
@ -66,20 +70,22 @@ export class AccountManager extends Component {
}
signUp (email, password, userData) {
request('create-account', {
email,
password,
userData,
}, response => this.handleResponse(response, () => {
const nameGreeting = userData.hasOwnProperty('publicName') && userData.publicName !== '' ? ', ' + userData.publicName : '';
swal({
title: `Welcome${nameGreeting}!`,
text: 'Your account was created successfully! We hope you enjoy what a Lexiconga account can provide for you!',
type: 'success',
confirmButtonClass: 'button',
buttonsStyling: false,
});
}));
this.setState({ signUpLoading: true }, () => {
request('create-account', {
email,
password,
userData,
}, response => this.handleResponse(response, () => {
const nameGreeting = userData.hasOwnProperty('publicName') && userData.publicName !== '' ? ', ' + userData.publicName : '';
swal({
title: `Welcome${nameGreeting}!`,
text: 'Your account was created successfully! We hope you enjoy what a Lexiconga account can provide for you!',
type: 'success',
confirmButtonClass: 'button',
buttonsStyling: false,
});
}));
});
}
updateUserData (token, userData, callback = () => {}) {
@ -87,6 +93,8 @@ export class AccountManager extends Component {
store.set('LexicongaUserData', userData);
this.setState({
isLoggedIn: true,
logInLoading: false,
signUpLoading: false,
userData,
}, () => {
callback();
@ -166,7 +174,11 @@ export class AccountManager extends Component {
}
return (
<Modal buttonText='Log In/Sign Up' title='Log In/Sign Up'>
<LoginForm logIn={this.logIn.bind(this)} signUp={this.signUp.bind(this)} />
<LoginForm
logIn={ this.logIn.bind(this) }
signUp={ this.signUp.bind(this) }
logInLoading={ this.state.logInLoading }
signUpLoading={ this.state.signUpLoading } />
</Modal>
);
}