fix: [VAN-975] add confirm email field to registration form (#586)

src/register/RegistrationPage.jsx

@@ -333,11 +333,15 @@ class RegistrationPage extends React.Component {
   }
 
   validateDynamicFields = (e) => {
+    const { intl } = this.props;
     const { errors } = this.state;
     const { name, value } = e.target;
     if (!value) {
       errors[name] = this.props.fieldDescriptions[name].error_message;
     }
+    if (name === 'confirm_email' && value.length > 0 && this.state.email && value !== this.state.email) {
+      errors.confirm_email = intl.formatMessage(messages['email.do.not.match']);
+    }
     this.setState({ errors });
   }
 
@@ -411,6 +415,9 @@ class RegistrationPage extends React.Component {
             } else {
               errors.email = '';
             }
+            if (this.state.values && this.state.values.confirm_email && value !== this.state.values.confirm_email) {
+              errors.confirm_email = intl.formatMessage(messages['email.do.not.match']);
+            }
           }
           this.setState({
             emailWarningSuggestion,

src/register/messages.jsx

@@ -101,6 +101,11 @@ const messages = defineMessages({
     defaultMessage: 'Enter your email',
     description: 'Error message for empty email field',
   },
+  'email.do.not.match': {
+    id: 'email.do.not.match',
+    defaultMessage: 'The email addresses do not match.',
+    description: 'Email not match to confirm email',
+  },
   'empty.username.field.error': {
     id: 'empty.username.field.error',
     defaultMessage: 'Username must be between 2 and 30 characters',

src/register/tests/RegistrationPage.test.jsx

@@ -859,6 +859,48 @@ describe('RegistrationPage', () => {
       expect(registrationPage.find('#profession-error').last().text()).toEqual('Enter profession');
     });
 
+    it('should show error message for confirm email field returned by backend', () => {
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            confirm_email: {
+              name: 'confirm_email', type: 'text', label: 'Confirm Email', error_message: 'Enter your confirm email',
+            },
+          },
+        },
+      });
+
+      const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
+      registrationPage.find('button.btn-brand').simulate('click');
+
+      expect(registrationPage.find('#confirm_email-error').last().text()).toEqual('Enter your confirm email');
+    });
+
+    it('should show error if email and confirm email fields not match', () => {
+      mergeConfig({
+        ENABLE_DYNAMIC_REGISTRATION_FIELDS: true,
+      });
+
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          fieldDescriptions: {
+            confirm_email: {
+              name: 'confirm_email', type: 'text', label: 'Confirm Email',
+            },
+          },
+        },
+      });
+      const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
+      registrationPage.find('RegistrationPage').setState({ email: 'test1@gmail.com' });
+      registrationPage.find('input#confirm_email').simulate('blur', { target: { value: 'test@gmail.com', name: 'confirm_email' } });
+
+      expect(registrationPage.find('#confirm_email-error').last().text()).toEqual('The email addresses do not match.');
+    });
+
     it('should redirect to dashboard if features flags are configured but no optional fields are configured', () => {
       mergeConfig({
         ENABLE_PROGRESSIVE_PROFILING: true,