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,