Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-04-22 03:13:15 +02:00
Code Issues Releases Activity

Add loaders to log in/sign up buttons

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

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

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