Merge branch 'auth-form-improvements' into 'develop'

LoginForm: properly convey "isLoading" state

See merge request soapbox-pub/soapbox-fe!254

app/soapbox/features/auth_login/components/login_page.js

@@ -20,17 +20,18 @@ class LoginPage extends ImmutablePureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  state = {
+    isLoading: false,
+    mfa_auth_needed: false,
+    mfa_token: '',
+  }
+
   getFormData = (form) => {
     return Object.fromEntries(
       Array.from(form).map(i => [i.name, i.value])
     );
   }
 
-  state = {
-    mfa_auth_needed: false,
-    mfa_token: '',
-  }
-
   handleSubmit = (event) => {
     const { dispatch } = this.props;
     const { username, password } = this.getFormData(event.target);
@@ -47,8 +48,8 @@ class LoginPage extends ImmutablePureComponent {
   }
 
   render() {
-    const { me, isLoading } = this.props;
-    const { mfa_auth_needed, mfa_token } = this.state;
+    const { me } = this.props;
+    const { isLoading, mfa_auth_needed, mfa_token } = this.state;
     if (me) return <Redirect to='/' />;
 
     if (mfa_auth_needed) return <OtpAuthForm mfa_token={mfa_token} />;

app/soapbox/features/public_layout/components/header.js

@@ -36,34 +36,40 @@ class Header extends ImmutablePureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-    getFormData = (form) => {
-      return Object.fromEntries(
-        Array.from(form).map(i => [i.name, i.value])
-      );
-    }
+  state = {
+    isLoading: false,
+    mfa_auth_needed: false,
+    mfa_token: '',
+  }
 
-    static contextTypes = {
-      router: PropTypes.object,
-    };
+  getFormData = (form) => {
+    return Object.fromEntries(
+      Array.from(form).map(i => [i.name, i.value])
+    );
+  }
 
-    handleSubmit = (event) => {
-      const { dispatch } = this.props;
-      const { username, password } = this.getFormData(event.target);
-      dispatch(logIn(username, password)).then(() => {
-        return dispatch(fetchMe());
-      }).catch(error => {
-        if (error.response.data.error === 'mfa_required') {
-          this.setState({ mfa_auth_needed: true, mfa_token: error.response.data.mfa_token });
-        }
-        this.setState({ isLoading: false });
-      });
-      this.setState({ isLoading: true });
-      event.preventDefault();
-    }
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
-    onClickClose = (event) => {
-      this.setState({ mfa_auth_needed: false, mfa_token: '' });
-    }
+  handleSubmit = (event) => {
+    const { dispatch } = this.props;
+    const { username, password } = this.getFormData(event.target);
+    dispatch(logIn(username, password)).then(() => {
+      return dispatch(fetchMe());
+    }).catch(error => {
+      if (error.response.data.error === 'mfa_required') {
+        this.setState({ mfa_auth_needed: true, mfa_token: error.response.data.mfa_token });
+      }
+      this.setState({ isLoading: false });
+    });
+    this.setState({ isLoading: true });
+    event.preventDefault();
+  }
+
+  onClickClose = (event) => {
+    this.setState({ mfa_auth_needed: false, mfa_token: '' });
+  }
 
   static propTypes = {
     me: SoapboxPropTypes.me,
@@ -71,14 +77,9 @@ class Header extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   }
 
-  state = {
-    mfa_auth_needed: false,
-    mfa_token: '',
-  }
-
   render() {
-    const { me, instance, isLoading, intl } = this.props;
-    const { mfa_auth_needed, mfa_token } = this.state;
+    const { me, instance, intl } = this.props;
+    const { isLoading, mfa_auth_needed, mfa_token } = this.state;
 
     return (
       <nav className='header'>