From 07ca94fc3c3db03a89acbf8c6d590718a60a9952 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Sun, 24 Jun 2018 23:18:34 -0600
Subject: [PATCH] Add loaders to log in/sign up buttons

---
 .../management/AccountManager/LoginForm.jsx   |  6 +-
 .../management/AccountManager/index.jsx       | 62 +++++++++++--------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/management/AccountManager/LoginForm.jsx b/src/components/management/AccountManager/LoginForm.jsx
index 87a8f63..7c9ff75 100644
--- a/src/components/management/AccountManager/LoginForm.jsx
+++ b/src/components/management/AccountManager/LoginForm.jsx
@@ -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>
diff --git a/src/components/management/AccountManager/index.jsx b/src/components/management/AccountManager/index.jsx
index 79e15cd..53c0521 100644
--- a/src/components/management/AccountManager/index.jsx
+++ b/src/components/management/AccountManager/index.jsx
@@ -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>
     );
   }