diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 338e2a10..53f37146 100644 --- a/src/register/RegistrationPage.jsx +++ b/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, diff --git a/src/register/messages.jsx b/src/register/messages.jsx index 73bba916..63b3c1eb 100644 --- a/src/register/messages.jsx +++ b/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', diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index 98ba5941..0424ece4 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/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()); + 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()); + 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,