From b92439c2b3e0db65fe60dbba7a0dec9a59eba8d9 Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Tue, 29 Dec 2020 16:08:35 +0500
Subject: [PATCH] fix email validation error message. (#57)

VAN-212
---
 src/forgot-password/ForgotPasswordPage.jsx    | 25 +++++++++++--------
 src/forgot-password/messages.js               |  5 ++++
 .../tests/ForgotPasswordPage.test.jsx         | 11 ++++++++
 .../ForgotPasswordPage.test.jsx.snap          | 18 -------------
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index 165fd6e2..c88ed4be 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -18,15 +18,20 @@ import RequestInProgressAlert from './RequestInProgressAlert';
 import { LOGIN_PAGE } from '../data/constants';
 import LoginHelpLinks from '../logistration/LoginHelpLinks';
 
-const validateEmail = (e, values, setFieldValue) => {
-  const inputEmail = e.target.value;
-  const isEmailValid = inputEmail.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-  setFieldValue('email', inputEmail);
-  setFieldValue('isEmailValid', isEmailValid !== null);
-};
-
 const ForgotPasswordPage = (props) => {
   const { intl, status } = props;
+  let invalidEmailMessage;
+
+  const validateEmail = (e, setFieldValue) => {
+    invalidEmailMessage = intl.formatMessage(messages['logisration.forgot.password.page.invalid.email.message']);
+    const inputEmail = e.target.value;
+    const isEmailValid = inputEmail.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+    setFieldValue('email', inputEmail);
+    setFieldValue('isEmailValid', isEmailValid !== null);
+    if (inputEmail.length < 3) {
+      invalidEmailMessage = `${intl.formatMessage(messages['logisration.forgot.password.page.email.invalid.length.message'])} ${invalidEmailMessage}`;
+    }
+  };
 
   return (
     <Formik
@@ -63,9 +68,7 @@ const ForgotPasswordPage = (props) => {
                       className="mb-0"
                       for="email"
                       invalid={!values.isEmailValid}
-                      invalidMessage={intl.formatMessage(
-                        messages['logisration.forgot.password.page.invalid.email.message'],
-                      )}
+                      invalidMessage={invalidEmailMessage}
                     >
                       <label htmlFor="forgot-password-input" className="h6 mr-1">
                         {intl.formatMessage(messages['logisration.forgot.password.page.email.field.label'])}
@@ -76,7 +79,7 @@ const ForgotPasswordPage = (props) => {
                         type="email"
                         placeholder="username@domain.com"
                         value={values.email}
-                        onChange={e => validateEmail(e, values, setFieldValue)}
+                        onChange={e => validateEmail(e, setFieldValue)}
                         style={{ width: '400px' }}
                       />
                     </ValidationFormGroup>
diff --git a/src/forgot-password/messages.js b/src/forgot-password/messages.js
index 41464ae6..5826d5bb 100644
--- a/src/forgot-password/messages.js
+++ b/src/forgot-password/messages.js
@@ -31,6 +31,11 @@ const messages = defineMessages({
     defaultMessage: 'Recover my password',
     description: 'Submit button text for the forgot password page.',
   },
+  'logisration.forgot.password.page.email.invalid.length.message': {
+    id: 'logisration.forgot.password.page.email.invalid.length.message',
+    defaultMessage: 'Email must have at least 3 characters.',
+    description: 'Invalid email address length message for the forgot password page.',
+  },
 });
 
 export default messages;
diff --git a/src/forgot-password/tests/ForgotPasswordPage.test.jsx b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
index 1cb46428..0a814ea3 100644
--- a/src/forgot-password/tests/ForgotPasswordPage.test.jsx
+++ b/src/forgot-password/tests/ForgotPasswordPage.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
 import renderer from 'react-test-renderer';
@@ -78,4 +79,14 @@ describe('ForgotPasswordPage', () => {
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('button.field-link').text()).toEqual('Need other help signing in?');
   });
+
+  it('should display email validation error message', async () => {
+    const validationMessage = "Email must have at least 3 characters. The email address you've provided isn't formatted correctly.";
+    const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    await act(async () => {
+      await wrapper.find('input#forgot-password-input').simulate('change', { target: { value: '', name: 'a' } });
+    });
+    wrapper.update();
+    expect(wrapper.find('#email-invalid-feedback').text()).toEqual(validationMessage);
+  });
 });
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index 2ac7a2a8..1807fbf8 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -55,12 +55,6 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
               type="email"
               value=""
             />
-            <strong
-              className="invalid-feedback"
-              id="email-invalid-feedback"
-            >
-              The email address you've provided isn't formatted correctly.
-            </strong>
           </div>
         </div>
         <p
@@ -211,12 +205,6 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
               type="email"
               value=""
             />
-            <strong
-              className="invalid-feedback"
-              id="email-invalid-feedback"
-            >
-              The email address you've provided isn't formatted correctly.
-            </strong>
           </div>
         </div>
         <p
@@ -339,12 +327,6 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
               type="email"
               value=""
             />
-            <strong
-              className="invalid-feedback"
-              id="email-invalid-feedback"
-            >
-              The email address you've provided isn't formatted correctly.
-            </strong>
           </div>
         </div>
         <p