Disable auth form during requests

app/gabsocial/features/auth_login/index.js

@@ -4,6 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { createAuthApp, logIn } from 'gabsocial/actions/auth';
 import { Redirect } from 'react-router-dom';
 import { fetchMe } from 'gabsocial/actions/me';
+import { LoadingBar } from 'react-redux-loading-bar';
 
 const mapStateToProps = (state, props) => ({
   me: state.get('me'),
@@ -11,6 +12,11 @@ const mapStateToProps = (state, props) => ({
 
 class LoginForm extends ImmutablePureComponent {
 
+  constructor(props) {
+    super(props);
+    this.state = {isLoading: false};
+  }
+
   componentWillMount() {
     this.props.dispatch(createAuthApp());
   }
@@ -25,21 +31,27 @@ class LoginForm extends ImmutablePureComponent {
     const { dispatch } = this.props;
     const { username, password } = this.getFormData(event.target);
     dispatch(logIn(username, password)).then(() => {
-      dispatch(fetchMe());
+      return dispatch(fetchMe());
+    }).catch(() => {
+      // TODO: Handle bad request
+      this.setState({isLoading: false});
     });
+    this.setState({isLoading: true});
     event.preventDefault();
   }
 
   render() {
     const { me } = this.props;
-
     if (me) return <Redirect to="/home" />;
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <input name='username' placeholder='me@example.com' />
+        <LoadingBar loading={this.state.isLoading ? 1 : 0} className='loading-bar' />
-        <input name='password' type='password' placeholder='Password' />
+        <fieldset disabled={this.state.isLoading}>
-        <input type='submit' value='Login' />
+          <input name='username' placeholder='me@example.com' />
+          <input name='password' type='password' placeholder='Password' />
+          <input type='submit' value='Login' />
+        </fieldset>
       </form>
     )
   }