From 4c1ebdf83d731e3c9bc2c92761e8b8d07f7636bf Mon Sep 17 00:00:00 2001
From: Apoorv Taneja <purutaneja.com@gmail.com>
Date: Tue, 23 Jul 2019 23:46:05 +0530
Subject: [PATCH] Email Validation added (#1120)

* changes

* changes

* changes

* changes

* changes
---
 .../User/components/ResetPasswordForm.jsx        |  1 +
 client/modules/User/pages/ResetPasswordView.jsx  | 12 +++---------
 client/utils/reduxFormUtils.js                   | 16 +++++++++++++++-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
index ed724b5f..6ed00455 100644
--- a/client/modules/User/components/ResetPasswordForm.jsx
+++ b/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"
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 523783b7..1f49c2b3 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/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);
diff --git a/client/utils/reduxFormUtils.js b/client/utils/reduxFormUtils.js
index cbf1ef2e..06776e0d 100644
--- a/client/utils/reduxFormUtils.js
+++ b/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;
+}