Merge pull request #117 from edx/aehsan/van-316/password-page-email-validation-removed

password page email validation removed

src/forgot-password/ForgotPasswordPage.jsx

@@ -8,8 +8,10 @@ import {
   Input,
   StatefulButton,
   ValidationFormGroup,
+  Alert,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 import { Formik } from 'formik';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -25,22 +27,23 @@ import { INTERNAL_SERVER_ERROR } from '../login/data/constants';
 
 const ForgotPasswordPage = (props) => {
   const { intl, status } = props;
-  let invalidEmailMessage;
 
-  const validateEmail = (e, setFieldValue) => {
-    invalidEmailMessage = intl.formatMessage(messages['forgot.password.page.invalid.email.message']);
-    const regex = new RegExp(VALID_EMAIL_REGEX, 'i');
-
-    const inputEmail = e.target.value;
-    const isEmailValid = regex.test(inputEmail);
-    setFieldValue('email', inputEmail);
-    setFieldValue('isEmailValid', isEmailValid);
-    if (inputEmail.length < 3) {
-      invalidEmailMessage = `${intl.formatMessage(messages['forgot.password.page.email.invalid.length.message'])} ${invalidEmailMessage}`;
-    }
+  const platformName = getConfig().SITE_NAME;
+  const handleOnChange = (e, setFieldValue) => {
+    setFieldValue('email', e.target.value);
   };
 
-  const getStatusBannerifAny = () => {
+  const getStatusBannerifAny = (errors) => {
+    if (errors.email) {
+      return (
+        <Alert variant="danger">
+          <Alert.Heading>
+            {intl.formatMessage(messages['forgot.password.invalid.email.heading'])}
+          </Alert.Heading>
+          {intl.formatMessage(messages['forgot.password.invalid.email.message'])}
+        </Alert>
+      );
+    }
     if (status === INTERNAL_SERVER_ERROR) {
       return <APIFailureMessage header={intl.formatMessage(messages['forgot.password.request.server.error'])} />;
     }
@@ -50,27 +53,33 @@ const ForgotPasswordPage = (props) => {
 
   return (
     <Formik
-      onSubmit={(values) => {
-        if (values.isEmailValid) {
-          props.forgotPassword(values.email);
+      onSubmit={(values) => props.forgotPassword(values.email)}
+      validate={(values) => {
+        const regex = new RegExp(VALID_EMAIL_REGEX, 'i');
+        if (!regex.test(values.email)) {
+          return { email: intl.formatMessage(messages['forgot.password.page.invalid.email.message']) };
         }
+        return {};
       }}
       initialValues={{
         email: '',
         isEmailValid: true,
       }}
+      validateOnChange={false}
+      validateOnBlur={false}
     >
       {({
         handleSubmit,
         values,
         setFieldValue,
+        errors,
       }) => (
         <>
           {status === 'complete' ? <Redirect to={LOGIN_PAGE} /> : null}
           <div className="d-flex justify-content-center m-4">
             <div className="d-flex flex-column">
               <Form className="mw-500">
-                { getStatusBannerifAny()}
+                { getStatusBannerifAny(errors)}
                 <h3 className="mt-3">
                   {intl.formatMessage(messages['forgot.password.page.heading'])}
                 </h3>
@@ -80,8 +89,9 @@ const ForgotPasswordPage = (props) => {
                 <ValidationFormGroup
                   className="mb-0 w-100"
                   for="email"
-                  invalid={!values.isEmailValid}
-                  invalidMessage={invalidEmailMessage}
+                  invalid={errors.email !== undefined}
+                  invalidMessage={errors.email}
+                  helpText={intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })}
                 >
                   <Form.Label htmlFor="forgot-password-input" className="h6 mr-1">
                     {intl.formatMessage(messages['forgot.password.page.email.field.label'])}
@@ -92,11 +102,8 @@ const ForgotPasswordPage = (props) => {
                     type="email"
                     placeholder="username@domain.com"
                     value={values.email}
-                    onChange={e => validateEmail(e, setFieldValue)}
+                    onChange={e => handleOnChange(e, setFieldValue)}
                   />
-                  <p className="mb-2">
-                    {intl.formatMessage(messages['forgot.password.page.email.field.help.text'])}
-                  </p>
                 </ValidationFormGroup>
                 <LoginHelpLinks page="forgot-password" />
                 <StatefulButton

src/forgot-password/messages.js

@@ -41,6 +41,20 @@ const messages = defineMessages({
     defaultMessage: 'Failed to Send Forgot Password Email',
     description: 'Failed to Send Forgot Password Email help text heading.',
   },
+  'forgot.password.invalid.email.heading': {
+    id: 'forgot.password.invalid.email',
+    defaultMessage: 'An error occurred.',
+    description: 'heading for invalid email',
+  },
+  'forgot.password.invalid.email.message': {
+    id: 'forgot.password.invalid.email.message',
+    defaultMessage: "The email address you've provided isn't formatted correctly.",
+    description: 'message for invalid email',
+  },
+  'forgot.password.email.help.text': {
+    id: 'forgot.password.email.help.text',
+    defaultMessage: 'The email address you used to register with {platformName}',
+    description: 'text help for the email',
+  },
 });
-
 export default messages;

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -91,15 +91,25 @@ describe('ForgotPasswordPage', () => {
   });
 
   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 validationMessage = "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: 'email' } });
+      await wrapper.find('button.btn-primary').simulate('click', { target: { value: 'random', name: 'email' } });
     });
     wrapper.update();
     expect(wrapper.find('#email-invalid-feedback').text()).toEqual(validationMessage);
   });
 
+  it('should display alert banner incase of invalid email', async () => {
+    const validationMessage = "An error occurred.The email address you've provided isn't formatted correctly.";
+    const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    await act(async () => {
+      await wrapper.find('button.btn-primary').simulate('click', { target: { value: 'random', name: 'email' } });
+    });
+    wrapper.update();
+    expect(wrapper.find('.alert-danger').text()).toEqual(validationMessage);
+  });
+
   it('should handle 500 error code', async () => {
     const params = {
       payload: {

src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap

@@ -30,7 +30,7 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
           Email
         </label>
         <input
-          aria-describedby=""
+          aria-describedby="email-help-text"
           className="form-control"
           id="forgot-password-input"
           name="email"
@@ -39,11 +39,12 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
           type="email"
           value=""
         />
-        <p
-          className="mb-2"
+        <small
+          className="form-text text-muted"
+          id="email-help-text"
         >
-          The email address you used to register with edX.
-        </p>
+          The email address you used to register with edX
+        </small>
       </div>
       <button
         className="mt-1 field-link small"
@@ -159,7 +160,7 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
           Email
         </label>
         <input
-          aria-describedby=""
+          aria-describedby="email-help-text"
           className="form-control"
           id="forgot-password-input"
           name="email"
@@ -168,11 +169,12 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
           type="email"
           value=""
         />
-        <p
-          className="mb-2"
+        <small
+          className="form-text text-muted"
+          id="email-help-text"
         >
-          The email address you used to register with edX.
-        </p>
+          The email address you used to register with edX
+        </small>
       </div>
       <button
         className="mt-1 field-link small"
@@ -263,7 +265,7 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
           Email
         </label>
         <input
-          aria-describedby=""
+          aria-describedby="email-help-text"
           className="form-control"
           id="forgot-password-input"
           name="email"
@@ -272,11 +274,12 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
           type="email"
           value=""
         />
-        <p
-          className="mb-2"
+        <small
+          className="form-text text-muted"
+          id="email-help-text"
         >
-          The email address you used to register with edX.
-        </p>
+          The email address you used to register with edX
+        </small>
       </div>
       <button
         className="mt-1 field-link small"