check for duplicate email and username

client/modules/User/components/SignupForm.js

@@ -1,8 +1,7 @@
 import React, { PropTypes } from 'react';
 
 function SignupForm(props) {
-  const { fields: { username, email, password, confirmPassword }, handleSubmit } = props;
-  console.log(props.fields);
+  const { fields: { username, email, password, confirmPassword }, handleSubmit, submitting, invalid, pristine } = props;
   return (
     <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
       <p className="signup-form__field">
@@ -45,7 +44,7 @@ function SignupForm(props) {
         />
         {confirmPassword.touched && confirmPassword.error && <span className="form-error">{confirmPassword.error}</span>}
       </p>
-      <input type="submit" value="Sign Up" aria-label="sign up" />
+      <input type="submit" disabled={submitting || invalid || pristine} value="Sign Up" aria-label="sign up" />
     </form>
   );
 }
@@ -58,7 +57,10 @@ SignupForm.propTypes = {
     confirmPassword: PropTypes.string.isRequired
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  signUpUser: PropTypes.func.isRequired
+  signUpUser: PropTypes.func.isRequired,
+  submitting: PropTypes.bool,
+  invalid: PropTypes.bool,
+  pristine: PropTypes.bool
 };
 
 export default SignupForm;

client/modules/User/pages/SignupView.js

@@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux';
 import * as UserActions from '../actions';
 import { reduxForm } from 'redux-form';
 import SignupForm from '../components/SignupForm';
+import axios from 'axios';
 
 function SignupView(props) {
   return (
@@ -23,6 +24,24 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UserActions, dispatch);
 }
 
+function asyncValidate(formProps, dispatch, props) {
+  const fieldToValidate = props.form._active;
+  if (fieldToValidate) {
+    const queryParams = {};
+    queryParams[fieldToValidate] = formProps[fieldToValidate];
+    queryParams.check_type = fieldToValidate;
+    return axios.get('/api/signup/duplicate_check', { params: queryParams })
+      .then(response => {
+        if (response.data.exists) {
+          const error = {};
+          error[fieldToValidate] = response.data.message;
+          throw error;
+        }
+      });
+  }
+  return Promise.resolve(true).then(() => {});
+}
+
 function validate(formProps) {
   const errors = {};
 
@@ -54,8 +73,15 @@ function validate(formProps) {
   return errors;
 }
 
+function onSubmitFail(errors) {
+  console.log(errors);
+}
+
 export default reduxForm({
   form: 'signup',
   fields: ['username', 'email', 'password', 'confirmPassword'],
-  validate
+  onSubmitFail,
+  validate,
+  asyncValidate,
+  asyncBlurFields: ['username', 'email']
 }, mapStateToProps, mapDispatchToProps)(SignupView);

server/controllers/user.controller.js

@@ -31,6 +31,26 @@ export function createUser(req, res, next) {
     });
 }
 
+export function duplicateUserCheck(req, res) {
+  const checkType = req.query.check_type;
+  const value = req.query[checkType];
+  const query = {};
+  query[checkType] = value;
+  User.findOne(query, (err, user) => {
+    if (user) {
+      return res.json({
+        exists: true,
+        message: `This ${checkType} is already taken.`,
+        type: checkType
+      });
+    }
+    return res.json({
+      exists: false,
+      type: checkType
+    });
+  });
+}
+
 export function updatePreferences(req, res) {
   User.findById(req.user.id, (err, user) => {
     if (err) {

server/routes/user.routes.js

@@ -4,6 +4,8 @@ const router = new Router();
 
 router.route('/signup').post(UserController.createUser);
 
+router.route('/signup/duplicate_check').get(UserController.duplicateUserCheck);
+
 router.route('/preferences').put(UserController.updatePreferences);
 
 export default router;