fix email validation error message. (#57)

VAN-212

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>

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;

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);
+  });
 });

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