Debounce utility to only allow 1 click per second (#190)

frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx

@@ -6,6 +6,7 @@ import {
   clearForgotPasswordErrors,
   forgotPasswordAction,
 } from '../../redux/nodes/components/ForgotPasswordPage/actions';
+import debounce from '../../utilities/debounce';
 import ForgotPasswordForm from '../../components/forms/ForgotPasswordForm';
 import Icon from '../../components/icons/Icon';
 import StackedWhiteBoxes from '../../components/StackedWhiteBoxes';
@@ -21,11 +22,11 @@ export class ForgotPasswordPage extends Component {
     dispatch: noop,
   };
 
-  onSubmit = (formData) => {
+  onSubmit = debounce((formData) => {
     const { dispatch } = this.props;
 
     return dispatch(forgotPasswordAction(formData));
-  }
+  })
 
   clearErrors = () => {
     const { dispatch } = this.props;

frontend/pages/LoginPage/LoginPage.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import componentStyles from './styles';
+import debounce from '../../utilities/debounce';
 import local from '../../utilities/local';
 import LoginForm from '../../components/forms/LoginForm';
 import { loginUser } from '../../redux/nodes/auth/actions';
@@ -24,13 +25,13 @@ export class LoginPage extends Component {
     return false;
   }
 
-  onSubmit = (formData) => {
+  onSubmit = debounce((formData) => {
     const { dispatch } = this.props;
     return dispatch(loginUser(formData))
       .then(() => {
         return dispatch(push('/login_successful'));
       });
-  }
+  })
 
   render () {
     const { formWrapperStyles, whiteTabStyles } = componentStyles;

frontend/pages/ResetPasswordPage/ResetPasswordPage.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { noop } from 'lodash';
 import { push } from 'react-router-redux';
+import debounce from '../../utilities/debounce';
 import { resetPassword } from '../../redux/nodes/components/ResetPasswordPage/actions';
 import ResetPasswordForm from '../../components/forms/ResetPasswordForm';
 import StackedWhiteBoxes from '../../components/StackedWhiteBoxes';
@@ -24,7 +25,7 @@ export class ResetPasswordPage extends Component {
     return false;
   }
 
-  onSubmit = (formData) => {
+  onSubmit = debounce((formData) => {
     const { dispatch, token } = this.props;
     const resetPasswordData = {
       ...formData,
@@ -35,7 +36,7 @@ export class ResetPasswordPage extends Component {
       .then(() => {
         return dispatch(push('/login'));
       });
-  }
+  })
 
   render () {
     const { onSubmit } = this;

frontend/utilities/debounce/debounce.tests.js

@@ -0,0 +1,16 @@
+import expect from 'expect';
+import debounce from './index';
+
+describe('debounce - utility', () => {
+  it('prevents double-clicks from executing a function multiple times', () => {
+    let count = 0;
+    const increaseCount = () => {
+      count += 1;
+    };
+    const debouncedFunc = debounce(increaseCount);
+
+    debouncedFunc();
+    debouncedFunc();
+    expect(count).toEqual(1);
+  });
+});

frontend/utilities/debounce/index.js

@@ -0,0 +1,10 @@
+import { debounce } from 'lodash';
+
+const TIMEOUT = 1000; // only allow 1 click per second
+
+export default (func) => {
+  return debounce(func, TIMEOUT, {
+    leading: true,
+    trailing: false,
+  });
+};