Disable login button while login is in progress.

decaporg · Oct 26, 2017 · 7225a12 · 7225a12
1 parent b501db7
commit 7225a12
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 7 deletions.
diff --git a/src/actions/auth.js b/src/actions/auth.js
@@ -43,7 +43,11 @@ export function authenticateUser() {
     dispatch(authenticating());
     return backend.currentUser()
       .then((user) => {
-        if (user) dispatch(authenticate(user));
+        if (user) {
+          dispatch(authenticate(user));
+        } else {
+          dispatch(logoutUser());
+        }
       })
       .catch((error) => {
         dispatch(authError(error));

diff --git a/src/backends/git-gateway/AuthenticationPage.js b/src/backends/git-gateway/AuthenticationPage.js
@@ -54,6 +54,7 @@ export default class AuthenticationPage extends React.Component {
 
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
+    inProgress: PropTypes.bool.isRequired,
   };
 
   state = { email: "", password: "", errors: {} };
@@ -90,7 +91,7 @@ export default class AuthenticationPage extends React.Component {
 
   render() {
     const { errors } = this.state;
-    const { error } = this.props;
+    const { error, inProgress } = this.props;
 
     if (window.netlifyIdentity) {
       return <section className="nc-gitGatewayAuthenticationPage-root">
@@ -131,8 +132,9 @@ export default class AuthenticationPage extends React.Component {
             <Button
               className="nc-gitGatewayAuthenticationPage-button"
               raised
+              disabled={inProgress}
             >
-              <Icon type="login" /> Login
+              <Icon type="login" /> {inProgress ? "Logging in..." : "Login"}
             </Button>
           </form>
         </Card>

diff --git a/src/backends/github/AuthenticationPage.js b/src/backends/github/AuthenticationPage.js
@@ -9,6 +9,7 @@ import { Toast } from '../../components/UI/index';
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
+    inProgress: PropTypes.bool.isRequired,
   };
 
   state = {};
@@ -32,6 +33,7 @@ export default class AuthenticationPage extends React.Component {
 
   render() {
     const { loginError } = this.state;
+    const { inProgress } = this.props;
 
     return (
       <section className="nc-githubAuthenticationPage-root">
@@ -40,9 +42,10 @@ export default class AuthenticationPage extends React.Component {
         <Button
           className="nc-githubAuthenticationPage-button"
           raised
+          disabled={inProgress}
           onClick={this.handleLogin}
         >
-          <Icon type="github" /> Login with GitHub
+          <Icon type="github" /> {inProgress ? "Logging in..." : "Login with GitHub"}
         </Button>
       </section>
     );

diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
@@ -8,6 +8,7 @@ import logo from "../git-gateway/netlify_logo.svg";
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
     onLogin: PropTypes.func.isRequired,
+    inProgress: PropTypes.bool.isRequired,
   };
 
   state = { email: '' };
@@ -22,6 +23,8 @@ export default class AuthenticationPage extends React.Component {
   };
 
   render() {
+    const { inProgress } = this.props;
+
     return (<section className="nc-gitGatewayAuthenticationPage-root">
       <Card className="nc-gitGatewayAuthenticationPage-card">
         <img src={logo} width={100} role="presentation" />
@@ -36,9 +39,10 @@ export default class AuthenticationPage extends React.Component {
         <Button
           className="nc-gitGatewayAuthenticationPage-button"
           raised
+          disabled={inProgress}
           onClick={this.handleLogin}
         >
-          <Icon type="login" /> Login
+          <Icon type="login" /> {inProgress ? "Logging in..." : "Login"}
         </Button>
       </Card>
     </section>);

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -88,7 +88,7 @@ class App extends React.Component {
           React.createElement(backend.authComponent(), {
             onLogin: this.handleLogin.bind(this),
             error: auth && auth.get('error'),
-            isFetching: auth && auth.get('isFetching'),
+            inProgress: (auth && auth.get('isFetching')) || false,
             siteId: this.props.config.getIn(["backend", "site_domain"]),
             base_url: this.props.config.getIn(["backend", "base_url"], null)
           })

diff --git a/src/reducers/auth.js b/src/reducers/auth.js
@@ -10,7 +10,7 @@ const auth = (state = null, action) => {
     case AUTH_FAILURE:
       return Immutable.Map({ error: action.payload.toString() });
     case LOGOUT:
-      return state.remove('user');
+      return state.remove('user').remove('isFetching');
     default:
       return state;
   }