Email Validation added (#1120)

* changes

* changes

* changes

* changes

* changes

Author: plxity

client/modules/User/components/ResetPasswordForm.jsx

@@ -17,6 +17,7 @@ function ResetPasswordForm(props) {
           id="email"
           {...domOnlyProps(email)}
         />
+        {email.touched && email.error && <span className="form-error">{email.error}</span>}
       </p>
       <input
         type="submit"

client/modules/User/pages/ResetPasswordView.jsx

@@ -1,3 +1,4 @@
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, browserHistory } from 'react-router';
@@ -8,6 +9,7 @@ import { reduxForm } from 'redux-form';
 import { Helmet } from 'react-helmet';
 import * as UserActions from '../actions';
 import ResetPasswordForm from '../components/ResetPasswordForm';
+import { validateResetPassword } from '../../../utils/reduxFormUtils';
 
 const exitUrl = require('../../../images/exit.svg');
 const logoUrl = require('../../../images/p5js-logo.svg');
@@ -80,16 +82,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UserActions, dispatch);
 }
 
-function validate(formProps) {
-  const errors = {};
-  if (!formProps.email) {
-    errors.email = 'Please enter an email';
-  }
-  return errors;
-}
-
 export default reduxForm({
   form: 'reset-password',
   fields: ['email'],
-  validate
+  validate: validateResetPassword
 }, mapStateToProps, mapDispatchToProps)(ResetPasswordView);

client/utils/reduxFormUtils.js

@@ -15,6 +15,9 @@ export const domOnlyProps = ({
   ...domProps }) => domProps;
 /* eslint-enable */
 
+// eslint-disable-next-line max-len
+const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+
 function validateNameEmail(formProps, errors) {
   if (!formProps.username) {
     errors.username = 'Please enter a username.';
@@ -28,7 +31,7 @@ function validateNameEmail(formProps, errors) {
     errors.email = 'Please enter an email.';
   } else if (
     // eslint-disable-next-line max-len
-    !formProps.email.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i)) {
+    !formProps.email.match(EMAIL_REGEX)) {
     errors.email = 'Please enter a valid email address.';
   }
 }
@@ -79,3 +82,14 @@ export function validateSignup(formProps) {
 
   return errors;
 }
+export function validateResetPassword(formProps) {
+  const errors = {};
+  if (!formProps.email) {
+    errors.email = 'Please enter an email.';
+  } else if (
+    // eslint-disable-next-line max-len
+    !formProps.email.match(EMAIL_REGEX)) {
+    errors.email = 'Please enter a valid email address.';
+  }
+  return errors;
+}